# Onlook — Marketing Site Design Spec

> Source: onlook.com (live DOM, computed styles), 2026-07-27 (desktop 1512px).
> Coverage: home page. Editor is embedded live on the page; the logged-in project surface is behind login (`needs-dashboard`). 0 stylesheets blocked. **No `og:image` meta of any kind on the page** (and `/opengraph-image.png`, `/og.png`, `/twitter-image.png` all return 404) — gallery thumb uses the site's own product screenshot asset `/assets/site-version-3.png`.
> Reality check: **hint ("designer-facing light UI") is wrong on the colour.** Onlook is **DARK** — canvas `#0f0f0f` stepping to `#1a1a1a`/`#27272a`/`#09090b`, with `#fafafa` ink and `darkSchemeBlocks: 0` (it is dark by construction, not by toggle). "Designer-facing" is right, and the way it signals that is the finding the hint misses: the display **mixes two faces inside one headline** — Inter 60/54 at a LIGHT weight 300 for "Cursor for", then **Vujahday Script, a handwritten script face, at 73.6px for "Designers"**. Three more: hairlines are **sub-pixel `0.5px #ffffff`** alongside 1px (164×); there are **zero real box-shadows** (all 82 are transparent placeholders); and the background is a **full-viewport WebGL canvas** plus two ultra-slow **280s/290s counter-rotating orbit animations** across 54 elements.

## 1. Visual Theme & Atmosphere

A dark designer's workbench — a near-black studio where a light Inter headline hands off mid-sentence to a handwritten script, and the product itself (layers tree, canvas, chat) sits embedded and running at the bottom of the hero. Chrome is monochrome and quiet so the editor's own colour can read: mint marks live state, violet marks AI. Structure is drawn with white hairlines at 1px and 0.5px over graded backdrop blurs, never with shadows. Motion is almost imperceptible — orbit rings turning once every five minutes behind a WebGL field. Feels: crafted, dark, designerly, calm.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#fafafa` | Primary text (1441 uses) |
| white | `#ffffff` | Emphasis, hairlines |
| grey-ab | `#ababab` | Secondary (702 uses) |
| grey-99 | `#999999` | Body / nav (291 uses) |
| grey-d4 | `#d4d4d8` | Bright secondary |
| grey-71 | `#71717b` | Muted |
| grey-52 | `#52525c` | Faint (234 uses) |
| grey-9d | `#9d9d9d` | Border-strong |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#0f0f0f` | Page background |
| surface-1 | `#1a1a1a` / `#1a191a` | Section step |
| surface-2 | `#27272a` | Panel fill (54 uses) |
| surface-3 | `#18181b` | Inset |
| black | `#09090b` / `#000000` | Deepest wells |
| hairline | `#ffffff` | Borders at **1px and 0.5px** |
| hairline-tint | `#f5ffff` | Cool-white border tint |
| grey-e4 | `#e4e4e7` | Light chip fill |
| cream | `#f0efe3` | Warm panel accent (108 uses) |

### Accent & semantic (product surfaces)
| Token | Hex | Role / usage |
|---|---|---|
| mint | `#46edd5` | Live/running state (50 uses) |
| mint-light | `#96f7e4` | Live badge text + border |
| mint-deep | `#0b4f4a` | Live badge fill |
| violet | `#dab2ff` | AI / selected layer label (104 uses) |
| violet-strong | `#ad46ff` | AI emphasis |

Rule: page chrome is monochrome; mint means "live", violet means "AI/selection" — both belong to the embedded editor, not to marketing buttons.

## 3. Typography Rules

- Stack: **Inter** (workhorse, 3593×) · **Vujahday Script** (display accent, 8×) · **JetBrains Mono** (small labels, 115×).
- All three are open Google fonts — the preview uses the real faces, no substitution.
- Body: 18px / 28px / 400 / `#999999`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1, Inter part) | 60 / 54 | **300** | -2.4px |
| Display (script part) | 73.6 / 73.6 | 400 | -2.4px, Vujahday Script |
| Section (h2) | 48 / 60 | **300** | -1.92px |
| Mono sub (h3) | 12 / 16 | 400 | normal, JetBrains Mono |
| Body | 18 / 28 | 400 | normal |
| Button | 14 / 20 | 400–500 | normal |

