Modal Design System

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

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

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:

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

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.