Replicate Design System

8 colors20 componentsSatoshi / CerealAug 2026

---

version: alpha

name: Replicate-design-analysis

description: |

Replicate's marketing surfaces pair the warm-cream developer-tools aesthetic

of an indie ML playground with a confident hot-orange brand accent and a

signature display typeface (rb-freigeist-neue) sized aggressively large at

72px+. The system reads as "AI lab notebook crossed with print magazine":

cream and bone surfaces, dark ink type, monospace code wells, irregular

hand-drawn-feeling diagrams, and a rich orange used scarcely on the most

consequential CTA. Photography of contributors and example outputs is

square-ish with mid-radius corners; everything else is borderless or hairline.

colors:

primary: "#ea2804"

primary-deep: "#c01f00"

on-primary: "#ffffff"

ink: "#202020"

body: "#3a3a3a"

charcoal: "#575757"

mute: "#646464"

ash: "#8d8d8d"

stone: "#bbbbbb"

on-dark: "#fcfcfc"

on-dark-mute: "rgba(252,252,252,0.72)"

canvas: "#f9f7f3"

surface-bone: "#f3f0e8"

surface-card: "#ffffff"

surface-dark: "#202020"

surface-deep: "#000000"

hairline: "rgba(32,32,32,0.12)"

hairline-strong: "#202020"

divider-dark: "rgba(255,255,255,0.2)"

hero-warm: "#ea2804"

hero-glow: "#ff6a3d"

hero-pink: "#f4a8a0"

badge-success: "#2b9a66"

link: "#ea2804"

ring-focus: "rgba(59,130,246,0.5)"

github-dark: "#24292e"

typography:

display-xxl:

fontFamily: rb-freigeist-neue

fontSize: 128px

fontWeight: 700

lineHeight: 1.0

letterSpacing: -3px

display-xl:

fontFamily: rb-freigeist-neue

fontSize: 72px

fontWeight: 700

lineHeight: 1.0

letterSpacing: -1.8px

display-lg:

fontFamily: rb-freigeist-neue

fontSize: 48px

fontWeight: 700

lineHeight: 1.0

letterSpacing: -1px

display-md:

fontFamily: rb-freigeist-neue

fontSize: 30px

fontWeight: 600

lineHeight: 1.2

letterSpacing: -0.5px

heading-lg:

fontFamily: basier-square

fontSize: 38.4px

fontWeight: 600

lineHeight: 0.83

letterSpacing: -0.5px

heading-md:

fontFamily: basier-square

fontSize: 24px

fontWeight: 600

lineHeight: 1.33

letterSpacing: -0.35px

heading-sm:

fontFamily: basier-square

fontSize: 20px

fontWeight: 600

lineHeight: 1.4

letterSpacing: -0.3px

subtitle:

fontFamily: rb-freigeist-neue

fontSize: 18px

fontWeight: 600

lineHeight: 1.56

letterSpacing: 0

body-lg:

fontFamily: basier-square

fontSize: 18px

fontWeight: 400

lineHeight: 1.56

letterSpacing: 0

body-md:

fontFamily: basier-square

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

body-sm:

fontFamily: basier-square

fontSize: 14px

fontWeight: 400

lineHeight: 1.43

letterSpacing: 0

button-md:

fontFamily: basier-square

fontSize: 16px

fontWeight: 600

lineHeight: 1.0

letterSpacing: 0

button-sm:

fontFamily: basier-square

fontSize: 14px

fontWeight: 600

lineHeight: 1.0

letterSpacing: 0

caption:

fontFamily: basier-square

fontSize: 12px

fontWeight: 400

lineHeight: 1.33

letterSpacing: 0

caption-tight:

fontFamily: basier-square

fontSize: 14px

fontWeight: 600

lineHeight: 1.43

letterSpacing: -0.35px

code-md:

fontFamily: jetbrains-mono

fontSize: 14px

fontWeight: 400

lineHeight: 1.43

letterSpacing: 0

code-sm:

fontFamily: jetbrains-mono

fontSize: 11px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

rounded:

none: 0px

xs: 4px

sm: 6px

md: 10px

lg: 16px

full: 9999px

spacing:

xxs: 2px

xs: 4px

sm: 8px

md: 12px

lg: 16px

xl: 24px

xxl: 32px

xxxl: 48px

section: 96px

