# Dub — Marketing site Design Spec

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

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Neutral ladder (Tailwind neutral)

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

### Data / analytics colours

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

### Signature gradients

- **QR conic rainbow** — `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 glow markers** — `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.

## 3. Typography Rules

- Display: `satoshi, "satoshi Fallback"` — headings only, at a single weight 500
- Body / UI: `Inter, "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.

## 4. Component Stylings

**Nav** — white, with a `#d4d4d4` bordered announcement pill (9999px, 30px) above the hero.

**Buttons** — small, 8px radius, mostly 32-38px:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Primary | `#000000` | `#ffffff` | 1px `#000000` | 8px | 32px | 0 16px | 14/400 |
| Secondary | `#ffffff` | `#171717` | 1px `#e5e5e5` | 8px | 32px | 0 16px | 14/400 |
| Demo | `#ffffff` | `#737373` | 1px `#e5e5e5` | 8px | 38px | 8px 20px | 14/500 |
| Tab (rest) | `#ffffff` | `#262626` | 1px `#e5e5e5` | 8px | 34px | 8px 12px | 16/400 |
| Tab (active) | `#f5f5f5` | `#525252` | none | 8px | 34px | 8px 12px | 16/400 |
| Announcement pill | `#ffffff` | `#0a0a0a` | 1px `#d4d4d4` | 9999px | 30px | 0 12px | 14/500 |
| Story link | `#ffffff` | `#7c3aed` | 1px `#e5e5e5` | 8px | 32px | 8px 14px | 14/500 |
| Feature row | transparent | `#0a0a0a` | 1px `#e5e5e5` | 12px | 72px | 0 16px | 14/400 |

**Shadows** — a layered Tailwind-style set, notable for the **4px white-ringed focus/hover recipe**:

- `rgba(0,0,0,0.05) 0 1px 2px 0` — resting card
- `rgb(255,255,255) 0 0 0 0, rgba(0,0,0,0.05) 0 0 0 4px` — the white-ring lift
- `rgba(0,0,0,0.09) 0 20px 20px 0` — deep panel
- `rgb(255,255,255) 0 0 0 0, rgba(59,130,246,0.5) 0 0 0 0, rgba(0,0,0,0.1) 0 10px 15px -3px, rgba(0,0,0,0.1) 0 4px 6px -4px` — the focus slot, with a blue ring channel

**Analytics chips** — 4px and 8px radius, coloured ground with a much darker same-hue text (`#c084fc`/`#581c87`, `#fb923c`/`#7c2d12`, `#dcfce7`/`#166534`).

**Inputs** — not captured beyond the border token (`#e5e5e5`).

## 5. Layout Principles

Light page, white nav, centred hero with an announcement pill above it, then alternating white card sections and analytics panels. Radius census: `2 / 4 / 6 / 8 / 12 / 20px`, `9999px`, plus `6px 0 0 6px`, `12px 12px 0 0` and `20px 20px 0 0` for grouped and tab-capped elements.

## 6. Depth & Elevation

Radius scale: `2 / 4 / 6 / 8` (buttons) / `12` (feature rows) / `20px`, `9999px`, and the split caps above.

The shadow set is listed in §4. The distinctive one is the **white-ring** recipe — `rgb(255,255,255) 0 0 0 0, rgba(0,0,0,0.05) 0 0 0 4px` — which reads as a soft halo rather than a drop shadow, and the focus slot that reserves a `rgba(59,130,246,0.5)` blue ring channel.

## 7. Motion

Transition census resolved only generic values; specific durations and easings are **not captured**.

## 8. Backgrounds, Effects & WebGL

No WebGL, canvas, backdrop-filter or grain. The only gradients are the QR conic rainbow and the three radial glow markers listed in §2 — all of them data/demo artwork rather than page atmosphere. Chrome itself is flat white and gray.

## 9. Do's and Don'ts

### Do
- Keep chrome to black, white and the Tailwind neutral ladder.
- Set section headings in Satoshi at weight 500 only, never below 36px, with a 1.0 line-height at 48 and 40px.
- Drop to Inter for card titles and all body copy.
- Make the primary button pure `#000000` at 32px on an 8px radius.
- Reserve every hue for analytics chips, chart markers and demo artwork.
- Pair chip grounds with a much darker same-hue text (`#c084fc` → `#581c87`).
- Use the white-ring shadow (`0 0 0 4px rgba(0,0,0,.05)`) for hover lift rather than a drop shadow.

### Don't
- Don't render this brand dark — the canvas is `#fafafa`.
- Don't use Satoshi for body copy or below 36px.
- Don't add weight contrast to the display face; it is 500 throughout.
- Don't put analytics colours on buttons or headings.
- Don't use large radii on controls — buttons are 8px.
- Don't introduce a brand accent; blue `#2563eb` is a link colour only.

## 10. Responsive Behavior

Not captured — no media-query census was resolved from the accessible stylesheets.

## 11. Agent Prompt Guide

- Canvas `#fafafa` · Card `#ffffff` · Heading `#171717` · Body `#525252` · Muted `#737373` · Faint `#a3a3a3` · Border `#e5e5e5` · Primary `#000000` · Link `#2563eb`
- Font: Satoshi 500 (headings 36-48px), Inter 400/500 (everything else) · Body: 20/28 lead, 12/16 caption · Radius: 8px button / 12px row / 9999px pill · Control height: 32-38px
- Focus: blue ring channel `rgba(59,130,246,0.5)` · Hover: white-ring `rgba(0,0,0,.05) 0 0 0 4px` · Motion: not captured

<dub_design_language>
A bright, deliberately plain link-attribution surface — light, not the near-black dev-tool look the category implies. Canvas #fafafa with white cards over the full Tailwind neutral ladder: headings #171717, body #525252, muted #737373, captions #a3a3a3, hairlines #e5e5e5, tonal fills #f5f5f5, and pure #000000 as the primary button. Type splits by FAMILY AND SIZE rather than weight: Satoshi carries every section heading at a single weight 500 and never appears below 36px, with a 1.0 line-height at the larger sizes (48/48, 40/40) and the hero relaxing to 48/55.2, while Inter handles card titles at 16/24 and all body copy at 20/28 and 12/16. Tracking is normal everywhere. Crucially, ALL COLOUR IS DATA COLOUR: green #4ade80/#dcfce7/#166534, blue #3b82f6/#dbeafe, orange #fb923c/#7c2d12, purple #c084fc/#581c87 and violet #7c3aed appear only as analytics chips, chart markers and demo artwork — chip grounds always paired with a much darker same-hue text — never as a button fill or heading colour, and #2563eb is a link colour rather than a brand accent. Buttons are small and understated: 32-38px at an 8px radius, black filled or white with a 1px #e5e5e5 border, alongside a 9999px announcement pill and 12px 72px feature rows. The signature depth recipe is a WHITE RING rather than a drop shadow — rgb(255,255,255) 0 0 0 0, rgba(0,0,0,0.05) 0 0 0 4px — over a layered set that also reserves a rgba(59,130,246,0.5) blue ring channel for focus. The only gradients are a conic rainbow for the QR demo and three radial glow markers; no WebGL, canvas, backdrop-filter or grain. Feels: bright, plain-chromed, analytics-forward, utilitarian. Avoid: rendering the brand dark, using Satoshi for body copy or below 36px, weight contrast in the display face, analytics colours on chrome, large control radii, and treating the link blue as a brand accent.
</dub_design_language>