Patterns: the display is **LIGHT (weight 300)** with a line-height BELOW the font size (60/54) and strong -2.4px tracking; the script face is set LARGER (73.6px) than the sans it interrupts. Nothing exceeds weight 500.

## 4. Component Stylings

### Buttons
- **Primary (white)**: bg `#ffffff`, text `#000000`, radius 8px, h 32px, Inter 14/500.
- **Outline**: bg `#0f0f0f`, text `#fafafa`, **1px `#f5ffff`**, radius 8px, h 36px.
- **Ghost / nav**: transparent, text `#999999`, radius 8px, h 32px, Inter 14/400–500.
- **Live badge (editor)**: bg `#0b4f4a`, text + 1px border `#96f7e4`, radius 4px, h 26px, 12px.
- **Editor tool button**: transparent, text `#fafafa`, **0.5px `#ffffff`**, radius 8px, h 48px.

### Inputs
- Editor fields (prompt/search) sit on `#27272a` with 1px `#ffffff` hairlines at 4–8px radius. No marketing-page form inputs captured.

### States
| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary (white) | `#ffffff` / `#000000` | house colour transition (`all .15s cubic-bezier(0.4,0,0.2,1)`, 193×) | no explicit brand ring captured | — | — |
| Outline | 1px `#f5ffff` | border/fill shift | — | — | — |
| Editor tab | `#999999` | brightens to `#fafafa` | — | active gains underline + `#fafafa` | — |

**Anti-pattern: no brand focus ring captured.** Recommended replacement: `0 0 0 2px #46edd5` at 2px offset.

### Cards / panels
- Fill `#27272a` or `#1a1a1a`, **1px or 0.5px `#ffffff` hairline**, radius 8px (dominant), **no shadow**; layered over `backdrop-filter` blurs.

## 5. Layout Principles

- Tailwind v4 token set; content centered with a full-bleed WebGL backdrop.
- Nav: "ONLOOK" wordmark left, dropdown links (Product ▾, Resources ▾, About ▾), GitHub star count, then Book a Demo (ghost) and Log In (white) right.
- Hero: centered two-face headline over the WebGL field, with the **live editor UI docked at the bottom** — left Layers/Brand rail, centre canvas with Design/Preview tabs, right Chat/Code panel.
- Sections stack full-width; panels are hairline-bordered at 8px radius.

## 6. Depth & Elevation

- Radius scale: **8px** (dominant, 198×) · 2px (93×) · 1px (84×) · 4px (66×) · 10px (40×) · 14px (21×) · 6px (20×) · and a single-side `10px 10px 0 0` sheet.
- Borders: **1px `#ffffff`** (164×) and **0.5px `#ffffff`** (66×) — a deliberate sub-pixel hairline tier — plus 1px/0.5px `#f5ffff` and 1px `#9d9d9d`.
- Elevation: **zero real box-shadows** — all 82 recorded entries are transparent Tailwind placeholders. Depth is a **graded backdrop-blur scale: 8 / 16 / 24 / 40px**.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background, border, fill, stroke | ~.15s | cubic-bezier(0.4,0,0.2,1) | links, buttons (dominant, 193×) |
| all | 0.15s | cubic-bezier(0.4,0,0.2,1) | chrome (18×) |
| transform/translate/scale/rotate | 0.2s / 0.15s | cubic-bezier(0.4,0,0.2,1) | hovers |
| grid-template-rows, opacity, margin | 0.3s | cubic-bezier(0,0,0.2,1) | accordion |
| all | 1s | cubic-bezier(0,0,0.2,1) | slow reveals |

House easing: Tailwind's `cubic-bezier(0.4,0,0.2,1)`, plus an ease-out-quad `cubic-bezier(0.25,0.46,0.45,0.94)`. Signature animations are **ultra-slow counter-rotating orbits — `counter-spin` 280s and `counter-spin-reverse` 290s, linear infinite, across 54 elements** (a ring that turns roughly once every five minutes). Other keyframes: `shimmer-spin`, `waitlist-bar-fade-in`/`waitlist-bar-flicker`, `spin`/`spin-normal`/`spin-reverse`, `pulse`. No animation library detected. Ships **2 `prefers-reduced-motion` blocks**.