band: 160px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: 12px 24px

height: 44px

button-primary-pressed:

backgroundColor: "{colors.primary-deep}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

button-dark:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: 12px 24px

height: 44px

button-outline:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: 11px 23px

height: 44px

button-ghost:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: 8px 16px

height: 36px

button-icon:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

size: 36px

text-input:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.full}"

padding: 12px 20px

height: 44px

hero-band:

backgroundColor: "{colors.hero-warm}"

textColor: "{colors.on-dark}"

typography: "{typography.display-xl}"

rounded: "{rounded.none}"

padding: 96px 32px

model-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 16px

collection-tile:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.heading-md}"

rounded: "{rounded.md}"

padding: 24px

pricing-tier:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

pricing-tier-featured:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

code-block:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.code-md}"

rounded: "{rounded.md}"

padding: 24px

code-tab:

backgroundColor: "{colors.surface-deep}"

textColor: "{colors.on-dark-mute}"

typography: "{typography.code-sm}"

rounded: "{rounded.xs}"

padding: 6px 12px

badge-status:

backgroundColor: "{colors.badge-success}"

textColor: "{colors.on-dark}"

typography: "{typography.caption}"

rounded: "{rounded.full}"

padding: 4px 10px

badge-tag:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.caption}"

rounded: "{rounded.full}"

padding: 4px 10px

nav-bar:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-sm}"

rounded: "{rounded.none}"

height: 60px

sub-nav-pill:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.button-sm}"

rounded: "{rounded.full}"

padding: 6px 14px

contributor-avatar:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

size: 40px

footer:

backgroundColor: "{colors.surface-deep}"

textColor: "{colors.on-dark}"

typography: "{typography.body-sm}"

rounded: "{rounded.none}"

padding: 64px 32px

---

Overview

Section 01

Replicate is a developer-tools platform with the soul of an art zine. The

public marketing surfaces sit on a warm cream canvas (`{colors.canvas}` —

`#f9f7f3`) rather than the white-or-near-black default of typical AI

infrastructure sites, and that single decision colours everything else:

photography reads as editorial, code wells read as printed pull-quotes, and

the brand orange (`{colors.primary}` — `#ea2804`) feels like a stamp rather

than a notification.

The typography is the load-bearing decoration. **rb-freigeist-neue** — a

heavy, slightly condensed grotesque — appears at sizes up to 128px in hero

bands, with a tight `lineHeight: 1.0` and negative letter-spacing that lets

multi-line headlines pack into geometric blocks. The companion family,

**basier-square**, takes care of body, button labels, and metadata in the

14–18px range. **JetBrains Mono** carries every code well, command, and

example. Three families, three jobs, no overlap.

Page rhythm cycles between a default cream canvas, a bold full-bleed orange

hero band, and a `{colors.surface-dark}` (`#202020`) section that hosts the

code stories — the "how it works" walkthrough. Curves are intentional and

soft: every interactive surface (buttons, inputs, tags, avatars) uses

`{rounded.full}`, while content cards and code wells step up to `{rounded.md}`

or `{rounded.lg}`. There are no sharp corners on Replicate; the system reads

as friendly precision.

**Key Characteristics:**

A warm cream canvas (`{colors.canvas}` — `#f9f7f3`) replaces the typical white background, paired with `{colors.surface-bone}` for inset cards.

Hot orange (`{colors.primary}` — `#ea2804`) is reserved for the primary CTA, the hero band, and inline link colour. Never decorative.

Display headlines run massive — `{typography.display-xxl}` at 128px in hero bands and `{typography.display-xl}` at 72px on section openers — with tight `lineHeight: 1.0` and negative letter-spacing.

Three-family typography stack: `rb-freigeist-neue` for display, `basier-square` for UI/body, `jetbrains-mono` for code.

Every interactive element is fully rounded (`{rounded.full}` 9999px) — buttons, inputs, badges, avatars — while content cards step to `{rounded.md}` 10px.

Dark code wells (`{colors.surface-dark}` background) sit inside the cream canvas as full-bleed reading surfaces, mimicking print pull-quotes.

Section rhythm: cream → orange hero → cream → dark code-story band → cream → black footer.

Colors

Section 02

Brand & Accent

Section 03

Replicate Orange (`{colors.primary}` — `#ea2804`): the brand accent. Reserved for the primary CTA, hero band background, and inline link colour. Treat as a stamp — one orange element per viewport at most.

