---
version: alpha
name: Modal
website: "https://modal.com"
description: >-
  Modal's marketing surface is a serverless-compute brand styled as a near-black operator console — Goga display set at 64px / weight 500 with neutral tracking carries the hero on a deep "#231c1c" ground, paired with a single radioactive-lime "#7fee64" pill CTA that runs corner-radius "3.35544e+07px" (the brand's float-to-pill trick) and a pale-green ink "#ddffdc" that carries 218 of every heading, paragraph, and nav-link across the page, while Inter Variable at weight 500 runs every line of UI copy and Goga handles every display tier.
seo:
  title: "Modal Design System for React — Goga display, lime pill CTA, 17 components"
  metaDescription: "Modal's design language as a DESIGN.md file. Black ground #231c1c, lime CTA #7fee64, Goga display, Inter UI. For React, Next.js, and AI tools."
  highlights:
    - "Radioactive-lime as the only saturated surface — `#7fee64` fills a single pill CTA, never a card, never a body color"
    - "Pale-green ink everywhere — `#ddffdc` carries 218 text + 193 border occurrences, replacing the white that most dark-canvas brands default to"
    - "Float-to-pill radius — `3.35544e+07px` (a Tailwind overflow trick) used 52 times to force perfect capsules at any height"
    - "Goga serif-grotesque at weight 400 ceiling — hero 64px, H2 60px, card 24px, all sitting on the same axis with neutral tracking"
    - "Dual-canvas polarity — a `#231c1c` near-black operator ground runs the upper page, then flips to `#ddffdc` pale-green for the supporting feature bands"
  tags:
    - "Web Infrastructure & Hosting"
    - "AI & LLM Platforms"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Modal's marketing page is what happens when a serverless-compute brand decides the right reference is not Vercel and not Linear but a console terminal painted in radioactive-lime. The upper canvas is a near-black `#231c1c` ground that reads as warm rather than neutral (a 0.234 lightness with a faint red tilt at hue 18, not the dead `#0a0a0a` most dev-infra brands reach for), and every line of text on that ground is set in a pale-green ink `#ddffdc` — the single highest-frequency color on the page at 411 occurrences, splitting 218 text against 193 border. The hero headline ("AI infrastructure that developers love") runs Goga, a sturdy proprietary grotesque with humanist quirks, at 64px / weight 500 / 64px line / neutral tracking. Below it, the only saturated filled surface on the entire page: a `#7fee64` lime pill CTA at 38px height with a corner radius of `3.35544e+07px`, the brand's float-to-pill Tailwind hack that guarantees perfect capsules regardless of height.

    This DESIGN.md packages the system into a single machine-readable file following the Google Labs spec. Inside: 20 color tokens (the deep operator ground `#231c1c` and its dark-band sibling `#000000`, the pale-green ink `#ddffdc` with 411 page occurrences, the lime CTA `#7fee64` with only 20 occurrences, the dual canvas pivot `#ddffdc` pale-green band, a graded pale-green ladder from `#c8f9b6` through `#677d64` to `#4d614c` for borders and supporting text, a muted-green body color `#8cab87`, plus zinc neutrals `#a3a3a3` and `#697368` for tertiary captions), 9 typography tokens across Goga display and Inter Variable UI, 5 radii from 0px to the float-to-pill 9999px, 9 spacing tokens built around a strong 16px base, and 17 components covering the lime pill CTA, the dark hero band, the pale-green feature band, the eyebrow tag, and the global nav.

    Feed the file to Claude, Cursor, or Copilot when you want a React surface that reads as Modal — black operator ground, pale-green text, a single lime conversion target, Goga at neutral tracking. The agent picks up the constraints: never escalate Goga past weight 500, never replace `#ddffdc` with a neutral white, never use `#7fee64` for anything other than the primary CTA pill. Reference the tokens directly in Tailwind config or use the spec as an audit checklist against the page. Where most serverless-compute brands signal speed with electric purple or hot blue, Modal signals it with a green that reads as oscilloscope phosphor — confidence by chromatic restraint and a single voltage point.
  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://modal.com"
      title: "Modal — official site"
      description: "Run CPU, GPU, and data-intensive compute at scale on the serverless platform for AI and data teams."
    - 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."
  questions:
    - id: "primary-color"
      title: "What is Modal's primary brand color?"
      answer: "Modal runs two greens at different layers. The structural primary is `#ddffdc` — a pale-green ink that carries 411 page occurrences, splitting 218 text against 193 border (it is the single highest-frequency color on the page). The accent primary is `#7fee64` — a radioactive lime that fills the `Get Started` pill CTA and nothing else, with only 20 total occurrences. The two share a 138-142° hue family but diverge sharply in chroma: `#ddffdc` sits near zero chroma at oklch 0.058, while `#7fee64` runs at 0.204 — the page's only point of chromatic voltage."
    - id: "typography"
      title: "What typography does Modal use, and what are reasonable substitutes?"
      answer: "Display runs Goga, a proprietary humanist grotesque with serif-adjacent terminals — 64px / weight 500 / 64px line at the hero, 60px / weight 400 at section H2, 24px / weight 400 at card titles. Goga never tracks negative on the marketing surface; every display tier sits at `letter-spacing: normal`. UI copy runs Inter Variable at 16px / weight 500 / `-0.36px` tracking — body, nav-links, eyebrow labels, and the lime button all use Inter at weight 500 with a single weight ceiling. If Goga isn't licensable, GT America Mono Display, PP Neue Montreal, or Söhne Breit at weight 500 with neutral tracking read closest. Inter is open-source — substitutes are unnecessary."
    - id: "float-to-pill-radius"
      title: "Why is the border-radius `3.35544e+07px` on the primary CTA?"
      answer: "`3.35544e+07px` is `Number.MAX_SAFE_INTEGER` worth of pixels — a Tailwind class (`rounded-[100rem]` or similar) that resolves to a number large enough to guarantee a perfect capsule on any element, regardless of its rendered height. Modal uses this same value 52 times across the page wherever a pill shape is needed; standard `9999px` only appears 4 times. The trick is functionally identical to `border-radius: 9999px` on a 38px-tall element, but the extreme value defends against any future scale increase without re-tuning the radius."
    - id: "lime-cta-restraint"
      title: "Why is the lime green `#7fee64` only used on one button?"
      answer: "`#7fee64` appears only 20 times across the page (8 bg, 6 text, 6 border), and the bg occurrences are concentrated in the single `Get Started` pill CTA at 38px height with 9px 21px padding. Every other call-to-action — the `Documentation`, `Pricing`, nav-links — runs as a hairline-bordered ghost on pale-green ink `#ddffdc`. The brand treats the lime as a single point of voltage rather than a palette; using it on a card background or a secondary button would diffuse the conversion target and break the operator-console restraint that defines the page."
    - id: "dark-canvas-polarity"
      title: "Why does Modal use two different canvases instead of one?"
      answer: "The upper page (hero, code-frame feature panels, the `Designed to help AI teams deploy faster` band) runs on `#231c1c` near-black with `#ddffdc` pale-green ink. The lower supporting bands (the `Powering any ML workload` and `Build on a powerful foundation` sections) flip polarity to `#ddffdc` pale-green canvas with `#000000` text. This polarity shift is a deliberate punctuation device: the dark band carries the operator-console pitch (terminals, charts, GPU pricing), and the pale-green band carries the editorial close (case studies, foundation features). Where most pages stick to one polarity, Modal uses the flip itself as a section divider."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React project?"
      answer: "Yes — the file is structured for direct ingestion by Claude, Cursor, or any AI tool that reads token-based design specs. The agent reproduces Modal's constraints (Goga at weight 500 ceiling, lime `#7fee64` reserved for a single pill CTA, pale-green `#ddffdc` text on `#231c1c` ground, float-to-pill radius for every capsule) rather than inventing a generic shadcn theme. Every hex, font size, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or a custom component library."

