Skip to main content
Back to Gallery

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.

modal.com/Added
Modal Full Page — desktop screenshot

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.

Mode strategydark-first
  • 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

Save PNG
  • foreground
    37%
    • HEX#5B6D5C
    • RGBrgb(91, 109, 92)
    • HSLhsl(123, 9%, 39%)
    • OKLCHoklch(51.47% 0.0342 146.55)
  • foreground
    33%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • background
    22%
    • HEX#DDFFDC
    • RGBrgb(221, 255, 220)
    • HSLhsl(118, 100%, 93%)
    • OKLCHoklch(96.65% 0.0582 144.35)
  • background
    5%
    • HEX#DEF0DD
    • RGBrgb(222, 240, 221)
    • HSLhsl(117, 39%, 90%)
    • OKLCHoklch(93.66% 0.0317 143.86)
  • accent
    1%
    • HEX#7FEE64
    • RGBrgb(127, 238, 100)
    • HSLhsl(108, 80%, 66%)
    • OKLCHoklch(85.40% 0.2041 139.82)
  • foreground
    0%
    • HEX#181818
    • RGBrgb(24, 24, 24)
    • HSLhsl(0, 0%, 9%)
    • OKLCHoklch(20.90% 0.0000 89.76)
  • accent
    0%
    • HEX#10A550
    • RGBrgb(16, 165, 80)
    • HSLhsl(146, 82%, 35%)
    • OKLCHoklch(63.28% 0.1680 150.62)
  • neutral
    0%
    • HEX#485346
    • RGBrgb(72, 83, 70)
    • HSLhsl(111, 8%, 30%)
    • OKLCHoklch(42.84% 0.0253 140.82)
  • accent
    0%
    • HEX#9CD4FF
    • RGBrgb(156, 212, 255)
    • HSLhsl(206, 100%, 81%)
    • OKLCHoklch(84.66% 0.0835 241.98)

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.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#000000#DDFFDC19.41AAAAAA+101foreground on background
Aa
#DDFFDC#00000019.41AAAAAA-102background on foreground
Aa
#181818#FFFFFF17.76AAAAAA+105foreground on background
Aa
#FFFFFF#18181817.76AAAAAA-107background on foreground
Aa
#000000#DEF0DD17.61AAAAAA+94foreground on background
Aa
#DEF0DD#00000017.61AAAAAA-95background on foreground
Aa
#DDFFDC#18181816.41AAAAAA-101background on foreground
Aa
#181818#DDFFDC16.41AAAAAA+99foreground 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.

Total4Lazy loaded0%svg3png1
Page type
  • Full Page
Industry
  • ai
  • developer-tools
Theme
  • dark
Added
  • 2026-06-23

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.