Why does Genesis use weight 400 for its 60px display headline instead of bold?

Genesis's bespoke heading typeface is called genesis-head-office-light, and the 'light' is intentional — the entire heading tier runs at weight 400, from 20px sub-headings to 60px hero display. The rationale is restraint as a luxury signal. Many automotive brands communicate authority through heavy weight — BMW, Land Rover, and Audi all run their display headings at 700. Genesis, positioning as a newer Korean luxury challenger to established European heritage brands, uses typographic understatement to differentiate. At 60px, weight 400 with -1.5px letter-spacing creates a controlled airy authority that weight 700 would collapse into conventional automotive advertising. The same principle applies through the heading ladder: the 42px h2 and 26px sub-heading both run at weight 400, making weight itself a non-variable in the system — all differentiation comes through size and spacing, not weight.

What are Genesis's two typefaces and what are open-source substitutes?

Genesis's marketing site runs two proprietary bespoke families. genesis-head-office-light handles every heading surface from 20px to 60px, always at weight 400, with negative letter-spacing from -0.45px (20px) to -1.5px (60px). genesis-text-office handles all body, label, navigation, and caption surfaces at 14–18px, weight 400. A third variant, genesis-Head-office (note capitalization difference), appears at small sizes (15–18px) for section-title contexts. The closest open-source substitutes: for genesis-head-office-light, try Cormorant Garamond Light or Playfair Display at weight 300 — both have comparable airy quality and tight negative tracking transfers well. For genesis-text-office, Inter or Source Sans Pro at weight 400 match the texture at 14–16px. The strict family split (headings never in genesis-text-office, body never in genesis-head-office-light) is a design system rule, not just a convention — enforce it with separate CSS classes or Tailwind font-family utilities.

What role does Genesis's amber accent color play in the system?

The amber #ff6b00 is the rarest structural accent in any brand captured in this directory. It appears 4 times in the full-page extraction — 2 as text, 2 as border — and never as a background fill. At this frequency it functions as a system reserve rather than a visible presence: a reader scanning the page will not consciously register it as a 'Genesis orange.' The contexts appear to be very small link accents or active-state indicators, not headline CTAs or product-image overlays. This restraint is consistent with how premium Korean brands handle accent color — Hyundai's N performance line uses its own vivid palette in isolation, while the parent luxury brand keeps its accent at minimum visibility. Using #ff6b00 as a button fill or hover state on this system would be an overextension; it is a touch-of-warmth token, not a voltage token.

How does Genesis alternate between dark and light canvas bands on its homepage?

The Genesis homepage uses two distinct canvas tones in alternating sections. Hero modules and feature-film sections use a near-black (#111111) background with white text — the cinematic dark mode for vehicle photography. Model-grid sections and editorial feature rows use a pure white (#ffffff) background with near-black ink (#000000) text. The alternation is not random: dark bands present vehicles in atmospheric photography, while white bands present model specifications, comparison grids, and 'Related Contents' editorial. The #111111 is a very dark neutral, significantly softer than a true RGB black, giving dark sections a warmer floor that vehicle photography can sit against without pure-black crushing the shadow detail. The white sections use pure #ffffff — the contrast with near-black text gives these informational panels a clinical precision that differentiates them from the atmospheric hero sections.

How does Genesis's design system compare to European luxury auto brands?

Genesis presents a Korean minimalism that takes European luxury typographic restraint further than the European brands themselves. Where Jaguar uses zero-radius forms and photographic color but still boldens its display font to weight 600–700, Genesis runs weight 400 at every heading tier including 60px display. Where Land Rover uses a proprietary bold display at 38px / 700, Genesis's 60px headline is explicitly named 'light.' The color palette is even more stripped-down: Genesis has a 12-token palette with only one non-monochrome accent (#ff6b00) at 4 total page occurrences, compared to Jaguar's photographic-blue backdrop or Land Rover's canvas hue differentiation. The one area where Genesis is structurally richer is canvas rhythm — the dark-light alternation on the full homepage creates a more film-trailer visual pace than either JLR brand's austere single-surface market selector. The winged emblem logo does the heavy lifting of aspirational luxury signaling, freeing the type system to operate with exceptional restraint.

Genesis Design System

Genesis (Hyundai's luxury arm) design system as a DESIGN.md file.

About Genesis DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source genesis.com

Automotive

Genesis does something no other luxury automotive brand on the web commits to fully: its display headline at 60px runs at weight 400. Not 700, not 600, not even 500. The genesis-head-office-light family is doing exactly what its name says — heading-light — and the result is a page that reads as more editorial magazine than automotive catalog. BMW's homepage runs its display at weight 700. Land Rover's bold custom font runs at 700. Genesis holds weight 400 at 60px and lets negative letter-spacing (-1.5px) do the work of mass.

The DESIGN.md file packages this system for React tooling. Inside: a 12-token color palette that is almost entirely black and white — near-black at #111111 for hero-section surfaces, pure white (#ffffff) for model-grid sections, silver-gray (#bbbbbb) for UI lines and secondary text, and a single amber accent (#ff6b00) appearing just 4 times across the entire page. Two bespoke type families — genesis-head-office-light for the heading tier (headings from 20px to 60px, always at weight 400) and genesis-text-office for body (14–18px at weight 400). All rectangular surfaces use 0px radius; pagination dots and icon buttons use 100% or 50% radius for fully circular shapes. No middle radius tier exists.

Feed this file to Claude or Cursor and it reproduces Genesis's specific choices: dual bespoke families with strict role separation, 60px display at weight 400 with tight negative tracking, alternating near-black and white canvas bands rather than a single-tone page, and an amber accent so scarce it functions more as a system reserve than a visible presence. The typographic restraint — especially the weight-400 choice at large display sizes — is the one move worth studying closely: it communicates that the brand has enough confidence in its letterforms to let them stand without the mass that weight boost provides.

What makes it distinct

Weight-400 at 60px displaygenesis-head-office-light renders the hero at 60px with no weight boost, lighter than Jaguar, Land Rover, or any other automotive brand captured here
Two bespoke familiesgenesis-head-office-light for all headings, genesis-text-office for all body; the split is strict with no cross-usage
Canvas alternationhero and feature modules use near-black (#111111), while model grids and editorial sections use pure white (#ffffff)
Amber at minimum frequency#ff6b00 appears only 4 times in the page, all as text or border, never as a fill — the rarest accent of any brand here
Binary radiuseither 0px on all rectangular surfaces or 100% / 50% fully circular on pagination and icon elements

Live at genesis.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

genesis.com

Explore Genesis

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Genesis design system FAQ

Common questions about Genesis's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Genesis — official site

Genesis's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.