Orange Pressed (`{colors.primary-deep}` — `#c01f00`): the active/pressed state of `{colors.primary}` — used on `{component.button-primary-pressed}`.

Hero Glow (`{colors.hero-glow}` — `#ff6a3d`): the lighter orange that appears in the radial atmospheric mesh behind the hero copy.

Hero Pink (`{colors.hero-pink}` — `#f4a8a0`): a warm pink wash that softens the bottom edge of the hero band before it transitions to cream.

On-Primary (`{colors.on-primary}` — `#ffffff`): label colour on top of `{colors.primary}` surfaces.

Surface

Section 04

Canvas (`{colors.canvas}` — `#f9f7f3`): the default page background. Warm cream, never pure white.

Surface Bone (`{colors.surface-bone}` — `#f3f0e8`): a half-step deeper cream used for inset card groups and feature bands.

Surface Card (`{colors.surface-card}` — `#ffffff`): pure white for individual model cards, search inputs, and pricing tiers — the only place white appears.

Surface Dark (`{colors.surface-dark}` — `#202020`): code wells, featured pricing tier, and the "how it works" walkthrough band.

Surface Deep (`{colors.surface-deep}` — `#000000`): footer canvas and the inset code-tab strip inside `{component.code-block}`.

Hairline (`{colors.hairline}` — `rgba(32,32,32,0.12)`): low-contrast 1px dividers on cream surfaces.

Hairline Strong (`{colors.hairline-strong}` — `#202020`): button outlines, focused inputs, and structural separators.

Text

Section 05

Ink (`{colors.ink}` — `#202020`): primary text colour. Notably warmer than `#000000`, matching the cream canvas.

Body (`{colors.body}` — `#3a3a3a`): long-form body copy where ink would feel too heavy at 18px+ line lengths.

Charcoal (`{colors.charcoal}` — `#575757`): captions, metadata, secondary nav.

Mute (`{colors.mute}` — `#646464`): supporting text and inactive labels.

Ash (`{colors.ash}` — `#8d8d8d`): tertiary text, placeholder copy.

Stone (`{colors.stone}` — `#bbbbbb`): disabled foreground, neutral icon outlines.

On-Dark (`{colors.on-dark}` — `#fcfcfc`): primary text on `{colors.surface-dark}` and `{colors.surface-deep}`.

On-Dark Mute (`{colors.on-dark-mute}` — `rgba(252,252,252,0.72)`): secondary text in dark regions; preserves the off-white feel without pure white pop.

Semantic

Section 06

Success (`{colors.badge-success}` — `#2b9a66`): inline success badges and "running" status pills on model cards.

Link (`{colors.link}` — `#ea2804`): inline link colour — same as primary orange, intentionally pulling links into the brand accent.

Focus Ring (`{colors.ring-focus}` — `rgba(59,130,246,0.5)`): the default focus ring on interactive elements.

