# design.md: HF0 × tonik

Single dark theme. Monochrome.
The only color on the page is client work.

## Tokens

| token     | value     | use                                   |
|-----------|-----------|---------------------------------------|
| --void    | #0a0a0a   | page background                       |
| --lift    | #131312   | the lead offer card, terminal, video  |
| --rule    | #242423   | hairlines between rows                |
| --rule-hi | #3a3a38   | group dividers, ghost button borders  |
| --smoke   | #55544f   | struck text                           |
| --ash     | #8f8e88   | secondary text, labels                |
| --ink     | #ecebe6   | primary text, primary button fill     |

## Type

Host Grotesk for everything except buttons, nav and code, which use Geist Mono. Five sizes, nothing in between:

| step | size                   | use                                                        |
|------|------------------------|------------------------------------------------------------|
| xl   | clamp(42px, 7.4vw, 112px) | hero headline and the closing headline (bookends)       |
| l    | clamp(30px, 3.9vw, 54px)  | section headings, the $15k price, hero stats            |
| m    | clamp(19px, 1.6vw, 22px)  | hero paragraph, card titles, quotes, row names and prices |
| s    | 17px                      | body copy                                               |
| xs   | 14px                      | labels, captions, footer                                |
| mono | 12px                      | buttons, nav, code                                      |

Tracking tightens as size grows: -0.05em at xl, -0.035em at l, -0.02em at m. Numbers that line up use tabular figures.

## Layout

- One column per section: headline first, then content. Nothing centered.
- Gutter clamp(16px, 4vw, 48px). Max width 1240px.
- Spacing separates sections. The only hairline is between rows of the pricing list; cards and the terminal keep a 1px outline.

## Components

- Button: 3px radius, mono uppercase, ink fill; inverts to outline on hover. Ghost variant uses --rule-hi.
- Lead offer: the only card on the page. --lift fill, --rule-hi border, 3px radius. The separate-purchase price sits above it, struck through like the hero.
- Track: a smaller package under a --rule-hi top line. Name and price on one row, then line items with their own prices.
- Logo wall: category label on the left, five white logos per row at 82% opacity, 100% on hover.
- Quote: text first, then a 48px round greyscale portrait with name and role.
- Reel: 16:9, muted autoplay while in view, one "Sound on" toggle.
- Struck text: a background line at 56% height, 0.06em thick.
- Closing: centred bookend. HF0's sphere, the xl headline, two buttons, the email line.
- Footer: one row of links, then a full-width "HF0 × tonik" wordmark (16.4vw) that fades into the page edge. The one decorative size outside the scale.

## Motion

- Ambient: a WebGL shader draws soft vertical light beams, stipple-shaded like the HF0 sphere (dot density follows brightness) with an interleaved-gradient-noise dither, refreshed ~12fps. Paused when the tab is hidden, one still frame for reduced motion, CSS gradient fallback without WebGL.
- Hero object: HF0's own animated sliced sphere, blended with "lighten" so the beams pass behind it. It tilts slightly toward the cursor.
- Nav: sticks to the top. Once the page scrolls it gets a soft blur that fades out downward, never a solid bar.
- One entrance moment: the hero strike-through, staggered 160ms, once.