## 8. Backgrounds, Effects & WebGL

- **One full-viewport WebGL `<canvas>` (1512×783)** renders the atmospheric hero field.
- 2 gradients, both in modern colour spaces: an **oklab white-alpha sweep** (`to left, oklab(…/.2) → oklab(…/.9) → …`) and a **lab-space blue-grey diagonal** (`to right bottom, lab(65.93 -0.83 -8.17) → lab(27.11 -0.96 -12.32)`).
- **Graded backdrop-filter blur scale: 8 / 16 / 24 / 40px.** 1 video. No grain, no raster layers.

## 9. Do's and Don'ts

### Do
- Keep the canvas dark `#0f0f0f`, stepping to `#1a1a1a`/`#27272a`.
- Set the display LIGHT (Inter 300) with line-height below font size and -2.4px tracking.
- Use the script face as a deliberate mid-headline handoff, set LARGER than the sans it interrupts.
- Draw structure with white hairlines at **both 1px and 0.5px**; never a shadow.
- Use `backdrop-filter` on a graded 8/16/24/40px scale for depth.
- Reserve mint `#46edd5` for live state and violet `#dab2ff` for AI/selection — inside the product UI.
- Keep the dominant radius at 8px.

### Don't
- Don't make it light — the surface is dark by construction.
- Don't bold the display; weight 300 is the point.
- Don't add drop shadows; depth is blur + hairlines.
- Don't use mint or violet on marketing buttons.
- Don't speed up the orbit animations — they are deliberately ~5 minutes per turn.

## 10. Responsive Behavior

- Breakpoints (from stylesheets): Tailwind v4 defaults only — `40rem / 48rem / 64rem / 80rem / 96rem` (5 seams, no bespoke additions).
- Nav collapses to a menu; the embedded editor's three rails stack; the headline reflows.
- `darkSchemeBlocks: 0` and no toggle — the site is dark by construction, not theme-switched. **0 container queries, 2 reduced-motion blocks.**

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#0f0f0f` · Text `#fafafa` · Muted `#999999` · Panel `#27272a` · Hairline `#ffffff` (1px **and** 0.5px) · Mint `#46edd5` · Violet `#dab2ff`
- Font: `Inter` display 60/54 **w300** -2.4px + `Vujahday Script` 73.6px accent + `JetBrains Mono` 12px labels · Body 18/28 · Radius: 8px · Control height: 32–36px
- Focus: none captured — use `0 0 0 2px #46edd5` · Depth: backdrop blur 8/16/24/40px, no shadows

<onlook_design_language>
Use the Onlook design language: a dark designer's workbench. Canvas `#0f0f0f` stepping to `#1a1a1a` and `#27272a`, ink `#fafafa`, secondary `#ababab`/`#999999` — dark by construction, with no light theme. The signature is a TWO-FACE HEADLINE: Inter at a LIGHT weight 300, 60/54 (line-height BELOW font size) with -2.4px tracking, handing off mid-sentence to **Vujahday Script, a handwritten script face, set LARGER at 73.6px** — that handoff is what signals "for designers". JetBrains Mono carries 12px labels; nothing exceeds weight 500. Structure is white hairlines at BOTH 1px and a sub-pixel 0.5px tier, with a dominant 8px radius, and there are **zero box-shadows** — depth comes instead from a graded `backdrop-filter` scale of 8/16/24/40px. Buttons are a white `#ffffff`/`#000000` primary and a 1px `#f5ffff` outline at 32–36px. Colour is confined to the embedded editor UI, where mint `#46edd5`/`#96f7e4` means live/running (on a `#0b4f4a` badge) and violet `#dab2ff`/`#ad46ff` means AI or selection — never on a marketing button. The background is a full-viewport WebGL canvas with oklab and lab-space gradient sweeps, and the signature motion is ultra-slow counter-rotating orbit rings at 280s and 290s linear infinite, roughly one turn every five minutes. Feels: crafted, dark, designerly, calm. Avoid: a light surface, a bolded display, drop shadows, accent colours on marketing chrome, and speeding up the orbits.
</onlook_design_language>