A dark designer’s workbench rather than the light designer-facing UI the category suggests — a #0f0f0f canvas stepping to #1a1a1a and #27272a with #fafafa ink, dark by construction with no light theme at all. The signature is a TWO-FACE HEADLINE: Inter at a LIGHT weight 300, 60/54 so the line-height sits below the font size, with -2.4px tracking for the words "Cursor for", handing off mid-sentence to Vujahday Script, a handwritten script face set LARGER at 73.6px, for "Designers" — that handoff is the whole positioning in one line. The live editor is embedded straight into the hero, with a Layers component tree on the left, a canvas with Design and Preview tabs in the middle, and a Chat/Code panel on the right. Structure comes from white hairlines at BOTH 1px and a deliberate sub-pixel 0.5px tier, on a dominant 8px radius, and there are zero box-shadows anywhere: depth is instead a graded backdrop-filter scale of 8, 16, 24 and 40px. The background is a full-viewport WebGL canvas with gradients authored in oklab and lab colour space, behind ultra-slow counter-rotating orbit rings running 280s and 290s linear infinite, roughly one turn every five minutes. Colour stays inside the product: mint #46edd5 means live or running, violet #dab2ff means AI or selection, and neither ever fills a marketing button.
Browse Onlook 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: 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. Noog:imagemeta of any kind on the page (and/opengraph-image.png,/og.png,/twitter-image.pngall 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#0f0f0fstepping to#1a1a1a/#27272a/#09090b, with#fafafaink anddarkSchemeBlocks: 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-pixel0.5px #ffffffalongside 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.
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.
| 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 |
| 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) |
| 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.
#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.
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.