Academia Briceño Design System

Overview

Academia Briceño presents a bold, youthful visual identity built for the competitive pre-university preparation market in Arequipa, Peru. The design's dominant gesture is its deep teal canvas ({colors.canvas}) — an immersive, confident background that immediately signals energy and trust while differentiating the brand from the sterile whites of institutional education competitors. Against this saturated field, the brand deploys warm amber ({colors.primary}) as its sole voltage color, reserved almost exclusively for call-to-action surfaces where conversion intent lives.

The typographic voice is carried entirely by Sora, a geometric sans-serif with exceptional personality at heavy weights. The system's signature move is its dramatic weight contrast: body copy sits at a comfortable {typography.body-md} (400 weight, 18px), while section headings leap to {typography.title-lg} (800 weight, 36px) or even {typography.display-lg} (600 weight, 65px) in the hero. This creates a visual rhythm that feels both approachable and authoritative — like a tutor who's serious about results but warm in delivery. Letter-spacing tightens noticeably on large display text (-0.9px on h2s), giving headlines a compact, editorial density that commands attention without shouting.

Shape language leans into generous rounding across all interactive surfaces. Buttons wear {rounded.lg} (20px), cards stretch to {rounded.xxl} (28px), and the WhatsApp floating action button goes fully circular at 50%. This soft geometry counterbalances the intensity of the teal canvas, making the brand feel modern, friendly, and app-native rather than academic-institutional. The overall mood is energetic optimism — a design that says "we've got your back" through confident color, approachable photography of actual students, and playful decorative iconography (graduation caps, trophies, stars) drifting subtly in the hero atmosphere.

The site operates primarily as a dark-mode experience, with the teal canvas serving as the default background. Light surfaces ({colors.surface-soft}, {colors.surface-light}) appear only in content cards and alternating section bands below the fold, creating a layered architecture where information lives in bright containers atop the darker brand foundation.

Key Characteristics:

