Dark luminous AI-infra brand: a pure-black canvas lit almost entirely by one radioactive lime #7fee64, mint #ddffdc text rather than white, rounded Goga headlines over Inter, full-pill lime buttons, and a scatter of glowing translucent green cubes that fake depth without any drop shadows.
Browse Modal in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
Goga, ui-sans-serif, system-ui, sans-serif (rounded geometric; 400/500)"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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.