# Netlify — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces (dark)
| 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 |

### Text
| 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 |

### Accent & code
| 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) |

### Borders
| 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.

## 3. Typography Rules

- Display: `Figtree, system-ui, Helvetica, sans-serif` — headings at **weight 800**.
- Body/UI: `"Instrument Sans", system-ui, Helvetica, sans-serif`.
- Eyebrows/labels: `"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.

## 4. Component Stylings

### Buttons
- **Primary (teal pill)**: bg `#32e6e2`, text `#12181f`, 2px `#32e6e2` border, radius `360px` (full pill), h `40px`, Figtree 700 16px, padding `0 17px`. Hover: slight brightness/fill shift (0.2s).
- **Secondary (ghost pill)**: bg `#ffffff19` (translucent white), text `#32e6e2`, transparent border, radius `360px`, h `40px`, Figtree 700.
- **Dark block**: bg `#12181f`, text `#ffffff`, radius `4px`, h `40px`, Instrument Sans 400.
- **Small outline**: transparent bg, text `#32e6e2`, 1px `#32e6e2` border, radius `4px`, h `34px`, Figtree 700 13px. Filled variant: teal bg, `#014847` text.

### Inputs
- Dark field on `#12181f`, hairline `#272f38` border, radius ~4px, mint-white text, muted `#7e8792` placeholder. Focus: teal `#32e6e2` border (ring not captured).

### Cards / panels
- bg `#1e242c` (or `#12181f`), 1px `#272f38` border, radius `4px` (some 12px), soft shadow only when floating.
- Code cards: `#181a1c` chrome, Night-Owl syntax colours, mono type.

### Tabs (feature switcher)
- Teal-tinted active cell `#0c2a2a` with teal top border, radius `4px 4px 0 0`; inactive `#0a282833` with `#272f38` border.

### Chips / badges
- Small, teal text or teal fill with `#014847` ink, radius 4–6px.

## 5. Layout Principles

- Max content width ~1280px, left-aligned hero (headline left, illustration right).
- Top announcement bar: full-bleed teal `#32e6e2` band with dark ink.
- Nav: transparent over dark canvas, logo left, center dropdown links, right Search / Contact / Log in (ghost) + Sign up (teal pill).
- Hero anatomy: 64px Figtree-800 headline → 16px body → dual pill CTA (teal primary + ghost secondary) → "Add to your coding agent" copy field; hand-drawn white line illustration on the right.
- Base spacing on ~4px grid; generous section rhythm.

## 6. Depth & Elevation

- Radii: 2px, `4px` (default cards/controls), 6px, 8px, 12px, `360px` (full pill CTAs).
- Control height: buttons/inputs `40px` (compact `34px`).
- Elevation: mostly flat with navy hairlines. Floating-card shadow: `0 16px 24px rgba(0,0,0,.07), 0 6px 30px rgba(0,0,0,.06), 0 8px 10px rgba(0,0,0,.1)`. A teal glow `rgb(128,128,128) 0 0 5px` appears on some accents.

## 7. Motion

- Micro-transitions ~0.2s. Dominant: `background-color 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.2s cubic-bezier(0.22,1,0.36,1)`; also `filter 0.2s`, `translate 0.1s ease-out`, and a `cubic-bezier(0.33,1,0.68,1)` variant.
- Ease-out character (easeOutExpo-like). No heavy scroll library detected; illustrations are static SVG.

## 8. Backgrounds, Effects & WebGL

- Flat dark solid surfaces; no WebGL/canvas hero. Signature visual is a hand-drawn white line-illustration plus the orange star mascot over the navy canvas.
- Code cards render Night-Owl syntax highlighting as the main secondary-colour source.
- Soft shadows only on floating cards; occasional low-alpha teal washes (`#0a282833`). No background video, grain, or blur captured.

## 9. Do's and Don'ts

### Do
- Keep the canvas deep blue-black (`#12181f`, deepest `#060b10`) and let one mint-teal `#32e6e2` carry CTAs, links, active borders and the mascot.
- Set headlines in Figtree at weight 800; use uppercase Martian Mono for eyebrows/labels and Instrument Sans for body.
- Make primary CTAs full-radius (360px) teal pills with dark `#12181f` ink; secondary CTAs translucent-white ghost pills with teal text.
- Use navy hairlines (`#272f38`) for structure; reserve soft shadows for floating cards.
- Let secondary colour come from Night-Owl code syntax, not from new brand hues.
- Keep radius small (4px) on cards/controls, full pill on CTAs.

### Don't
- Don't switch to a light canvas or drop the teal accent.
- Don't use display weights below 800 for hero headlines.
- Don't introduce a second brand accent beyond teal (blue `#316bf4` is incidental).
- Don't replace hairlines with heavy shadows.
- Don't set eyebrows in the sans family — they are always uppercase Martian Mono.

## 10. Responsive Behavior

- Fluid display sizing via `--step-*` / clamp tokens (`--font-size-display-2xl:var(--step-5)`).
- Nav collapses to a menu button on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#12181f` · Text `#defffe` · Muted `#7e8792` · Border `#272f38` · Accent `#32e6e2`
- Fonts: Figtree 800 (display) / Instrument Sans (body) / Martian Mono (eyebrows) · Body 16px · Radius 4px card / 360px pill · Control height 40px
- Focus: teal `#32e6e2` border · Hover fill: brightness shift on teal, 0.2s cubic-bezier(0.22,1,0.36,1)

<netlify_design_language>
Use the Netlify design language: a dark developer-platform theme on a deep blue-black canvas (#12181f, deepest #060b10, raised #1e242c) with one electric mint-teal accent #32e6e2 carrying every CTA, link, active border and the friendly star mascot. Set headlines in Figtree at a heavy 800 weight (64px display); body in Instrument Sans 16/24 at 400; eyebrows and labels in uppercase Martian Mono #7e8792. Primary buttons are full-radius (360px) teal pills with dark #12181f ink; secondary buttons translucent-white ghost pills (#ffffff19) with teal text; small outline buttons use a 1px teal border at radius 4px. Text is mint-white #defffe; structure comes from navy hairlines #272f38 not shadows, with soft multi-layer shadows only on floating cards. Secondary colour comes only from Night-Owl code syntax (#89ddff, #c792ea, #add7ff). Cards and controls use small 4px radius; motion is 0.2s ease-out (cubic-bezier(0.22,1,0.36,1)) on background/border. Keep it playful with a hand-drawn white line illustration. Feels: dark, electric, friendly, developer-native. Avoid: a light canvas, a second brand accent beyond teal, hero weights under 800, sans-family eyebrows, or heavy shadows replacing hairlines.
</netlify_design_language>