---
version: "1.2"
name: galton-design-system
description: >-
  A confident, editorial, high-contrast brand interface built dark-first on a
  near-black canvas (#1A1A1A) with white text and a single signature
  primary-yellow (#FFD700) used sparingly for emphasis. Everything is set in one
  typeface — Galton — at Light (300) weight in Sentence case, with Montserrat as
  the official substitute. Hierarchy comes from size and generous leading, not
  weight or uppercase shouting. The logo is white or black only — never colored.
  Components (buttons, forms, links, eyebrow, badge) are pill-and-flat,
  pill-shaped uppercase Bold buttons, flat bottom-border-only inputs with a
  yellow focus, and a strict palette with no invented shades.

colors:
  primary: "#FFD700"              # signature yellow — CTAs, highlights, focus, hero accent. Never a large fill.
  on-primary: "#1A1A1A"           # text/icons on a yellow surface (always black)
  ink: "#FFFFFF"                  # primary text + headlines on dark
  on-dark: "#FFFFFF"              # anything sitting on the dark canvas
  body: "rgba(255,255,255,0.8)"   # running body text (white at 80%)
  body-soft: "rgba(255,255,255,0.78)"  # secondary paragraphs / leads
  muted: "#999999"                # muted text, captions, disabled, dividers
  canvas: "#1A1A1A"               # dark-first page floor (the brand default)
  surface-raised: "rgba(255,255,255,0.04)" # cards / raised panels — built from white at low opacity, never a new hex
  hairline: "rgba(255,255,255,0.12)"       # 1px borders, dividers, table rows
  on-light: "#1A1A1A"             # text/marks on a white/light surface
  light-canvas: "#FFFFFF"         # light-surface floor (cards on light, print)
  link: "#FFD700"                 # hover/focus link color (signature yellow)

# Brand palette (per the official manual) — the actual brand colors, grouped.
# `colors` above are the SEMANTIC ROLES that apply these; `palette` is the source.
palette:
  primary:
    - { name: White, hex: "#FFFFFF", rgb: "255/255/255", cmyk: "0/0/0/0", pms: "Not specified C" }
    - { name: Black, hex: "#1A1A1A", rgb: "26/26/26", cmyk: "0/0/0/95", pms: "Not specified C" }
  secondary:
    - { name: Yellow, hex: "#FFD700", rgb: "255/215/0", cmyk: "0/10/100/0", pms: "Not specified C" }

# Approved colour combinations — foreground on background.
combinations:
  note: >-
    Some colors are not suitable to be used in combination with others. The
    following diagram demonstrates approved color combinations.
  approved:
    - { fg: "#1A1A1A", bg: "#FFFFFF", label: "Black on white" }
    - { fg: "#FFFFFF", bg: "#1A1A1A", label: "White on black" }
    - { fg: "#FFD700", bg: "#FFFFFF", label: "Yellow on white" }
    - { fg: "#FFD700", bg: "#1A1A1A", label: "Yellow on black" }

# Typeface source — WHICH font to use and WHERE to load it from. The `typography`
# tokens below carry the font stack; this block carries the files, the @font-face
# and the fallback so an agent can actually embed the brand typeface.
fonts:
  brand:
    family: Galton
    stack: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    defaultWeight: 300
    case: Sentence case
    weights: "100 Thin · 300 Light (default) · 400 · 500 · 700 · 800 · 900"
    baseUrl: "https://galton-ai-assets.vercel.app/brand/"
    files:
      - { weight: "100–900", file: "fonts/GaltonVariable.woff2", format: "woff2-variations", note: "variable — prefer this on the web" }
      - { weight: "300", file: "fonts/Galton-Light.woff2", format: "woff2", note: "static — the brand default" }
      - { weight: "400", file: "fonts/Galton-Regular.woff2", format: "woff2" }
      - { weight: "500", file: "fonts/Galton-Medium.woff2", format: "woff2" }
      - { weight: "700", file: "fonts/Galton-Bold.woff2", format: "woff2" }
    fontFace: |-
      @font-face {
        font-family: "Galton";
        src: url("https://galton-ai-assets.vercel.app/brand/fonts/GaltonVariable.woff2") format("woff2-variations");
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
      }
  fallback:
    family: Montserrat
    source: Google Fonts
    url: "https://fonts.google.com/specimen/Montserrat"
    note: "Official substitute wherever Galton can't be embedded; last in the stack."

# Leading + hierarchy reference. The RATIO is the rule (leading = size × ratio);
# the point sizes are examples only. Keep leading consistent across applications.
typeScale:
  note: >-
    When setting type, the leading should be consistent across applications.
    Leading refers to the space between lines of text. Leading = type size × ratio.
  hierarchyNote: >-
    Size, scale and position all play a factor in how information is read. Always
    ensure there is a purposeful difference between type sizes. Type sizes are
    examples only.
  levels:
    - { name: Headline, plural: Headlines, font: "Galton Light", case: "Sentence case", size: 80, leading: 88, ratio: 1.1 }
    - { name: Subhead, plural: Subheads, font: "Galton Light", case: "Sentence case", size: 30, leading: 36, ratio: 1.2 }
    - { name: Body, plural: "Body copy", font: "Galton Light", case: "Sentence case", size: 18, leading: 27, ratio: 1.5 }

typography:
  display-lg:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 136px               # responsive 56 -> 88 -> 136 -> 180
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: 0
  display:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 96px                # responsive 48 -> 72 -> 96 -> 120
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0
  headline:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 64px                # responsive 40 -> 52 -> 64 -> 80
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0
  subhead:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 30px                # responsive 22 -> 24 -> 30
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0
  body:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px                # web/body minimum — reading text is never below 18px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0
  body-strong:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0
  eyebrow:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px                 # section label — the uppercase overline above headlines
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 3.3px           # 0.22em — uppercase
  button:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px                # web/body minimum — button labels are never below 18px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0               # uppercase, no extra tracking
  label:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px                # form labels (1.125rem -> 1.5rem)
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0
  badge:
    fontFamily: "Galton, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px                 # the global minimum size — nothing renders below 15px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 1.2px           # 0.08em — uppercase

rounded:
  none: 0px                        # inputs, selects — always flat
  component: 10px                  # small UI elements
  card: 20px                       # standard card / media container
  card-lg: 24.5px                  # large icon-card
  pill: 100px                      # buttons, tags, chips

components:
  button-yellow:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "11px 30px 10px"
    border: "1px solid {colors.canvas}"
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "11px 30px 10px"
    border: "1px solid {colors.canvas}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "11px 30px 10px"
    border: "1px solid {colors.ink}"
  # Hover states (the spec pairs `<name>-hover` with its base).
  button-yellow-hover:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.ink}"
  button-primary-hover:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.ink}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.ink}"
  text-input:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: "0"
    height: 53px
    border: "0 0 1px 0 solid {colors.ink}"
  textarea:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: "12px 0"
    height: 120px
    border: "0 0 1px 0 solid {colors.hairline}"
  select:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: "0 30px 0 0"
    height: 53px
    border: "0 0 1px 0 solid {colors.ink}"
  checkbox:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    size: 30px
    border: "1px solid {colors.ink}"
  text-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body}"
  eyebrow:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
  badge:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.badge}"
    rounded: "{rounded.pill}"
    padding: "5.6px 13.6px"
    border: "1px solid {colors.hairline}"
  card:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.card}"
    padding: "28px"
    border: "1px solid {colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    height: 56px
    border: "0 0 1px 0 solid {colors.hairline}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.body}"
    padding: "72px"
    border: "1px 0 0 0 solid {colors.hairline}"