colors:
  primary: "#7fee64"
  primary-on: "#000000"
  ink: "#ddffdc"
  ink-strong: "#c8f9b6"
  body: "#8cab87"
  body-mute: "#869085"
  tertiary: "#697368"
  caption: "#677d64"
  hairline: "#3e4a3c"
  hairline-strong: "#485346"
  hairline-deep: "#4d614c"
  canvas: "#231c1c"
  canvas-band: "#000000"
  canvas-elevated: "#212525"
  canvas-light: "#ddffdc"
  canvas-light-soft: "#def0dd"
  surface-light-ink: "#000000"
  zinc-tertiary: "#a3a3a3"
  accent-dark: "#4c833e"
  accent-pale: "#bbe6ac"

typography:
  display-xl:
    fontFamily: "Goga, ui-sans-serif, system-ui, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
    letterSpacing: normal
  display-lg:
    fontFamily: "Goga, ui-sans-serif, system-ui, sans-serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 60px
    letterSpacing: "-0.36px"
  display-md:
    fontFamily: "Goga, ui-sans-serif, system-ui, sans-serif"
    fontSize: 54px
    fontWeight: 400
    lineHeight: 59.4px
    letterSpacing: normal
  display-sm:
    fontFamily: "Goga, ui-sans-serif, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 44px
    letterSpacing: normal
  heading-md:
    fontFamily: "Goga, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.2px
    letterSpacing: normal
  heading-sm:
    fontFamily: "Goga, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: normal
  body-md:
    fontFamily: "Inter Variable, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: "-0.36px"
  body-sm:
    fontFamily: "Inter Variable, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: "-0.36px"
  body-md-regular:
    fontFamily: "Inter Variable, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "-0.36px"
  body-md-strong:
    fontFamily: "Inter Variable, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: "-0.36px"
  button-md:
    fontFamily: "Inter Variable, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: "-0.36px"
  eyebrow:
    fontFamily: "Inter Variable, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: "1.2px"
    textTransform: uppercase

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "16px"
  full: "9999px"
  pill: "3.35544e+07px"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "10px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  band: "120px"

