Dark developer-platform brand: a deep blue-black canvas lit by one electric mint-teal #32e6e2 that carries every CTA, link and the star mascot, heavy Figtree-800 headlines, uppercase Martian Mono eyebrows over Instrument Sans, full-radius teal pill buttons, hand-drawn white line illustration, and Night-Owl code syntax as the only secondary colour.
Browse Netlify 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: netlify.com (live DOM, computed styles), 2026-07-16 (desktop 1512px). Coverage: home / marketing. Dashboard: pending login (needs-dashboard). Responsive: breakpoints from tokens only; mobile rendering not verified.
Confident dark developer-platform brand: a deep blue-black canvas lit by one electric mint-teal, with a big, friendly Figtree headline set at an unusually heavy 800 weight. The chrome is grayscale navy; nearly all colour is the single teal accent, which paints CTAs, links, borders and the star mascot, while a warm hand-drawn white line-illustration (a phone in a shopping cart, clouds, trees, a smiling star) keeps the mood playful rather than austere. Code and product cards borrow a Night-Owl editor palette (sky-blue, lilac, cornflower) so the syntax itself supplies secondary colour. Elevation is nearly flat — thin navy hairlines do the structural work, with soft shadows reserved for floating cards. Full-radius pill CTAs, uppercase Martian Mono eyebrows and Instrument Sans body round out a system that feels engineered but approachable. Feels: dark, electric, friendly, developer-native.
| Token | Hex | Role / usage |
|---|---|---|
| bg-deep | #060b10 | Deepest sections, footer |
| bg | #12181f | Primary page canvas, dark button bg |
| surface | #1e242c | Raised panels / cards |
| surface-2 | #181a1c | Insets, code-card chrome |
| teal-panel | #0c2a2a | Teal-tinted feature panels/tabs |
| teal-wash | #0a282833 | Low-alpha teal inset |
| Token | Hex | Role / usage |
|---|---|---|
| text | #defffe | Primary body text (mint-white) |
| white | #ffffff | Headings, high-contrast text |
| text-soft | #e4f0fb / #e6ecf2 | Secondary headings/copy |
| muted | #7e8792 | Eyebrows, captions, secondary text |
| faint | #4d565f | Tertiary / disabled |
| ink-on-teal | #014847 | Dark text on teal fills/chips |
| Token | Hex | Role / usage |
|---|---|---|
| teal | #32e6e2 | Signature accent: CTAs, links, borders, mascot |
| blue | #316bf4 | Secondary accent / occasional link |
| green | #32ae88 | Success borders |
| code-blue | #89ddff | Night-Owl syntax (strings/keys) |
| code-lilac | #c792ea | Night-Owl syntax (keywords) |
| code-sky | #add7ff / #5fb3ff | Night-Owl syntax (vars/functions) |
| Token | Hex | Role / usage |
|---|---|---|
| border | #272f38 | Default hairline on dark |
| border-2 | #3b434c | Stronger control border |
| border-teal | #32e6e2 | Active/selected outline |
| border-faint | #ffffff33 | Low-alpha divider on dark |
Rule: teal #32e6e2 is the only brand colour on chrome — CTAs, links, active borders, mascot. Secondary colour comes only from code syntax.
Figtree, system-ui, Helvetica, sans-serif — headings at weight 800."Instrument Sans", system-ui, Helvetica, sans-serif."Martian Mono", ui-monospace, "Cascadia Code", monospace — uppercase.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 70 | 800 | normal, Figtree |
| Section (h2) | 49 / 54 | 800 | normal, Figtree |
| Eyebrow (h3) | 12 / 13 | 500 | uppercase, Martian Mono, #7e8792 |
| Body | 16 / 24 | 400 | normal, Instrument Sans |
| UI / button | 16 | 700 | Figtree (13px on compact) |
| Small label | 14 / 21 | 600 | Instrument Sans |
Patterns: headline weight is unusually heavy (800); eyebrows are always uppercase monospace. Button labels are Figtree 700.
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.