Genesis Design System

Overview

Genesis's homepage is a lesson in typographic confidence without weight. Light as Authority. The hero heading renders genesis-head-office-light at 60px in weight 400 — no bold, no semibold, no typographic mass beyond the 60px size itself, with -1.5px negative tracking pulling the letterforms together. Where BMW runs its display at 700, Land Rover at 700, and Jaguar at 600, Genesis holds at 400 and lets the custom letterform geometry carry the identity. The approach resembles editorial fashion typography more than automotive advertising.

The page alternates between near-black cinema sections ({colors.surface-1} — #111111) for atmospheric vehicle photography and pure white editorial sections ({colors.canvas-light} — #ffffff) for model specifications and comparison. Two bespoke families — genesis-head-office-light for headings, genesis-text-office for body — divide the page with strict role separation: a heading never appears in the text family and vice versa. A single amber accent ({colors.accent} — #ff6b00) appears just 4 times across the entire page, functioning as a system reserve rather than a visible brand voltage.

Key Characteristics:

• Weight-400 display at 60px — {typography.display-xl} at genesis-head-office-light weight 400, the lightest display weight of any luxury automotive brand captured here.
• Two bespoke families with strict role separation — headings always in genesis-head-office-light, body always in genesis-text-office, zero cross-usage.
• Dark-light alternation — near-black {colors.surface-1} (#111111) for hero/cinema sections, pure white {colors.canvas-light} for grid/editorial sections.
• Amber accent ({colors.accent} — #ff6b00) at 4 total occurrences, lowest of any accent color in the directory — a touch of warmth, not a voltage.
• Binary radius — either {rounded.none} 0px on rectangular surfaces or {rounded.full} / {rounded.circle} on pagination dots and icon buttons.
• Silver-gray {colors.ink-secondary} (#bbbbbb) for secondary UI lines and borders — a three-step text ladder (white → silver → dark) rather than a two-step.
• Negative letter-spacing across the entire heading ladder (-0.45px at 18px through -1.5px at 60px) — the typographic substitute for weight as the primary differentiation tool.

Colors

Surface

• Canvas ({colors.canvas} — #000000): frequency 624. Used as text (314), border (310). The dominant ink color used on white sections — pure black text on white backgrounds throughout the model-grid and editorial bands.
• Surface-1 ({colors.surface-1} — #111111): frequency 105. Used as background (67), text (19), border (19). The near-black canvas for dark cinema sections — hero, feature-film panels, footer. Warmer than pure black, allowing vehicle photography to register shadow detail.
• Surface-2 ({colors.surface-2} — #1a1a1a): frequency 2. Background only — a slightly lighter near-black for inset panel surfaces within dark sections.
• Surface-Dark ({colors.surface-dark} — #262626): frequency 6. Used as text (3), border (3). A dark gray appearing on mid-section text elements in dark contexts.
• Surface-3 ({colors.surface-3} — #333333): frequency 1. Background only — a mid-dark surface in specific panel contexts.

Text

• Ink ({colors.ink} — #ffffff): frequency 864. Used as text (431), border (407), background (26). The dominant text color on dark sections and the system's white border tone. Pure white at maximum frequency — the system leans entirely on it for all dark-surface text.
• Ink Muted ({colors.ink-muted} — #cccccc): frequency 24. Used as text (12), border (12). The body paragraph tone on dark sections — a mid-silver that reduces contrast slightly from the full-white heading tier.
• Ink Secondary ({colors.ink-secondary} — #bbbbbb): frequency 110. Used as text (55), border (55). The UI divider and secondary label color — a slightly darker silver than the muted body text, carrying the majority of horizontal rule work.

Hairline

• Hairline ({colors.hairline} — #000000): frequency high, as border. On white sections, pure black borders carry card outlines and dividers.
• Hairline Light ({colors.hairline-light} — #cccccc): same hex as ink-muted — also appears as border on light sections. The pagination inactive dot color.
• Hairline Mid ({colors.hairline-mid} — #4d4d4d): frequency 1 as border. An intermediate rule tone.

Accent

• Accent ({colors.accent} — #ff6b00): frequency 4. Used as text (2), border (2). An amber-orange that appears at minimum frequency — link hover or active-state indicator in specific navigation contexts. Never as a background fill. The rarest accent in the directory.

Typography

Font Families

The system runs two bespoke families in strict division: genesis-head-office-light (also appearing as genesis-head-office-light and genesis-Head-office for a regular-weight variant) for all headings from 18px to 60px, and genesis-text-office for all body, navigation, label, and caption surfaces. A third variant genesis-Head-office (note the mixed capitalization) appears at 15–18px for section-title contexts that fall between heading and body.

The strict family split is the most disciplined typographic separation in the automotive category captured here. No genesis-text-office appears at display size; no genesis-head-office-light appears in navigation or body paragraphs. The families have entirely separate roles.

Hierarchy

Principles

The entire type system runs at weight 400 — across every heading size from 18px to 60px, every body size from 14px to 18px, and every label. Weight variation does not exist in this system as a hierarchy signal; only size and letter-spacing carry hierarchy. The negative letter-spacing ladder is crucial: -1.5px at 60px (approximately -0.025em), tightening progressively down to -0.45px at 18px. This tightening is what makes the display headings feel authoritative at weight 400 — the letterforms are held together by tracking, not by stroke width.

Note on Font Substitutes

genesis-head-office-light is proprietary. The closest open-source substitute at display sizes is Cormorant Garamond Light (weight 300) or Libre Baskerville with reduced weight — though these are serifs. For a sans-serif substitute closer in construction, Lexend at weight 300 with -0.04em tracking applied at display sizes approximates the airy character. For genesis-text-office, Inter weight 400 is the closest general substitute; apply letter-spacing: normal explicitly as the system uses no tracking on body text.

Layout

Spacing System

• Base module: 16px (appears as the recurring dominant gap value at 10 occurrences).
• Tokens: {spacing.xs} 1px · {spacing.sm} 4px · {spacing.md} 16px · {spacing.lg} 20px · {spacing.xl} 21px · {spacing.2xl} 40px · {spacing.3xl} 100px.
• Horizontal page padding: 40px on both left and right edges — consistent across nav, hero, model grid, and footer.
• Card internal padding: 29px 20px 39px — asymmetric vertical (29px top, 39px bottom) creating a weighted rhythm in model-card rows.
• Hero text offset: approximately 112px top padding before hero text begins, placing the heading in the lower third of a full-bleed image.

Grid & Container

• Full-bleed hero: the vehicle photography fills 100vw with text overlaid at the left.
• Model grid: 3-column grid on desktop, each card containing a silhouette image, model name (heading-sm), pricing, and two CTA buttons.
• Feature panels: full-width alternating dark-light bands with a 2-column text-plus-image layout inside.
• "Related Contents" grid: 3-column media card grid on white canvas with model photography thumbnails.

Rhythm

The page alternates deliberately between dark cinema bands and light editorial bands. The opening hero is dark; the model grid is white; the feature film section is dark; the editorial "Related Contents" section is white; the footer is dark. No two adjacent bands share the same canvas tone. This alternation is the page's structural device — it creates a rhythm of mood shifts rather than a uniform editorial descent.

Elevation

The system carries a minimal shadow stance. The dark sections use tonal contrast alone to lift UI elements — a near-black card on a near-black surface reads as a distinct layer through its border, not through shadow. On white sections, cards use pure black hairline borders ({colors.hairline} — #000000) with no shadow. Pagination controls float with no elevation treatment. The only shadow-adjacent element is the full-screen swiper's navigation button.

Shapes

The radius philosophy is binary:

• {rounded.none} 0px — all rectangular surfaces: buttons, cards, model cards, inputs, form containers.
• {rounded.full} 100% and {rounded.circle} 50% — pagination dots and circular icon buttons (the swiper navigation arrows).
• {rounded.sm} 5px — appears once on the text input component; the only soft-radius element in the system.

No medium radius tier exists. The system skips the 4–16px range entirely and moves from zero to full circle. Rectangular elements are absolutely sharp; circular elements are absolutely round.

Components

button-primary — White {colors.ink} fill (on dark sections), near-black text, genesis-text-office 16px / weight 400, 0px radius, 16px 20px padding. On white sections, the fill inverts to near-black.

button-secondary — Transparent fill, white or black text depending on section canvas, hairline border, 0px radius, same dimensions.

top-nav — Near-black {colors.surface-1} surface, white text, genesis-text-office 14px / weight 400, 73px height, 40px horizontal padding. Houses the winged emblem logo, model navigation links, and utility links.

nav-link — Transparent, white text, genesis-text-office 14px / weight 400, 0px 15px 0px 0px padding.

hero-heading — White text, genesis-head-office-light 60px / weight 400 / -1.5px letter-spacing. The vehicle name headline sitting over full-bleed photography.

body-paragraph — Silver {colors.ink-muted} (#cccccc) text on dark sections, genesis-text-office 14px / weight 400. The descriptive paragraph beneath headings.

card — Near-black {colors.surface-1} fill, white text, genesis-text-office 14px, 0px radius, 29px 20px 39px padding, pure black border.

card-light — Pure white fill, near-black text, same genesis-text-office, 0px radius, same padding, pure black border.

model-card — Pure white canvas, near-black text, vehicle silhouette image, heading-sm (20px) model name, pricing, two buttons. The model-grid row element.

section-heading — Near-black text on white, genesis-head-office-light 26px / weight 400 / -0.65px tracking. "OUR MODELS," "RELATED CONTENTS," and similar section headers on white bands.

feature-panel — Near-black fill, white text, full-width atmospheric film panel with text block at right or left.

pagination-dot — Silver {colors.hairline-light} fill, fully circular at {rounded.full} 100%, 4px 1px padding. The inactive carousel position indicator.

pagination-dot-active — White {colors.ink} fill, same circular treatment. Active carousel position.

text-input — White fill, near-black text, genesis-text-office 16px, {rounded.sm} 5px radius, 16px padding, silver hairline border. The only element in the system with a non-zero rectangular radius.

swiper-nav — Transparent fill, white arrow, fully circular {rounded.circle} 50%, 6px padding. The slide-left / slide-right carousel button.

footer — Near-black {colors.surface-1} fill, silver {colors.ink-muted} text, genesis-text-office 14px, 40px horizontal padding. Multi-column link array with the winged emblem.

Do's and Don'ts

Do run all heading surfaces at weight 400. The system has no weight variation — every tier from 18px section titles to 60px display headings uses genesis-head-office-light at 400. Bumping the hero to 600 or 700 would immediately convert the editorial gesture into conventional automotive advertising.

Do apply negative letter-spacing across the full heading ladder. At 60px, -1.5px (approximately -0.025em) is what holds the weight-400 display together visually. At smaller heading sizes, scale the tracking proportionally down to -0.45px at 18px. Without tracking, the weight-400 setting reads as an oversight rather than a choice.

Do keep {colors.accent} (#ff6b00) at maximum 4–5 occurrences per page. The amber orange is a system reserve, not a voltage. Appearing on more than 5 elements per page — especially as a fill — would convert it from a distinguishing touch into a competing chromatic voice.

Do alternate dark and white canvas bands with no two adjacent sections sharing the same tone. The rhythm — dark hero, white grid, dark feature, white editorial — is the page's structural identity. Breaking the alternation by running two white or two dark sections consecutively collapses the cinematic quality.

Don't use genesis-text-office at display heading sizes. The family split is strict: headings are always genesis-head-office-light, body is always genesis-text-office. Mixing the two at overlapping sizes destroys the typographic logic that makes the system readable without weight contrast.

Don't introduce a medium border-radius (4–16px) on card or button surfaces. The system is binary — 0px or full circle. Adding 8px to card corners would import a standard SaaS card aesthetic into a system whose severity is part of the brand statement.

Don't render the amber accent ({colors.accent} — #ff6b00) as a button fill or hero highlight. It appears 4 times in the full page at text and border usage only. Using it as a 44px button fill or as a section heading color would overweight it by approximately 10×.

Don't reduce the hero's 40px horizontal page padding. The system maintains a consistent 40px left-right inset on both the navigation and the hero copy block — collapsing this to 20px or 16px would remove the generous breathing room that signals luxury over efficiency.

Known Gaps

• Dark-mode completeness: the system uses two canvas tones (near-black and pure white) in alternation, but there is no documented light-mode-only variant — the captured page mixes both within the same layout.
• Configurator and spec surfaces: the captured homepage does not include the Genesis vehicle configurator, where color swatches, trim selectors, and 360° viewer components would require additional tokens.
• Form input error and success states: {component.text-input} captures the resting state only; validation, error, and focus states are not represented.
• Hover states: no hover or active state transitions are visible in the static extraction. CSS transitions likely exist given the page's swiper and animated scroll behaviors.
• Animation system: the homepage is heavily animated (hero carousel, scroll-triggered reveals, parallax on vehicle photography) but no easing, duration, or stagger values are captured in the static CSS extraction.
• Dealer-locator and account surfaces: the /en/worldwide/dealer-locator and account-management pages carry additional form and map components not present in the marketing homepage.
• Winged-emblem logo in dark context: the emblem SVG colors in dark vs. light section contexts are not captured as distinct tokens.