A bright, deliberately plain link-attribution surface (light, not the near-black dev-tool look the category implies): Tailwind-neutral chrome with pure black as the primary button, and a display face that splits from body by family and size rather than weight — Satoshi held at 500 and never below 36px over Inter for everything else. All the colour is data colour, confined to analytics chips, chart markers and demo artwork, and hover lift is a distinctive white-ring halo rather than a drop shadow.
Browse Dub 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: dub.co (live DOM, computed styles), 2026-07-19. No brand CSS custom properties are published — every value is read from computed styles. Coverage: home / link-attribution landing. Logged-in dashboard not captured (needs login). Note: the site is light, not the near-black dev-tool minimal the category hint suggested.
Dub is a bright, Tailwind-neutral SaaS surface: a #fafafa canvas with white cards, the full neutral gray ladder for text and hairlines, and pure black #000000 as the primary button. It reads as deliberately plain chrome — the interest comes from two places. First, type: Satoshi carries every heading at a single weight 500 with 48px display set at a 1.0 line-height, while Inter handles all body copy, so the page has a display/body split without any weight drama. Second, colour is entirely data colour — orange, purple, green and blue appear only as analytics chips, chart dots and radial "glow" markers, plus one conic rainbow used for a QR-code demo. Everything else is gray. Feels: bright, plain-chromed, analytics-forward, utilitarian.
| Token | Hex | Role / usage |
|---|---|---|
black | #000000 | Primary button fill |
ink | #0a0a0a | Card / control text |
ink-2 | #171717 | Headings (most common) |
text-2 | #262626 | Secondary UI text |
text-3 | #404040 | Tertiary |
body | #525252 | Body copy |
muted | #737373 | Muted label |
faint | #a3a3a3 | Caption / fine print |
border-strong | #d4d4d4 | Pill border |
border | #e5e5e5 | The standard hairline |
fill | #f5f5f5 | Tonal control fill |
canvas | #fafafa | Page background |
white | #ffffff | Cards, nav, secondary buttons |
| Token | Hex | Role / usage |
|---|---|---|
green | #4ade80 | Chart / status marker |
green-bg | #dcfce7 | Positive chip ground |
green-ink | #166534 | Positive chip text |
blue | #3b82f6 | Chart marker |
blue-bg | #dbeafe | Info chip ground |
blue-link | #2563eb | Link colour |
blue-2 | #1976d2 | Secondary link |
orange | #fb923c | Chip / marker |
orange-ink | #7c2d12 | Text on orange chip |
purple | #c084fc | Chip / marker |
purple-ink | #581c87 | Text on purple chip |
violet | #7c3aed | Story / editorial link |
red | #d32f2f | Error / negative |
github | #24292e | GitHub brand text |
conic-gradient(from -81deg, rgb(255,0,0), rgb(234,179,8) 99deg, rgb(92,255,128) 162deg, rgb(0,255,249) 216deg, rgb(58,139,253) 288deg, rgb(133,90,252))radial-gradient(closest-side, rgb(249,115,22), rgb(0,0,0)), and the same recipe with rgb(74,222,128) and rgb(147,51,234)Rules. Chrome is black, white and the neutral ladder only. Every hue on the page is a *data* colour — chips, chart markers and the QR demo — never a button fill or heading colour. Blue #2563eb is the one link colour.
satoshi, "satoshi Fallback" — headings only, at a single weight 500Inter, "Inter Fallback"| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Hero h1 | satoshi | 48/55.2 | 500 | normal |
| Section h2 | satoshi | 48/48 | 500 | normal |
| Section h2 (medium) | satoshi | 40/40 | 500 | normal |
| Section h2 (small) | satoshi | 36/40 | 500 | normal |
| Card h3 | Inter | 16/24 | 500 | normal (#0a0a0a) |
| Lead paragraph | Inter | 20/28 | 400 | normal (#525252) |
| Caption | Inter | 12/16 | 400 | normal (#a3a3a3) |
| Button label | Inter | 14-16 | 400-500 | normal |
Patterns: Satoshi never leaves weight 500 and never appears below 36px — the display/body split is by *family and size*, not weight. The larger section headings run at a 1.0 line-height (48/48, 40/40) while the hero relaxes to 55.2. Tracking is normal at every size. Card titles drop to Inter at 16px, so the display face is reserved strictly for section-level type.
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.