Buk HR Software Design System

Overview

Buk presents itself as a modern, approachable HR SaaS platform targeting the Latin American market through a visual language that balances corporate authority with playful energy. The system is built on a striking blue spectrum that moves from near-black navy ({colors.primary}) through electric brand blue ({colors.accent}) into airy cyan-tinted surfaces ({colors.surface-sky-muted}). This chromatic journey creates clear hierarchy: navy anchors trust in headlines and primary actions, electric blue signals interactivity, and the washed-cyan hero canvas provides breathing room for the bold typographic statement.

The brand voltage lives decisively on CTAs — the {button-primary} in electric blue and the {button-navy} in deep navy — while the hero section deploys its signature {surface-sky-muted} wash as a differentiating backdrop that immediately signals "this is Buk." Typography carries the system's personality through a deliberate two-face strategy: Urbanist handles all display and UI labeling work with confident 600-weight authority, while Nunito Sans delivers body copy with its characteristically open, friendly geometric forms that feel accessible rather than corporate-stiff.

Shape language leans heavily into rounding — virtually every interactive element uses {rounded.pill} (infinite radius) or {rounded.xxl} (40px), creating a soft, app-like tactile quality that counters the sharpness of the navy ink. The demo preview window at hero-bottom serves as a signature component: a glassmorphic container ({component.demo-window}) with subtle internal glow, housing a realistic product surface that grounds the marketing promise in tangible interface.

Sub-systems observed include the marketing hero dialect (cyan-washed, headline-forward, dual-CTA) and the product preview dialect (navy/cyan workspace with search inputs, sidebar navigation, and avatar systems). The announcement bar at viewport-top operates as a third, transient sub-system with its own muted-sky background.

Key Characteristics:

• Navy-first ink system ({colors.ink} / {colors.primary} = #04047f) applied to all headlines, body text, and primary navigation
• Electric blue ({colors.accent} = #0059ff) reserved exclusively for primary CTAs and active states
• Cyan-washed hero canvas ({colors.surface-sky-muted}) as the single most recognizable brand moment
• Dual typeface system: Urbanist 600-weight for all headings/labels, Nunito Sans 400-weight for body
• Pill-shaped everything: buttons, label badges, and input fields all use {rounded.pill} or {rounded.xxl}
• Glassmorphic product preview window with {shadows.inset-glow} for depth on colored backgrounds
• Generous vertical rhythm: {spacing.section-xxl} (120px) in hero, {spacing.section-xl} (80px) in content bands
• White inset shadows on blue surfaces create a distinctive "lit-from-within" material feel

Colors

Brand & Accent

• Primary ({colors.primary} — #04047f): Deep navy blue serving as the brand's anchor color. Used for all headlines via {typography.title-md}, navigation links, the {button-navy} variant, and the dark band at viewport-bottom. Carries the full weight of brand authority.
• Primary Active ({colors.primary-active} — #030366): Darkened navy for pressed/active states on primary-colored buttons.
• Primary Hover ({colors.primary-hover} — #050594): Lightened navy for hover states.
• Accent ({colors.accent} — #0059ff): Electric blue — the "voltage" color. Exclusively powers the {button-primary} CTA, focus borders on inputs ({colors.border-cyan-strong}), and selected states. Never used for body text.
• Accent Light ({colors.accent-light} — #3d7bff): Hover state for accent-backgrounded buttons.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline. Background for {component.top-nav}, {component.button-secondary}, {component.hero-label}, and all card content areas.
• Surface Soft ({colors.surface-soft} — #0059ff): Bright blue surface used inside {component.demo-search-input} — note this reuses the accent hex but as a background rather than foreground token.
• Surface Sky ({colors.surface-sky} — #b8e4ff): Solid cyan for decorative elements and icon backgrounds.
• Surface Sky Muted ({colors.surface-sky-muted} — rgba(113, 214, 255, 0.3)): The signature hero wash — a 30%-opacity cyan overlay creating the distinctive airy backdrop for {component.hero-band}. Also used for the {component.top-announcement-bar}.
• Surface Navy ({colors.surface-navy} — #04047f): Full-coverage navy for the CTA band at page-bottom ({component.cta-band}).
• Surface Navy Soft ({colors.surface-navy-soft} — rgba(50, 65, 199, 0.2)): 20% opacity navy tint for nav link hover backgrounds ({component.nav-link-hover}).
• Surface Cream ({colors.surface-cream} — #fdf2e7): Warm off-white for avatar backgrounds ({component.demo-avatar}) and secondary button hovers.
• Surface Neutral ({colors.surface-neutral} — #e5e5e4): Light gray for divider lines and disabled-looking surfaces.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White cards/panels that appear above the base canvas via shadow elevation.
• Surface Glass ({colors.surface-glass} — rgba(255, 255, 255, 0.18)): 18% opacity white for the {component.demo-window} glassmorphic panel.
• Surface Glass Subtle ({colors.surface-glass-subtle} — rgba(255, 255, 255, 0.08)): Fainter glass for nested elements within glass panels.

Text

• Ink ({colors.ink} — #04047f): The dominant text color — navy applied to {typography.title-md}, {typography.display-lg}, {typography.body-md}, and all navigation elements. This is the system's "black."
• Body ({colors.body} — #04047f): Identical to ink in this system; maintained for semantic clarity if future variants introduce lighter body text.
• Body Dark ({colors.body-dark} — #000000): True black, appearing sparingly for maximum contrast needs (close icon in announcement bar).
• Muted ({colors.muted} — rgba(4, 4, 127, 0.7)): 70% opacity navy for secondary text within navy contexts.
• Muted Soft ({colors.muted-soft} — rgba(255, 255, 255, 0.7)): 70% opacity white for secondary text on blue/navy surfaces (demo window chrome).
• On Primary ({colors.on-primary} — #ffffff): White text on navy backgrounds — used in {button-navy} and the CTA band.
• On Accent ({colors.on-accent} — #ffffff): White text on electric blue buttons ({button-primary}).
• On Surface Sky ({colors.on-surface-sky} — #ffffff): White text for content rendered atop cyan/blue surfaces.
• On Surface Navy ({colors.on-surface-navy} — #ffffff): White text for the navy CTA band content.

Hairlines & Borders

• Hairline ({colors.hairline} — #e5e5e4): Neutral light gray for subtle dividers.
• Border Cyan ({colors.border-cyan} — #71d6ff): Bright cyan border — the default input border color on {component.demo-search-input} (2px solid).
• Border Cyan Strong ({colors.border-cyan-strong} — #0059ff): Electric blue for focus-state borders, matching {colors.accent}.

Semantic

• Link ({colors.link} — #0059ff): Electric blue for inline links, matching the accent color.
• Link Active ({colors.link-active} — #04047f): Navy for visited/active links.

Typography

Font Family

The Buk system employs a purposeful two-typeface pairing. Urbanist (a geometric sans-serif with modern, slightly squared proportions) handles all display work — the massive 56px hero headline ({typography.title-md}), the 32px section subheads ({typography.display-lg}), and the tiny 12px uppercase label badges ({typography.label} / {typography.title-sm}). Urbanist is always rendered at font-weight: 600, giving it a consistent, confident voice that never drops below "semibold." It conveys authority without aggression.

Nunito Sans (a humanist geometric with open apertures and warm curves) owns all body text, button labels, navigation items, and UI microcopy. It typically renders at font-weight: 400 for readability, though buttons bump to 600 for call-to-action emphasis. Nunito Sans provides the "friendly HR partner" counterweight to Urbanist's "enterprise platform" seriousness. The fallback stack terminates in sans-serif, ensuring graceful degradation.

Both fonts load from Google Fonts via a single preconnect link combining the Nunito Sans (opsz 6-12, weight 200-1000) and Urbanist (weight 100-900) families.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 600 | 1.1 | normal | Hero headline (alias for title-md) | | {typography.display-lg} | 32px | 600 | 1.25 | normal | Section headings | | {typography.title-md} | 56px | 600 | 1.1 | normal | Hero H1 headline | | {typography.title-sm} | 12px | 600 | 1.1 | normal | Label badges, nav categories | | {typography.label} | 12px | 600 | 1.1 | normal | Uppercase category labels | | {typography.body-md} | 14px | 400 | 1.5 | normal | Body paragraphs, nav links | | {typography.body-sm} | 13px | 400 | 1.46 | normal | Secondary text, captions | | {typography.button} | 14px | 600 | 1.25 | normal | Standard button text | | {typography.button-lg} | 16px | 600 | 1.25 | normal | Large button text (announcement CTA) | | {typography.caption} | 13px | 400 | 1.38 | normal | Meta text, timestamps |

Principles

Buk's typography trusts size and color to carry hierarchy almost entirely — the system avoids weight variation within each typeface role (Urbanist is always 600; Nunito body is always 400). The dramatic size jump from {typography.body-md} (14px) to {typography.title-md} (56px) — a 4× ratio — creates the headline/body distinction that more conservative systems achieve through weight contrasts. This means you'll never see a "bold" body paragraph or a "regular" headline; the roles are locked.

Letter-spacing remains normal throughout — no tracking adjustments even on the 56px display text, which is unusual for a geometric sans at that size but contributes to the tight, modern feel. Line heights are relatively compressed (1.1–1.25 for display, 1.5 for body), keeping blocks compact and scannable.

Uppercase is reserved exclusively for the {typography.label} / {typography.title-sm} 12px role — the "SOFTWARE DE RECURSOS HUMANOS" badge above the hero headline. This is the system's only all-caps moment, making it highly signaling when it appears.

Note on Font Substitutions

Both Urbanist and Nunito Sans are available on Google Fonts and require no substitution. If Google CDN access is restricted, Montserrat can substitute for Urbanist (similar geometric proportions, available weights at 600) and Open Sans or Source Sans Pro can replace Nunito Sans (comparable humanist-geometric warmth at 400 weight). Define these as CSS variables:

--font-display: 'Urbanist', 'Montserrat', sans-serif;
--font-body: 'Nunito Sans', 'Open Sans', sans-serif;

Layout

Spacing System

• Base unit: 4px (with 8px as the practical operational minimum).

• Tokens:

  • {spacing.xxs} (2px) — micro-adjustments, tight icon gaps
  • {spacing.xs} (4px) — icon-text gaps in nav links, inner button padding
  • {spacing.sm} (8px) — most common gap: between grouped elements, vertical stack rhythm
  • {spacing.md} (12px) — nav link horizontal padding, compact internal spacing
  • {spacing.lg} (16px) — card padding baseline, nav vertical padding
  • {spacing.xl} (24px) — section-internal padding, gap between hero text and CTAs
  • {spacing.xxl} (32px) — larger internal gaps, input padding
  • {spacing.section} (48px) — standard band vertical padding
  • {spacing.section-xl} (80px) — generous content band padding
  • {spacing.section-xxl} (120px) — hero section vertical padding (the "breathing room" value)

• Section padding (vertical): {spacing.section-xxl} (120px) in the hero; {spacing.section-xl} (80px) in content sections below.

• Card internal padding: {spacing.xl} (24px) for {component.pricing-card}; {spacing.lg} (16px) for {component.demo-window}.

• Gutters: 24px ({spacing.xl}) between sibling elements in CTA groups; 8px ({spacing.sm}) between nav items and their dropdown carets.

Grid & Container

• Max content width: 1440px for outer section wrappers; 1392px for the constrained nav container (leaving 24px gutters at full width).
• Density choice: Marketing-landing density — generous whitespace, single-column hero text (no multi-column editorial layout), centered content with ~60–70% max-width for readable line lengths in body copy.
• Grid behavior at desktop: The hero appears to use a implicit 2-column mental grid (text left, demo preview right/below), though implementation is likely flexbox with justify-content: center. No explicit CSS grid detected.
• Hero column splits: Headline + subhead + CTAs form a centered column roughly 700–800px wide; the demo window spans wider (near-full container) positioned below the text block.

Whitespace Philosophy

Buk embraces editorial-airy whitespace in the hero (120px vertical padding) and app-dense spacing within the product preview window. The contrast between the expansive cyan-washed hero and the information-dense demo interface mirrors the marketing-to-product transition: "dream big here, work efficiently there." The system refuses clutter in marketing surfaces but accepts higher density where it simulates real software.

Header Architecture

|--------------------------------------------------------------------------------|
| [buk logo]   [Productos ▾] [Precios] [Nosotros ▾] [Recursos ▾] [Blog]     [🇨🇴 ▾] [Ingresar] [Contáctanos] |
|--------------------------------------------------------------------------------|
|                                    1392px max-width                             |
|                         (centered within 1440px section wrapper)                |

The nav uses flush-left logo, center-spaced navigation items with dropdown indicators, and flush-right utilities (language selector, auth CTA outline, contact CTA filled). All nav links use {rounded.DEFAULT} (8px) hover targets with {spacing.xs} {spacing.md} padding.

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|                    [SOFTWARE DE RECURSOS HUMANOS]       ← label badge, centered  |
|                                                                                |
|                       Tú decides. Buk lo ejecuta.        ← 56px Urbanist 600   |
|                                                                                |
|           Buk es el software de Recursos Humanos que...  ← 14px Nunito 400     |
|                                                                                |
|                  [Contáctanos]    [Ver videos demo]      ← CTA pair            |
|                                                                                |
|     ┌──────────────────────────────────────────────────────────────────────┐   |
|     │  ● ● ●                                                      [avatar]│   |
|     │  [buk]        [🔍 Busca en Buk...              ] [✦ buk AI] [👁][⚙][🔔]│   |
|     │                                                                      │   |
|     │  Mi Espacio ▾                                                        │   |
|     │  ☰ Mi Buk                                                           │   |
|     │                                                                      │   |
|     │  Hola María                                            Solicitud...  │   |
|     └──────────────────────────────────────────────────────────────────────┘   |
|                                                                                |
|-------------------------------- 120px padding ---------------------------------|

The hero centers all content vertically and horizontally within the {surface-sky-muted} band. The demo window is a signature element — a glassmorphic panel showing a realistic Buk interface with search, sidebar, and greeting.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} background | Base nav bar, footer, card surfaces | | 1 — Hairline | 1px {colors.hairline} or {colors.border-cyan} border | Input fields, dividers | | 2 — Soft drop | {shadows.sm} — 0 2px 9px rgba(0,0,0,0.1) | Elevated cards, dropdown panels | | 3 — Medium drop | {shadows.md} — 0 4px 12px rgba(0,0,0,0.5) | Modal-level elements, floating previews | | 4 — Combined | {shadows.combined} — drop + inset glow | Demo window, prominent floating panels | | 5 — Inset glow | {shadows.inset-glow} — white 1px inset | Buttons on blue surfaces, input fields on {colors.surface-soft} |

Philosophy: Buk employs a layered, color-block-heavy approach to depth. Rather than relying primarily on grayscale shadows, the system uses background color shifts (navy → cyan → white → glass) to create strata. Shadows that do appear are notably cool-toned or neutral — the cyan accent shadow ({shadows.cyan-accent}) and the white inset glow are signature moves that reinforce the blue palette. The inset glow technique (white shadow inside colored containers) is particularly characteristic: it makes blue surfaces appear luminous rather than flat.

Decorative Depth

The hero's {colors.surface-sky-muted} background is the primary decorative depth element — a semi-transparent cyan wash over what appears to be a white or very light base. The demo window adds a second layer of decorative depth via its glassmorphic {colors.surface-glass} background combined with {shadows.inset-glow}, creating a "floating pane" effect. The CTA band at page-bottom provides a heavy navy anchor that visually "weighs down" the page.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small internal elements, tag corners | | {rounded.DEFAULT} | 8px | Nav link hover targets, small buttons, sidebar items | | {rounded.md} | 16px | Search input fields, moderate cards | | {rounded.lg} | 24px | Pricing cards, content panels | | {rounded.xl} | 32px | Demo window container, large feature cards | | {rounded.xxl} | 40px | {button-navy} variant, large pill buttons | | {rounded.pill} / {rounded.full} | 9999px | Standard CTAs ({button-primary}, {button-secondary}), label badges |

Photography Geometry

No photography is visible in the extracted screenshot — the hero relies on the demo window illustration (a constructed UI mockup) rather than photographic imagery. Avatar placeholders use {rounded.full} (perfect circles) at 32px. The demo window itself has {rounded.xl} (32px) corner treatment. If imagery were added to this system, the established pattern suggests 16–24px radius for image cards and full-bleed for hero illustrations (matching the current demo window's edge-to-edge placement within its 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.nav-link-hover}, {component.demo-search-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-announcement-bar} — The dismissible banner at viewport-top. Background {colors.surface-sky-muted}, text {colors.ink}, type {typography.body-sm}. Contains inline text and a {button-navy} CTA ("Ver demo gratis") plus a close icon button. Spans full width with horizontal padding.

{component.button-close} — The X icon button in the announcement bar. Transparent background, {colors.ink} text/icon, 24×24px square target. No visible border or shadow.

{button-primary} — The main electric-blue CTA ("Contáctanos" in hero). Background {colors.accent}, text {colors.on-accent}, type {typography.button}, rounded {rounded.pill}, padding {spacing.sm} {spacing.xl}. No border; sits on the hero's cyan-washed canvas. State variant: {button-primary-hover} uses {colors.accent-light} background.

{button-secondary} — The outlined/white CTA ("Ver videos demo", "Ingresar"). Background {colors.canvas}, text {colors.primary}, type {typography.button}, rounded {rounded.pill}, padding {spacing.sm} {spacing.xl}. Appears next to {button-primary} in hero; also used for auth link in nav. State variant: {button-secondary-hover} shifts to {colors.surface-cream} background.

{button-navy} — High-emphasis navy button ("Ver demo gratis" in announcement, "Contáctanos" in nav). Background {colors.primary}, text {colors.on-primary}, type {typography.button-lg}, rounded {rounded.xxl} (40px — slightly less than full pill), padding {spacing.sm} {spacing.lg}. This is the "action" button for conversion-critical moments.

{button-outline} — Transparent-background button with potential border (detected in CSS classes). Would use {colors.ink} text, {typography.button-sm}, {rounded.pill}.

Cards & Containers

{component.top-nav} — The persistent header. Background {colors.canvas}, text {colors.ink}, height 72px (implied from padding structure), containing logo left, nav center, utilities right. Max-width 1392px centered within 1440px wrapper.

{component.hero-band} — The full-width hero section. Background {colors.surface-sky-muted}, text {colors.ink}, padding {spacing.section-xxl} vertically. Contains the centered headline stack and CTA pair, with the demo window positioned below.

{component.hero-label} — The "SOFTWARE DE RECURSOS HUMANOS" badge above the headline. Background {colors.canvas}, text {colors.ink}, type {typography.label} (12px Urbanist 600, likely uppercase), rounded {rounded.pill}, padding {spacing.xs} {spacing.lg}. Acts as a category tag.

{component.hero-headline} — "Tú decide. Buk lo ejecuta." Transparent background, text {colors.ink}, type {typography.title-md} (56px Urbanist 600). Center-aligned, maximum impact.

{component.hero-subhead} — The descriptive paragraph beneath the headline. Transparent background, text {colors.ink}, type {typography.body-md} (14px Nunito 400). Roughly 60–70ch max-width for readability.

{component.hero-cta-group} — Container for the paired CTAs. Transparent background, top-padding {spacing.xl} to separate from subhead. Holds {button-primary} and {button-secondary} with gap between them.

{component.demo-window} — The glassmorphic product preview panel. Background {colors.surface-glass} (18% white), text {colors.muted-soft}, rounded {rounded.xl} (32px), padding {spacing.lg}. Has {shadows.inset-glow} applied for the lit-from-within effect on the cyan context. Contains a simulated Buk interface with header dots, search bar, sidebar, and greeting.

{component.demo-window-header} — The chrome bar atop the demo window (traffic-light dots area). Transparent background, text {colors.muted-soft}, bottom-padding {spacing.md}.

{component.pricing-card} (projected) — Content card for features/pricing. Background {colors.canvas}, text {colors.ink}, rounded {rounded.lg} (24px), padding {spacing.xl}. Would use {shadows.sm} for elevation.

{component.cta-band} — The navy conversion band at page-bottom. Background {colors.surface-navy}, text {colors.on-surface-navy}, padding {spacing.section-xl} vertically. Provides visual weight to close the page.

{component.footer} — Site footer. Background {colors.canvas}, text {colors.muted} (or {colors.ink} for links), type {typography.body-sm}, padding {spacing.section} vertically.

Inputs & Forms

{component.demo-search-input} — The search field inside the demo window. Background {colors.surface-soft} (electric blue), text {colors.on-surface-sky} (white), type {typography.body-md}, rounded {rounded.md} (16px), padding {spacing.xl} {spacing.xxl}, height 56px. Border: 2px solid {colors.border-cyan} (bright cyan). State variant: {component.demo-search-input-focus} would strengthen the border to {colors.border-cyan-strong}. Notably uses white text on blue background — inverted from typical input patterns.

Navigation

{component.nav-link} — Navigation menu item ("Productos", "Precios", etc.). Transparent background, text {colors.ink}, type {typography.body-sm}, rounded {rounded.DEFAULT} (8px), padding {spacing.xs} {spacing.md}. Some items have dropdown caret icons with {spacing.sm} gap. State variant: {component.nav-link-hover} applies {colors.surface-navy-soft} (20% navy) background.

{component.demo-sidebar-item} — Navigation item inside the demo preview ("Mi Espacio", "Mi Buk"). Transparent background, text {colors.muted-soft}, type {typography.body-sm}, rounded {rounded.DEFAULT}, padding {spacing.sm} {spacing.md}. Simulates app-internal navigation.

Sub-system Components (Product Preview Dialect)

{component.demo-avatar} — User avatar circle in the demo header. Background {colors.surface-cream} (warm off-white), size 32px, rounded {rounded.full}. Would contain user initial or photo.

{component.demo-icon-button} — Icon-only buttons in the demo header (eye, settings, bell). Transparent background, text/icon {colors.muted-soft}, size 24px, rounded {rounded.full}. Used for utility actions in the simulated interface.

Do's and Don'ts

Do

• Do use {colors.ink} (#04047f) for all body text and headlines on light surfaces — never pure black (#000000) except for the close icon in transient bars.
• Do apply {typography.title-md} (56px Urbanist 600) to the hero H1 and reserve {typography.display-lg} (32px) for section subheadings below.
• Do make primary CTAs {button-primary} with {colors.accent} background and {rounded.pill} shape — this is the single most recognizable interactive element.
• Do use {colors.surface-sky-muted} (30% cyan) as the hero band background to create the signature Buk atmosphere — don't substitute plain white or gradient.
• Do apply {shadows.inset-glow} (white 1px inset) to any element sitting on a blue/navy background — it creates the system's characteristic "lit" material.
• Do round search inputs and prominent fields to {rounded.md} (16px) — sharper radii feel off-brand.
• Do pair Urbanist 600 headings with Nunito Sans 400 body text — never swap the typeface roles.
• Do use {spacing.section-xxl} (120px) vertical padding in the hero — this generosity is part of the brand's confident, unhurried voice.
• Do render demo/preview windows with {colors.surface-glass} (18% white) background and {rounded.xl} (32px) corners for the signature glassmorphic look.
• Do reserve {colors.accent} (#0059ff) exclusively for interactive elements (buttons, links, focus rings) — never use it as body text or static decoration.

Don't

• Don't use font-weight below 600 for any Urbanist text — the display face is locked at semibold; light/regular Urbanist doesn't exist in this system.
• Don't apply {rounded.sm} (4px) or sharp corners to buttons — every CTA must be {rounded.pill} or at minimum {rounded.xxl} (40px).
• Don't place white text on {colors.canvas} or light surfaces — {colors.on-primary} / {colors.on-accent} white is reserved for {colors.primary} or {colors.accent} backgrounds only.
• Don't substitute {colors.primary} (navy) for {colors.accent} (electric blue) on primary CTAs — the electric blue is the "click me" signal; navy is for secondary/high-trust actions ({button-navy}).
• Don't add gradient overlays to the hero background — the system uses a flat {colors.surface-sky-muted} tint, not a multi-stop gradient.
• Don't expand the radius vocabulary beyond the defined tokens — if you need something between {rounded.lg} (24px) and {rounded.xxl} (40px), use one of the existing values consistently.
• Don't use letter-spacing adjustments on display text — the system keeps normal tracking even at 56px, contributing to the tight, modern feel.
• Don't render input fields with dark text on white background in the product-preview dialect — the demo search correctly inverts to white-on-blue ({component.demo-search-input}).
• Don't omit the {component.hero-label} badge above the headline — that small 12px uppercase tag is a recurring brand signature for categorizing page intent.
• Don't mix the marketing dialect (cyan-washed, airy) with the product dialect (navy/cyan workspace, dense) within the same visual zone — maintain the hero/demo spatial separation.

Motion & Animation

Transition Tokens

--transition-all: all ease 300ms;
--transition-shadow-border: box-shadow 0.3s ease, border-color 0.3s ease;
--transition-slow: all 0.5s ease;
--transition-transform-medium: transform 0.4s ease;
--transform-fast: transform 0.3s ease;
--transition-button: background 0.2s ease, font-weight 0.2s ease;
--transition-opacity: opacity 0.2s ease;
--transition-link: text-decoration 0.2s ease;

Keyframe Animations

• rec-spin — Rotational animation, likely for loading spinners or refresh indicators in the product interface.

Interaction Patterns

• Button state transitions: Background color shifts occur over 200–300ms with ease timing — snappy but not jarring.
• Focus ring expansion: Input fields transition their border color (cyan → strong cyan) over 300ms synchronized with shadow changes.
• Nav link hover: Background color fade-in on {colors.nav-link-hover} using the background 0.2s token.
• Link underline growth: Text decoration (underline) appears over 200ms on hover for inline links.
• Dropdown reveal: Transform-based transitions (300–400ms) for mega-menu panels sliding into view.
• Opacity crossfade: 200ms opacity transitions for toggling visibility (mobile menu overlay, etc.).
• Close button rotation: The announcement bar close icon may use the rec-spin or a transform transition on interaction.
• Demo window entrance: Likely uses the 400–500ms transform or opacity transition for a fade-up/slide-in effect when scrolling into view.

No scroll-triggered parallax or complex orchestrated sequences were explicitly detectable in the extracted CSS — the motion level is subtle, focused on state transitions rather than decorative animation. Recommended timing for any added motion: 200–300ms with ease or ease-out easing to match the existing vocabulary.

Imagery Style

• Primary imagery type: Constructed UI mockup (the demo window) — not photography or illustration in the traditional sense. This is a "show, don't tell" product preview rendered as an interface simulation.
• Color treatment: The demo window uses the brand's own palette inverted — white text on blue surfaces, cyan accents — creating a cohesive "looking into the product" effect.
• Depth treatment: Glassmorphism with {shadows.inset-glow} gives the preview a floating, elevated appearance distinct from the flat marketing content around it.
• Subject matter: Simulated HR software interface showing search, sidebar navigation, user greeting, and action icons — grounding the marketing claims in tangible product reality.
• Role in layout: The demo window occupies the lower portion of the hero, acting as visual proof that reinforces the headline's promise ("Buk lo ejecuta").
• Signature technique: The combination of glassmorphic container + realistic UI chrome (traffic-light dots, search field with cyan border, avatar) creates a "window into the app" metaphor.
• Absence of photography: No photos of people, offices, or abstract imagery detected — the system relies on typography, color, and the product preview as its visual vocabulary.
• Illustration style (if extended): Would likely follow a flat, geometric style using the brand's blue palette, possibly with subtle gradients matching {colors.surface-sky} tones.
• Icon style within imagery: Thin-line or filled icons in white (on blue surfaces) or navy (on white surfaces), matching the detected icon library treatment.

Icon System

• Library: Custom SVG icons (no standard library detected in the CSS class names or font references). Icons appear to be inline SVGs or a custom icon font.
• Specific icons observed:
  • Chevron/down arrow (dropdown indicators on "Productos", "Nosotros", "Recursos", language selector)
  • Close/X icon (announcement bar dismissal)
  • Search magnifying glass (inside {component.demo-search-input})
  • Sparkle/star icon (next to "buk AI" in demo header)
  • Eye icon (visibility toggle in demo header)
  • Gear/settings icon (demo header utility)
  • Bell/notification icon (demo header utility)
  • Menu/hamburger (implied for mobile nav)
  • Flag icon (Colombia flag for language selector)
  • Sidebar/list icon (next to "Mi Buk")
  • Chevron/up-down (next to "Mi Espacio")
• Treatment: Icons appear to use currentColor inheriting from parent text color. On white backgrounds they render in {colors.ink} (navy); on blue surfaces they render in {colors.on-surface-sky} (white) or {colors.muted-soft} (70% white).
• Size alignment: Nav icons appear at 16–18px (aligned with {typography.body-sm} 13–14px text); demo header utility icons at 20px; the close icon at 16–18px.
• Stroke vs fill: Mixed — dropdown chevrons and utility icons appear stroke-based; the flag icon is likely fill-based. No consistent weight detected, suggesting custom design rather than a unified icon set.

Recommended Frontend Stack

- Framework:      Next.js 14+ (React-based, matches Tailwind detection + HubSpot CMS hints)
- Styling:        Tailwind CSS v3.4+ (utility-class patterns detected: d-flex, gap--, ai-center, buk-py-*)
- Fonts:          Google Fonts (Nunito Sans + Urbanist via single <link> preload)
- Animation:      CSS transitions (extracted) + Framer Motion for scroll-triggered demo window entrance
- Icons:          Custom SVG components (inline React components or sprite sheet)
- Component lib:  None detected (custom components with BEM-ish class naming)
- CMS:           HubSpot (hs_cos_wrapper classes indicate HubSpot CMS hosting)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column hero, stacked CTAs, hamburger nav, demo window full-width or hidden | | Tablet | 640–1024px | Two-column hero possible, condensed nav, demo window still prominent | | Desktop | 1024–1440px | Full layout as shown: centered hero text, wide demo window, expanded nav | | Wide | > 1440px | Max-width containers (1440px / 1392px) center with auto margins |

Touch Targets

• {button-primary} / {button-secondary}: ~44–48px height (padding 8px + line-height ~28px) — meets WCAG AAA 44×44 minimum.
• {button-navy}: ~48px height (larger touch target for high-emphasis action) — exceeds minimum.
• {component.nav-link}: ~32px height (padding 4px + 14px text) — may be slightly under 44px; consider increasing vertical padding to {spacing.sm} (8px) on mobile.
• {component.demo-search-input}: 56px height — excellent touch target, well above minimum.
• {component.demo-icon-button}: 24×24px — below WCAG minimum; should expand to 40–44px on mobile/touch devices.

Collapsing Strategy

• Navigation: The horizontal nav with dropdowns collapses to a hamburger menu (< 1024px), triggering the .mobile-menu and .mobile-menu-overlay classes detected in the DOM. Mega-menu panels become full-screen overlays.
• Hero text: The 56px headline scales down (likely to 32–40px on mobile) maintaining {typography.display-lg} or a new display-md role. Center-alignment persists.
• CTA pair: Horizontal arrangement ({component.hero-cta-group}) stacks vertically on mobile with {spacing.md} gap between {button-primary} and {button-secondary}.
• Demo window: May hide on mobile (below-the-fold), convert to a static image, or show a simplified version. Its 1440px-scale detail would be lost at 375px width.
• Announcement bar: Persists but text truncates; the {button-navy} CTA may become icon-only or stack below the text.
• Spacing compression: Vertical padding reduces from {spacing.section-xxl} (120px) to {spacing.section-xl} (80px) or {spacing.section} (48px) on mobile.

Image Behavior

• Demo window illustration: Should scale proportionally (max-width: 100%) within its container. At mobile widths, consider showing only the top portion (search bar + header) or replacing with a simplified "screenshot" graphic.
• Avatar images: Maintain {rounded.full} (circle) at 32px or reduce to 24px on mobile with proper srcset for retina.
• Flag icon (language selector): Remains inline, no scaling issues at small size.

Iteration Guide

1. Build a landing page that closely mimics the Buk design system using Next.js with Tailwind CSS. Initialize your tailwind.config.js with the color, typography, spacing, and radius tokens defined in this DESIGN.md's YAML frontmatter.

2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Define these as Tailwind theme extensions (e.g., colors.primary, fontSize.display-xl). Never hard-code a hex code or pixel value that has a corresponding token.

3. Add state variants (-hover, -focus, -active, -disabled) per Tailwind's convention (e.g., hover:bg-[var(--accent-light)]). The spec documents Default and Active/Pressed/Focus as separate frontmatter entries — map these to Tailwind's hover: and focus: prefixes.

4. When adding a new component, decide first which dialect it belongs to: marketing (cyan-washed backgrounds, white canvas cards, navy text) or product-preview (blue surfaces, white text, glassmorphism). Don't mix surface treatments across dialects.

5. Variants of an existing component live as separate frontmatter entries (button-primary-hover, never nested inside button-primary). In your codebase, implement these as modifier classes or Tailwind variants, not as nested CSS.

6. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag missing or unused tokens automatically. Ensure every {token.path} reference in your Markdown body resolves to a defined frontmatter key.

7. When in doubt about emphasis: size before weight (the 56px headline carries more hierarchy than any weight could), color placement (reserve {colors.accent} for CTAs only), and signature surfaces (the {colors.surface-sky-muted} hero is non-negotiable for brand recognition).

8. For the demo/product-preview window, always apply {shadows.inset-glow} when the element sits on a blue or cyan background. This "internal light" effect is the single most distinctive depth cue in the system.

9. Maintain the two-typeface contract: Urbanist gets 600 weight only for anything that is a heading, label, or button text; Nunito Sans gets 400 for body, 600 for buttons. Never render body copy in Urbanist or headings in Nunito Sans.

10. Test the contrast ratio of white text on {colors.surface-soft} (#0059ff) — this combination appears in {component.demo-search-input} and must meet WCAG AA (4.5:1 for normal text). If it fails (likely does for 14px body text), increase the text size to 16px+ or adjust the blue to be lighter.

Font Setup: Both Urbanist and Nunito Sans are available at Google Fonts. Add this <link> tag in your document <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Define CSS variables for seamless token access:

:root {
  --font-display: 'Urbanist', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --color-primary: #04047f;
  --color-accent: #0059ff;
  --color-surface-sky-muted: rgba(113, 214, 255, 0.3);
  --radius-pill: 9999px;
  --shadow-inset-glow: rgba(255, 255, 255, 0.23) 1px 1px 1px 1px inset;
}

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are inferred from the -hover component variants but not visually verified. Implementers should add hover: modifiers for {button-primary}, {button-secondary}, {nav-link}, and {button-outline}.
• Loading/skeleton states: No loading skeletons, spinners (beyond the detected rec-spin keyframe name), or pending-state treatments were visible. The rec-spin animation exists but its visual output is unknown.
• Form validation states: Only {component.demo-search-input-focus} is documented. Error states (red borders, error messages), disabled states (opacity reduction), and success states are not present in the extracted data.
• Dark mode: Despite extensions.mode being pre-assigned as "dark", the visual evidence strongly indicates a light-mode design (white canvas, navy text). A true dark mode inversion was not observable. Treat the current spec as light-mode canonical; dark mode would require a full token remapping pass.
• Mobile navigation behavior: The DOM contains .mobile-menu, .mobile-menu-overlay, and .mega-menu elements, but their opened/closed visual states, slide directions, and animations are not captured in a static screenshot.
• Mega-menu panel design: Dropdown panels exist for "Productos," "Nosotros," and "Recursos" (indicated by chevron icons and .mega-menu classes), but their internal layout, grid structure, and contents are not visible.
• Pricing/features section details: Below the hero, a section with {spacing.section-xl} (80px) padding is detected but empty in the above-fold DOM. Card layouts, pricing tables, or feature grids in that space are not documented.
• Footer architecture: The {component.footer} is projected from nav patterns but its actual column structure, link organization, and legal text are not visible.
• Accessibility focus indicators: Beyond the input focus border color change, no focus rings (outline-offset outlines or box-shadow rings) were detected for keyboard navigation on buttons or links. Recommend adding a 2px {colors.accent} outline offset by 2px for WCAG compliance.
• Pixel-exact surface-sky-muted value: The value rgba(113, 214, 255, 0.3) is derived from CSS rgb() color frequency analysis. The exact alpha channel and RGB values should be verified against the production stylesheet, as sampled values from screenshots can drift.