# How the component library is presented & exercised on the front end. The token
# values live in `components` above; this groups them into sub-sections and adds
# rendering hints (labels, placeholders, options) so the showcase can render real,
# interactive examples. `<name>-hover` token entries drive the live hover states.
componentGroups:
  - id: buttons
    title: Buttons
    description: >-
      Pill, UPPERCASE, Galton Bold (700). Three variants; hover inverts toward the
      canvas. Bottom padding is ~0.1rem less than top to compensate Galton's ascenders.
    kind: button
    items: [button-yellow, button-primary, button-secondary]
  - id: forms
    title: Form elements
    description: >-
      Dark-first: transparent, flat (radius 0), bottom-border only. Focus turns the
      border the signature yellow. Labels are Galton Light.
    items:
      - { name: text-input, kind: input, label: Email, placeholder: "you@brand.com", inputType: email }
      - { name: textarea, kind: textarea, label: Message, placeholder: "Tell us about the project…" }
      - { name: select, kind: select, label: Service, options: [Branding, Marketing, Web design, Other] }
      - { name: checkbox, kind: checkbox, label: "I agree to the privacy policy" }
  - id: cards
    title: Cards & surfaces
    description: >-
      Raised from white at low opacity over the canvas, hairline border, 20px radius —
      no drop shadows. Depth comes from contrast, not material elevation.
    items:
      - { name: card, kind: card }
  - id: labels
    title: Links, eyebrow & badge
    description: "Small text utilities. Links hover to yellow; eyebrow and badge are the only Sentence-case exceptions (uppercase)."
    items:
      - { name: text-link, kind: link }
      - { name: eyebrow, kind: eyebrow }
      - { name: badge, kind: badge }
  - id: chrome
    title: Navigation
    description: "Sticky 56px top bar and the footer — both on the canvas with a hairline edge."
    items:
      - { name: top-nav, kind: nav }
      - { name: footer, kind: nav }