GitHub Dark (`{colors.github-dark}` — `#24292e`): the GitHub-branded button surface (kept off-brand-on-purpose to match GitHub's own tokens).

Typography

Section 07

Font Family

Section 08

Replicate ships a deliberate three-family stack:

rb-freigeist-neue — proprietary heavy grotesque used for all display sizes (30px+). Carries the editorial-magazine personality through tight `lineHeight: 1.0` and negative letter-spacing.

basier-square — proprietary humanist sans-serif used for body, button labels, captions, and metadata.

jetbrains-mono — open-source monospace used in every code well and inline command.

When proprietary families cannot be licensed, **Bricolage Grotesque** or **Migra** are credible substitutes for rb-freigeist-neue, and **Geist** or **Inter** can stand in for basier-square. JetBrains Mono is open-source and should always be used directly.

Hierarchy

Section 09

|---|---|---|---|---|---|

| `{typography.display-xxl}` | 128px | 700 | 1.0 | -3px | The single hero "Run AI" / "Imagine what you can build" headline. One per page. |

| `{typography.display-xl}` | 72px | 700 | 1.0 | -1.8px | Section openers ("How it works", "Scale on Replicate"). |

| `{typography.display-lg}` | 48px | 700 | 1.0 | -1px | Sub-section titles, pricing tier names. |

| `{typography.display-md}` | 30px | 600 | 1.2 | -0.5px | Feature card titles. |

| `{typography.heading-lg}` | 38.4px | 600 | 0.83 | -0.5px | Tightly-stacked basier-square headlines, used in pricing and enterprise hero. |

| `{typography.heading-md}` | 24px | 600 | 1.33 | -0.35px | Card titles, model detail headers. |

| `{typography.heading-sm}` | 20px | 600 | 1.4 | -0.3px | List section headers. |

| `{typography.subtitle}` | 18px | 600 | 1.56 | 0 | Lead paragraphs in display sections. |

| `{typography.body-lg}` | 18px | 400 | 1.56 | 0 | Marketing prose. |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body. |

| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Captions, metadata. |

| `{typography.button-md}` | 16px | 600 | 1.0 | 0 | Default button label. |

| `{typography.button-sm}` | 14px | 600 | 1.0 | 0 | Compact button label, sub-nav pills. |

| `{typography.caption}` | 12px | 400 | 1.33 | 0 | Footer disclosure, copyright. |

| `{typography.caption-tight}` | 14px | 600 | 1.43 | -0.35px | Emphatic small caption used in pricing tier rows. |

| `{typography.code-md}` | 14px | 400 | 1.43 | 0 | Code blocks and inline code. |

| `{typography.code-sm}` | 11px | 400 | 1.5 | 0 | Code-tab labels and small inline tokens. |

Principles

Section 010

Display sizes hold `lineHeight: 1.0` (or 0.83 on `{typography.heading-lg}`) so multi-line stacks read as single typographic blocks.

Negative letter-spacing scales with size — bigger types tighten more (-3px at 128px down to -0.3px at 20px). Body type stays at 0.

Body weight sits at 400 across `{typography.body-lg}` and `{typography.body-md}` — never bumped to 500 for emphasis. Emphasis comes from family change (basier-square → rb-freigeist-neue) rather than weight.

Code is never set in basier-square, even at small sizes — JetBrains Mono carries every literal command, every model slug, every API call.

Note on Font Substitutes

Section 011

When the proprietary families are unavailable, clamp display `lineHeight` to 1.0 explicitly and apply a -3% letter-spacing on display-xxl / display-xl to match the original tightness. Substitutes typically render with looser tracking by default.

Layout

Section 012

Spacing System

Section 013

Base unit: 4px, with the working scale on multiples of 4 / 8 / 16.

Tokens: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.xxxl}` 48px · `{spacing.section}` 96px · `{spacing.band}` 160px.

Section padding: `{spacing.section}` (96px) vertical between full-width bands; `{spacing.band}` (160px) when a band needs extra editorial breathing room (the hero, the closing "Imagine what you can build" stripe).

Card internal padding: `{spacing.lg}` (16px) on `{component.model-card}`, `{spacing.xxl}` (32px) on `{component.pricing-tier}`.

Grid & Container

Section 014

Max content width ≈ 1280px on body sections, 1440px on hero bands which run full-bleed.

Model grid on collections: 4 columns at desktop, 3 at tablet large, 2 at tablet, 1 at mobile.

Pricing: 3-tier grid centred at desktop, stacking vertically below 1024px; the centre tier flips to `{component.pricing-tier-featured}` (dark inversion) as the recommended option.

Code-story sections: a 2-up split — narrative copy left, code well right — collapsing to stacked at < 1024px.

Whitespace Philosophy

Section 015

Whitespace on cream is generous and editorial — sections breathe at 96px and key bands open at 160px so the typography can scale up without feeling cramped.

Inside cards, the system tightens to 16–32px so model thumbnails, statuses, and metadata sit in a compact list-of-cards rhythm.

Hairline `{colors.hairline}` dividers replace shadow on cream surfaces; on dark surfaces, `{colors.divider-dark}` carries the equivalent role.

Elevation & Depth

Section 016

| Level | Treatment | Use |

|---|---|---|

| 0 — flat | No shadow, no border | Default cream canvas, full-bleed bands. |

| 1 — outline | 1px solid `{colors.hairline}` or `{colors.hairline-strong}` | Model cards, pricing tiers, collection tiles. |

| 2 — bone inset | Surface colour shift to `{colors.surface-bone}` inside a `{colors.canvas}` band | Feature group containers, "How it works" walkthrough. |

| 3 — dark inversion | Card swaps to `{colors.surface-dark}` against cream | Code wells, featured pricing tier, "Scale on Replicate" hero card. |

| 4 — soft drop | `0 8px 24px rgba(32,32,32,0.08)` | Hover-anchored model thumbnails (visual only — not interaction-state-documented). |

Drop shadows exist in the extracted tokens but are restrained — used sparingly to lift photography thumbnails one step off the cream canvas. The dominant elevation language is colour-blocking.

Decorative Depth

Section 017

Hero atmospheric mesh — the orange-to-pink gradient backing the home hero is a layered radial mesh: `{colors.primary}` core → `{colors.hero-glow}` mid-stop → `{colors.hero-pink}` outer wash. Reserved for the home hero band only.

Code-story dark band — the "How it works" section uses `{colors.surface-dark}` full-bleed with a single hairline `{colors.divider-dark}` separating narrative copy and code well.

Contributor mosaic — the home page features a horizontally-scrolling band of circular avatars (`{component.contributor-avatar}`) over a textured cream canvas; this is the only place avatars appear at the brand level.

Shapes

Section 018

Border Radius Scale

Section 019

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Hero bands, full-bleed sections, footer. |

| `{rounded.xs}` | 4px | Code tabs, inline tags inside code wells. |

| `{rounded.sm}` | 6px | Mid-radius callouts, small inset chips. |

| `{rounded.md}` | 10px | Model cards, collection tiles, code wells. |

| `{rounded.lg}` | 16px | Pricing tiers, larger feature cards. |

| `{rounded.full}` | 9999px | Buttons, inputs, badges, avatars, pills. |

Photography Geometry

Section 020

Model thumbnails: square (1:1) with `{rounded.md}` corners, full-bleed image to the card edge.

Hero example outputs: 4:3 or 16:9 with `{rounded.md}` corners.

Contributor avatars: circular (`{rounded.full}`), 40px on home, 32px in card metadata.

The hero band uses a stylised black-ink illustration (the "tinkerer at the workbench") as its photography stand-in — kept inside the orange band rather than overlaid on cream.

Components

Section 021

Buttons

Section 022

**`button-primary`** — orange CTA

Background `{colors.primary}`, label `{colors.on-primary}`, type `{typography.button-md}`, padding `12px 24px`, `rounded: {rounded.full}`, height 44px.

The single most important action on a page (e.g. "Sign in with GitHub", "Try a model").

Pressed state lives in `button-primary-pressed` (background `{colors.primary-deep}`).

**`button-dark`** — dark CTA

Background `{colors.surface-dark}`, label `{colors.on-dark}`, type `{typography.button-md}`, `rounded: {rounded.full}`.

Equal-weight secondary action paired with `{component.button-primary}`, or the primary action on cream when orange would be too loud.

**`button-outline`** — outlined CTA

Background `{colors.surface-card}`, label `{colors.ink}`, 1px solid `{colors.hairline-strong}`, type `{typography.button-md}`, `rounded: {rounded.full}`.

Tertiary action; appears alongside primary/dark for "View docs", "Read more".

**`button-ghost`** — inline button

Background `{colors.canvas}`, label `{colors.ink}`, no border, type `{typography.button-md}`, `rounded: {rounded.full}`, padding `8px 16px`.

Sub-actions inside cards and inline with body copy.

**`button-icon`** — icon button

Background `{colors.surface-card}`, label `{colors.ink}`, 1px solid `{colors.hairline}`, `rounded: {rounded.full}`, 36×36px circular.

Carousel arrows, copy-to-clipboard, GitHub link icon.

Cards & Containers

Section 023

**`model-card`** — model listing card

Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-md}`, `rounded: {rounded.md}`, padding `{spacing.lg}` (16px).