components:
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    borderColor: "{colors.hairline}"
    padding: "{spacing.md} {spacing.lg}"
  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0 {spacing.md}"
    height: "23px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-on}"
    borderColor: "{colors.primary-on}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "9px 21px"
    height: "38px"
  button-primary-hover:
    backgroundColor: "{colors.accent-pale}"
    textColor: "{colors.primary-on}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline-deep}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 20px"
    height: "38px"
  button-ghost:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 20px"
    height: "38px"
    border: "0"
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "{spacing.band} {spacing.3xl}"
  dark-feature-band:
    backgroundColor: "{colors.canvas-band}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.display-lg}"
    padding: "{spacing.band} {spacing.3xl}"
  light-feature-band:
    backgroundColor: "{colors.canvas-light}"
    textColor: "{colors.surface-light-ink}"
    typography: "{typography.display-sm}"
    padding: "{spacing.band} {spacing.3xl}"
  code-frame-card:
    backgroundColor: "{colors.canvas-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline-strong}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
  feature-cell:
    backgroundColor: "{colors.canvas-light-soft}"
    textColor: "{colors.surface-light-ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-md-regular}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg} {spacing.base}"
  eyebrow-tag:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body-mute}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.full}"
    padding: "{spacing.xxs} {spacing.md}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline-deep}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.md}"
    height: "38px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body-mute}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    padding: "{spacing.3xl} {spacing.lg}"
  link-inline:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  divider:
    backgroundColor: "{colors.hairline}"
    height: "1px"
  focus-ring:
    borderColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    opacity: "0.5"
---

## Overview

Modal's marketing surface is a serverless-compute brand styled as a near-black operator console — the page sells GPU compute, sandboxes, and batch jobs, but it does it with a warm `{colors.canvas}` (`#231c1c`) ground, Goga grotesque headlines in pale-green ink `{colors.ink}` (`#ddffdc`), and a single radioactive-lime `{colors.primary}` (`#7fee64`) pill button as the only saturated surface on the entire page. The whole composition inverts the category default. Where Vercel commits to grayscale neutrals and Geist Sans at weight 600, where Linear commits to indigo voltage on a slate canvas, Modal commits to a warm-black operator ground, an evenly-weighted Goga headline at neutral tracking, and a phosphor-green CTA pill that runs `{rounded.pill}` (a `3.35544e+07px` float-to-pill radius) at 38px height.

**Single-voltage chromatic restraint**: most dev-infra brands command attention with two or three saturated colors — a brand hue, a status green, an error red. Modal collapses that into one. `{colors.primary}` (`#7fee64`) appears 20 times across the page; the entire rest of the chrome runs on pale-green ink `{colors.ink}` (`#ddffdc`) and graded hairlines from `{colors.hairline}` (`#3e4a3c`) through `{colors.hairline-deep}` (`#4d614c`). The result is a page where every CTA cluster has exactly one conversion target — the lime is the eye magnet, and the rest of the page steps aside.

