Design system

Driftwood

The shipped design language of driftwood.sh — landing page and dashboard. Pure white ground, a gray ink scale, hairline borders, and one tide-blue accent. The signature isn't a color at all: it's an ASCII character sea, with a rubber duck in it, always.

⎈driftwood demo-led outbound live

Colors

Values are verbatim from the shipped code — this is a coded, live site, so the tokens below are copied from its CSS, not sampled.

Ground & ink

Ground--ground#FFFFFF — white. Not off-white, not gradient
Ink--ink#16181B
Gray — body / labels--gray#6A737D
Gray light — decorative only--gray-light#9AA2AB
Line — all hairlines--line#E9EBEE
Redaction bar--redact#D4D9DE

The one accent

"One accent. If a design wants a second accent color, the design is wrong." — the system's own rule.

Tide--tide#15557E
Tide deep — hover--tide-deep#0D3C5B
Tide wash — chips, mats--tide-wash#EAF1F7
Wash A — sheet tint--wash-a#F4F8FB
OK — live status only--ok#2A9D5C

Scenery palette — weathered coast, not postcard

The sea's inhabitants get their own settled palette. One terracotta covers crab, buoys, and coconut. And the ducks are rubber-duck yellow, always — a gray gull was tried and rejected.

Duck (protected)--duck#F0C33C
Duck beak--duck-beak#E08A2E
The one terracotta--terracotta#B25E42
Palm — sea-glass--palm#657D6A
Sand, wet--sand-wet#B0956A
Sand, dry--sand-dry#CEBA92
Splash blue--splash#3F7EA9

Type

Public Sans (variable) for everything functional, Source Serif 4 only for the wordmark, and Georgia italic in tide as the voice accent — one phrase per heading, only where a phrase genuinely outranks the line. Mono is banned from chrome (it reads "AI-generated"); IBM Plex Mono survives only inside the review queue.

Ship a custom demo in every cold message
hero H1 · Public Sans 620 (a real variable-font notch above 600) · −0.028em · one step above the shared scale
The numbers you'll 10% keep
section heading · shared scale, weight 350 — a light ground under a heavy accent figure (750)
Don't send AI slop to your prospects
em.voice · Georgia italic in tide · at most one per heading, earn it or drop it
⎈driftwood
wordmark · Source Serif 4 · 600 · 1.18rem · +0.005em · always beside the HelmMark tile
The agent researches each prospect, builds them a working custom demo, and sends it from your own account.
body · Public Sans 400 · 15/22
Every message is human reviewed before it sends
label · 0.85rem · gray (not gray-light — labels carry information, AA floor) · sentence case, no pills, no caps, no mono

Surfaces & components

Buttons

Pills, always. Primary = tide fill, hover tide-deep. There are no black buttons.

Windows

White, 1px line border, 12px radius, and a stacked shadow — 4–5 layers, each doubling the blur and shedding alpha. A single big blur bands against white.

driftwood · dashboard
14
demos shipped this week
96%
reviewed & approved
agent live

The mat

A tide-wash plate on the white sheet, radius --r-win + 0.9rem — it seats a window instead of a divider separating sections.

review queue
to:
subject: a demo I built for

Redaction & chips

Identity we withhold is a gray bar, 2px radius — used consistently for names, companies, addresses. Tinted chips take the wash, never a new color.

Built for at human reviewed live

The water

The signature: an ASCII character sea on 2D canvas — never rendered 3D. Six characters by wave height, ~15fps terminal cadence, tide-blue by depth. It carries the hero and thin strips at section seams. Movers patrol back and forth — nothing wraps, nothing disappears, it turns around. And every sea strip carries a yellow duck. 

· - · · - · ~ - ~ ~ ≈ ~ ≈ ~ - ~ · - · · ~ ~ - ~ · · - ·
- ~ - ~ - ▸ᵕ› ≈ ≈ ~ ≈ ≋ ≈ ≋ ≈ ~ ≈ ≈ ø ~ - ~ - ~ -
≈ ~ ≈ ≈ ~ ≋ ≈ ≋ ≋ ≈ ≈ ≈ ~   🌴█ █ █▒ ▒ ≈ ~ ≈ ≋ ≈
≋ ≈ ≋ ≈ ≋ ≋ ≈ ≈ ~ ≈ ≋ ≋ ≈ ▒ ▒ ▒ ≈ ≋ ≋ ≈ ≋ ≈ ≋
chars by height' ' · - ~ ≈ ≋ — grid 8 × 10.5px cells, tide-blue rgba by depth
the ducks are protectedrubber-duck yellow #F0C33C + #E08A2E beak, always — they are the debugging duck, the one deliberate CS in-joke on the page
scenery is earned, not decoratedthe driftwood log with its duck captain, ships (never on phone-width strips), islands, terracotta buoys, the castaway on the proof island — phone to his ear: "hold on, sending you the demo"

Rules the system holds itself to

One accentif a design wants a second accent color, the design is wrong. In-artifact brand colors (Brex orange inside a Brex demo) never leak into page chrome.
Earn it or drop ita heading takes a voice italic only when one phrase genuinely outranks the rest of the line — two hero headings had theirs pulled.
No em dashes in site copysole exception: the slop parody card. Slop uses em dashes — that's the joke.
Break lines on meaning, not on measuretext-wrap: balance doesn't know which words belong together — bind phrases with   so the turn lands where the sense turns.
Quality floor, unannouncedresponsive · visible keyboard focus · reduced-motion respected · every interactive element has hover/active/focus/disabled · data has loading/empty/error.

Shipped

This one isn't a mockup — it's live at driftwood.sh.

The shipped driftwood.sh homepage hero
The shipped homepage — the waterline lands at the fold
Home, in motion — the sea, the duck, the dashboard window
The case-study coverflow deck
The dashboard on the same tokens

Provenance: Driftwood shipped as code, so unlike the Stack and Spotify Mix showcases nothing here is sampled — tokens are copied verbatim from landing/src/index.css and the rules from design/design-language.md, the project's own source of truth. Fonts are the site's self-hosted files. The sea above is a static hand-set frame of the real canvas animation.