# Ready-to-use agent prompts. Deliberately value-free — they describe intent and
# reference roles ("the signature accent", "the display headline") so the agent
# resolves exact colours, type and components from this spec. `{{brand}}` is filled
# with the brand name at render time, so this stays universal across brands.
agentPrompts:
  prompts:
    - title: Landing hero
      prompt: >-
        Build an on-brand {{brand}} hero. Dark-first canvas; a large display headline
        in Sentence case with the final word in the signature accent; a short body
        lead beneath; and the primary call-to-action button. Place the wordmark
        top-left. Pull every colour, type size and component from the design system —
        don't invent values.
    - title: Contact form
      prompt: >-
        Create an on-brand contact form. Stack labelled fields — a text input, a
        select and a textarea — then a consent checkbox and the primary CTA. Use the
        form component tokens: flat fields, bottom-border only, focus in the accent.
        Keep it dark-first.
    - title: Full landing page
      prompt: >-
        Compose a full {{brand}} landing page: a hero, two or three content sections
        and a footer. Use the design system's type scale, spacing rhythm and
        components throughout; keep the dark-first canvas and reserve the accent for
        emphasis. Pull every value from the spec — don't invent any.
    - title: Rebrand a page
      prompt: >-
        Restyle this page to match {{brand}}. Map every colour, font and component to
        the design system's tokens and replace ad-hoc values with the brand's. Keep
        the logo white or black only.
  rules:
    - Describe intent and structure; let the agent resolve exact values from the spec.
    - Reference roles — "primary CTA", "the accent", "display headline" — not hex codes.
    - Keep the logo white or black only; never recolour it.
    - Don't use the accent as a large fill, and never uppercase body copy.
---

## Overview

