--- version: alpha name: "Domino's" website: "https://www.dominos.com" description: >- A global pizza-delivery brand whose captured international landing page strips the system down to its most essential moves — a steel-blue (#10789f) header carrying the Domino's domino-tile logo and an all-caps "DISCOVER THE WORLD OF DOMINO'S" banner, One Dot Condensed Bold for every heading tier at uppercase lock, and Arial as the workhorse body typeface doing 98 of every 100 interactive-text occurrences; the palette is near-monochrome dark gray (#333333) text on white ground, with the steel-blue and a single red CTA (#e3193b) as the only chromatic moments in the captured surface. seo: title: "Domino's Design System for React — steel blue, One Dot Condensed, 13 components" metaDescription: "Domino's international marketing design as a DESIGN.md file. Steel blue #10789f header, One Dot Condensed Bold all-caps headings, Arial body, near-monochrome dark-gray palette, 9 colors, 13 components. For React and AI tools." highlights: - "One Dot Condensed Bold all-caps — the custom brand typeface locks every heading in uppercase condensed, regardless of size, creating a uniform announcement register" - "Steel blue as structural brand voltage — #10789f carries the header bar fill and every h3 heading color on the international page; the brand red appears only once as a CTA fill" - "Near-monochrome workhorse — 98 of 98 nav-link and body text instances run in Arial at 13.2px; the brand typeface is reserved for headings only" - "Almost no radius — a single 3px chip radius is the only rounding in the captured surface; every card, input, and container is square-cornered" - "Graphite-heavy palette — #333333 (dark gray) and #858585 (medium gray) account for 459 of 462 total color occurrences; the system reads as graphite-and-steel" tags: - "Food & Delivery" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Domino's international landing page is so disciplined in its restraint that describing it almost requires listing what is not there. No gradient. No photography. No shadow. No radius beyond a single 3px chip. The page is a functional directory: five geographic regions, each in a white card, region names in One Dot Condensed Bold uppercase steel-blue, and country names in plain Arial at 13.2px weight 400 beneath them. The header is a flat steel-blue bar with the domino-tile logo and a centered all-caps banner headline. That is the entire visual vocabulary above the unsubscribe form at the bottom. Where Pizza Hut and Papa Johns run photography-led heroes with gradient CTAs, Domino's international surface is closer to a government directory than a consumer marketing page. The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 9 color tokens drawn from a near-monochrome palette of dark graphite (#333333), medium gray (#858585), white, steel-blue (#10789f), and a single brand red (#e3193b) appearing once as an "UNSUBSCRIBE" button fill. Six typography tokens span One Dot Condensed Bold (at 17–26px uppercase for headings) and Arial (at 12–13.2px for all body, labels, and interactive text). One radius token at 3px — the minimum in the scale. Ten spacing tokens from 1px to 30px. Thirteen component definitions covering the steel-blue header bar, all-uppercase region headers, white country-list cards, the minimal text input, and the single red CTA button. Feed this file to Claude or Cursor and it will reproduce Domino's exact moves on this surface: flat steel-blue header with centered uppercase display, white square-corner cards holding two-column country link grids in Arial 13.2px, and a near-zero radius language that signals function over form. The system is worth studying as a case study in typographic hierarchy without chromatic hierarchy — all the differentiation between region title, country link, and global header comes from typeface, case, and size rather than from color diversity. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.dominos.com" title: "Domino's — official site" description: "Domino's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Domino's primary brand color?" answer: "Domino's captured international marketing surface runs two chromatic colors: steel blue (#10789f) and brand red (#e3193b). The steel blue is the structural voltage — it fills the global header bar, colors every h3 region heading, and carries the h2 banner headline background, accounting for 14 total occurrences across text (6), background (2), and border (6) roles. The brand red (#e3193b) appears exactly once, as the fill of the 'UNSUBSCRIBE' CTA button. The classic Domino's red-and-blue tile logo is present in the header but the brand's CSS exposes no red token beyond the single CTA instance. On this particular surface, steel blue is the more prevalent brand signal." - id: "typography" title: "What typefaces does Domino's use, and what are good substitutes?" answer: "Domino's runs two typefaces on the international landing page: One Dot Condensed Bold for all heading tiers (h2 and h3, always uppercase, at 17–26px) and Arial for every body, link, label, and nav-text instance (at 12–13.2px). One Dot Condensed Bold is a proprietary brand typeface; the closest open-source substitute for the all-caps condensed heading role is Bebas Neue or Barlow Condensed Bold at similar sizes. Arial is a system font available universally — no substitution needed. The split between the custom condensed headline face and the system body face means the brand typeface only appears at heading scale; a reader interacting with nav links and country names sees exclusively Arial." - id: "canvas-and-surface" title: "What colors make up Domino's background and surface system?" answer: "Domino's international page runs three surface tones: pure white (#ffffff) for all card backgrounds and the main page canvas, a light gray (#eeeeee) for one section fill, and a pale gray (#d9d9d9) used once as a divider or shadow element. The dominant non-white surface is not a tinted off-white or a warm neutral — it is flat #eeeeee, a purely neutral cool gray. Cards holding the country lists sit on pure white with a very faint 1px gray border rendered by #858585 at low opacity or #d9d9d9. The system has no warm or tinted surface; every canvas is either pure white or neutral cool gray." - id: "border-radius" title: "What corner-radius philosophy does Domino's use?" answer: "Domino's international surface uses almost no corner radius. The single captured radius value is 3px, appearing once on a chip-style UI element. Every card container, the header bar, the region panels, and the email input field all render with zero border-radius — perfectly square corners. This near-zero radius language is the most industrial of any fast-food brand in the design directory; even utilitarian brands like McDonald's and Subway use 4–8px standard rounding on cards. The 3px token exists as a minimum-rounding concession for small chips but is not applied broadly." - id: "use-in-project" title: "Can I use this DESIGN.md to build an international or multi-region landing page?" answer: "Yes — feed this file to Claude or an AI coding tool and it will reproduce Domino's exact moves on this surface. Key patterns: steel-blue (#10789f) flat header bar with centered One Dot Condensed Bold uppercase headline, white square-corner cards for regional content groups, One Dot Condensed Bold at 26px for region h3 titles, Arial at 13.2px for all country-list links, and near-zero corner radius throughout. The palette is also instructive for international pages where photography would add localization complexity — a graphite-and-steel near-monochrome lets geographic data cards read without chromatic noise. One caveat: One Dot Condensed Bold is proprietary; substitute Bebas Neue or Barlow Condensed Bold for open-source implementations." mockups: - "marketing-hero" - "media-grid" colors: primary: "#10789f" brand-red: "#e3193b" ink: "#333333" ink-muted: "#858585" ink-light: "#767676" canvas: "#ffffff" surface-1: "#eeeeee" hairline: "#d9d9d9" ink-black: "#000000" typography: display-lg: fontFamily: "\"One Dot Condensed Bold\", \"Arial Narrow\", Arial, Helvetica, sans-serif" fontSize: 26px fontWeight: 700 lineHeight: 30px letterSpacing: 0 display-md: fontFamily: "\"One Dot Condensed Bold\", \"Arial Narrow\", Arial, Helvetica, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 58px letterSpacing: 0 heading-sm: fontFamily: "\"One Dot Condensed Bold\", \"Arial Narrow\", Arial, Helvetica, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 22px letterSpacing: 0 button-sm: fontFamily: "\"One Dot Condensed Bold\", \"Arial Narrow\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 body-md: fontFamily: "Arial, Helvetica, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 17px letterSpacing: 0 caption: fontFamily: "Arial, Helvetica, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 12px letterSpacing: 0 rounded: none: "0px" xs: "3px" spacing: xxs: "1px" xs: "2px" sm: "6px" md: "8px" base: "12px" lg: "15px" xl: "22px" 2xl: "30px" components: button-primary: backgroundColor: "{colors.brand-red}" textColor: "{colors.canvas}" typography: "{typography.button-sm}" rounded: "{rounded.none}" padding: "8px 10px" height: "32px" button-secondary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-sm}" rounded: "{rounded.none}" padding: "8px 10px" height: "32px" top-nav: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: "12px 70px" height: "58px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "6px 0" hero-heading: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.display-md}" padding: "0px 30px 0px 70px" section-heading: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.display-lg}" padding: "0" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "22px" borderColor: "{colors.hairline}" region-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "22px" borderColor: "{colors.hairline}" country-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "6px 0" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-black}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: "1px 2px" height: "20px" borderColor: "{colors.ink-light}" divider-rule: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.caption}" padding: "0" borderColor: "{colors.primary}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" padding: "15px 12px" --- ## Overview Domino's international landing page is not a consumer marketing surface — it is a **typographic hierarchy without chromatic hierarchy**. Every distinction between the global banner, the regional header, and the individual country link comes from typeface, case, and size rather than from color variation. One Dot Condensed Bold renders uppercase at 26px for regional headers; the same face at 20px uppercase for the page banner; Arial at 13.2px lowercase for each country name below. The structural move is notable because it contradicts the fast-food category default: Pizza Hut, McDonald's, and Papa John's all run photography-heavy international pages with gradient CTAs. Domino's delivers a flat, data-forward directory where the design system's job is legibility at scale across 90+ countries, not brand enthusiasm. The palette confirms the function-first orientation. **Graphite-and-steel**: #333333 dark gray and #858585 medium gray account for 459 of 462 measured color occurrences. The steel blue (#10789f) adds brand identity to the header, the regional h3 headings, and decorative line-rules flanking the banner — 14 occurrences total. The brand red (#e3193b) classified as `layer: "brand"` appears once: the UNSUBSCRIBE button at the bottom of the page. The near-monochrome discipline means a developer can implement the entire page with four colors. **Key Characteristics:** - One Dot Condensed Bold all-caps for every heading tier — the custom face is reserved strictly for headlines and banner labels; it never appears in body or interactive copy. - Arial at 13.2px as the universal body and link typeface — 98 occurrences, the most-used typographic signature by far. - Steel blue (`{colors.primary}` — #10789f) fills the header bar and carries every regional heading; the brand red appears once. - Near-zero radius — a single 3px chip token and square corners everywhere else. - White square-corner cards for each geographic region, holding two-column country-name link grids. - Graphite divider lines using steel-blue at low opacity to separate geographic sections. - No shadow, no gradient, no photography, no animation — the captured international surface is static HTML with 270 elements scanned. ## Colors ### Brand - **Steel Blue** (`{colors.primary}` — #10789f): frequency 14. Used as text (6), background (2), border (6). The structural brand voltage on this surface — fills the global header bar, carries every h3 regional heading, and renders as the decorative line-rules flanking the banner title. Not in any CSS custom property on this surface; hard-coded per element. - **Brand Red** (`{colors.brand-red}` — #e3193b): frequency 1, background only. Classified as `layer: "brand"` in the extraction. Appears once as the fill of the UNSUBSCRIBE button. The classic Domino's red — dominant in product-facing surfaces (pizza.com order flow) but reduced to a single CTA use on the international directory page. ### Text - **Ink** (`{colors.ink}` — #333333): frequency 263. Used as text (132) and border (131). The dominant text and rule color — every country-name link, every body label, every card-divider rule runs in this dark graphite. Not pure black; a slightly softened dark that sits comfortably at small sizes. - **Ink Muted** (`{colors.ink-muted}` — #858585): frequency 196. Used as text (98) and border (98). The secondary text color — navigation links, placeholder text, and secondary nav labels. Exactly half the frequency of the primary ink at every counted role. - **Ink Light** (`{colors.ink-light}` — #767676): frequency 1, border only. Used as the text-input border in the email unsubscribe form. - **Ink Black** (`{colors.ink-black}` — #000000): frequency 3. Appears in the email input text and two border instances — pure black, contrasted against the text-input white background. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 14, used as text (3), background (8), and border (3). The page floor and card fill — pure white, no warm tint. - **Surface 1** (`{colors.surface-1}` — #eeeeee): frequency 1, background only. A light cool gray used as a section background — the dimmest non-white surface on the page. - **Hairline** (`{colors.hairline}` — #d9d9d9): frequency 2, used once as border and once as shadow. The card-divider tone — a pale gray that separates white region cards from the white page canvas at very low contrast. ## Typography ### Font Families The system runs two typefaces: **One Dot Condensed Bold** (a proprietary brand font) for all heading and banner text, and **Arial** for all body, link, label, and interactive text. One Dot Condensed Bold always renders uppercase — there is no mixed-case use in the captured surface. Arial carries 98 of the 106 extracted typography instances; it is the true workhorse of the system. Where most brand typographies pair a custom display face with a humanist secondary, Domino's pairs its condensed display with a system default. This is not a budget choice — it is a legibility decision: Arial at 13.2px renders predictably across every OS and browser on the planet, which matters for a 90-country directory. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-lg}` | 26px | 700 | 30px | Regional h3 headers (NORTH AMERICA, EUROPE, ASIA PACIFIC…) | | `{typography.display-md}` | 20px | 400 | 58px | Global banner h2 (DISCOVER THE WORLD OF DOMINO'S) | | `{typography.heading-sm}` | 17px | 400 | 22px | Sub-regional or category labels | | `{typography.button-sm}` | 12px | 400 | 16px | Button labels in One Dot Condensed Bold uppercase | | `{typography.body-md}` | 13px | 400 | 17px | Country-name links, all nav text, form labels (Arial) | | `{typography.caption}` | 12px | 400 | 12px | Form field label, footnote text (Arial) | ### Principles One Dot Condensed Bold stays uppercase regardless of context; there is no sentence-case heading in the captured surface. The 26px / 700 regional h3 in steel blue is the typographic anchor of the page — it appears five times (one per geographic region) and carries all the brand warmth the near-monochrome palette does not. Arial at 13.2px / 400 carries everything else. No medium weight (500) or semibold (600) exists in the captured surface — the system is binary: condensed-bold display or regular-weight body. ### Note on Font Substitutes One Dot Condensed Bold is a proprietary brand typeface. **Bebas Neue** replicates the all-caps condensed character at zero cost; **Barlow Condensed Bold** at 700 is closer in x-height. Arial is universally available as a system font. No substitution needed for the body tier. ## Layout ### Spacing System - **Base unit:** 6px — the dominant padding value in the extracted surface (89 occurrences); used as the vertical gap between country-name links. - **Tokens:** `{spacing.xxs}` 1px · `{spacing.xs}` 2px · `{spacing.sm}` 6px · `{spacing.md}` 8px · `{spacing.base}` 12px · `{spacing.lg}` 15px · `{spacing.xl}` 22px · `{spacing.2xl}` 30px. - **Header padding:** 0px 30px 0px 70px on the banner h2 — left-heavy, offset to the right of the domino-tile logo. - **Card internal padding:** 22px on the region cards. - **Country-link spacing:** 6px vertical gap between each link — tight, directory-style rhythm. ### Grid & Container - **Max content width:** ~980px centered on a white canvas. - **Region cards:** three-column layout (North America / Latin America / Europe across the top; Asia Pacific / Middle East and Africa across the bottom) with a proportionally narrower third card for lighter-content regions. - **Country links within cards:** two-column grid for regions with many countries; single-column for sparse regions (North America: 3 countries, no grid needed). ### Rhythm The page runs at tight, directory cadence — 6px between links, 22px of card padding, and the header as the only generous spatial moment. There are no hero photography bands, no section-separator ornaments, and no whitespace breathing sections. The surface reads as pure data delivery with brand clothing. ## Elevation The system has **no shadow tier**. The 270 scanned elements produced two hairline occurrences (`{colors.hairline}` — #d9d9d9) and one shadow occurrence at the same value. Depth comes entirely from the contrast between white region cards and the very slightly gray page background. There is no elevation hierarchy beyond card-vs-canvas. - **Flat (no shadow):** header bar, banner, all card surfaces — 100% of surfaces. - **Hairline lift:** white region cards sit on a white canvas with a 1px `{colors.hairline}` border; visible only at high contrast. ## Shapes The radius language is **sharply functional**: - `{rounded.none}` 0px — all cards, the header bar, input fields, and the UNSUBSCRIBE button. Square corners everywhere in the captured surface. - `{rounded.xs}` 3px — a single chip-style element; the minimum non-zero radius in the system. No 8px, no 16px, no pill. The Domino's international surface is the most zero-radius brand in the food delivery category captured in this directory. ## Components **`button-primary`** — Brand red `{colors.brand-red}` fill, white text, One Dot Condensed Bold 12px uppercase, square corners, 8×10px padding, 32px height. The UNSUBSCRIBE button is the canonical instance — the only primary CTA in the captured surface. **`button-secondary`** — Steel blue `{colors.primary}` fill, white text, same geometry as the primary. Used for supplementary CTAs that don't carry the full brand-red urgency. **`top-nav`** — Steel blue `{colors.primary}` bar, 58px height, white One Dot Condensed Bold 20px headline centered between decorative line-rules and the domino-tile logo. The single chromatic header moment. **`nav-link`** — Transparent background, dark graphite `{colors.ink}` text in `{typography.body-md}` (Arial 13.2px), 6px vertical padding. **`hero-heading`** — Steel blue `{colors.primary}` background, white text, One Dot Condensed Bold 20px uppercase. The banner headline "DISCOVER THE WORLD OF DOMINO'S" renders inside the header bar with 0×30px 0×70px padding to clear the logo. **`section-heading`** — Transparent background, steel blue text in `{typography.display-lg}` (One Dot Condensed Bold 26px / 700). Regional h3 headers — NORTH AMERICA, EUROPE, etc. **`body-paragraph`** — Transparent background, dark graphite `{colors.ink}` text at `{typography.body-md}`. **`card`** — White `{colors.canvas}` fill, 0px radius, 22px internal padding, pale gray `{colors.hairline}` border. The standard region container. **`region-card`** — Same as card — white surface, square corners, hairline border. Holds a region heading in steel blue above a two-column country-link grid. **`country-link`** — Transparent background, dark graphite text at `{typography.body-md}` (Arial 13.2px). 6px vertical padding between links. The most-repeated component on the page — ~90 country names. **`text-input`** — White `{colors.canvas}` fill, pure black text, ink-light border, square corners (0px), 1×2px padding, 20px height. The email input in the unsubscribe form — minimal field dimensions. **`divider-rule`** — Decorative horizontal rules in steel blue flanking the banner headline. 1px height; the sole decorative use of the primary color. **`footer`** — White `{colors.canvas}` canvas, muted gray text, 15×12px padding. The "TRYING TO UNSUBSCRIBE" prompt bar at the bottom of the page. ## Do's and Don'ts **Do** reserve One Dot Condensed Bold strictly for uppercase heading and banner text. The face has no body or sentence-case role in this system; mixing it with lowercase prose reads as a typo rather than a design choice. **Do** use steel blue (`{colors.primary}` — #10789f) as the heading color for geographic or regional section titles. The pairing of One Dot Condensed Bold at 26px in steel blue is the system's recognizable heading treatment — changing the color to ink-graphite loses the brand signal. **Do** use Arial at 13.2px for every country-link, nav-link, and form-label instance. The system does not use custom fonts at body scale; introducing a sans-serif substitute for Arial adds visual noise to a surface where legibility is the primary value. **Do** keep card containers at 0px border-radius. The square corner treatment is the sharpest in the food-delivery category; introducing even 4px rounding softens the functional-directory character. **Don't** use the brand red (`{colors.brand-red}` — #e3193b) for more than one CTA per page section. On this surface it appears once; multiplying it into multiple buttons or headings competes with the steel-blue structural signal and creates two competing brand voltages. **Don't** use `{colors.ink-muted}` (#858585) for primary heading text. At 196 occurrences it is a secondary label color — using it at heading scale (26px One Dot Condensed) would read as a disabled or deprecated section title. **Don't** add padding above 22px to the country-list cards. The directory rhythm depends on the 6px link-gap and 22px card padding staying tight; generous padding makes geographic regions feel like editorial sections rather than data containers. **Don't** introduce a shadow tier. The system runs zero elevation beyond the hairline card border; adding drop shadows to region cards imports a visual vocabulary (`rgba` blur, layered elevation) the design does not use anywhere. ## Known Gaps - **Product-ordering surface:** the captured page is the international directory only — the US ordering flow (dominos.com/en/) carries a richer system with hero photography, red-dominant CTAs, pricing components, and pizza-configuration selectors. None of that richer surface is represented here. - **Brand red at scale:** #e3193b appears once in this capture; the full brand system uses it much more broadly on the ordering surface. The red token is likely under-represented. - **Hover and focus states:** no hover or focus states were captured; the country-link hover treatment (likely a color shift to steel blue or underline) is not documented. - **Mobile layout:** the captured surface is desktop-width. The mobile directory presumably collapses to a single-column card list with a hamburger or accordion for regions. - **Dark mode:** not declared. The international surface is light-only. - **Custom property system:** unlike Panera's rich CSS variable layer, Domino's international page exposes no CSS custom properties — all values are hard-coded inline, which makes this spec fully representative of the captured surface but limits token inference for product variants.