**Neutral tracking as the brand voice**: Goga never tracks negative on the marketing surface. The 64px hero, the 60px H2, and the 24px card title all sit at `letter-spacing: normal` (Inter's `-0.36px` tracking is reserved for UI copy). Where most display typefaces lean on aggressive negative tracking to feel "designed", Modal lets Goga breathe. The page reads as steadier for it, even at 64px.

**Key Characteristics:**
- A single saturated lime CTA — `{colors.primary}` (`#7fee64`) — fills the `Get Started` pill at 38px height with `{rounded.pill}` (`3.35544e+07px`) float-to-pill radius. Every secondary action runs as a `{colors.hairline-deep}` (`#4d614c`) bordered ghost on the dark ground.
- Pale-green ink — `{colors.ink}` (`#ddffdc`) — is the structural backbone with 411 page occurrences (218 text, 193 border), the single highest-frequency color on the page. It replaces the white that most dark-canvas brands default to.
- Goga grotesque at neutral tracking carries every display tier — 64px hero / 60px H2 / 24px card title — all loaded at weight 400-500 with `letter-spacing: normal`. Inter Variable carries every UI line at weight 500 with `-0.36px` tracking.
- Dual-canvas polarity divides the page — upper sections run `{colors.canvas}` (`#231c1c`) near-black with pale-green ink; lower sections flip to `{colors.canvas-light}` (`#ddffdc`) pale-green with black ink. The polarity flip itself acts as the section divider.
- The float-to-pill `3.35544e+07px` radius value appears 52 times across the page (against only 4 occurrences of standard `9999px`). It is the brand's preferred capsule trick — guaranteed-perfect pills regardless of element height.
- Spacing is built around a 16px base (41 occurrences) with a 48px section base and a 120px band rhythm; card interiors sit at 20-24px padding with 8-16px corner radius.

## Colors

The palette splits into three layers: a warm-black structural ground with pale-green ink, a single radioactive-lime accent, and a graded pale-green hairline ladder for borders and supporting text. The pale-green ink does the work that white does in most dark-canvas systems; the lime stays scarce.

### Brand & Accent
- **Modal Lime (`#7fee64`)** — frequency 20. Used as bg (8), border (6), text (6). The single saturated filled surface on the page — fills only the `Get Started` primary CTA pill at 38px height. Never used as a card background, never softened to a tint, never paired with a second saturated color.
- **Accent Pale (`#bbe6ac`)** — frequency 0 (declared in `:root` for dataviz primary). The pressed / hover variant of the lime CTA, slightly desaturated toward the pale-green ink family.
- **Accent Dark (`#4c833e`)** — frequency 0 (declared as `--color-icon-accent`). The brand's deep-green accent reserved for status icons on the pale-green canvas — never used as a CTA fill on the dark ground.

### Surface
- **Modal Ground (`#231c1c`)** — frequency 0 in computed pixels but declared as `--color-ground` / `--color-surface-primary` in `:root`. Not black, not gray — a near-black with a faint red tilt at hue 18 / oklch 0.234 that reads as warm rather than dead. The page's primary canvas under hero and dark feature bands.
- **Canvas Band (`#000000`)** — frequency 232. Used as text (119), bg (11), border (88), gradient (12). The deeper sibling of the ground — fills the central `Designed to help AI teams deploy faster` dark band and the code-frame card edges.
- **Canvas Elevated (`#212525`)** — frequency 7. Used as bg (1), gradient (6). The slightly-lifted surface inside dark gradient overlays — code-frame cards and inline terminal embeds.
- **Canvas Light (`#ddffdc`)** — see Text. Also doubles as the polarity-flip section canvas for the `Powering any ML workload` band.
- **Canvas Light Soft (`#def0dd`)** — frequency 5. Used as bg (5). The slightly-deeper sibling of `canvas-light` for feature cells inside the pale-green band.

### Text
- **Pale-Green Ink (`#ddffdc`)** — frequency 411. Used as text (218), bg (0), border (193). The structural workhorse — every headline, body paragraph, and nav-link label across the dark band, plus 193 hairline-tinted borders on the same surfaces. Reads as a softened green rather than a neutral white; the tint is what binds it to the rest of the green system.
- **Ink Strong (`#c8f9b6`)** — frequency 15. Used as text (7), border (7), bg (1). The brighter pale-green for emphasized headings on the central dark band (the `Designed to help AI teams deploy faster` H2).
- **Body Muted (`#8cab87`)** — frequency 8. Used as text (4), border (4). The secondary body color — sub-headings, illustrated-card captions, supporting paragraph copy. Reads as a softened green-gray rather than a neutral mute.
- **Body Mute Gray (`#869085`)** — frequency 31. Used as border (31). The hairline-only mute green — appears only as border, never as text or bg.
- **Tertiary (`#697368`)** — frequency 4. Used as text (2), border (2). Lowest-priority text — fine print, footer captions, declared as `--color-foreground-tertiary`.
- **Zinc Tertiary (`#a3a3a3`)** — frequency 0 in computed pixels but declared as `--color-foreground-secondary`. The neutral zinc fallback for secondary text inside the pale-green band where green-on-green would lose contrast.

### Hairline Ladder
The brand's structural edges are a graded ladder of pale greens, not neutrals:
- **Hairline (`#3e4a3c`)** — frequency 7. Used as text (3), bg (1), border (3). The default 1px edge color across dark-band cards and dividers, declared as `--color-edge-primary`.
- **Hairline Strong (`#485346`)** — frequency 8. Used as border (8). The next step up — heavier dividers between dark feature panels.
- **Hairline Deep (`#4d614c`)** — frequency 17. Used as text (7), bg (3), border (7). The deepest hairline — outlines on the secondary buttons and inline pills.
- **Caption (`#677d64`)** — frequency 20. Used as text (10), border (10). Supporting hairline tier — borders on tertiary surfaces and the fine-print caption color.

The hairline ladder all sits in the same 140° hue family as the pale-green ink, with chroma stepping from near-zero up to 0.046 — every edge color on the page is a desaturated green, never a neutral gray.

## Typography

### Font Family
Two faces carry the entire page:

1. **Goga** — a proprietary humanist grotesque with serif-adjacent terminals on the lowercase descenders. Loaded at weights 400 and 500 across the display tiers — hero at 64px / weight 500 / 64px line / neutral tracking; H2 at 60px / weight 400 / `-0.36px` tracking; mid-tier H2 at 54px / weight 400 / neutral tracking; large H2 at 40px / weight 400 / neutral tracking; card titles at 24px / weight 400 / neutral tracking. Goga never appears below 20px on the marketing surface.
2. **Inter Variable** — Rasmus Andersson's open-source grotesque. Loaded at weights 400, 500, 600, and 700 — body paragraphs at 16px / weight 500 / `-0.36px` tracking (the dominant UI weight, 122 occurrences); small body at 14px / weight 500 / `-0.36px` tracking; uppercase eyebrows at 12px / weight 500 / `1.2px` tracking. Inter never appears above 16px on the marketing surface.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 500 | 64px | normal | Hero headline (`AI infrastructure that developers love`). |
| `{typography.display-lg}` | 60px | 400 | 60px | -0.36px | The single-line dark-band H2. |
| `{typography.display-md}` | 54px | 400 | 59.4px | normal | Section H2 (`Designed to help AI teams deploy faster`). |
| `{typography.display-sm}` | 40px | 400 | 44px | normal | Light-band H2 inside the pale-green polarity flip. |
| `{typography.heading-md}` | 24px | 400 | 31.2px | normal | Card titles, feature-cell headings, mid-density supporting headlines. |
| `{typography.heading-sm}` | 20px | 400 | 28px | normal | Inline section sub-headings. |
| `{typography.body-md}` | 16px | 500 | 24px | -0.36px | Dominant body text — 122 occurrences across paragraphs, nav-links, and inline labels. |
| `{typography.body-md-regular}` | 16px | 400 | 24px | -0.36px | Regular-weight body inside dense paragraph blocks. |
| `{typography.body-md-strong}` | 16px | 700 | 24px | -0.36px | Inline emphasis inside body paragraphs. |
| `{typography.body-sm}` | 14px | 500 | 20px | -0.36px | Footer copy, small captions, feature-cell metadata. |
| `{typography.button-md}` | 14px | 500 | 20px | -0.36px | Get Started button, secondary button labels. |
| `{typography.eyebrow}` | 12px | 500 | 16px | 1.2px | Uppercase section eyebrow tags, `+1.2px` tracking. |

### Principles
- **Goga sits at neutral tracking, Inter sits at `-0.36px`.** The two faces never share a tracking value. The brand's discipline is in the half-step.
- **Weight 500 is the Inter ceiling and the Goga floor.** Inter never escalates past 500 except for inline body emphasis at 700; Goga drops to 400 below the 64px hero. Both faces stay inside a narrow weight window.
- **Goga never appears below 20px.** Below 20px belongs to Inter Variable; the role-split is strict.
- **Eyebrows are uppercase + tracked.** The `1.2px` tracking on 12px uppercase Inter is the brand's only positive letter-spacing — every other token is zero or negative.

### Font Substitutes
Goga is proprietary. Close open-source substitutes: GT America Display, PP Neue Montreal, or Söhne Breit at weight 400-500 with neutral tracking. Inter Variable is itself open-source — pull it from Google Fonts or rsms.me directly.

## Layout

### Spacing System
- **Base unit**: 4px, with a strong 16px base (the brand's `{spacing.base}`, 41 page occurrences) that dominates section padding. A 48px secondary base (33 occurrences) and a 20px sibling (30 occurrences) carry mid-density rhythm.
- **Tokens**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px · `{spacing.band}` 120px.
- **Section padding**: marketing bands stretch to `{spacing.band}` (120px) top/bottom — the rhythm that lets each feature scene occupy its own page-height window.
- **Card interior padding**: `code-frame-card` sits at `{spacing.lg}` (20px); feature-cells at `{spacing.lg} {spacing.base}` (20px / 16px).
- **Inline gap**: nav rows and feature clusters use `{spacing.md}` (12px) to `{spacing.lg}` (20px) between siblings.

### Grid & Container
- **Max width**: roughly 1100–1240px content column. The hero pulls in further (~603px headline width per the extracted `widthPx: 603`).
- **Column patterns**:
  - Hero: center-stacked, with the headline / subhead / lime CTA / secondary CTA stack at the page center.
  - Dark feature band: 2-up split with the body left and a code-frame or chart card right.
  - Light feature band: 5-up icon row across the `Powering any ML workload` strip; 2-up grid below for `Build on a powerful foundation`.
  - Footer: multi-column link grid above a closing logo strip.

### Whitespace Philosophy
Generous vertical space between bands (`{spacing.band}` 120px) lets each feature scene occupy its own page-height window. Inside a section, the eyebrow-to-headline gap is tight (~16px), then a wider gap before the body-to-CTA cluster. Whitespace, not dividers, separates the bands — the hairline `{colors.hairline}` (`#3e4a3c`) is reserved for inside-card structure and 1px horizontal rules.

### Responsive Strategy

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 600px | Hero stacks vertically, 2-up feature bands collapse to single-column with code-frame above text. |
| Tablet | 600–1023px | 2-up dark bands hold; the `Powering any ML workload` 5-up icon row drops to 3-up. |
| Desktop | ≥ 1024px | Full 2-up alternating dark bands; 5-up icon row; nav row stays horizontal with all links visible. |

Touch targets: the 38px-tall `button-primary` falls just below the 44px WCAG floor — the live page inflates touch area via padding rather than visual height.

## Elevation & Depth

Modal's elevation system is built on hairlines and dark-canvas gradient lifts, not drop-shadows. The hierarchy:

| Level | Treatment | Use |
|---|---|---|
| Level 0 — Flat | No border, no shadow. | Hero band, full-width section backgrounds. |
| Level 1 — Hairline | 1px unbroken `{colors.hairline}` (`#3e4a3c`) or `{colors.hairline-deep}` (`#4d614c`). | Default card chrome — code-frame cards, feature cells, nav bar, footer dividers, secondary buttons. |
| Level 2 — Gradient Lift | Radial gradient from `{colors.canvas-elevated}` (`#212525`) into `{colors.canvas-band}` (`#000000`) under code panels and chart cards. | The brand's primary "depth" cue on the dark canvas — replaces shadow with a chromatic step-up. |
| Level 3 — Polarity Flip | Flip from `{colors.canvas}` (`#231c1c`) ground to `{colors.canvas-light}` (`#ddffdc`) pale-green canvas. | Used once per page as the boundary between operator-pitch and editorial close — the polarity itself is the depth cue. |

### Decorative Depth
- **Gradient-as-depth**: the central dark band uses a radial gradient from `{colors.canvas-elevated}` into `{colors.canvas-band}` to lift code-frame embeds off the surrounding ground.
- **Hairline as edge**: the page reads as composed of stacked rectangles, all separated by 1px hairlines in the pale-green family rather than shadow drops.
- **Polarity flip as section punctuation**: the `{colors.canvas-light}` (`#ddffdc`) supporting band is the single depth-change cue on the marketing surface — the upper page stays on `{colors.canvas}` (`#231c1c`).

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed bands, headline blocks, body paragraphs. |
| `{rounded.sm}` | 4px | Tightest inline pill — used on inline code marks and metadata chips. |
| `{rounded.md}` | 8px | Default card chrome — 13 occurrences across the page on feature cells and code-frame insets. |
| `{rounded.lg}` | 16px | Large card chrome — 8 occurrences on the primary `code-frame-card` containers. |
| `{rounded.full}` | 9999px | The conventional pill — 4 occurrences on small badges and the eyebrow tags. |
| `{rounded.pill}` | 3.35544e+07px | The float-to-pill capsule — 52 occurrences, the brand's dominant button radius. Guarantees perfect pills regardless of element height. |

### Component Geometry
- **Pill CTA**: 38px height with `{rounded.pill}` (`3.35544e+07px`) capsule. The `9px 21px` padding holds the label inset.
- **Code-frame cards**: 16px corner radius on the outer container; inline code blocks inside use 4–8px corners.
- **Feature cells**: 8px corner radius on the inner pale-green band cells.
- **Eyebrow tags**: full pill at `9999px`, tiny padding (`4px 12px`).

## Components

### Buttons

**`button-primary`** — the canonical lime pill, the only saturated filled surface on the page.
- Background `{colors.primary}` (`#7fee64`), text `{colors.primary-on}` (`#000000`), label set in `{typography.button-md}` (14px / 500), padding `9px 21px`, shape `{rounded.pill}` (`3.35544e+07px`), height 38px. Reserved for the hero `Get Started` target.

**`button-primary-hover`** — the pressed state.
- Background `{colors.accent-pale}` (`#bbe6ac`), text and shape inherit from `button-primary`.

**`button-secondary`** — the ghost button paired with primary inside feature clusters.
- Background `{colors.canvas}` (`#231c1c`), text `{colors.ink}` (`#ddffdc`), 1px `{colors.hairline-deep}` (`#4d614c`) border, same typography / shape / height as `button-primary`.

**`button-ghost`** — the borderless variant inside footer or low-emphasis surfaces.
- Background `{colors.canvas}` (`#231c1c`), text `{colors.ink}` (`#ddffdc`), no border, same typography / shape / height.

### Cards & Containers

**`code-frame-card`** — the canonical dark-band code-and-chart panel.
- Background `{colors.canvas-elevated}` (`#212525`), text `{colors.ink}` (`#ddffdc`), 1px `{colors.hairline-strong}` (`#485346`) border, body in `{typography.body-sm}`, padding `{spacing.lg}` (20px), shape `{rounded.lg}` 16px. Hosts code snippets, charts, and inline terminal embeds.

**`feature-cell`** — the small feature-grid card under the `Build on a powerful foundation` cluster.
- Background `{colors.canvas-light-soft}` (`#def0dd`), text `{colors.surface-light-ink}` (`#000000`), 1px `{colors.hairline}` (`#3e4a3c`) border, body in `{typography.body-md-regular}`, padding `{spacing.lg} {spacing.base}` (20px / 16px), shape `{rounded.md}` 8px.

### Navigation

**`nav-bar`** — the sticky top nav.
- Background `{colors.canvas}` (`#231c1c`), text `{colors.ink}` (`#ddffdc`), 1px bottom border `{colors.hairline}` (`#3e4a3c`), padding `{spacing.md} {spacing.lg}`. Layout: logo left, link row center, `Log In / Get Started` cluster right.

**`nav-link`** — the link row inside `nav-bar`.
- Text `{colors.ink}` (`#ddffdc`), set in `{typography.body-md}` (16px / 500), padding `0 {spacing.md}`, height 23px.

**`footer`** — the bottom multi-column nav.
- Background `{colors.canvas}` (`#231c1c`), text `{colors.body-mute}` (`#869085`), top border `{colors.hairline}` (`#3e4a3c`), padding `{spacing.3xl} {spacing.lg}`. Column headings in `{typography.eyebrow}` (uppercase, weight 500, `+1.2px` tracking); link rows in `{typography.body-sm}`.

### Signature Components

**`hero-band`** — the opening dark band with the lime CTA.
- Background `{colors.canvas}` (`#231c1c`), text `{colors.ink}` (`#ddffdc`), padding `{spacing.band} {spacing.3xl}` (120px / 48px). Inside: a centered 64px Goga headline (`AI infrastructure that developers love`), a 16px Inter Variable subhead, the lime `button-primary`, and a hairline-bordered `button-secondary` paired right.

**`dark-feature-band`** — the central operator-pitch band.
- Background `{colors.canvas-band}` (`#000000`), text `{colors.ink-strong}` (`#c8f9b6`), padding `{spacing.band} {spacing.3xl}`. Hosts the `Designed to help AI teams deploy faster` H2 in `{typography.display-lg}` (60px Goga / weight 400) plus a 2-up grid of `code-frame-card` panels.

**`light-feature-band`** — the polarity-flip pale-green band.
- Background `{colors.canvas-light}` (`#ddffdc`), text `{colors.surface-light-ink}` (`#000000`), padding `{spacing.band} {spacing.3xl}`. Hosts a 5-up icon strip (`Powering any ML workload`) above a 2-up `feature-cell` grid (`Build on a powerful foundation`).

**`eyebrow-tag`** — the small uppercase metadata pill above section headlines.
- Background `{colors.canvas}` (`#231c1c`), text `{colors.body-mute}` (`#869085`), label in `{typography.eyebrow}` (12px / 500 / `+1.2px` tracking, uppercase), shape `{rounded.full}`, padding `{spacing.xxs} {spacing.md}`.

**`text-input`** — the form input on sign-up flows.
- Background `{colors.canvas}` (`#231c1c`), text `{colors.ink}` (`#ddffdc`), 1px `{colors.hairline-deep}` (`#4d614c`) border, body in `{typography.body-md}`, padding `{spacing.sm} {spacing.md}` (10px / 12px), shape `{rounded.md}` 8px, height 38px.

**`link-inline`** — body-copy inline links.
- Text `{colors.primary}` (`#7fee64`), body in `{typography.body-md}`, underlined on hover.

**`divider`** — the horizontal hairline rule between sections inside cards.
- Background `{colors.hairline}` (`#3e4a3c`), height 1px.

**`focus-ring`** — the accessibility focus indicator.
- Border `{colors.primary}` (`#7fee64`) at 50% opacity, `{rounded.pill}` corners on pill targets.

## Do's and Don'ts

**Do**
- Set every display headline in Goga at neutral tracking — `display-xl`, `display-md`, `display-sm`, `heading-md` all share `letter-spacing: normal`. Only `display-lg` runs `-0.36px`.
- Use `{colors.ink}` (`#ddffdc`) — not pure white — for every text element on the `{colors.canvas}` (`#231c1c`) ground. The pale-green tint is what binds the dark band into the broader green system.
- Render the lime `{colors.primary}` (`#7fee64`) only on the primary CTA pill. Every other call-to-action uses the hairline-bordered `button-secondary` (dark surface, `#4d614c` border).
- Use the `{rounded.pill}` (`3.35544e+07px`) float-to-pill radius for every capsule. The standard `9999px` value appears only 4 times on the live page; `3.35544e+07px` appears 52 times.
- Hold Inter UI copy at `-0.36px` tracking and Goga display copy at `normal`. The tracking split is part of the role-split between display and UI.

**Don't**
- Don't use `{colors.primary}` (`#7fee64`) for body text or card backgrounds — it's a single-button voltage (only 8 bg occurrences on the page, all in the same `Get Started` CTA). Using it for a status badge or a card surface diffuses the conversion target.
- Don't replace `{colors.ink}` (`#ddffdc`) with neutral pure white on the dark ground — pure white reads as foreign next to the pale-green hairline ladder (`#3e4a3c` → `#4d614c` → `#677d64`). The tint is what binds the page.
- Don't pair `button-primary` with a second saturated color — every adjacent CTA is a `{colors.hairline-deep}` (`#4d614c`) bordered ghost. The lime is a single voltage point per viewport.
- Don't run Goga at 14px or 12px. The grotesque is reserved for `display-*` and `heading-*` tokens (20px and above); anything below 20px belongs to Inter Variable.
- Don't substitute the `{rounded.pill}` (`3.35544e+07px`) value with `9999px` and call it equivalent. The float-to-pill value defends against future scale increases without re-tuning — this is a deliberate Tailwind move, not a typo.
- Don't introduce a neutral gray hairline like Tailwind's `neutral-700`. The hairline ladder `{colors.hairline}` / `{colors.hairline-strong}` / `{colors.hairline-deep}` is built on the same 140° green hue family as the ink; a neutral gray collapses the brand into a generic shadcn dark theme.

## Known Gaps

- **Hover and focus states**: the extraction captured `--color-surface-primary-hover` and `--color-surface-primary-active` tokens, but per-component hover-state shifts on every component are not documented as tokens here. The `button-primary-hover` is inferred from the dataviz-pale variant.
- **Authenticated dashboard**: this DESIGN.md covers only the public marketing surface. The Modal app dashboard (deployment logs, GPU pools, job queues) sits behind authentication and uses a denser surface vocabulary not captured here.
- **Code-syntax theme**: the inline code-frame cards use a green-on-black syntax theme that is integral to the brand voice but is not extracted as tokens — the syntax highlighting is rendered by a runtime highlighter rather than as DESIGN.md color tokens.
- **Motion**: subtle scroll-linked transitions and chart-data animations exist on the live page but timing curves and durations are not extracted.
- **Dataviz palette**: the brand declares a full eight-stop dataviz palette under `--color-c-dataviz-primary-1` through `--color-c-dataviz-primary-8` (pale-green, terracotta, mustard, plum, and more) but only the primary `{colors.accent-pale}` (`#bbe6ac`) surface is referenced here — the full chart-color set lives in the brand's internal tokens repo.