GALTON Brands is a **dark-first**, editorial, high-contrast brand system. The page floor is a near-black canvas (`{colors.canvas}` — #1A1A1A), text is white (`{colors.ink}`), and a single signature **primary yellow** (`{colors.primary}` — #FFD700) carries every accent — CTAs, highlights, focus rings, the hero word. Yellow is never a large fill; on a yellow surface text is always black (`{colors.on-primary}`).

Everything is set in **one typeface — Galton** — at **Light (300)** in **Sentence case**. Weight steps up to Medium (500) / Bold (700) only for emphasis; the brand never shouts in uppercase except for the eyebrow label, button labels and the badge. Where Galton can't be embedded (email, Google Docs/Slides, system contexts), **Montserrat** is the official substitute — it is last in every font stack. Hierarchy is created by **size and a leading ratio** (Headline ×1.1, Subhead ×1.2, Body ×1.5), not by heavy weights.

The component language is **pill-and-flat**: buttons are full pills (`{rounded.pill}`), uppercase, Galton Bold; inputs are **flat** (`{rounded.none}`), transparent, bottom-border only, with a primary-yellow focus. The palette is fixed — no invented shades; raised surfaces are built from white at low opacity (`{colors.surface-raised}`), never a new hex.

**Key Characteristics:**
- Dark-first canvas `{colors.canvas}` (#1A1A1A) with white type. Light surfaces invert to black-on-white.
- One typeface, **Galton Light (300), Sentence case**. Montserrat is the official substitute. No second display face.
- A single accent: `{colors.primary}` (#FFD700). Used sparingly — CTAs, focus, highlights, the hero accent. Never large fills.
- The **logo is white or black ONLY** — never yellow/primary or any other color. This is a hard rule.
- Buttons are pill-shaped, uppercase, Bold 700; the signature CTA is `{component.button-yellow}`.
- Inputs are flat (radius 0), transparent, bottom-border only; focus turns the border `{colors.primary}`.
- Fixed palette, no invented shades. Raised surfaces come from white/grey at low opacity.

## Colors

### Brand palette
The brand has three colours, in two groups:
- **Primary palette** — **White** (#FFFFFF) and **Black** (#1A1A1A). The base of the system: black is the dark-first canvas, white is the ink.
- **Secondary palette** — **Yellow** (#FFD700). The single accent: CTAs, highlights, focus rings, the hero word. Used sparingly, never a large fill; on a yellow surface, foreground is always black (#1A1A1A).

Everything else (`{colors.muted}`, `{colors.hairline}`, `{colors.surface-raised}`, body opacities) is a UI grey derived from black/white at opacity — not a new brand colour.

### Surface
- **Canvas** (`{colors.canvas}` — #1A1A1A): The default page floor on every dark surface. The brand is dark-first.
- **Surface Raised** (`{colors.surface-raised}` — white @4%): Cards, modals, raised panels. Built from white at low opacity over the canvas — never a new hex. Pair with a `{colors.hairline}` border.
- **Hairline** (`{colors.hairline}` — white @12%): 1px dividers, table rows, card outlines, the top/bottom bars.
- **Light Canvas** (`{colors.light-canvas}` — #FFFFFF): The floor for light surfaces (cards on light, print, email).

### Text
- **Ink / On Dark** (`{colors.ink}` — #FFFFFF): Headlines and primary text on the dark canvas.
- **Body** (`{colors.body}` — white @80%): Default running body text — slightly softened from pure white.
- **Body Soft** (`{colors.body-soft}` — white @78%): Secondary paragraphs and section leads.
- **Muted** (`{colors.muted}` — #999999): Captions, metadata, placeholders, disabled states, dividers.
- **On Light** (`{colors.on-light}` — #1A1A1A): Text and marks on a white/light surface.

### Usage Rules
- Default page = `{colors.canvas}` background, `{colors.ink}` text.
- `{colors.primary}` is for emphasis only — never a large fill. On a primary surface, text is always black.
- Keep the secondary yellow to accents only — never a large fill.
- Need a raised surface? Build it from white/grey at low opacity (`{colors.surface-raised}`) — do not introduce a new hex.
- Selection highlight is primary-on-black.

## Typography

### Font Family
The system runs **one typeface — Galton** — for both headings and body. The variable woff2 covers weights 100–900; static cuts (Thin…Black) exist as a fallback. The default is **Light (300)**, set in **Sentence case** at normal tracking.

**Montserrat** is the **official substitute**: use it wherever Galton can't be embedded (email, Google Docs/Slides, system contexts). It is last in every font stack: `Galton, Montserrat, ui-sans-serif, system-ui, sans-serif`. There is no second brand face — Galton does everything.

Weights: 100 Thin · **300 Light (default)** · 400 Regular · 500 Medium · 700 Bold · 800 Extrabold · 900 Black. There is no dedicated 600 cut — use the variable font for weight 600 (e.g. a live-text wordmark).

### Font source & embedding
The Galton typeface ships with this package — don't substitute a lookalike. Load the **variable woff2** (one file, weights 100–900):

- **File:** `https://galton-ai-assets.vercel.app/brand/fonts/GaltonVariable.woff2` (static cuts: `https://galton-ai-assets.vercel.app/brand/fonts/Galton-{Thin,Light,Regular,Medium,Bold,Extrabold,Black}.woff2`)
- **Base URL:** `https://galton-ai-assets.vercel.app/brand/` (resolved to wherever this is deployed)
- **Hotlink these absolute URLs exactly as given** — the files are served with permissive CORS (`Access-Control-Allow-Origin: *`), so a cross-origin `@font-face` works. Do **not** relativise them to `/brand/fonts/…` (that resolves against *your* host and 404s, silently falling back to Montserrat) and don't copy the file locally.

```css
@font-face {
  font-family: "Galton";
  src: url("https://galton-ai-assets.vercel.app/brand/fonts/GaltonVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
```

Then use the stack `Galton, Montserrat, ui-sans-serif, system-ui, sans-serif`. **Montserrat** is the substitute and loads from Google Fonts (`https://fonts.google.com/specimen/Montserrat`) — it is last in the stack and only kicks in where Galton can't be embedded. The full `fonts` block in the frontmatter lists every file, format and the ready-to-paste `@font-face`.

### Hierarchy

All Galton Light (300), Sentence case. Leading (line-height) is a ratio of the type size. Display sizes are responsive; the token value is the desktop maximum.

| Token | Size (responsive) | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-lg}` | 56 → 88 → 136 → 180px | 300 | 1.05 | 0 | Jumbotron / extreme display |
| `{typography.display}` | 48 → 72 → 96 → 120px | 300 | 1.1 | 0 | Large hero headline |
| `{typography.headline}` | 40 → 52 → 64 → 80px | 300 | 1.1 | 0 | Headline (size ×1.1) |
| `{typography.subhead}` | 22 → 24 → 30px | 300 | 1.2 | 0 | Subhead (size ×1.2) |
| `{typography.body}` | 18px | 300 | 1.5 | 0 | Body — the web/body minimum (never below 18px) |
| `{typography.body-strong}` | 18px | 500 | 1.4 | 0 | Emphasis inside body |
| `{typography.eyebrow}` | 15px | 500 | 1.4 | 0.22em | Section label — uppercase overline above headlines, primary color |
| `{typography.button}` | 18px | 700 | 1.0 | 0 | Uppercase button labels (web/body minimum) |
| `{typography.label}` | 18 → 24px | 300 | 1.4 | 0 | Form labels |
| `{typography.badge}` | 15px | 400 | 1.0 | 0.08em | Uppercase pill chip (the global 15px minimum) |

### Principles
Emphasis comes from **size and leading**, then a small step in **weight** (300 → 500/700) — never from uppercase body copy. The rule of thumb for any new size: Headline ×1.1, Subhead ×1.2, Body ×1.5 leading, with a purposeful jump between levels.

Uppercase appears in exactly three places: the **eyebrow** label, **button** labels, and the **badge**. Everything else is Sentence case.

### Note on Font Substitutes
If Galton is unavailable, fall back to **Montserrat** (Google Fonts) — the official substitute, already last in every stack. Montserrat is a geometric sans close to Galton in proportion; keep the Light (300) default and Sentence case. Do not substitute a serif or a condensed face.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Body, top nav, footer, most sections |
| Hairline | 1px `{colors.hairline}` border | Section dividers, table rows, card outlines |
| Raised surface | `{colors.surface-raised}` (white @4%) + hairline border | Cards, modals, panels — no drop shadow |
| Accent glow | Radial primary tint at very low opacity | Optional hover halo on a feature panel only |

The system avoids drop shadows and gradients. Depth comes from the contrast between the near-black canvas and a barely-raised white-at-opacity surface, plus the hairline. Do not add material-style elevation shadows.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Inputs, textareas, selects, checkboxes — always flat |
| `{rounded.component}` | 10px | Small UI elements |
| `{rounded.card}` | 20px | Standard card / media container |
| `{rounded.card-lg}` | 24.5px | Large icon-card |
| `{rounded.pill}` | 100px | Buttons, tags, chips, the badge |

The radius language is intentional: **form controls are flat (0px); interactive pills are fully round (100px); content containers are softly rounded (20px)**. Avoid arbitrary in-between radii.

## Components

> Interaction note: buttons and inputs use a standard `ease` over ~300–600ms. Hover states are described in prose; default (and focus) states are the source of truth in the YAML.

### Top Navigation
**`top-nav`** — A 56px sticky bar on `{colors.canvas}` with a blur and a `{colors.hairline}` bottom border. Carries the **wordmark lockup** at left — embed `galton-wordmark-white.svg` (don't retype the letters) — and a set of in-page anchor links + at most one **compact secondary (outline) pill** CTA at right (`{component.button-secondary}`, with the button typography). **The yellow button does not belong in the persistent nav** — keep `{component.button-yellow}` for the primary in-page CTA (hero, forms). Links are `{typography.body}` in `{colors.muted}`, brightening to `{colors.ink}` on hover.

### Logo lockup
The white **GALTON wordmark** (vector SVG, `fill="currentColor"`) plus a superscript ® and a letter-spaced "Brands" tagline beneath. **White or black only** — the lockup never turns yellow, even on hover. See "Logo & Iconography".

### Buttons
All buttons: pill (`{rounded.pill}`), UPPERCASE, Galton Bold (`{typography.button}`), `inline-flex` centered, transition `all 0.6s ease`. Bottom padding is ~0.1rem less than top (optical compensation for Galton's ascenders). Responsive padding: mobile `10px 20px 8.4px` · 1024px `12px 24px 10.4px` · 1280px `11px 30px 10px`.

- **`button-yellow`** — The signature CTA. `{colors.primary}` background, `{colors.on-primary}` text, `{colors.canvas}` border. Hover → `{colors.canvas}` background, `{colors.ink}` text, `{colors.ink}` border.
- **`button-primary`** — `{colors.ink}` background, `{colors.on-primary}` text (on dark surfaces). Hover → `{colors.canvas}` background, `{colors.ink}` text.
- **`button-secondary`** — Transparent with a `{colors.ink}` border (ghost/outline on dark). Hover → `{colors.ink}` background, `{colors.on-primary}` text.

### Inputs & Forms
Dark-first: transparent background, bottom-border only, primary-yellow focus. On light surfaces, override the white border/text to black.

- **`text-input`** — Flat (`{rounded.none}`), transparent, `{colors.ink}` bottom border, height 53px, `{typography.body}`/400, placeholder `{colors.muted}`. Focus → border `{colors.primary}`.
- **`textarea`** — Flat, hairline (`{colors.hairline}`) bottom border, min-height 120px, vertically resizable. Focus → `{colors.primary}`.
- **`select`** — Flat, `{colors.ink}` bottom border, height 53px, `appearance: none`. The native arrow is replaced by the brand chevron (grey "V") at the right, padding-right 30px, weight 300, `{colors.muted}` text. Focus → `{colors.primary}`. (Sourced from the galton.sk contact form.)
- **`checkbox`** — Flat square (`{rounded.none}`), `{colors.ink}` border, 30px → 45px@1024, fills with a white square on `:checked`, focus → `{colors.primary}`. Pair with a label in `{typography.body}`/300 inside a flex `form-check` row.
- **`label`** — `{typography.label}` (Galton Light), `{colors.ink}`, block, 8px bottom margin.

### Links, Eyebrow & Badge
- **`text-link`** — `color: inherit`, no underline, hover/focus → `{colors.link}` (primary). Transition `color 0.3s ease`.
- **`eyebrow`** — Small uppercase label above headlines: `{typography.eyebrow}`, `{colors.primary}`.
- **`badge`** — Neutral pill chip for meta/status/version on dark: `{typography.badge}`, `{colors.muted}`, `{colors.hairline}` border, `{rounded.pill}`.

### Cards & Containers
**`card`** — `{colors.surface-raised}` background, `{colors.hairline}` border, `{rounded.card}` (20px), ~28px padding, no drop shadow. (Detailed card patterns are not yet fully specified — see Known Gaps.)

### Footer
**`footer`** — `{colors.canvas}`, `{colors.muted}` text, a `{colors.hairline}` top border, centered wordmark lockup + copy. ~72px vertical padding. The footer never inverts.

## Logo & Iconography

### Two marks
All logo files are served at `https://galton-ai-assets.vercel.app/brand/logos/` — **hotlink them by their absolute URL** (CORS is open). In a header/footer lockup, embed the wordmark SVG, e.g. `<img src="https://galton-ai-assets.vercel.app/brand/logos/galton-wordmark-white.svg" alt="GALTON">` — **never retype "GALTON" as text** to fake the logo. Fetch any file by name below.

- **Symbol — the "G"**: `galton-symbol.svg` (`fill="currentColor"`, inherits text colour) — favicon, app icon, avatar, loader, compact mark. Explicit-fill copies `galton-symbol-white.svg` / `galton-symbol-black.svg` for raster/email.
- **Wordmark — "GALTON"**: `galton-wordmark.svg` (vector, `fill="currentColor"`) — the primary digital logo. Explicit `galton-wordmark-white.svg` / `galton-wordmark-black.svg` for raster; the full **GALTON® + BRANDS tagline lockup** as `galton-wordmark-white-tagline.png` / `galton-wordmark-black-tagline.png` for formal/print.

### The hard color rule
**The logo is white or black ONLY — never yellow/primary or any other color.** When using a `currentColor` mark, ensure the inherited color is white or black, never `{colors.primary}`. White on dark; black on light (or on a primary-yellow surface, where the mark is black). Never recolor, add shadows/gradients/outlines, stretch, rotate, or re-typeset the wordmark.

### Favicons
The "G" symbol as a site/app icon (white on transparent), served at `https://galton-ai-assets.vercel.app/brand/icons/`:
- `galton-favicon-32x32.png` (browser tab), `galton-favicon-192x192.png` (Android/high-DPI), `galton-favicon-180x180.png` (Apple touch icon).

> **Complete asset manifest:** every logo, font and icon — with formats, usage notes and direct URLs — is served as JSON at `https://galton-ai-assets.vercel.app/brand.json` and indexed at `https://galton-ai-assets.vercel.app/llms.txt`. This spec carries enough to fetch the brand directly; the manifest is the exhaustive list.

## Do's and Don'ts

### Do
- Build dark-first: `{colors.canvas}` floor, `{colors.ink}` text, `{colors.primary}` for accents only.
- Set everything in Galton Light (300), Sentence case. Step to 500/700 only for emphasis.
- **Nothing renders below 15px** on the web — 15px is the hard minimum (section-label `eyebrow`, `badge`, captions, code, table headers). Body/reading text (body, buttons, form labels, links, nav) is **18px**.
- Keep the leading ratios: Headline ×1.1, Subhead ×1.2, Body ×1.5.
- Use `{component.button-yellow}` for the signature CTA; keep all buttons pill + uppercase + Bold.
- Keep inputs flat (`{rounded.none}`), transparent, bottom-border only, focus → `{colors.primary}`.
- Build raised surfaces from white/grey at low opacity (`{colors.surface-raised}`).
- Keep the logo white or black, always.
- Hotlink fonts and logos by their absolute `https://galton-ai-assets.vercel.app/brand/…` URLs (CORS is open); embed the wordmark SVG for any lockup.

### Don't
- Don't color the logo yellow/primary or any color other than white/black. (Hard rule.)
- Don't introduce a new hex for surfaces — derive from white/grey at opacity.
- Don't use `{colors.primary}` as a large fill, or put primary type on white (low contrast).
- Don't uppercase body copy — uppercase is for eyebrow, buttons and badge only.
- Don't add drop shadows or gradients for depth; use the canvas/hairline/raised-surface stack.
- Don't round inputs or square the buttons — form controls are 0px, buttons are 100px.
- Don't substitute a serif or condensed face for Galton — fall back to Montserrat only.
- Don't relativise asset URLs to `/brand/…` or copy fonts/logos locally — hotlink the absolute `https://galton-ai-assets.vercel.app/brand/…` URL, or the font silently falls back to Montserrat off-site.
- Don't fake the logo by retyping "GALTON" as styled text — embed the wordmark SVG.
- Don't put the yellow button in the persistent top nav — the nav CTA is the compact secondary/outline pill; yellow is for the primary in-page CTA.

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Single column; in-page nav links hide (CTA stays); display type drops to the smallest step; section rhythm ~56px; form rows go 1-up |
| Tablet | 768–1024px | Wider gutters (2.5rem); subhead/headline step up; 2-up form rows |
| Desktop | 1024–1280px | Full type scale; gutter 4rem; section rhythm ~104px |
| Wide | > 1280px | Display-lg/display reach their max (180/120px); content max 1080px |

### Touch Targets
- Buttons render at a comfortable tap height (≥44px effective).
- `{component.text-input}` and `{component.select}` are 53px tall.
- `{component.checkbox}` is 30px (mobile) → 45px (desktop).

### Collapsing Strategy
- Top-nav anchor links hide below 720px; the wordmark lockup and the single pill CTA stay.
- `form-row` two-column grids collapse to one column below ~640px.
- Display headlines step down one size per breakpoint; body stays 18px throughout (the web/body minimum).

### Image / Mark Behavior
- SVG marks scale crisply at any size; prefer the vector wordmark for digital and the tagline PNG only for formal/print.

## Agent Prompt Guide

Point your agent at this design system first — connect the **MCP server**, drop **DESIGN.md** into the repo, or share the URL. Then describe **intent, not values**: say *on-brand*, *the signature accent*, *the display headline*, and the agent resolves the exact colours, type and components from the spec. The prompts below are starting points — copy one and adapt it. None of them hard-codes a hex or a size; that's the agent's job, from the guidelines.

## Iteration Guide

1. Work one component at a time; reference its YAML key (e.g. `{component.button-yellow}`, `{component.select}`).
2. New form controls default to `{rounded.none}` (0px); interactive pills use `{rounded.pill}`; content containers use `{rounded.card}`.
3. Variants live as separate entries in `components:`.
4. Use `{token.refs}` everywhere — never inline a hex or a raw px where a token exists.
5. Keep the type Galton Light / Sentence case; only the eyebrow, button and badge are uppercase.
6. When in doubt about emphasis: more size and leading before more weight; never reach for a new color.
7. The logo stays white or black in every state, including hover.

## Known Gaps

- **Confirmed from the official manual:** palette, typeface, type hierarchy + leading, colour combinations, logo system, corner radius, buttons and forms. Spacing/grid and motion are intentionally left out of this spec — define them per project rather than treating derived values as brand law.
- **Sub-brand chip** and detailed **card patterns** are not yet fully specified. Derive them from these principles (dark-first, palette tokens, the radius/motion scales) — or confirm from galton.sk — and add them. (The brand **icon library** — line / 3d / simple — is specified separately in `icons.json` and the Icon library section.)
- **Display token sizes** in the frontmatter are the desktop maximum; the full responsive range is in the Typography table.
- **Surface tokens** (`surface-raised`, `hairline`) are expressed as white-at-opacity rather than fixed hex, matching the brand's "no new hex" rule.