Modal · Full Page
Modal
Serverless AI-compute marketing surface as composed as the runtime it ships — black canvas, acid-green accent, rich gradient glow. Infra as conviction.

Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
Modal is what happens when an infrastructure team designs its own marketing site with the same conviction it ships its runtime — and it shows in every pixel. We catalogued it because it solves the hardest brief in developer-tooling: making serverless GPU compute feel exciting without resorting to the stock-photo-and-blue-gradient cliché the category usually settles for. If you are selling something technical to people who can smell marketing fluff from the terminal, this is the page that proves restraint and energy can live in the same dark canvas.
Design decisions observed
- An acid-green accent that does the work of a whole brand — Modal commits to a single high-voltage green and lets it carry every CTA, link, and glow against the black. One memorable color beats a tasteful palette nobody remembers.
- Gradients used as light sources, not decoration — soft green radial glows bleed in from the corners and rise from the page bottom, lighting the dark canvas like a server rack in a dim room. They read as atmosphere, never as a hero banner.
- A two-font split that signals exactly who this is for — a distinctive display face carries the headlines while a monospace face handles code and technical labels. The page tells engineers 'this is your dialect' before they read a word.
- Black-on-black layering that earns its depth through hairlines — the surface separates near-black panels with single-pixel borders rather than heavy shadows, so the page feels engineered rather than stacked.
- Motion that is allowed to have a personality — a bouncy overshoot curve shows up in the interaction vocabulary, a deliberate break from the safe ease-outs everyone else ships. It makes the product feel alive without becoming a toy.
- Bold, oversized display typography as the primary spectacle — Modal lets a 64px headline be the loudest thing on the page, trusting type over imagery to set the tone.
What to study
- How a single saturated accent against pure black becomes a brand asset — study where Modal allows the green to appear and, more importantly, where it withholds it. The discipline is the design.
- Gradients as ambient lighting — Modal layers nearly a dozen low-opacity radial glows to sculpt depth on a flat black surface. Learn how to use gradients as a light rig instead of a billboard.
- The display-plus-mono pairing as an audience signal — borrow the instinct, not the exact fonts: a characterful display face for voice, a monospace for the technical register your reader trusts.
- Hairline-driven elevation on dark surfaces — see how 1px borders and subtle near-black background shifts do the structural work that drop shadows can't on a black canvas.
What to avoid
- Don't pour the acid green across large fills — its entire power comes from being scarce against the black. Flood the page with it and you trade a signature for a headache.
- Don't copy Modal's radial-glow stack literally onto a light background — these gradients are calibrated for a near-black canvas at single-digit opacity. On white they turn muddy and the effect collapses.
- Don't reach for the bouncy overshoot curve on every interaction — Modal spends it selectively. Apply spring-feeling motion everywhere and the page reads as nervous rather than confident.
Taste notes
The page feels like standing in front of a well-lit server rack at night — everything is black, but the black is alive with soft green light leaking from the edges. Authority comes from the typographic confidence and the refusal to over-explain; the green isn't there to delight, it's there to point. Modal trusts that its audience reads code for a living, so the design speaks in the same precise, slightly austere register as a good API: dense where it counts, quiet everywhere else, and never decorated for the sake of it.
Lineage & references
- Part of the modern developer-infrastructure cohort (Vercel, Railway, Fly.io) — companies that treat their marketing site as a competence demo, where the craft of the page is itself the proof of the platform.
- Shares the dark-canvas-plus-electric-accent lineage of the technical-tool renaissance (Linear, Warp, Replit) — but trades Linear's homeopathic restraint for a single bolder, louder green that owns the brand outright.
- Sits alongside the GPU/AI-compute peer set (Replicate, Baseten, Runpod) as the design-forward standard-bearer — the one that proves ML infrastructure marketing doesn't have to look like a datasheet.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Dark-first developer infrastructure aesthetic on a pure-black canvas (#000000 body, #181818 panel). A single acid-green brand accent (#7fee64) carries every CTA, link, and glow; a secondary teal (#10a550) handles supporting state. The page is lit, not decorated — nearly a dozen low-opacity green radial gradients bleed in from corners and rise from the bottom edge, acting as ambient light sources rather than hero banners. Display voice is carried by a characterful display face (Goga) from 24 to 64px; Inter Variable handles body; Fira Mono handles code and technical labels. Elevation comes from 1px hairlines, not shadows. Motion is expressive — it permits a bouncy overshoot curve where most pages would not.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (pure-black canvas #000000 + near-black panel #181818, a single high-voltage green accent #7fee64 + supporting teal #10a550, near-white green-tinted text #ddffdc), the ambient lighting strategy (low-opacity green radial gradients used as light sources on the dark canvas, never as fills), the typographic split (a characterful display family for headings scaling to 64px, Inter Variable for body, a monospace for code and technical labels), the 2px-base spacing scale, hairline-first elevation (1px solid borders over drop shadows), the radius scale (4/8/11/12/25px), and the expressive motion vocabulary (cubic-bezier(0.4, 0, 0.2, 1) primary, plus a bouncy cubic-bezier(0.34, 1.56, 0.64, 1) used selectively). Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.
Overview
- Layout
- Grid
- Content width
- Bounded
- Framing
- Layered
- Grid strength
- Strong
Color philosophy
Pure-black-first canvas — #000000 body paired with #181818 panel doing the dominant surface work, lit by a single acid-green brand accent #7fee64 (the most-frequent brand-tier color). Foreground text is a near-white green-tinted #ddffdc; on the rare light section the canvas inverts to #def0dd. Secondary text descends through muted greens: #5b6d5c (the most-measured text color) for de-emphasized body. A supporting teal #10a550 carries secondary accent state. The accent green appears almost exclusively in CTAs, links, and as low-opacity radial glows — never as a large fill.
- Pure-black canvas pair #000000 (body, 1290 measured occurrences) + #181818 (panel) doing the dominant surface work
- Near-white green-tinted text #ddffdc (863 occurrences) as the primary reading layer on the dark canvas
- Muted green #5b6d5c (the single most-measured text color, 1426 occurrences) for de-emphasized / secondary body text
- Acid-green brand accent #7fee64 (isBrandTier) reserved for CTAs, links, focus, and gradient glows — surface area kept scarce
- Secondary teal accent #10a550 (isBrandTier) for supporting state and secondary emphasis, never competing with the primary green
- Light-section inversion #def0dd background only where the page deliberately flips out of dark mode
Gradients (paste-ready)
radial-gradient(165% 110% at 50% 100%, rgba(128, 238, 100, 0.4) 0%, rgba(128, 238, 100, 0.22) 22%, rgba(128, 238, 100, 0.1) 42%, rgba(128, 238, 100, 0.03) 65%, rgba(128, 238, 100, 0) 92%) radial-gradient(55% 45% at 45% -8%, rgba(195, 198, 64, 0.85) 0%, rgba(120, 130, 30, 0.55) 22%, rgba(0, 0, 0, 0) 65%) radial-gradient(35% 45% at 105% 32%, rgba(120, 220, 130, 0.75) 0%, rgba(40, 140, 70, 0.45) 25%, rgba(0, 0, 0, 0) 70%) radial-gradient(60% 80% at -8% 50%, rgba(127, 238, 100, 0.55), rgba(127, 238, 100, 0) 65%) linear-gradient(to top, rgb(33, 37, 37), rgba(0, 0, 0, 0))
Typography rules
- Display family: Goga (self-hosted) carries all headings from 24px to 64px. Body family: Inter Variable. Monospace: Fira Mono (self-hosted, weights 400/500/700) for code, kbd, and technical labels.
- Display weight ladder: Goga 400 (most headings) + 500 (hero / display sizes 42-64px). Body Inter Variable at 400 (reading) / 500 (UI labels + dense body).
- Heading scale (Goga): 24px / 30px / 40px / 54px / 64px — large-step jumps for clear hierarchy. Hero sits at 64px with unitless 1.0 line-height (display sits tight).
- Body Inter Variable: 16px / 14px / 12px with line-heights 24 / 20 / 16px respectively. Default body is 16px/500 with -0.36px tracking.
- Letter-spacing in px, not em: -0.36px is the recurring optical correction on body and most UI text; large Goga headings run at normal tracking; 12px micro-labels use +0.6px positive tracking.
- Monospace mandatory for code, inline `kbd`, and technical identifiers (Fira Mono). Reach for it to signal the developer register the page is built for.
- No second display font beyond Goga — the display/body/mono trio is the boundary; mixing in a fourth family dilutes the technical voice.
Spacing rules
- 2px base unit. Scale: 2 / 4 / 6 / 8 / 10 / 12 / 16 / 18 / 20 / 24 / 28 / 32 — 20px (103 occurrences) and 12px (60) are the dominant rhythm values.
- Container max-width 1400px (the primary bounded rail). Narrow content clusters use a 368px secondary rail.
- Gutter values for flex/grid draw from 8 / 12 / 18 / 20 / 24 / 32 / 48 / 64 px — 24px (25 occurrences) is the default flex gap; 32px and 48px appear in grid columns/rows.
- Section padding leans on 32px (49 occurrences) as the primary block padding; 24px and 20px for tighter clusters.
- Card / control padding: 16-24px on desktop, 8-12px on dense mobile. Always pick from scale values; no magic numbers.
Design tokens
Palette, type, and space — all agent-readable.
10 colors · hex / rgb / hsl / oklch
- foreground37%
- HEX
#5B6D5C - RGB
rgb(91, 109, 92) - HSL
hsl(123, 9%, 39%) - OKLCH
oklch(51.47% 0.0342 146.55)
- HEX
- foreground33%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- background22%
- HEX
#DDFFDC - RGB
rgb(221, 255, 220) - HSL
hsl(118, 100%, 93%) - OKLCH
oklch(96.65% 0.0582 144.35)
- HEX
- background5%
- HEX
#DEF0DD - RGB
rgb(222, 240, 221) - HSL
hsl(117, 39%, 90%) - OKLCH
oklch(93.66% 0.0317 143.86)
- HEX
- accent1%
- HEX
#7FEE64 - RGB
rgb(127, 238, 100) - HSL
hsl(108, 80%, 66%) - OKLCH
oklch(85.40% 0.2041 139.82)
- HEX
- foreground0%
- HEX
#181818 - RGB
rgb(24, 24, 24) - HSL
hsl(0, 0%, 9%) - OKLCH
oklch(20.90% 0.0000 89.76)
- HEX
- accent0%
- HEX
#10A550 - RGB
rgb(16, 165, 80) - HSL
hsl(146, 82%, 35%) - OKLCH
oklch(63.28% 0.1680 150.62)
- HEX
- neutral0%
- HEX
#485346 - RGB
rgb(72, 83, 70) - HSL
hsl(111, 8%, 30%) - OKLCH
oklch(42.84% 0.0253 140.82)
- HEX
- accent0%
- HEX
#9CD4FF - RGB
rgb(156, 212, 255) - HSL
hsl(206, 100%, 81%) - OKLCH
oklch(84.66% 0.0835 241.98)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 14 nodes captured; depth capped at 6 for readability.
- body
- └─ div
- └─ div
- ├─ div
- │ └─ div
- │ └─ Nav
- ├─ Main
- │ ├─ Section
- │ │ └─ Section
- │ └─ div (×4)
- │ └─ div
- │ └─ Article (×4)
- ├─ Section
- └─ Footer
Accessibility
WCAG contrast matrix.
68 combinations · 40 pass AA · 24 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #000000 | #FFFFFF | 21.00 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #000000 | 21.00 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #DDFFDC | 19.41 | AAA | AAA | +101 | foreground on background |
Aa | #DDFFDC | #000000 | 19.41 | AAA | AAA | -102 | background on foreground |
Aa | #181818 | #FFFFFF | 17.76 | AAA | AAA | +105 | foreground on background |
Aa | #FFFFFF | #181818 | 17.76 | AAA | AAA | -107 | background on foreground |
Aa | #000000 | #DEF0DD | 17.61 | AAA | AAA | +94 | foreground on background |
Aa | #DEF0DD | #000000 | 17.61 | AAA | AAA | -95 | background on foreground |
Aa | #DDFFDC | #181818 | 16.41 | AAA | AAA | -101 | background on foreground |
Aa | #181818 | #DDFFDC | 16.41 | AAA | AAA | +99 | foreground on background |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
- Full Page
- ai
- developer-tools
- dark
- 2026-06-23
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also