Square thumbnail on top, model owner + name beneath in `{typography.body-sm}`, single-line description in `{colors.charcoal}`, status pill `{component.badge-status}` bottom-left.

**`collection-tile`** — collection-of-models tile

Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.heading-md}`, `rounded: {rounded.md}`, padding `{spacing.xl}` (24px).

Cream-on-cream tile inside a `{colors.surface-bone}` band, used for browsing model categories.

**`pricing-tier`** — pricing tier card

Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}` (32px).

3-up grid; tier name in `{typography.display-lg}` ("Free", "Pro", "Enterprise"), price in `{typography.display-md}`.

**`pricing-tier-featured`** — featured pricing tier

Background `{colors.surface-dark}`, text `{colors.on-dark}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}`.

Centre tier flipped to dark inversion to mark "recommended".

**`code-block`** — code well

Background `{colors.surface-dark}`, text `{colors.on-dark}`, type `{typography.code-md}`, `rounded: {rounded.md}`, padding `{spacing.xl}` (24px).

Tab strip on top using `{component.code-tab}` for switching between languages (Python, Node.js, cURL, HTTP).

**`code-tab`** — code tab chip

Background `{colors.surface-deep}`, text `{colors.on-dark-mute}`, type `{typography.code-sm}`, `rounded: {rounded.xs}`, padding `6px 12px`.

