FlowCV Design System

Overview

FlowCV presents a striking visual identity built around inversion: a deep plum-purple canvas ({colors.canvas} — #200e32) serves as the atmospheric backdrop for what is fundamentally a light-mode content experience. The system's most arresting feature is its headline typography—massive 80px DM Sans set at weight 900 ({typography.display-xl}), rendered in pure {colors.ink}, creating a declarative, almost brutalist voice that commands attention while remaining warm through generous letter-spacing compression (-3.5px). This is not a shy brand.

The design's voltage lives in its surface contrast. While the canvas absorbs light, every interactive element and content card erupts in {colors.surface-soft} (#fbfaf9) or pure {colors.surface} white, creating a layered theater-in-the-round effect. The signature component—the resume preview card—embodies this duality: a dark plum sidebar ({colors.resume-sidebar}) anchors the left third while the remaining real estate breathes in cream-white, all lifted by a dramatic compound shadow ({extensions.shadows.resume-card}) that suggests physical paper hovering above the void.

Shape language favors confidence: {rounded.lg} (24px) dominates cards and buttons, softening the geometric aggression of the type without descending into playfulness. Pill-shaped tokens ({rounded.pill}) appear sparingly on outline buttons, creating a subtle dialect difference between primary actions (sharp-round) and secondary ones (fully round). The spacing system is deliberately generous—{spacing.hero} (80px) vertical rhythm in the hero band, {spacing.section} (48px) between major sections—trusting whitespace to provide the breathing room that the dense headline weight otherwise threatens to consume.

A sub-system emerges in the resume preview itself: a micro-layout with its own information hierarchy ({typography.label-sm} section headers, {typography.caption} body text, dot-based skill indicators) that operates as a product-within-a-product. Social proof components (avatar stacks, testimonial cards with platform badges) form another sub-dialect, using elevated shadows ({extensions.shadows.testimonial}) and highlighted backgrounds to float above the main narrative plane.

Key Characteristics:

• Deep plum canvas ({colors.canvas}) with white/cream elevated surfaces creates inverted light-mode perception
• Massive 80px weight-900 DM Sans headlines ({typography.display-xl}) with aggressive -3.5px letter-spacing define brand voice
• Primary CTAs use dark plum fill ({colors.secondary}) on the canvas, or white fill ({colors.button-white}) when overlapping imagery
• Resume preview card features dual-tone layout: dark sidebar ({colors.resume-sidebar}) + light content area with {rounded.lg} corners
• Shadow vocabulary ranges from subtle ({extensions.shadows.sm}) to theatrical ({extensions.shadows.testimonial}) for depth layering
• Button radius distinguishes intent: {rounded.lg} for primary actions, {rounded.pill} for secondary/outline states
• DM Sans spans weights 100–500 in the loaded font-face stack, with 400/600/900 actively deployed
• Social proof uses floating testimonial cards ({component.testimonial-card}) and circular avatar stacks ({component.avatar-circle})
• Section labels use {typography.label-sm} at 10px weight-600 with 0.08em tracking for taxonomy headers
• Transitions favor 300ms cubic-bezier easing ({extensions.motion.easing}) for color, shadow, and transform properties

Colors

Brand & Accent

• Primary ({colors.primary} — #ffffff): The dominant brand color—pure white—used for filled button surfaces on dark contexts, text on dark backgrounds, and the resume card's content area. Carries the highest luminance in the system.
• Primary Active ({colors.primary-active} — #e8e1da): Warm gray-white state for pressed or active primary white surfaces, providing tactile feedback without abandoning the light identity.
• Primary Hover ({colors.primary-hover} — #f0ece7): Subtle warm shift for hover states on white-filled buttons, maintaining legibility while signaling interactivity.
• Accent / Secondary ({colors.secondary} / {colors.accent} — #200e32): Deep plum-purple that doubles as both the canvas background and the primary filled button color. This is the brand's chromatic anchor—dark enough to read white against, saturated enough to feel intentional rather than default-black.
• Signature Plum ({colors.signature-plum} — #200e32): Canonical reference to the brand's distinctive dark purple, used in prose when distinguishing from neutral blacks.
• Signature Cream ({colors.signature-cream} — #fbfaf9): The warm off-white that defines elevated surfaces, warmer than pure white to reduce glare and evoke paper.

Surface

• Canvas ({colors.canvas} — #200e32): The root background—deep plum-purple—that wraps the entire page. Unusual for a "light mode" site, this creates the inverted aesthetic where content floats above darkness.
• Surface Soft ({colors.surface-soft} — #fbfaf9): Warm cream used for subtle elevation zones, avatar backgrounds, and gentle card surfaces. The workhorse background for non-critical containers.
• Surface ({colors.surface} — #ffffff): Pure white reserved for high-priority content areas—the resume preview card's main panel, testimonial cards, and primary button fills in dark-context variants.
• Surface Strong ({colors.surface-strong} — #e8e1da): Warm taupe-gray for borders, dividers, and disabled-state backgrounds. Provides mid-tone contrast without the harshness of neutral grays.
• Surface Dark ({colors.surface-dark} — #200e32): Alias for canvas color, used when a component needs to explicitly declare "I am dark" in token references.
• Surface Elevated ({colors.surface-elevated — #ffffff): Pure white for dropdowns, modals, and tooltips that must visually "pop" above already-elevated surfaces.
• Resume Sidebar ({colors.resume-sidebar} — #2d2640): Slightly lighter plum than canvas, used exclusively for the left column of the resume preview card to create subtle internal contrast while maintaining dark-mode cohesion.

Text

• Ink ({colors.ink} — #000000): Pure black, reserved exclusively for the hero headline ({typography.display-xl}) and maximum-emphasis text. Never used for body copy—too harsh at small sizes.
• Body ({colors.body} — #200e32): Deep plum (matching canvas), used for primary body text on light surfaces. Softer than black, maintains brand color harmony.
• Muted ({colors.muted} — #374151): Cool medium gray for secondary text—nav links in default state, supporting descriptions, timestamps. WCAG AA compliant against white.
• Muted Soft ({colors.muted-soft} — #616977): Lighter gray for tertiary text—legal disclaimers, "Trusted by" counts, caption-level metadata.
• Muted Lighter ({colors.muted-lighter} — #9ca3af): Lightest gray, near the threshold of legibility. Used for placeholder text, very subtle labels, or decorative elements.
• On Primary ({colors.on-primary} — #000000): Black text for rendering on white/light primary surfaces (buttons, cards). High contrast, passes AAA.
• On Dark ({colors.on-dark} — #ffffff): White text for rendering on the plum canvas and dark buttons. The inverse of {colors.on-primary}.
• On Surface ({colors.on-surface} — #200e32): Plum text matching {colors.body}, used when a token needs to explicitly declare "text on a light surface."

Hairlines & Borders

• Hairline ({colors.hairline} — #e8e1da): Warm light-taupe for subtle dividers, input borders in default state, and card separators. Visible but never aggressive.
• Hairline Soft ({colors.hairline-soft} — #f0ece7): Very light warm gray for the most delicate borders—inner shadows, faint container edges, decoration-only lines.
• Border Strong ({colors.border-strong} — #d4c9bf): Medium-warm taupe for focus rings, active borders, and elements that need clear containment without the weight of a full color.

Semantic

• Error ({colors.error} — #dc2626): Standard red for form validation errors, deletion confirmations, and destructive action feedback.
• Success ({colors.success} — #16a34a): Green for confirmation states, successful submission indicators, and positive status badges.
• Warning ({colors.warning} — #d97706): Amber for cautionary messages, pending states, and attention-required indicators.
• Info ({colors.info} — #2563eb): Blue for informational tooltips, help text, and external-link signifiers.
• Link ({colors.link} — #ffffff): White, used for inline links on the dark canvas. Underlined or differentiated by context rather than color alone.
• Link Active ({colors.link-active} — #e8e1da): Warmed white for visited or active link states on dark backgrounds.

Typography

Font Family

The entire system runs on DM Sans, a low-contrast grotesque designed by Colophon Foundry specifically for interface and branding work. The @font-face declarations load weights 100 (Thin), 200 (ExtraLight), 300 (Light), 400 (Regular), 500 (Medium), plus their italic counterparts—all served as WOFF2 from /fonts/dmsans-*.woff2 with font-display: swap for performance. The fallback stack degrades gracefully through system sans-serifs (ui-sans-serif, system-ui, sans-serif) before reaching emoji fonts for color glyph support.

DM Sans plays every role: it sets the 80px brutalist headline, the 12px resume body copy, the 10px section taxonomy labels, and everything between. This monotype strategy creates intense visual coherence—the same DNA expresses at every scale. Weight carries hierarchy more aggressively than size differential: the jump from {typography.body-md} (400) to {typography.display-xl} (900) is a 500-weight delta, which is extreme. The system trusts weight to do emotional heavy lifting while size provides structural scaffolding.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 80px | 900 | 80px | -3.5px | Hero headline—"Build a job-winning resume for free" | | {typography.display-lg} | 48px | 400 | 48px | -2px | Section headings, major subheads | | {typography.title-md} | 24px | 600 | 32px | -0.4px | Card titles, modal headers, resume name | | {typography.body-md} | 16px | 400 | 24px | 0 | Hero subhead, paragraph text, descriptions | | {typography.body-sm} | 14px | 400 | 20px | 0 | Supporting text, testimonial bodies, nav links | | {typography.caption} | 12px | 400 | 16px | 0 | Resume body copy, metadata, fine print | | {typography.button} | 16px | 500 | 24px | 0 | CTA buttons, primary actions | | {typography.label-md} | 12px | 600 | 16px | 0.05em | Overline labels, category tags | | {typography.label-sm} | 10px | 600 | 14px | 0.08em | Resume section headers (WORK EXPERIENCE, EDUCATION) |

Principles

The typography system's defining move is weight-as-emotion. The 80px headline sits at weight 900—a choice that would look aggressive in Helvetica or Arial but reads as confident and contemporary in DM Sans's humanist-grotesque framework. The -3.5px letter-spacing tightens the massive characters, preventing the line from feeling sparse and giving it newspaper-headline density. Contrast this with {typography.display-lg} at 48px/weight 400: half the size, less than half the weight, creating a 2:1 size-to-weight ratio that makes subheads recede respectfully.

Letter-spacing follows an inverse relationship with size: the smallest text ({typography.label-sm}) gets the widest tracking (0.08em) to maintain legibility at 10px, while the largest text gets negative tracking to tighten optically. This is sophisticated typesetting that compensates for how the eye perceives scale.

Color also participates in hierarchy. The headline uses pure {colors.ink} (#000000)—the only element permitted this luxury. Body text drops to {colors.body} (#200e32), the brand plum, which is significantly softer. This means even at large sizes, supporting text cannot compete with the headline's chromatic authority. The system does not use italic for emphasis (no italic weights are deployed in the extracted styles); instead, it uses weight jumps (400 → 600) and color shifts ({colors.body} → {colors.ink}).

Uppercase appears only in the label taxonomy ({typography.label-md}, {typography.label-sm}) for section headers like "WORK EXPERIENCE" and "EDUCATION" within the resume preview. This is a functional choice—resume conventions demand uppercase section headers—and the wide letter-spacing (0.05–0.08em) prevents the uppercase from feeling shouty.

Note on Font Substitutes

DM Sans is available on Google Fonts, making substitution straightforward if self-hosting isn't desired. For CSS variable definitions, use:

:root {
  --font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

If DM Sans cannot be loaded, the closest Google Fonts equivalent in spirit is Inter (similar x-height, multiple weights, designed for screens) or Plus Jakarta Sans (slightly more geometric, similar weight range). Neither is a visual match—DM Sans's specific balance of humanist warmth and grotesque efficiency is unique—but both will preserve the system's weight-driven hierarchy.

Layout

Spacing System

• Base unit: 4px (inferred from the {spacing.sm} = 8px token being 2× base).
• Tokens: {spacing.xxs} (2px — micro-adjustments, icon internal padding), {spacing.xs} (4px — gap between inline elements), {spacing.sm} (8px — compact internal padding), {spacing.md} (12px — standard component internal padding), {spacing.base} (16px — common padding unit, grid gap), {spacing.lg} (24px — card internal padding, section gaps), {spacing.xl} (32px — large component padding), {spacing.xxl} (36px — transitional spacing), {spacing.section} (48px — vertical section rhythm), {spacing.section-xl} (64px — major section breaks), {spacing.hero} (80px — hero band top padding).
• Section padding (vertical): {spacing.section} (48px) — used between the hero band and subsequent content sections; {spacing.hero} (80px) for the hero's top breathing room.
• Card internal padding: {spacing.lg} (24px) for testimonial cards ({component.testimonial-card}), {spacing.xl} (32px) for the resume preview's internal columns ({component.resume-sidebar}, {component.resume-content}).
• Gutters: {spacing.base} (16px) between avatar circles in the {component.avatar-stack}; {spacing.lg} (24px) between the hero text column and the resume preview column at desktop.

Grid & Container

• Max content width: 1440px (extracted from main container width). The header and sections constrain to this width before centering.
• Editorial density: The hero uses an asymmetric 57/42 split (text/visual) at desktop (lg:grid-cols-[57%_42%]), giving the headline room to breathe while the resume preview occupies slightly less than half. This is editorial, not marketplace—the copy is the protagonist.
• Specific grid behaviors: The hero section collapses from 2-column (desktop) to single-column (mobile) via responsive grid classes. The nav uses a grid-cols-[max-content_max-content] pattern with justify-between, pinning logo left and utilities right with flexible center space for navigation links (hidden below lg: breakpoint).
• Hero column splits: Left column (57%) contains the overline, headline, subhead, CTA button, and social proof row. Right column (42%) contains the {component.resume-preview-card} with carousel navigation arrows overlaid as absolute-positioned {component.icon-button-circle} elements.

Whitespace Philosophy

FlowCV practices generous asymmetry. The hero's 80px top padding dwarfs the 48px section padding below it, creating a "heavy top" visual weight that feels grounded. Within the resume preview card, the 32px internal padding on both columns feels luxurious relative to the 12px body text—approximately 2.7× the font-size in padding, well above the 1.5× minimum for comfort. The system refuses cramped density; even the nav's 72px height provides 20px of vertical padding above and below its content. This is confident whitespace that earns its keep through scale rather than minimalism.

Header Architecture

|-------------------------------------------------------------------------|
| [Logo]                    Resume Builder  Resume Templates  Pricing  [Login] [Start now] |
|         (hidden < lg)                                     (gap: 8px)   |
|-------------------------------------------------------------------------
|  max-width: 1440px (centered)                                          |
|  height: 72px                                                          |
|  background: transparent (canvas shows through)                        |
|  position: sticky, top: 0, z-index: 100                                |

Hero Section

|-------------------------------------------------------------------------|
|                                                                         |
|  FREE ONLINE RESUME BUILDER                              |  [Resume     |
|                                                     Preview Card]       |
|  Build a job–winning                                 |  (with carousel |
|  resume for free                                      nav arrows)      |
|                                                                         |
|  Your first resume is 100% free forever.          |                   |
|  Unlimited downloads. No hidden fees.              |                   |
|  Yes, really 🚀                                   |                   |
|                                                                         |
|  [Get started for free ✨]                       |  [Testimonial      |
|                                                 |   Card floating]    |
|  [⚪][⚪][⚪][⚪][⚪]  Trusted by 5.3 million users |                    |
|                                                                         |
|  col-1 (57%)                            |  col-2 (42%)                |
|  padding-top: 80px                      |  padding-top: 24px         |
|-------------------------------------------------------------------------|

Resume Preview Card (Signature Component)

|-----------------------------------------------------------|
|  Brian T. Wayne           |  WORK EXPERIENCE              |
|  Business Development     |  ----------------             |
|  Consultant               |  Applied Inc                  |
|                           |  2023 – present / NewYork     |
|  [Avatar]                 |  • Bullet point text...       |
|                           |                               |
|  📧 brian@wayne.com        |  acmeus                       |
|  📱 +1 541-754-3010        |  2018 – 2023 / Los Angeles    |
|  📍 California, USA       |  • Bullet point text...       |
|  🔗 linkedin.com/...      |                               |
|  🌐 wayne.com             |  EDUCATION                    |
|                           |  ----------------             |
|  PROFILE                  |  Master of Business Admin...  |
|  ----------------         |  Harvard Business School      |
|  Body text in 12px...     |  2017 – 2018 / Boston         |
|                           |                               |
|  (sidebar bg: #2d2640)    |  (content bg: #ffffff)        |
|  (text: white)            |  (text: #200e32)              |
|  (width: ~35%)            |  (width: ~65%)                |
|-----------------------------------------------------------|
|  border-radius: 24px (all corners)                         |
|  shadow: resume-card (compound, elevated)                   |
|-----------------------------------------------------------|

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} or {colors.surface-soft} background | Nav bar, hero band background, footer | | 1 (Hairline) | {extensions.shadows.sm} — 0 1px 2px rgba(0,0,0,0.05) | Subtle lift on input fields, flat cards | | 2 (Soft) | {extensions.shadows.md} — compound 4px/2px dual-shadow | Dropdowns, standard cards, tooltip containers | | 3 (Raised) | {extensions.shadows.lg} — compound 10px/4px dual-shadow | Primary buttons, carousel nav arrows ({component.icon-button-circle}), elevated cards | | 4 (Floating) | {extensions.shadows.xl} — 30px/80px plum-tinted shadow | Special promotional elements, featured resume templates | | 5 (Theatrical) | {extensions.shadows.resume-card} — 8px/16px compound | Resume preview card (signature component) | | 6 (Spotlight) | {extensions.shadows.testimonial} — 42px/84px deep shadow | Highlighted testimonial cards, elements demanding maximum attention |

The elevation philosophy is layered realism with theatrical peaks. Most interfaces live at levels 0–3: flat canvas, hairline inputs, soft cards, raised buttons. But FlowCV introduces two exceptional depths: the resume preview card at level 5 (suggesting a physical document hovering above the page, with shadow spread that implies thickness) and testimonial cards at level 6 (spotlight elevation that says "read me"). The plum tint in level 4's shadow (rgba(43, 30, 67, 0.45)) is a sophisticated detail—shadows aren't neutral gray here; they carry the brand color, reinforcing the canvas's chromatic identity even in depth cues.

The system avoids color-block depth (no gradient washes behind sections, no colored bands). Elevation comes purely from shadow and background-value contrast (canvas vs. surface-soft vs. surface). This keeps the visual field clean despite the dark canvas, preventing the "muddy" feeling that can plague dark-themed designs with too many layered colors.

Decorative Depth

No gradient washes, no rainbow stripes, no photographic depth layers detected. The system's decorative depth comes entirely from the resume preview card's internal two-tone architecture (dark sidebar + light content area) and the emoji sprinkled into copy (🚀, ✨, 😎) which provide micro-bursts of color in an otherwise restrained palette.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 6px | Small internal elements, tag badges, subtle rounding | | {rounded.DEFAULT} | 8px | Default component radius (inputs, small cards) | | {rounded.md} | 12px | Platform badges ({component.platform-badge}), medium cards | | {rounded.lg} | 24px | Primary buttons ({component.button-primary}), resume card ({component.resume-preview-card}), testimonial cards, carousel nav buttons | | {rounded.xl} | 30px | Rare—reserved for special containers needing extra softness | | {rounded.pill} | 9999px | Outline/secondary buttons ({component.button-secondary}), avatar circles ({component.avatar-circle}), any fully-rounded element | | {rounded.full} | 9999px | Synonym for pill, used for avatars specifically |

Photography Geometry

User avatars appear as perfect circles ({component.avatar-circle} — 56px diameter, {rounded.full}). The resume preview includes a larger circular portrait (~120px estimated) within the sidebar, also perfectly round. No rectangular photography detected in the hero fold. The avatar stack uses horizontal overlap (likely -8px to -12px negative margin) to create the clustered effect seen in the "Trusted by 5.3 million users" row. All imagery that exists is treated as portrait-first, circular, and human-centric—reinforcing the product's focus on individual professionals.

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.icon-button-circle-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary call-to-action button with deep plum background ({colors.secondary}), white text ({colors.on-dark}), 24px corner radius ({rounded.lg}), and generous 14px×28px padding. Appears as "Start now" in the nav and "Get started for free ✨" in the hero. Uses {typography.button} (16px/500 weight). Hover variant ({component.button-primary-hover}) lightens the plum to #3d2d54. Shadow elevates to {extensions.shadows.lg} on interaction.

{component.button-primary-hover} — Active/hover state for {component.button-primary}. Background shifts 15% lighter toward a desaturated mauve. Maintains all other properties. Implement as :hover and :active pseudo-class.

{component.button-secondary} — Outline-style button with transparent background, white text ({colors.on-dark}), pill shape ({rounded.pill}), and 10px×24px padding. Used for "Login" in the nav. Features a subtle border (likely {colors.hairline} or {colors.on-dark} at reduced opacity). Hover variant ({component.button-secondary-hover}) adds 8% white overlay background.

{component.button-secondary-hover} — Active/hover state for {component.button-secondary}. Gains rgba(255, 255, 255, 0.08) background fill while retaining transparency-based identity. Border may intensify slightly.

{component.button-white} — Inverted primary variant with white background ({colors.primary}), black text ({colors.on-primary}), {rounded.lg} corners, and expanded 16px×32px padding. Designed for placement over imagery or dark areas where the standard plum button would lack contrast. Not visible in the current screenshot but inferred from the pattern language.

{component.button-white-hover} — Hover state for {component.button-white}. Background warms to {colors.primary-hover} (#f0ece7), a subtle taupe shift that maintains readability.

Cards & Containers

{component.resume-preview-card} — The signature component: a two-column resume mockup with white background ({colors.surface}), {rounded.lg} (24px) corners, and {extensions.shadows.resume-card} elevation. The left ~35% is the dark sidebar ({component.resume-sidebar}) in {colors.resume-sidebar} (#2d2640) with white text; the right ~65% is the content area ({component.resume-content}) in pure white with plum body text ({colors.body}). Contains realistic resume data (name, title, contact info, profile, work experience, education, skills) set in {typography.caption} (12px) with {typography.label-sm} (10px uppercase) section headers. Carousel navigation overlays via absolute-positioned {component.icon-button-circle} elements on left/right edges.

{component.resume-sidebar} — Left column of the resume card. Background {colors.resume-sidebar}, text {colors.surface} (white). Padding {spacing.xl} (32px) all sides. Contains candidate name in {typography.title-md} (24px/600), job title, circular avatar photo, contact info rows with icon prefixes (email, phone, location, LinkedIn, website), PROFILE section with body text, and LANGUAGES section with dot-based proficiency indicators. Rounded on left side only ({rounded.lg} 0 0 {rounded.lg}) to blend with parent card.

{component.resume-content} — Right column of the resume card. Background {colors.surface} (white), text {colors.body} (plum). Padding {spacing.xl} (32px) all sides. Contains WORK EXPERIENCE, EDUCATION, and SKILLS sections, each with {typography.label-sm} uppercase header followed by entry blocks (company/school name, date range/location, bullet points). Rounded on right side only (0 {rounded.lg} {rounded.lg} 0). Section headers likely have {colors.hairline} bottom borders.

{component.testimonial-card} — Floating quote card with white background, {rounded.lg} corners, {typography.body-sm} text, and {extensions.shadows.testimonial} (deep 42px/84px shadow) for maximum spotlight elevation. Contains reviewer name, title, star rating (using {component.rating-star} and {component.rating-star-empty}), quote text, and platform attribution badge ({component.platform-badge}). Positioned absolutely or via negative margin to overlap the resume preview card's edge, creating layered depth.

{component.testimonial-card-highlighted} — Variant of testimonial with {colors.ink} (black) text instead of {colors.body} (plum), suggesting higher emphasis or featured status. Same structural properties as base testimonial card.

Navigation

{component.top-nav} — Sticky header bar, 72px height, transparent background (canvas shows through), containing logo (left), navigation links (center, hidden below lg:), and button group (right: Login + Start now). Z-index 100 ensures it floats above all content. Padding: 16px horizontal, 10px vertical internally. Text uses {typography.body-sm} in {colors.on-dark} (white).

{component.nav-link} — Individual navigation item (Resume Builder, Resume Templates, Pricing, About). Transparent background, {colors.muted} text (gray), {typography.body-sm}, {rounded.sm} corners, 8px×16px padding. Default state is intentionally subdued.

{component.nav-link-active} — Active or hovered nav link state. Text color shifts to {colors.on-dark} (white), creating clear indication of current section or hover target. No background fill—color alone carries the state.

Inputs & Forms

No text inputs or form fields are visible in the hero fold screenshot. The product's input surfaces (resume editor fields) are presumably behind authentication and not extractable from this view. Recommend implementing {component.text-input} and {component.text-input-focus} based on the established tokens: {colors.surface-soft} background, {colors.hairline} border, {colors.body} text, {rounded.DEFAULT} radius, 44px height, with focus state using {colors.border-strong} border and optional focus-ring shadow.

Signature Components

{component.avatar-circle} — Circular user avatar, 56px diameter, {rounded.full}, {colors.surface-soft} background. Used in the "Trusted by 5.3 million users" row as a horizontal stack of 5 avatars with slight overlap. Contains photographic headshot cropped to circle.

{component.avatar-stack} — Container for the avatar group. Transparent background, {colors.muted} text for the adjacent "Trusted by 5.3 million users" label ({typography.body-sm}). Avatars are likely flex-aligned with -8px to -12px horizontal margin overlap.

{component.social-proof-text} — "Trusted by 5.3 million users" label. Transparent background, {colors.muted-soft} text color (light gray), {typography.body-sm}. Positioned inline-end of the avatar stack.

{component.icon-button-circle} — Square button (48px × 48px) with {rounded.lg} corners, {colors.surface} background, {colors.ink} icon color, {extensions.shadows.lg} elevation. Used for carousel left/right navigation arrows overlaid on the resume preview card. Absolutely positioned at vertical center (top: 1/2, -translate-y: 1/2), pinned to left and right edges with offset. Hover variant ({component.icon-button-circle-hover}) shifts background to {colors.surface-soft}.

{component.icon-button-circle-hover} — Hover state for carousel nav button. Background lightens to cream ({colors.surface-soft}), maintaining shadow and radius.

{component.rating-star} — Filled star icon in orange (#f97316, hardcoded—not in palette tokens). Used in testimonial card ratings. Size approximately 16–18px.

{component.rating-star-empty} — Empty/outlined star icon in {colors.hairline} (very light gray). Paired with filled stars to show partial ratings (e.g., 4/5 stars).

{component.platform-badge} — Small badge identifying the source platform (e.g., TikTok logo + text). {colors.surface} background, {colors.ink} text, {typography.label-sm} (10px/600), {rounded.md} (12px) corners, 8px×16px padding. Appears inside testimonial cards.

{component.hero-band} — Full-width hero section container. {colors.canvas} background (shows the plum), {colors.ink} text color for headline, {typography.display-xl} for primary heading. Padding: 80px top, {spacing.section} (48px) horizontal, 0 bottom (content determines bottom spacing).

{component.hero-overline} — "FREE ONLINE RESUME BUILDER" label above headline. Transparent background, {colors.muted} text, {typography.label-md} (12px/600, 0.05em tracking). Uppercase, positioned as eyebrow/overline.

{component.hero-headline} — "Build a job–winning resume for free" heading. Transparent background, {colors.ink} (pure black), {typography.display-xl} (80px/900/-3.5px tracking). The system's typographic centerpiece.

{component.hero-subhead} — Supporting paragraphs ("Your first resume is 100% free forever...", "Unlimited downloads...", "Yes, really 🚀"). Transparent background, {colors.muted} text, {typography.body-md} (16px/400). 16px top margin separates from headline. Line height 24px (1.5×) ensures readability.

{component.section-label} — Taxonomy label for content sections (appears in resume as "WORK EXPERIENCE", "EDUCATION", etc.). Transparent background, {colors.muted} text, {typography.label-sm} (10px/600/0.08em tracking). Always uppercase.

{component.section-heading} — Major section heading below the hero. Transparent background, {colors.on-dark} (white) text, {typography.display-lg} (48px/400/-2px tracking). Used for "Templates", "Features", etc. in lower page sections (inferred from pattern).

{component.footer} — Page footer (not visible in screenshot, inferred). {colors.canvas} background (seamless extension of page), {colors.muted-soft} text, {typography.caption} (12px), {spacing.section-xl} (64px) vertical padding. Likely contains links, legal text, and copyright.

Do's and Don'ts

Do

• Use {colors.ink} (#000000) exclusively for the hero headline ({typography.display-xl})—this is the only element permitted pure black, and it creates critical contrast against plum-toned body text.
• Apply {rounded.lg} (24px) to all primary buttons and the resume preview card—this is the "confident roundness" that defines the brand's friendly-professional voice.
• Set the canvas to {colors.canvas} (#200e32) and let it show through transparent nav/footer backgrounds—inverted light-mode is the signature aesthetic, don't fight it with white wrappers.
• Use {typography.label-sm} (10px/600/0.08em tracking, uppercase) for all resume-style section headers within cards—this establishes the document-microsystem's taxonomy voice.
• Apply {extensions.shadows.resume-card} (the 8px/16px compound shadow) specifically to the resume preview card—it's a signature depth treatment, not a generic card shadow.
• Maintain the 57/42 column split in the hero at desktop widths—the copy needs more real estate than the visual, and this ratio reflects editorial priority.
• Use {colors.body} (#200e32, plum) for body text on light surfaces rather than {colors.ink} or neutral grays—this keeps text harmonized with the brand canvas.
• Implement pill-shaped ({rounded.pill}) outline buttons for secondary actions (Login, Cancel) to create a visual dialect difference from primary {rounded.lg} filled buttons.
• Reserve {extensions.shadows.testimonial} (the deep 42px/84px shadow) for spotlight elements like highlighted testimonials—this is maximum elevation, use sparingly.
• Set emoji (🚀, ✨, 😎) inline with body text at native font size—they provide authorized color pops in an otherwise restrained palette.

Don't

• Don't substitute {colors.ink} (#000000) for {colors.body} (#200e32) in body copy—pure black is reserved for the 80px headline and will look harsh at smaller sizes.
• Don't use white as the canvas background—the entire visual system is built on the inverted dark-canvas premise and will lose its identity.
• Don't apply {typography.display-xl}'s 900 weight to any element smaller than 48px—the extreme weight needs scale to avoid looking clumsy.
• Don't add gradient backdrops or colored band backgrounds to sections—depth comes from shadow elevation and background-value contrast, not color layering.
• Don't expand the radius vocabulary beyond the defined tokens ({rounded.sm} through {rounded.pill})—introducing new radii breaks the systematic progression.
• Don't use {colors.primary} (white) as a text color on {colors.canvas} without ensuring the element is large enough (buttons, headlines)—white-on-plum fails WCAG for small text.
• Don't flatten the resume preview card's two-tone layout into a single background—the dark sidebar ({colors.resume-sidebar}) vs. light content (colors.surface}) split is a signature architectural detail.
• Don't apply letter-spacing tighter than -3.5px (the {typography.display-xl} value) to any text—more negative tracking will cause character collisions in DM Sans.
• Don't use the orange rating star color (#f97316) outside of star-rating components—it's a hardcoded semantic exception, not a general-purpose accent.
• Don't implement hover states as background-color changes for {component.button-secondary} (the outline button)—use the documented 8% white overlay (rgba(255, 255, 255, 0.08)) to maintain the transparent-button identity.

Motion & Animation

Transition Tokens

--transition-color: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                     background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                     border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                     text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                     fill 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                     stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-shadow: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-transform: transform 0.5s ease-in-out;
--transition-default: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

Keyframe Animations

• spinner — Loading state rotation animation, detected in the @keyframes extraction. Likely used for async operations (resume generation, PDF export) with a continuous 360° rotate transform.

Interaction Patterns

• Button hover lift: Primary and white buttons likely gain {extensions.shadows.lg} elevation on hover (inferred from shadow token presence), creating a subtle "rise" effect.
• Shadow transitions: Box-shadow animates over 300ms with the standard ease curve, meaning elevation changes (cards, buttons, dropdowns) feel smooth rather than snap-cut.
• Carousel slide: The resume preview card is part of a template carousel (left/right nav buttons detected). Slide transition uses transform 0.5s ease-in-out—a half-second duration that's deliberate and smooth, suggesting the carousel pans horizontally with momentum-like easing.
• Color state changes: All color transitions (background, text, border, fill, stroke) share the 300ms cubic-bezier(0.4, 0, 0.2, 1) timing, creating unified perceived responsiveness across hover/focus/active states.
• Focus rings: Buttons and interactive elements show focus-visible:outline-blue-600 in extracted classes—an accessible blue focus ring (though blue isn't in the defined palette, this may be a browser default or utility class artifact).
• Opacity hovers: Some buttons use hover:opacity-80 class, indicating a simple 80% opacity reduction on hover as an alternative or supplementary hover treatment.

The motion level is subtle—nothing auto-animates on scroll (no parallax, no fade-up reveals detected), interactions are response-focused (hover states, carousel navigation), and durations stay under 500ms except for the intentional carousel pan. This aligns with a productivity-tool brand voice: efficient, purposeful, not playful.

Imagery Style

• Photography: User avatars are professional headshots (or high-quality stock equivalents) cropped to perfect circles, showing shoulders-up portraits with neutral or warm expressions. Lighting is soft and even—these are LinkedIn-appropriate images.
• Product visualization: The resume preview card is a pixel-perfect UI mockup, not a photograph. It renders actual HTML/CSS (or SVG) to demonstrate the product output, making it a "live" preview rather than a static image.
• Illustration: None detected in the hero fold. The visual interest comes from the resume card's typographic complexity and the dark/light contrast architecture, not illustration.
• Emoji as imagery: Small color emojis (🚀 rocket, ✨ sparkles, 😎 smiling face with sunglasses) are embedded inline as text-level imagery, providing micro-bursts of color and personality without loading image assets.
• Platform logos: TikTok logo (and likely others) appear inside {component.platform-badge} components within testimonial cards—these are brand marks, not decorative imagery.
• Imagery role: Supportive, never dominant. The resume preview card is the sole visual "hero image," and it's a functional demonstration, not atmospheric stock photography. The brand trusts type and layout to carry aesthetic weight.
• Color treatment: Avatars appear in full color (no duotone, no grayscale, no overlay tints). They sit on {colors.surface-soft} (cream) circular backgrounds that complement skin tones.
• Aspect ratios: Avatars are 1:1 (circle). Resume card is roughly 3:4 or 4:5 (portrait orientation, mimicking A4/Letter proportions).

Icon System

• Library: Custom SVG icons (no detected dependency on Lucide, Heroicons, Material, or Bootstrap). Icons are likely inline SVGs or a custom sprite sheet.
• Specific icons observed:
  • Envelope (email) — in resume sidebar contact list
  • Phone — in resume sidebar contact list
  • Pin/location marker — in resume sidebar contact list
  • LinkedIn "in" branded icon — in resume sidebar
  • Globe/website icon — in resume sidebar
  • User/profile icon — in resume sidebar PROFILE section header
  • Briefcase or building — in WORK EXPERIENCE section header
  • Graduation cap or book — in EDUCATION section header
  • Lightbulb or gear — in SKILLS section header
  • Globe/languages — in LANGUAGES section header
  • Chevron left/right — carousel navigation buttons
  • Star (filled and empty) — testimonial ratings
  • FlowCV logo mark — abstract geometric "F" shape in pink/magenta gradient (header left)
• Treatment: Icons appear to be stroke-based (outlined) rather than filled, consistent with modern interface icon systems. Color is typically currentColor to inherit from parent text color. Size varies by context: 16px for inline contact icons, 20–24px for section headers, 24px for carousel navigation.
• Alignment: Inline icons sit baseline-aligned with accompanying text (email address, phone number) with approximately 8–12px gap (inferred from {spacing.sm}/{spacing.md} tokens). Section header icons precede the uppercase label with similar gap.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Remix — SSR/SSG for resume builder SEO needs
- Styling:        Tailwind CSS v3.4+ (detected tailwindLikely: true in framework analysis)
- Fonts:          Self-hosted DM Sans WOFF2 from /fonts/dmsans-*.woff2 (as currently served)
                   Fallback: Google Fonts @import for DM Sans if self-hosting unavailable
- Animation:      Tailwind transition utilities + custom CSS for carousel (0.5s ease-in-out)
                   Optional: Framer Motion for scroll-triggered reveals if adding post-hero sections
- Icons:          Custom SVG components (inline React components or SVG sprite)
                   Consider: Lucide React for any missing icons (visual style is compatible)
- Component lib:  Headless UI (Radix-style) for accessible dropdowns/disclosures if needed
                   Or: shadcn/ui primitives adapted to this design token system

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px (< md) | Single-column hero (headline above resume card), nav collapses to hamburger (links hidden), avatars stack vertically or truncate, CTA button full-width | | Tablet | 768px – 1023px (md) | 55/45 hero column split (tighter than desktop), nav still collapsed, resume card scales down | | Desktop | 1024px – 1279px (lg) | 57/42 hero split, nav links visible, sticky header with padding adjustment, full avatar stack | | Wide | ≥ 1280px (xl, 2xl+) | Max-width 1440px container centers with horizontal padding, comfortable whitespace margins |

Touch Targets

• {component.button-primary}: Height ~52px (14px padding × 2 + 24px text + border), width varies—exceeds 44×44px WCAG AAA minimum comfortably.
• {component.button-secondary}: Height ~40px (10px padding × 2 + 20px text), width ~140px+—exceeds 44px height minimum.
• {component.icon-button-circle}: 48px × 48px exactly—meets AAA, ideal for thumb tap targets.
• {component.avatar-circle}: 56px diameter—exceeds minimum, easy to tap if interactive.
• Nav links: Estimated 40px+ height with 8px×16px padding—may need increased vertical padding for mobile touch (recommend 12px×20px min).

Collapsing Strategy

• Navigation: Below lg: (1024px), the center nav links (Resume Builder, Resume Templates, Pricing, About) are hidden via hidden lg:flex. Replace with a hamburger menu or bottom-sheet drawer on mobile. Logo and button group (Login, Start now) remain visible.
• Hero columns: At md: (768px), the grid switches from grid-cols-[57%_42%] to grid-cols-[55%_45%] (slightly tighter). Below md:, it becomes grid-cols-1 (single column), with the resume preview card stacking below the headline/CTA block.
• Resume preview card: On mobile, the card likely constrains to full viewport width minus horizontal padding, maintaining its internal two-column (sidebar + content) layout but scaled down. Font sizes within the card may reduce further below 12px (risking legibility—consider 11px minimum for mobile resume text).
• Avatar stack: On narrow viewports, the 5-avatar cluster may show only 3–4 avatars with a "+N" overflow indicator, or reduce avatar size from 56px to 40–44px.
• CTA button: "Get started for free" button expands to full-width on mobile (common pattern for primary CTAs below md:).
• Sticky header: Remains sticky at all breakpoints (position: sticky, top: 0, z-index: 100), but horizontal padding increases on wider screens (lg:px-2 lg:pt-4 xl:px-6 pattern detected).

Image Behavior

• Resume preview card: Scales proportionally with container width. At mobile, the card's internal 35/65 sidebar-to-content ratio likely maintains (it's a fundamental layout, not a responsive breakpoint). The card's {rounded.lg} (24px) corners and {extensions.shadows.resume-card} shadow persist at all sizes.
• Avatars: Circular crop maintained at all sizes. Diameter may reduce from 56px → 44px on mobile. Overlap amount (negative margin) should scale proportionally or reduce to prevent excessive overlap on narrow screens.
• Testimonial cards: On mobile, these likely stack below the resume card (no longer absolutely positioned to overlap) and take full width minus padding. Shadow remains but may reduce from {extensions.shadows.testimonial} to {extensions.shadows.lg} for subtlety on small screens.

Iteration Guide

1. Initialize with the exact token set from the YAML frontmatter. Every color, font size, radius, spacing value, and shadow definition must come from a {section.token} reference—never hard-code a magic number that has a token equivalent.

2. Build the canvas first. Set body background to {colors.canvas} (#200e32) and verify the dark-plum base renders correctly. All subsequent components build upward from this foundation.

3. Implement the sticky nav ({component.top-nav}) as the first component. It establishes the 1440px max-width container pattern, the transparent-background-on-canvas technique, and the logo-left / utilities-right layout that repeats nowhere else in the page.

4. Construct the hero band ({component.hero-band}) with its 80px top padding and asymmetric 57/42 grid. Place the overline → headline → subhead → CTA → social-proof stack in column 1. This is the highest-leverage section for brand impression.

5. Build the resume preview card ({component.resume-preview-card}) as the signature component. Implement its internal two-column architecture ({component.resume-sidebar} + {component.resume-content}) with the exact radius asymmetry (left-rounded-only / right-rounded-only) and {extensions.shadows.resume-card} elevation. Populate with realistic content to match the screenshot's information density.

6. Add carousel navigation ({component.icon-button-circle}) as absolute-positioned overlays on the resume card. Implement the transform 0.5s ease-in-out transition for horizontal panning between resume templates.

7. Layer in social proof (testimonial card + avatar stack + trusted-by text) using the elevation hierarchy: testimonial gets {extensions.shadows.testimonial} (deepest), avatars get no shadow (flat on canvas), text is transparent-background.

8. Implement state variants (-hover, -active, -focus) for all interactive components using the separate frontmatter entries. The screenshot captures default states only—your implementation must supply the transitions defined in the Motion section.

9. Run the linter after any token additions or modifications: npx @google/design.md lint DESIGN.md. Watch for broken-ref (token paths that don't resolve), contrast-ratio (accessibility failures), and orphaned-tokens (defined but unused tokens).

10. When extending the system (adding Pricing, Templates, or About sections), decide whether each new component belongs to the main editorial dialect (canvas background, white surfaces) or the resume-document dialect (two-tone card, 12px typography, uppercase labels). Don't mix dialects arbitrarily—their separation is intentional.

Font Setup

For local development without access to FlowCV's self-hosted /fonts/ directory, add this to your global CSS or layout file:

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  --font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif, 
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

This loads the full DM Sans weight range (100–1000) from Google Fonts, matching the self-hosted @font-face declarations. The CSS variable --font-family can then be referenced throughout your component library as font-family: var(--font-family).

Known Gaps

• Hover state styling: Per the no-hover policy, all -hover component variants are inferred from the transition token system and conventional UI patterns, not directly observed. The actual site may use opacity shifts, transforms, or color treatments not captured here.
• Loading/pending states: The detected spinner keyframe animation implies async operations (PDF generation, AI suggestions), but no skeleton loaders, progress bars, or disabled-button patterns were visible in the static screenshot.
• Form validation states: Beyond text-input-focus, no error ({colors.error}), success ({colors.success}), or warning ({colors.warning}) input states were observable. The resume editor's form validation language is unknown.
• Authenticated/post-login surfaces: The dashboard, resume editor interface, template gallery, pricing page, and account settings are all behind authentication and not represented in this landing-page-focused extraction.
• Dark mode toggle: The site uses a dark canvas as its default light-mode aesthetic. It's unclear whether a true "light mode" (white canvas, dark text) variant exists, or if the inverted scheme is the only offering.
• Mobile navigation pattern: The hamburger menu, slide-out drawer, or bottom-sheet implementation for < 1024px viewports is not visible in the desktop-first screenshot. Interaction pattern (tap vs. swipe) is unknown.
• Carousel mechanics: The resume template carousel's auto-play behavior, pagination dots, infinite-loop logic, and touch-swipe support are inferred from the presence of nav buttons but not directly observable.
• Accessibility annotations: While focus-visible:outline-blue-600 was detected in button classes, full screen-reader labeling, ARIA structures, and keyboard navigation patterns cannot be assessed from CSS alone.
• Pixel-exact surface colors: {colors.surface-strong} (#e8e1da) and {colors.resume-sidebar} (#2d2640) were sampled from the CSS color frequency data and visual inspection; minor variations (±1-2 hex values) may exist in the live site due to compression or theming.
• Blue focus ring anomaly: The outline-blue-600 focus class uses a blue not present in the defined color palette. This may be a Tailwind default utility leaking into the production classes, or an intentional accessibility override not captured in the brand palette.