# Modal — Marketing Site Design Spec

> Source: modal.com (live DOM, computed styles), 2026-07-15 (desktop 1512px).
> Coverage: marketing home. Dashboard/console: pending login (`needs-dashboard`). Responsive: breakpoints not fully verified.

## 1. Visual Theme & Atmosphere

Dark, luminous AI-infrastructure brand where a pure-black canvas is lit almost entirely by one radioactive lime-green. Text is not white but a pale mint (#ddffdc), so even the copy feels tinted by the accent; secondary UI text drops into muted olive-greens. The signature moment is a scatter of glowing translucent green cubes floating across the black hero — the Modal mark rendered as volumetric, back-lit objects — giving the page depth without any drop shadows. Type pairs a rounded geometric display (Goga) for headlines with Inter for everything else; the first words of the hero glow lime while the rest stay mint. Chrome is a floating rounded-dark nav bar; borders are low-alpha green hairlines rather than gray. Feels: dark, electric, technical, alive.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| mint-100 | `#ddffdc` | Primary text + headings (mint-white, most-used) |
| mint-200 | `#def0dd` | Secondary pale text |
| green-gray-500 | `#5b6d5c` | Muted body / secondary UI text |
| green-gray-450 | `#677d64` | Tertiary text |
| green-gray-400 | `#697368` | Captions |
| olive-600 | `#3e4a3c` | Dim labels / disabled |
| green-muted | `#9cbf93` | Eyebrows / labels (muted green) |
| green-soft | `#8cab87` / `#aed2a4` | Soft green UI text |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Page background |
| surface | `#181818` | Floating nav, cards, stat blocks |
| surface-2 | `#1c1c1c` | Alt panels |
| surface-3 | `#212525` | Insets |
| border | `rgba(221,255,220,.3)` | Mint low-alpha hairline (outline buttons) |
| border-olive | `#485346` / `#3e4a3c` | Dim green dividers |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| lime | `#7fee64` | Signature accent: primary button, hero glow words, cube glow, links |

Rule: lime `#7fee64` is the single accent — filled primary button, the first words of the hero, cube glow, and link states. Everything else is a mint/olive-green ladder on black.

## 3. Typography Rules

- Display: `Goga, ui-sans-serif, system-ui, sans-serif` (rounded geometric; 400/500)
- UI/body: `"Inter Variable", ui-sans-serif, system-ui, sans-serif`

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 64 | 500 | normal |
| Section (h2) | 54 / 59 | 400 | normal |
| Subhead (h3) | 30 / 36 | 400 | -0.36px |
| Body | 16–18 | 400–500 | 0 |
| Eyebrow | 12 / 16 | 500 | +0.6px, uppercase, `#9cbf93` |
| Button | 14 | 400 | 0 |

Patterns: Goga display stays near weight 400–500 (never heavy); Inter carries all UI. Eyebrows are muted-green uppercase with positive tracking.

## 4. Component Stylings

### Buttons
- **Primary (filled)**: bg lime `#7fee64`, text `#000000`, radius pill (full), h 38px, 14px/400, no border.
- **Secondary (outline)**: bg transparent, text `#ddffdc`, border 1px mint low-alpha `rgba(221,255,220,.3)`, radius pill, h 38px.
- **Nav sign-up**: lime text `#7fee64` + a small lime circular arrow badge.
- **Ghost/nav link**: mint text `#ddffdc`, no bg.

### Cards / stat blocks
- bg `#181818`, radius 12px, low-alpha green hairline border, no drop shadow (depth comes from the glowing cubes, not shadows).

### Nav
- Floating rounded-dark bar: bg `#181818`, pill/large radius, centered links, logo left (green cube mark + white wordmark), right Log In + Sign Up.

### Chips / labels
- Muted-green uppercase eyebrows (Inter 12px/500, +0.6px, `#9cbf93`); small mono-style code chips for SDK snippets.

## 5. Layout Principles

- Centered hero: floating nav → large Goga headline (first words lime) → mint subhead → dual CTA (lime primary + outline) → glowing cube field → grayscale logo wall.
- Max content width ~1120px, centered.
- Generous vertical rhythm on black; sections separated by space, not rules.

## 6. Depth & Elevation

- Radii: small `4px`, cards `8–12px`, buttons/nav `pill` (full).
- No box-shadows captured — elevation is faked with luminous green cubes and radial glow on the black canvas.

## 7. Motion

- Micro-transitions on hover (color/opacity); the hero cubes drift/glow. Animation library not confirmed; no heavy scroll-jacking observed.

## 8. Backgrounds, Effects & WebGL

- Pure-black canvas. Signature: multiple translucent, back-lit green cubes floating across the hero with a soft lime glow (radial-gradient / blurred glow layers) — the brand's volumetric motif. No background video confirmed; grayscale logo wall below. Green low-alpha borders substitute for dividers.

## 9. Do's and Don'ts

### Do
- Keep the canvas pure black and set text in mint `#ddffdc`, not plain white.
- Use lime `#7fee64` as the only accent — primary button, hero glow words, and cube glow.
- Pair Goga (display, 400–500) with Inter (UI/body); keep headline weight light.
- Fake depth with luminous green cubes and radial glow, not drop shadows.
- Use pill buttons: filled lime (black text) + mint low-alpha outline.
- Set eyebrows in muted green `#9cbf93`, uppercase, +0.6px tracking.

### Don't
- Don't use pure-white text or a light canvas.
- Don't add drop shadows — depth is glow-based.
- Don't introduce a second accent color; stay on the green ladder.
- Don't set the Goga display heavy/bold.

## 10. Responsive Behavior

- Floating nav collapses to a menu on small screens; hero type scales down. Breakpoints not fully verified — captured at desktop 1512px.

## 11. Agent Prompt Guide

- Canvas `#000000` · Text `#ddffdc` · Muted `#5b6d5c` · Border `rgba(221,255,220,.3)` · Accent `#7fee64`
- Font: `Goga` display / `Inter Variable` UI · Body: 16px · Radius: 8–12px card / pill button · Control height: 38px
- Primary: lime `#7fee64` bg + black text, pill · Outline: mint low-alpha hairline

<modal_design_language>
Use the Modal design language: a pure-black canvas lit almost entirely by one radioactive lime #7fee64. Text is mint #ddffdc rather than white, with muted olive-greens (#5b6d5c, #9cbf93) for secondary UI; surfaces are near-black #181818 with low-alpha mint hairline borders and no drop shadows. Headlines are set in Goga (rounded geometric, weight 400-500) with the first words glowing lime; Inter Variable carries all UI and body, and eyebrows are muted-green uppercase Inter at 12px +0.6px. The primary button is a full-pill lime block with black text (38px); the secondary is a pill outlined in a mint low-alpha hairline. The signature brand moment is a scatter of translucent, back-lit green cubes floating across the black hero with a soft radial glow — depth comes from that glow, never from shadows. Cards are #181818, radius 8-12px, hairline-bordered; the nav is a floating rounded-dark bar. Feels: dark, electric, technical, alive. Avoid: white text, a light canvas, drop shadows, a second accent color, and heavy display weights.
</modal_design_language>