Active tab swaps text colour to `{colors.on-dark}` and adds a 2px bottom underline in `{colors.primary}`.

**`hero-band`** — full-bleed hero

Background `{colors.hero-warm}` with the atmospheric mesh detailed in Elevation, text `{colors.on-dark}`, type `{typography.display-xxl}` for the title.

Used only on the home page; secondary pages open with cream + `{typography.display-xl}`.

Inputs & Forms

Section 024

**`text-input`** — default input

Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-md}`, 1px solid `{colors.hairline}`, `rounded: {rounded.full}`, padding `12px 20px`, height 44px.

Pill-shaped search and email fields. Focus state adds a `{colors.ring-focus}` 3px ring.

Navigation

Section 025

**`nav-bar`** — top nav (desktop)

Background `{colors.canvas}`, type `{typography.button-sm}`, height 60px, single hairline `{colors.hairline}` bottom border.

Left: wordmark logo. Centre: top-level nav ("Explore", "Pricing", "Docs", "Blog"). Right: GitHub icon + "Sign in" link + `{component.button-primary}`.

**`nav-bar`** (mobile)

Same height 60px, collapses centre nav into a hamburger icon. Logo stays left, sign-in CTA stays right.

**`sub-nav-pill`** — sub-nav chip

Pill chips set in a horizontal row above content (e.g. "All", "Featured", "Image generation", "Audio"), `{component.sub-nav-pill}` styling.

Signature Components

Section 026

**`badge-status`** — model status badge

Background `{colors.badge-success}`, label `{colors.on-dark}`, type `{typography.caption}`, `rounded: {rounded.full}`, padding `4px 10px`.

Anchored on the bottom-left of model cards to indicate "running" or "deployed".

**`badge-tag`** — neutral tag

Background `{colors.canvas}`, label `{colors.ink}`, 1px solid `{colors.hairline}`, type `{typography.caption}`, `rounded: {rounded.full}`, padding `4px 10px`.

Capability tags ("text-to-image", "video", "audio") on model cards.

**`contributor-avatar`** — community contributor

Background `{colors.surface-card}` placeholder behind 1:1 photography, `rounded: {rounded.full}`, 40×40px (32px in metadata contexts).

Used in the home-page contributor mosaic.

**`footer`** — global footer

Background `{colors.surface-deep}`, text `{colors.on-dark}`, type `{typography.body-sm}`, `rounded: {rounded.none}`, padding `64px 32px`.

Multi-column quick-links grid above a copyright row separated by `{colors.divider-dark}`.

Do's and Don'ts

Section 027

Do

Section 028

Use `{colors.canvas}` (cream) as the default page background. White (`{colors.surface-card}`) appears only on individual cards, inputs, and the hero illustration backdrop.

Reserve `{colors.primary}` for the primary CTA, the home hero band, and inline links — three roles, nothing else.

Set every interactive element to `{rounded.full}` — buttons, inputs, badges, avatars, pills.

Step content cards up to `{rounded.md}` (10px) or `{rounded.lg}` (16px) — never sharp corners.

Open hero bands with `{typography.display-xxl}` (128px) and `{typography.display-xl}` (72px) at `lineHeight: 1.0` with negative letter-spacing.

Use `rb-freigeist-neue` for all display, `basier-square` for UI/body, `jetbrains-mono` for code. Keep the lanes strict.

Render code in `{component.code-block}` with a `{colors.surface-dark}` background — code is print, not an inline grey box.

Pair photography with `{rounded.md}` corners and full-bleed crop inside cards.

Don't

Section 029

Don't replace cream with pure white at the page level. The brand temperature comes from `{colors.canvas}`.

Don't introduce a secondary brand colour. Orange is the only accent; semantic green and focus blue are functional, not decorative.

Don't loosen display `lineHeight` past 1.0. Tight stacking is structural.

Don't bump body weight to 500 for emphasis — change family (`basier-square` → `rb-freigeist-neue`) instead.

Don't apply `{rounded.full}` to content cards. Pill-shaped cards break the rhythm.

Don't put code in a light grey box. Code wells are always `{colors.surface-dark}` or `{colors.surface-deep}`.

Don't use orange on body text or large surfaces — it loses its stamp quality immediately.

Don't add drop shadows on cream surfaces. Elevation is colour-blocking; shadows are reserved for floating thumbnails.

Responsive Behavior

Section 030

Breakpoints

Section 031

| Name | Width | Key Changes |

|---|---|---|

| Desktop XL | ≥ 1440px | Full max-width 1280 body, hero band runs full-bleed, 4-up model grid. |

| Desktop | 1280–1439px | Container shrinks; padding `{spacing.xl}` (24px) sides. |

| Tablet Large | 1024–1279px | Model grid 3-up, code-story splits remain 2-up. |

| Tablet | 768–1023px | Model grid 2-up, code-story stacks (narrative on top, code below), pricing stacks vertically. |

| Mobile Large | 426–767px | Model grid 1-up at 480px+, nav collapses to hamburger, hero `{typography.display-xxl}` clamps to 64px. |

| Mobile | ≤ 425px | All grids 1-up, hero clamps to 48px, section padding `{spacing.section}` collapses to 64px. |

Touch Targets

Section 032

All buttons ship at minimum 44px tall on mobile; default `{component.button-primary}` is 44px tall — comfortably clearing WCAG AAA.

`{component.button-icon}` (36px) is bumped to 44px on mobile via increased padding.

`{component.sub-nav-pill}` stays at 36px on desktop and grows to 40px on mobile via vertical padding adjustment.

Collapsing Strategy

Section 033

Top-level nav collapses to hamburger at < 1024px; the wordmark and `{component.button-primary}` stay anchored.

Hero `{typography.display-xxl}` clamps: 128px → 96px → 64px → 48px across the breakpoint ladder.

Pricing 3-up grid stacks vertically at < 1024px with the featured tier remaining centre-stacked.

Code-story splits switch from side-by-side to stacked at < 1024px, code well always second.

Sub-nav pills convert from a wrap row to a horizontal scroll-rail at < 768px.

Image Behavior

Section 034

Model thumbnails serve at 1.5× and 2× DPR; below 768px the system swaps to a 600×600 export instead of 1200×1200.

Hero atmospheric mesh is rendered as a CSS gradient — no asset cost, no breakpoint variation.

Code-block contents wrap softly at < 1024px (no horizontal scroll); long lines break with a continuation marker.

Iteration Guide

Section 035

1. Focus on ONE component at a time. Most interactive elements share `{rounded.full}` and the `{colors.canvas}` / `{colors.surface-card}` pair — only the role-specific tokens (`{colors.primary}`, `{component.code-block}`) shift between variants.

2. Reference component names and tokens directly (`{colors.primary}`, `{component.button-primary-pressed}`, `{rounded.lg}`) — do not paraphrase.

3. Run `npx @google/design.md lint DESIGN.md` after edits; orphaned-tokens warnings will catch unused entries.

4. Add new variants as separate entries (`-pressed`, `-disabled`, `-featured`) — do not bury them in prose.

5. Default body type to `{typography.body-md}`; reach for `{typography.subtitle}` only on hero subtitles.

6. Keep `{colors.primary}` scarce — if more than one orange element appears per viewport, ask whether one should drop to `{colors.surface-dark}` instead.

Known Gaps

Section 036

Active/pressed visual states are documented for `button-primary-pressed` only; other components rely on the focus-ring (`{colors.ring-focus}`) for interactive feedback, which is not extracted as a per-component variant.

The model playground / try-this-model interactive surfaces (logged-in feature) are out of scope; only the public marketing canvas is documented.

Dashboard / billing / API key management surfaces are not extracted — those live behind authentication.

The home hero illustration ("the tinkerer at the workbench") is treated as decorative artwork, not a system component; replicating it requires bespoke illustration rather than tokens.

72,570+ DESIGN.md files generated