• Deep teal canvas ({colors.canvas} — #0d9488) as the dominant atmospheric background, establishing immediate brand recognition
• Amber CTAs ({colors.primary} — #ffc107) with black text ({colors.on-primary}) providing the sole conversion voltage against the teal
• Sora typeface at extreme weight range (400–800), with {typography.display-lg} (65px) anchoring the hero and {typography.title-lg} (800 weight) driving section headers
• Generous radius scale peaking at {rounded.xxl} (28px) for cards and {rounded.circle} for the WhatsApp FAB
• Photographic student storytelling positioned right-of-hero-text, creating human connection within the first viewport
• Transparent top nav ({component.top-nav}) that gains solid background ({component.top-nav-scrolled}) on scroll
• Floating WhatsApp button ({component.whatsapp-fab}, 72px circle, {colors.accent-green}) persisting in bottom-right viewport corner
• Decorative icon pattern layer at {colors.decoration-white-15} opacity, adding texture without competing with content
• Achievement badges ({component.achievement-badge}) with black backgrounds and white bold text highlighting student success stories

Colors

Brand & Accent

• Primary ({colors.primary} — #ffc107): Warm amber used exclusively on primary call-to-action buttons ("Quiero ingresar") and high-intent conversion surfaces. Never used for borders, backgrounds, or secondary actions.
• Primary Hover ({colors.primary-hover} — #ffb300): Darkened amber state for mouse-hover interactions on {component.button-primary}, providing tactile feedback.
• Primary Active ({colors.primary-active} — #ffa000): Pressed/deepest amber state for active/tapped interactions on primary buttons.
• Accent Green ({colors.accent-green} — #25d366): WhatsApp brand green reserved solely for the floating action button ({component.whatsapp-fab}). Not reused elsewhere in the palette.

Surface

• Canvas ({colors.canvas} — #0d9488): Deep teal serving as the hero background, navbar base, and primary atmospheric color. This is the brand's signature surface — the first thing visitors see and the color most associated with Briceño.
• Surface Soft ({colors.surface-soft} — #ffffff): Pure white used for content cards, input fields, and light-section backgrounds where readability demands maximum contrast.
• Surface Light ({colors.surface-light} — #f9fafb): Near-white (cool gray tint) used for alternating section bands below the fold, providing subtle separation from pure white card surfaces.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White with elevated shadow treatment, used for dropdowns, modals, or cards requiring visual lift from their container.
• Overlay Dark ({colors.overlay-dark} — rgba(60, 60, 60, 0.75)): Semi-transparent dark gray used for modal backdrops, dimming underlying content.
• Overlay Soft ({colors.overlay-soft} — rgba(255, 255, 255, 0.15)): Low-opacity white used for glass-like surface treatments on dark backgrounds.
• Decoration White 15% ({colors.decoration-white-15} — rgba(255, 255, 255, 0.15)): Very faint white for decorative icon patterns in the hero background atmosphere.
• Decoration Subtle ({colors.decoration-white-low} — oklab 0.1 opacity): Near-invisible white for the finest decorative elements, barely perceptible but adding depth.

Text

• Ink ({colors.ink} — #000000): Pure black for text on light surfaces (amber buttons, white cards). Maximum contrast for readability.
• Body ({colors.body} — #ffffff): Pure white for primary text on the teal canvas — headlines, nav links, hero copy.
• Body Muted ({colors.body-muted} — rgba(255, 255, 255, 0.7)): 70%-opacity white for secondary text on dark backgrounds — nav links in non-active states, supporting copy.
• Body Subtle ({colors.body-subtle} — oklab 0.15 opacity): Very faint white for tertiary/decorative text or placeholder states on dark surfaces.
• Text Dark ({colors.text-dark} — #1a1a1a): Near-black for body text on white/light card surfaces, slightly softer than pure ink.
• Text Secondary ({colors.text-secondary} — #52525b): Medium gray for secondary text on light surfaces — captions, metadata, helper text.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.12)): Faint white divider lines on dark backgrounds, used sparingly for subtle separation.
• Border Gray ({colors.border-gray} — #e5e7eb): Light gray border for form fields, card outlines, and dividers on light surfaces.

Semantic

• Success ({colors.success} — #25d366): Green for confirmation states, checkmarks, and positive indicators. Aligned with WhatsApp green by coincidence of brand choice.
• Error ({colors.error} — #dc2626): Red for validation errors, alerts, and destructive actions.
• Warning ({colors.warning} — #f59e0b): Amber-orange for caution states, distinct from the brand primary despite similar hue family.

Typography

Font Family

The entire system runs on Sora, a geometric sans-serif designed by Fontshare (originally by Andrea Tartarelli). Sora's strength in this context is its remarkable versatility across weights — it maintains character and warmth at 400 weight for body copy while delivering impactful, modern presence at 700–800 for headlines. The fallback stack is Sora, system-ui, ensuring graceful degradation to native system fonts on platforms where web-font loading fails.

The CSS data reveals two slight variations in the declared stack: Sora, sans-serif (495 instances, used for heavier-weight headline contexts) and Sora, system-ui (41 instances, used for body and display text). Both resolve identically in practice; the difference appears to be organizational within the codebase rather than intentional variation. For implementation, standardize on Sora, system-ui globally.

Notably, Google Fonts also loads DM Sans and Poppins in the stylesheet (along with Fontshare's Satoshi, Clash Display, General Sans, Cabinet Grotesk, and Gilroy Bold via CDN fonts), but these appear unused in the rendered DOM for this page. They may serve other sub-pages (dashboard, admin) or represent legacy includes.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 700 | 1.1 | -0.02em | Future mega-headlines (not yet deployed; reserve for campaign pages) | | {typography.display-lg} | 65px | 600 | 1.2 | normal | Hero headline — "Prepararte solo es difícil." | | {typography.title-lg} | 36px | 800 | 1.25 | -0.9px | Section headings on light backgrounds | | {typography.title-md} | 27px | 800 | 1.15 | normal | Section subheadings on dark backgrounds | | {typography.body-md} | 18px | 400 | 1.8 | 0.45px | Hero supporting copy, paragraph text on dark | | {typography.body-sm} | 16px | 400 | 1.5 | normal | Card body text, descriptions on light | | {typography.caption} | 14px | 400 | 1.4 | normal | Metadata, labels, fine print | | {typography.button} | 16px | 600 | 1.25 | normal | Button labels, CTAs | | {typography.nav-link} | 16px | 400 | 1.5 | normal | Navigation menu items | | {typography.badge-text} | 14px | 700 | 1.2 | 0.02em | Achievement badge text ("ER PUESTO 1") |

Principles

The Briceño type system trusts weight over scale as its primary hierarchy mechanism. While there is substantial size differentiation (65px down to 14px — nearly 5× range), the more dramatic shift is from 400 (body) to 800 (section titles), doubling the stroke width. This is an intentional choice for a youth-facing educational brand: heavy weights feel confident and contemporary without resorting to aggressive scale increases that would break the layout on smaller viewports.

Letter-spacing plays a subtle but important role. Body text on dark backgrounds carries {typography.body-md} with 0.45px positive tracking — slightly open for enhanced legibility against the busy teal canvas. Meanwhile, {typography.title-lg} uses -0.9px negative tracking, tightening the 800-weight characters to prevent the heavy face from feeling bloated or disconnected. Display text at 65px stays at normal tracking, letting the sheer size carry presence without artificial compression.

The system avoids italic usage entirely in the visible UI (no <em> or font-style: italic in extracted data). Uppercase is similarly restrained — the achievement badge ("ER PUESTO 1 ENFERMERÍA") appears to use small-caps or all-caps treatment, but this may be a graphic element rather than styled HTML text. For any new components, default to sentence-case unless the specific context demands otherwise (badges, tags, labels).

Note on Font Substitutes

Sora is available freely via Fontshare (api.fontshare.com) and also through Google Fonts alternative sources. If CDN reliability is a concern, the closest Google Fonts equivalent is DM Sans, which shares geometric construction and a similar weight range (400–700). For implementation, define CSS custom properties:

:root {
  --font-sans: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

If substituting entirely, DM Sans at matching weights provides 95% visual fidelity. Avoid Poppins (also loaded in the source but rounder, less geometric) as it dilutes the brand's angular-modern voice.

Layout

Spacing System

• Base unit: 2px ({spacing.xxs}), with practical working units clustering around 8px multiples.

• Tokens:

  • {spacing.xxs} (2px): Micro-adjustments, hairline offsets
  • {spacing.xs} (4px): Tight internal gaps (icon + text)
  • {spacing.sm} (8px): Small element spacing, inline gaps
  • {spacing.md} (10px): Button padding vertical, input padding
  • {spacing.lg} (13px): Medium gaps, list item spacing
  • {spacing.xl} (16px): Standard padding unit, card gutters
  • {spacing.2xl} (19px): Component external margins
  • {spacing.3xl} (20px): Card internal padding
  • {spacing.4xl} (24px): Section-internal gaps, large card padding
  • {spacing.5xl} (28px): Hero element spacing
  • {spacing.section} (80px): Vertical section padding (hero, major bands)
  • {spacing.section-sm} (70px): Reduced section padding (footer, compressed bands)

• Section padding (vertical): {spacing.section} (80px) — used in hero band ({component.hero-band}) and major content sections.

• Card internal padding: {spacing.3xl} (20px) per side on {component.card}; {spacing.4xl} (24px) on elevated variants.

• Gutters: Content container maxes at 1440px with implicit auto-margins; inner content breathes with {spacing.xl} (16px) horizontal padding on mobile scaling to {spacing.section} (80px) at desktop breakpoints.

Grid & Container

The page operates on a single-column, max-width-constrained layout with 1440px as the absolute ceiling (observed in both section and nav container widths). Within this, the hero uses a asymmetric two-column split: approximately 55% width for the left text column (headline + potential subcopy) and 40% for the right image column (student photograph + achievement badge), with ~5% gutter. Below the fold, the system likely shifts to a 3–4 column grid for feature cards or program offerings (inferred from university chip buttons detected in CSS).

The layout philosophy prioritizes editorial breathing room over marketplace density. Unlike course-directory sites that pack information, Briceño gives the hero headline ({typography.display-lg} at 65px) and student photograph ample space to make emotional impact before presenting structured content. This is a conversion-optimized landing page, not a catalog browser.

Whitespace Philosophy

The system practices generous, confident whitespace — particularly vertically. Eighty-pixel section paddings ensure each content band feels like its own "page" within the scroll. Horizontally, text columns are kept narrow enough for comfortable reading (~600–700px max for body copy) while allowing imagery to claim the remaining viewport. On dark (teal) sections, whitespace manifests as empty canvas; on light sections, it's explicit padding and margin. The effect is unhurried and premium — a deliberate counter-positioning to the anxious, cram-school aesthetic some competitors adopt.

Header Architecture

+--------------------------------------------------------------------------------------------------+
| [LOGO]              Inicio   Ciclos   Sedes   Ingresantes   Noticias        [Quiero ingresar]     |
| (Briceño 44px)                                                              (button-primary)      |
+--------------------------------------------------------------------------------------------------+
|<- 1440px max-width, centered, transparent bg ->|

The top navigation ({component.top-nav}) is fixed-positioned at the top of the viewport with initial background-color: transparent, allowing the hero image and decorative pattern to show behind it. On scroll, transitions to {component.top-nav-scrolled} with solid {colors.canvas} background and reduced height (70px from 80px). Logo sits flush-left; navigation links center-left with equal horizontal spacing; primary CTA flush-right. All nav links use {component.nav-link} styling (white text, no underline, 16px).

Hero Section

+--------------------------------------------------------------------------------------------------+
|                                                                                                   |
|  Prepararte solo es difícil.|                              +------------------------+             |
|                                                     |                        |             |
|                                                       |   [Student Photo]     |             |
|  (display-lg, 65px, white)                             |   (right-col, ~45%)    |             |
|                                                        |                        |             |
|                                                        |  +------------------+  |             |
|                                                        |  | ER PUESTO 1      |  |             |
|                                                        |  | ENFERMERÍA       |  |             |
|                                                        |  | (badge)           |  |             |
|                                                        |  +------------------+  |             |
|                                                                                                   |
|  [decorative icons float in bg: trophy, cap, star, etc. @ 15% white opacity]                       |
+--------------------------------------------------------------------------------------------------+
|                                          [WhatsApp FAB 72px circle, bottom-right]                  |
+--------------------------------------------------------------------------------------------------+

The hero is the signature moment of the entire design. Left column holds the display headline in {typography.display-lg} (65px, semi-bold, white) with a blinking cursor animation (heroBlink keyframe detected). Right column features a cutout photograph of a smiling student in a branded t-shirt, pointing upward — a gesture of aspiration. Overlaid on the photo's lower-right quadrant is the {component.achievement-badge}: a black rounded rectangle with bold white text declaring "#1 ENFERMERÍA / AYMEE JAMILA CARRERA / CEPRUNSA 2026 II FASE". This badge uses heavy drop shadow ({extensions.shadows.lg}) to pop from both the photograph and the background.

Background decoration consists of scattered line-art icons (graduation caps, trophies, pencils, stars, atom symbols) rendered in {colors.decoration-white-15} (15% white), creating a celebratory, academic atmosphere without interfering with readability. These icons animate gently with individual float keyframes (heroFloat1 through heroFloat6).

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, solid background | Hero canvas, nav bar base, section bands | | 1 (Hairline) | Subtle {colors.hairline} borders | Input fields, dividers on dark | | 2 (Soft) | {extensions.shadows.sm} (6% black, 4px blur) | Cards resting on light surfaces | | 3 (Raised) | {extensions.shadows.card} (composite shadow) | Elevated cards, dropdown panels | | 4 (Modal) | {extensions.shadows.md} (15% black + inset highlight) | Modals, overlays, popups | | 5 (Floating) | {extensions.shadows.lg} (25% black, strong blur) | Achievement badge, FAB button | | 6 (Glow) | {extensions.shadows.button-glow} (amber halo) | Primary button focus/emphasis ring |

The depth system is shadow-forward rather than border-forward. Unlike flat-design systems that use 1px strokes to define edges, Briceño relies on shadow layers to create hierarchy. This is especially effective on the dark canvas where borders would need to be white (high-contrast, visually noisy); shadows provide softer separation. The button glow effect ({extensions.shadows.button-glow}) is particularly notable — a 7.3px amber spread at 4% opacity creates a halo around primary CTAs that draws the eye without being overtly "button-like."

On light surfaces (cards, inputs), shadows remain neutral-toned (black-based at varying opacities). There's no cool-warm shadow temperature shift observed — the system keeps it simple and performant.

Decorative Depth

Beyond functional elevation, the hero employs atmospheric depth through three techniques:

1. Opacity-layered icons: Background decorations at 10–15% white opacity sit "behind" content in z-index terms.
2. Photographic layering: The student photo appears as a foreground element overlapping the decorative pattern, with the achievement badge overlaid on the photo (z-index stacking).
3. Floating ambient motion: Six independent keyframe animations (heroFloat1–heroFloat6) give background icons gentle Y-axis oscillation, suggesting depth parallax without requiring scroll-driven JS.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Small internal elements, tag chips | | {rounded.DEFAULT} | 12px | Default component radius (inputs, small buttons) | | {rounded.md} | 16px | Medium cards, panel corners | | {rounded.lg} | 20px | Primary buttons, prominent cards | | {rounded.xl} | 24px | Feature cards, large containers | | {rounded.xxl} | 28px | Hero cards, signature surfaces | | {rounded.circle} | 50% | Avatar, FAB, icon containers | | {rounded.pill} | 9999px | Pills, full-round rectangles (reserved) |

The shape vocabulary is consistently rounded — there are no sharp-cornered (0px radius) elements except text-only links ({component.nav-link}) and structural dividers. Even the achievement badge, which might traditionally be sharp-edged for a "stamp" feel, wears {rounded.xxl} (28px). This uniform softness signals approachability and modernity, distancing the brand from the rigid geometry of traditional Peruvian academic institutions.

Photography Geometry

Student and staff photographs appear as freeform cutouts (no visible border-radius container in the hero — the subject is masked/removed from background). When photos appear inside cards (inferred from typical patterns), they likely use {rounded.xxl} (28px) to match the card's own corners, creating a continuous curved edge. Aspect ratios appear to be portrait-oriented (3:4 or 2:3) for student shots, emphasizing the person over the environment.

The achievement badge overlaid on the hero photo uses a horizontal rectangle roughly 2:1 aspect ratio, heavily rounded, functioning as a graphic label rather than a photo container.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary call-to-action button, appearing in the navigation bar as "Quiero ingresar" and presumably at conversion points throughout the page. Background {colors.primary} (amber), text {colors.ink} (black) for AAA contrast compliance, type {typography.button} (16px/600), rounded {rounded.lg} (20px), padding 12px 24px. Carries a subtle amber glow shadow ({extensions.shadows.button-glow}) when in focus or featured. State variants: {component.button-primary-hover} (darkened amber), {component.button-primary-active} (deepest amber for pressed state).

{component.button-ghost} — Transparent-background button used for mobile menu toggle and utility actions. Text {colors.body} (white), no visible border or background, type {typography.button}. Muted variant {component.button-ghost-muted} drops text opacity to {colors.body-muted} (70% white). These are functionally link-styled buttons.

{component.whatsapp-fab} — Fixed-position floating action button in the bottom-right viewport corner (72px × 72px). Background {colors.accent-green} (WhatsApp green), circular ({rounded.circle}), contains the WhatsApp icon in white. Uses {extensions.shadows.lg} for elevation above page content. Persists on scroll (z-index 50). This is the highest-conversion surface on the page — direct messaging to admissions.

Cards & Containers

{component.card} — Standard content card used for program details, testimonials, or feature descriptions on light backgrounds. Background {colors.surface-soft} (white), text {colors.text-dark} (near-black), type {typography.body-sm} (16px/400), rounded {rounded.xxl} (28px — very generous), padding {spacing.3xl} (20px). Shadow treatment: {extensions.shadows.sm} for soft lift. Internal spacing allows for title + body + optional CTA within.

{component.card-elevated} — Elevated variant for highlighted or hovered card states. Same dimensions as {component.card} but with {rounded.xl} (24px) and {extensions.shadows.card} composite shadow for stronger depth perception. Used for featured programs or pricing tiers.

{component.achievement-badge} — Signature graphic component overlaid on the hero photograph. Black background ({colors.ink}), bold white text ({colors.body}, {typography.badge-text} at 14px/700), heavily rounded ({rounded.xxl} = 28px), padding 16px 20px. Heavy shadow ({extensions.shadows.lg}) ensures visibility over complex photo backgrounds. Text content is multi-line: rank indicator ("ER PUESTO 1"), career name ("ENFERMERÍA"), student name ("AYMEE JAMILA CARRERA"), exam reference ("CEPRUNSA 2026 II FASE"). This is a trust-building social-proof element.

{component.section-band-light} — Full-width content band with light background for alternating section rhythm. Background {colors.surface-light} (#f9fafb), text defaults to {colors.text-dark}, heading type {typography.title-lg}. Vertical padding {spacing.section} (80px). Contains card grids or text-content blocks.

{component.footer} — Page footer with inverted dark treatment. Background {colors.ink} (near-black), text {colors.body-muted} (70% white for secondary info), type {typography.caption} (14px). Padding {spacing.section-sm} (70px). Likely contains links, legal text, and contact info.

Inputs & Forms

{component.input-field} — Text/email/name input field. Background {colors.surface-soft} (white), text {colors.ink} (black), type {typography.body-sm} (16px/400), rounded {rounded.md} (16px), padding 12px 16px, fixed height 48px. Border likely {colors.border-gray} (light gray) at 1px (inferred from standard Tailwind input patterns). Focus state ({component.input-focus}) likely adds ring or border-color change to {colors.primary} or a blue tone — implement per stack conventions.

Navigation

{component.top-nav} — Fixed header bar spanning full viewport width. Initial state: background-color: transparent allowing hero content to show through. Height 80px. Contains logo left, nav links center-left, CTA right. Transitions to scrolled state after user scrolls past hero threshold.

{component.top-nav-scrolled} — Scrolled variant of the top nav. Gains solid {colors.canvas} (teal) background, reduces height to 70px, may add subtle bottom shadow or backdrop-blur. Ensures nav remains readable over non-hero content.

{component.nav-logo} — Briceño wordmark + emblem in the nav left slot. Height 44px, transparent background, white rendition of the logo. Links to homepage.

{component.nav-link} — Individual navigation menu item ("Inicio", "Ciclos", "Sedes", "Ingresantes", "Noticias"). Transparent background, white text ({colors.body}), type {typography.nav-link} (16px/400), padding 8px 16px. Active state ({component.nav-link-active}) likely shows underline or opacity change. Default/muted state ({component.nav-link-muted}) uses {colors.body-muted} (70% white) for non-current-page links.

Sub-Systems

{component.university-chip} — University selector button (detected as "UNSA", "UCSP", "UCSM" buttons in CSS data). Transparent background, {colors.ink} text, {typography.caption} sizing, arranged in flex-column with gap. These likely appear in a "Target University" selector section, allowing prospective students to filter content by their chosen institution. Each chip likely includes a university logo icon above the text label.

Signature Components

{component.hero-band} — The full-viewport hero section. Background {colors.canvas} (teal), text color {colors.body} (white), primary typography {typography.display-lg} (65px). Padding {spacing.section} (80px) vertical. Contains the headline, decorative icon layer, student photo column, achievement badge, and serves as the anchor for the transparent nav. This is the brand-defining surface — every pixel here communicates the Briceño identity.

{component.hero-headline} — The H1-level text block within the hero. "Prepararte solo es difícil." rendered in {typography.display-lg} (65px/600), white text on teal. Includes a blinking cursor animation (heroBlink keyframe) suggesting the message is being "typed" — an engaging micro-interaction that implies ongoing conversation with the student.

{component.decorative-icon-bg} — Individual background decorative icon (trophy, graduation cap, star, pencil, etc.). Transparent background, text/color set to {colors.decoration-white-15} (15% white), size 48px. Each icon floats independently with its own keyframe animation (heroFloat1 through heroFloat6). Not interactive — purely atmospheric.

Do's and Don'ts

Do

• Do use {colors.canvas} (#0d9488) as the primary page background for hero and major branding sections — it's the visual anchor of the entire identity.
• Do reserve {colors.primary} (#ffc107) exclusively for primary CTAs and conversion-focused buttons; never deploy it as a background wash or decorative accent.
• Do apply {typography.title-lg} (800 weight, -0.9px tracking) to all major section headings on light backgrounds — the heavy weight is the brand's typographic signature.
• Do round card corners generously at {rounded.xxl} (28px) or {rounded.xl} (24px) — sharp corners break the friendly, modern voice.
• Do keep the top nav transparent ({component.top-nav}) over the hero, transitioning to solid background ({component.top-nav-scrolled}) only after scroll.
• Do include the WhatsApp FAB ({component.whatsapp-fab}, 72px circle, green) in the bottom-right corner on every page — it's a critical conversion channel.
• Do use Sora at 400 weight for body copy and 600–800 for headings; never go below 400 or above 800 in the weight spectrum.
• Do layer photographs over the decorative icon pattern (icons at 15% white opacity behind, photo in front) when recreating hero-style layouts.
• Do add the amber glow shadow ({extensions.shadows.button-glow}) to primary buttons in focused or hero-adjacent contexts for subtle emphasis.
• Do maintain 80px ({spacing.section}) vertical padding between major sections — the generous whitespace is intentional and premium-feeling.

Don't

• Don't substitute {colors.primary} (amber) for {colors.accent-green} (green) or vice versa — each has exactly one job (CTAs vs. WhatsApp).
• Don't use pure white (#ffffff) text at less than 100% opacity on the teal canvas for primary copy — only muted elements ({component.nav-link-muted}) should drop to 70% opacity.
• Don't apply letter-spacing tighter than -0.9px to any text, and never use positive tracking on headlines — that's reserved for body text on dark backgrounds (0.45px).
• Don't create square or sharp-cornered (0px radius) buttons — even ghost buttons should have at least {rounded.sm} (8px) if they're clickable.
• Don't place dark text ({colors.ink} or {colors.text-dark}) directly on {colors.canvas} (teal) — the contrast ratio fails; always use {colors.body} (white) on teal.
• Don't expand the radius scale beyond the defined tokens — if you need something rounder than {rounded.xxl}, jump to {rounded.circle} (50%); don't invent intermediate values.
• Don't load Poppins, DM Sans, Satoshi, or Gilroy Bold for this page's content — they're present in the font stylesheet but unused in the Briceño landing page design; Sora handles everything.
• Don't remove the decorative icon layer from the hero background — the floating trophies, caps, and stars at {colors.decoration-white-15} are essential to the celebratory atmosphere.
• Don't use {colors.overlay-dark} (gray 75%) for anything except full-modal backdrops — it's too heavy for toasts, dropdowns, or tooltips.
• Don't let the achievement badge ({component.achievement-badge}) blend into its background — always pair it with {extensions.shadows.lg} shadow for guaranteed visibility over photographs.

Motion & Animation

Transition Tokens

/* Core transition preset (Tailwind default) */
--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Fast interaction (focus rings, color changes) */
--transition-fast: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                   border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                   transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Slow content transition (page sections, background shifts) */
--transition-slow: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);

/* Nav scroll transition */
--transition-nav: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Keyframe Animations

• ctaPulse — Gentle pulsing/breathing scale animation on the primary CTA button to draw attention without being aggressive.
• fadeSlideUp — Content entrance animation: opacity 0→1 combined with translateY(20px→0). Used for scroll-triggered reveals of sections below the fold.
• heroBlink — Text cursor blink animation on the hero headline ("Prepararte solo es difícil.|"), simulating a typing effect that makes the message feel personal and in-progress.
• heroFloat1 through heroFloat6 — Six independent gentle Y-axis oscillation animations (translateY ±8–12px) applied to the background decorative icons, each with slightly offset timing/duration to create organic, non-uniform floating movement.
• spin — Standard rotation animation (likely for loading states or the WhatsApp icon hover).
• pulse — Opacity/scale pulse (likely for notification dots or status indicators).
• crossfadeIn / crossfadeOut — Crossfade transitions for testimonial carousels or photo galleries.
• slideIn / slideOut / zoomIn / zoomOut / riseOut — Modal and overlay entrance/exit animations with various directional and scale transforms.

Interaction Patterns

• Nav scroll behavior: Top nav transitions from transparent ({component.top-nav}) to solid-teal scrolled state ({component.top-nav-scrolled}) over 300ms with cubic-bezier(0.4, 0, 0.2, 1) easing. May include subtle backdrop-filter blur.
• Hero cursor blink: The headline ends with a blinking pipe character using heroBlink keyframe (1s cycle, 50% opacity duty cycle). This runs continuously — not scroll-triggered.
• Background icon float: Six decorative icons oscillate vertically at different phases (staggered delays), running continuously in the hero background. Duration appears to be 3–6s per cycle with ease-in-out timing.
• Button hover lift: Primary buttons likely gain subtle translateY(-1px) or scale(1.02) on hover (inferred from transition-transform in CSS data), paired with {component.button-primary-hover} color shift.
• Scroll-triggered reveals: Content sections below the fade in/up using fadeSlideUp when they enter the viewport (IntersectionObserver-driven).
• WhatsApp FAB hover: The 72px green circle likely scales up slightly (1.05–1.1x) on hover with shadow intensification.
• Focus rings: Interactive elements gain a focus ring (likely 2–3px offset in {colors.primary} or a blue accessible color) on keyboard navigation.

Imagery Style

• Photographic style: Real student portraits with genuine expressions — the hero shows Aymee Jamila Carrera smiling warmly, wearing glasses and a branded Briceño T-shirt, making an aspiratory upward-pointing gesture. Lighting is bright, natural, and flattering (studio or well-lit indoor).
• Subject matter: Actual enrolled students (not stock models), shown in casual-positive poses that convey confidence and belonging. The branded merchandise placement (logo on shirt) reinforces community identity.
• Cutout treatment: Photos appear as removed-from-background cutouts (PNG with transparency or AI-masked) rather than framed rectangles, allowing them to float organically over the decorative icon layer.
• Color grading: Natural skin tones preserved; photos are not heavily filtered. The white shirt pops against the teal canvas, creating natural contrast without manipulation.
• Achievement graphics: The "ER PUESTO 1" badge is a graphic overlay (not a photograph) — bold black rectangle with white condensed text, functioning like a magazine cover callout or sports trading card highlight.
• Imagery role: Photography is supportive-dominant — the student image occupies ~40% of hero width and is visually equal in weight to the headline. It's not decorative wallpaper; it's a co-anchor of the value proposition.
• Brand integration: Student wears Briceño logo apparel, reinforcing that real people choose and represent the academy. This is social proof through visual means.
• Future imagery expectations: Additional sections likely include classroom photos, campus exteriors (if physical location exists), instructor headshots, and celebration/result imagery (students with acceptance letters or exam scores).

Icon System

• Library: Lucide React (detected from framework analysis: iconLibs: ["lucide"] in extracted data). Lucide provides the consistent stroke-width, geometric-clean iconography visible in the nav bar.
• Specific icons observed:
  • Home/House (home) — "Inicio" nav item
  • Calendar (calendar) — "Ciclos" nav item
  • Map Pin (map-pin) — "Sedes" nav item
  • User/UserPlus (user or user-plus) — "Ingresantes" nav item
  • Newspaper/newspaper (newspaper) or FileText (file-text) — "Noticias" nav item
  • WhatsApp/MessageCircle (message-circle) — WhatsApp FAB icon (custom-colored green variant)
  • Trophy (trophy) — Decorative background element
  • Graduation Cap (graduation-cap) — Decorative background element
  • Star (star) — Decorative background element
  • Pencil/Edit (edit or pencil) — Decorative background element
  • Atom/Science (atom) — Decorative background element (science/academic theme)
  • Award (award) — Likely used in achievement contexts
  • Chevron/Menu (menu) — Mobile hamburger menu toggle
• Treatment: Stroke-based (not fill), consistent 1.5–2px stroke width, currentColor for color inheritance. Nav icons appear at 18–20px height aligned with 16px text (slightly taller for visual balance). Background decorative icons are larger (40–48px) at low opacity.
• Alignment: Icons sit baseline-aligned or center-aligned with adjacent text depending on context (nav icons are inline with text; decorative icons are standalone).

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (static-first)
                  Evidence: Tailwind utility classes, responsive patterns,
                  fixed positioning, transition syntax match Next.js ecosystem norms
- Styling:        Tailwind CSS v3.4+ (utility-first)
                  Evidence: Arbitrary value syntax [72px], color opacity modifiers
                  (text-white/70), spacing scale matches Tailwind defaults, 
                  transition-timing-function presets
- Fonts:          Sora via Fontshare CDN (api.fontshare.com/v2/css?f[]=sora@400;500;600;700;800)
                  Fallback: 'Sora', system-ui, -apple-system, sans-serif
- Animation:      Tailwind-built-in transitions + custom CSS keyframes
                  (heroBlink, heroFloat*, fadeSlideUp defined in global CSS)
                  Consider Framer Motion for scroll-triggered reveals if building React
- Icons:          Lucide React (@lucide/react)
                  Evidence: Detected in framework.iconLibs; stroke style matches
- Component lib:  Custom components (no shadcn/radix detected)
                  Build from Tailwind @apply directives and CSS custom properties

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column everything; hamburger menu replaces nav links; hero stacks (photo below headline); WhatsApp FAB remains 56px (from 72px); padding compresses to 16px | | Tablet | 640–1024px | Two-column hero begins (text + photo side-by-side compressed); nav links may show abbreviated or in hamburger; card grids become 2-column | | Desktop | 1025–1440px | Full layout as designed: asymmetric hero split, full nav visible, 1440px max container, 80px section padding | | Wide | > 1440px | Container centers with auto margins; hero proportions may allow wider text column; no fluid scaling beyond 1440px cap |

Touch Targets

• {component.button-primary}: 48px+ height (padding 12px vertical + text = ~44–48px total) — meets WCAG AAA minimum. Width varies by text length ("Quiero ingreser" ≈ 140px wide).
• {component.whatsapp-fab}: 72px × 72px (desktop), scales to ~56px on mobile — comfortably exceeds 44×44 minimum. Circular touch area.
• {component.nav-link}: Touch area extends via 8px vertical + 16px horizontal padding; tap targets likely 40px+ height. Adequate but not generous — consider increasing to 44px min for mobile.
• {component.input-field}: 48px fixed height — excellent touch target for form inputs.
• University chips ({component.university-chip}): Flex-column layout with gap suggests these are tappable filters; ensure 44px minimum hit area.

Collapsing Strategy

• Navigation: Horizontal link bar collapses to hamburger menu ({component.button-ghost}) below 1024px (or possibly 768px). Menu opens as fullscreen overlay or slide-down panel. Logo remains visible and unchanged.
• Hero layout: At mobile (< 640px), the asymmetric two-column splits to single column: headline stacks top (full width, {typography.display-lg} scales down to ~40–48px), student photo stacks below (full width, portrait orientation maintained), achievement badge repositions to bottom-right of photo or below it. Decorative icon layer persists but icons reduce in size/quantity for performance.
• Card grids: 3–4 column desktop grids collapse to 2-column on tablet, single-column on mobile. Cards maintain {rounded.xxl} and internal padding but reduce horizontal margin.
• WhatsApp FAB: Remains fixed bottom-right at all breakpoints but shrinks from 72px (desktop) to 56px (mobile). Position adjusts to maintain 16–24px edge clearance.
• Section padding: {spacing.section} (80px) compresses to {spacing.xl} (16px) or {spacing.4xl} (24px) on mobile to avoid excessive scrolling through padding.
• Typography scaling: {typography.display-lg} (65px) likely uses clamp() or responsive classes to render at ~36–40px on mobile, ~52px on tablet, 65px on desktop. {typography.title-lg} (36px) scales to ~28px mobile. Body text (18px) may stay fixed or reduce to 16px on smallest screens.

Image Behavior

• Hero student photo: Scales proportionally maintaining aspect ratio. On mobile, width becomes ~90–100% of container with automatic height. Consider using object-fit: cover with a constrained height if the photo is too tall for mobile viewports.
• Achievement badge: Repositions relative to photo. On desktop it overlaps the photo's lower-right; on mobile it may move below the photo or overlay the lower portion. Maintain shadow for visibility.
• Logo (nav): Height fixed at 44px (desktop), may reduce to 32–36px on mobile to preserve nav bar height.
• Decorative icons: Quantity may reduce on mobile (show 3–4 instead of 6) for performance and to avoid clutter in narrow viewports. Float animations continue but may slow down.

Iteration Guide

1. Initialize with Sora. Load Sora from Fontshare (weights 400, 500, 600, 700, 800) and set font-family: 'Sora', system-ui as the --font-sans custom property. Every component references this single variable — no fallback to system fonts except in the stack declaration.

2. Build the hero first. Implement {component.hero-band} with {colors.canvas} background, 80px vertical padding, 1440px max-width container. Add the headline in {typography.display-lg} (65px/600) with the heroBlink keyframe animation on a pseudo-element cursor. Then layer the decorative icons at 15% white opacity with staggered float animations.

3. Implement the transparent-to-solid nav. Create {component.top-nav} as position: fixed; top: 0; background: transparent. Add a scroll listener (IntersectionObserver targeting the hero) that toggles a .scrolled class, applying {component.top-nav-scrolled} styles (solid {colors.canvas} background, 70px height, optional shadow).

4. Place the WhatsApp FAB non-negotiably. Render {component.whatsapp-fab} as position: fixed; bottom: 24px; right: 24px; z-index: 50 with 72px size, green background, Lucide MessageCircle icon. Test that it persists above all content including modals.

5. Use amber sparingly. Apply {colors.primary} ONLY to {component.button-primary} and its state variants. If you find yourself wanting an amber border, accent dot, or background for a non-button element — stop. Use white opacity variations or teal darkening instead.

6. Respect the radius hierarchy. Map every rounded element to a token: small things → {rounded.sm}, buttons → {rounded.lg}, cards → {rounded.xxl}, circles → {rounded.circle}. Never use arbitrary border-radius: 10px or 18px — pick the nearest token.

7. Animate entrances with fadeSlideUp. For sections below the hero, wrap content in a container with opacity: 0; transform: translateY(20px) and use IntersectionObserver to trigger the fadeSlideUp animation (opacity 1, translateY 0, 300ms ease-out) when the section enters the viewport.

8. Test on actual mobile devices. The hero's 65px headline will break on narrow screens if not responsively scaled. Use CSS clamp(32px, 8vw, 65px) or equivalent so it renders beautifully at 375px width without horizontal overflow.

9. Validate contrast ratios. White text (#fff) on teal (#0d9488) passes WCAG AA for large text (headlines) but verify body text (18px+) meets 4.5:1 ratio. Black text (#000) on amber (#ffc107) passes easily for button labels.

10. Run the linter. After implementation, execute npx @google/design.md lint DESIGN.md to catch broken {token.references}, orphaned components missing prose entries, or contrast-ratio violations. Fix warnings before shipping.

Font Setup for Development:

<!-- In <head> -->
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=sora@400;500;600;700;800&display=swap">

<style>
  :root {
    --font-sans: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  /* If Sora fails to load (rare), DM Sans is closest Google Fonts substitute */
  /* <link rel="preconnect" href="https://fonts.googleapis.com"> */
  /* <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> */
</style>

Known Gaps

• Hover state specifics: While {component.button-primary-hover} defines the color shift, exact transform (scale? translateY?), shadow intensification, and transition timing for hover interactions were not extractable from static CSS alone. Implement per platform conventions.
• Loading/skeleton states: No skeleton loaders, spinners (beyond generic spin/pulse keyframes), or pending-state treatments were visible. Design these for form submissions, photo lazy-loading, and route transitions.
• Form validation states: Only {component.input-focus} is documented. Error state (red border/shake?), success state (green checkmark?), and disabled state styling for inputs require design decisions.
• Authenticated/dashboard surfaces: The screenshot shows only the public landing page. Student dashboards, payment flows, class schedules, and admin interfaces likely exist at separate routes with potentially different surface treatments (more white canvas, data tables, denser information).
• Sub-brand palettes: The university-specific pages (UNSA, UCSP, UCSM detected as filter chips) may have institution-specific accent colors or logo lockups not visible on the main landing page.
• Carousel/slider behavior: The existence of crossfadeIn/crossfadeOut and slideIn/slideOut keyframes suggests testimonial or photo carousels exist below the fold. Their pagination, autoplay timing, and swipe behavior are unknown.
• Dark mode toggle: Despite extensions.mode: "dark", the site may offer a light mode variant for accessibility or preference. The light version would invert the canvas/surface relationship (white background, dark text, teal as accent).
• Pixel-exact decorative icon positions: The six floating background icons' X/Y coordinates, sizes, and rotation angles are layout-specific and would require manual recreation or a positional data file not present in the extracted CSS.
• Video/media embeds: No video players, image galleries, or interactive media components were detected. These may appear in "Conoce nuestra academia" or testimonial sections.
• Accessibility annotations: ARIA labels, focus management order, screen-reader-only text, and skip-navigation links are implementation concerns not visible in rendered CSS. Ensure semantic HTML structure accompanies these visual specifications.