# Clipo — Marketing Site Design Spec

> Source: clipo.one (live DOM, computed styles), 2026-07-28 (desktop 1512px). `sheetsBlocked: 0` — all stylesheets readable.
> Coverage: homepage (pre-launch / waitlist site; no product app exists yet). Publishes a real 108-token `--clipo-*` design system, used as the authoritative palette and scale source.
> Reality check: no queue hint — captured on direct request. Archetype is **brutalist/maximalist editorial with a mascot**, which is under-represented in the library: nothing else here mixes an ultra-heavy display face, a full-bleed animated character and design-tool UI motifs.
> **Tooling note:** the motion census initially reported a `claude-pulse` keyframe. It is injected by the Claude in Chrome extension (`#claude-agent-glow-border-inner`), NOT by the site — verified by checking which element uses it, and excluded. Check this on any capture run through the extension.

## 1. Visual Theme & Atmosphere

A loud, confident pre-launch poster for a designer's clipping tool, built on the joke that the whole page is itself a design canvas. Type is enormous and deliberately mixed — a normal-weight grotesque at 126px sits beside an ultra-heavy condensed face at 130px inside the same composition, with bracket glyphs (`[→]`, `[*]`, `[←]`) used as punctuation. A vivid blue blob mascot, animated in Rive, walks through the layout at full-bleed scale and physically overlaps the headlines rather than sitting behind them. Everything is square: the radius census is effectively empty, structure comes from 1px hairlines, and there is exactly one shadow on the page. The defining device is that interactive elements are dressed as **selected objects in a design tool** — the CTA carries four blue corner handles. Feels: brutalist, playful, oversized, design-native.

## 2. Color Palette & Roles

The site publishes `--clipo-*` tokens: four base hues, each with a 5–90 alpha ramp and a `d-1..d-4` / `l-1..l-4` shade ramp (108 tokens total).

### Base tokens
| Token | Hex | Role / usage |
|---|---|---|
| `--clipo-paper` | `#f7f7f6` | Page canvas (`hsla(60, 5.88%, 96.67%, 1)` — very slightly warm) |
| `--clipo-ink` | `#131313` | Primary text (956×), dark bands |
| `--clipo-muted` | `#858585` | Secondary text (`hsla(0, 0%, 52.16%, 1)`) |
| `--clipo-blue` | `#2951e6` | Brand blue — CTA border, selection handles, blocks |

### Applied fills
| Token | Hex | Role / usage |
|---|---|---|
| blob-blue | `#2336f1` | The Rive mascot + sticker shapes — a **more saturated blue than the token** (276×) |
| surface | `#e0e0df` | Inset panel / block fill (121×) |
| surface-2 | `#cacac9` | Deeper inset |
| faint | `#b3b3b2` | Tertiary text |
| white | `#ffffff` | Eye whites, text on blue/ink |
| yellow | `#fad84c` | Rare highlight chip / arrow button |
| pink | `#f7b7d4` | Offset shadow behind the CLIPO wordmark |
| ink-50 | `rgba(19,19,19,.5)` | Muted overlay text |
| muted-90 | `rgba(133,133,133,.9)` | Secondary overlay text (48×) |

Rule: chrome is paper + ink; `--clipo-blue #2951e6` owns interaction, while the hotter `#2336f1` belongs to illustration. Yellow and pink appear once each and are never structural.

### Scales (also tokenised)
- Type: `--clipo-text-caption/body/copy/headline/poster` = **21.12 / 32 / 48.64 / 73.92 / 112.32 px** — a **1.52× modular ratio**.
- Space: `--clipo-space-2xs…4xl` = 0.47 / 0.71 / 1.07 / 1.6 / 2.4 / 3.6 / 5.4 rem — a **1.5× ratio**.
- Both are wrapped in `clamp(x, calc(0vw + x), x)`. **The `0vw` term means they are NOT fluid** — this is a modular-scale generator's output emitting fixed values in fluid syntax. Reproduce the numbers, not the clamp theatre.

## 3. Typography Rules

- Display (heavy): `PhonkSansHeavy` (282×) — an ultra-heavy condensed grotesque, UPPERCASE only. Specimen uses **Archivo Black** (open stand-in); the site ships Phonk Sans Heavy.
- Everything else: `Ronzino` (1321×, dominant) — a neo-grotesque. Specimen falls back to the system sans; one webfont link is spent on the display face, which carries the brand.
- Body: 16px base, but the visible copy scale starts at 24–32px — this page has almost no small text.

| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Poster (h1) | PhonkSansHeavy | 130 / 117 | 700 | **-4%** | UPPERCASE |
| Headline (h2) | Ronzino | 126 / 113.4 | 500 | -3.78px | none |
| Copy | Ronzino | 48.64 | 500 | -3.78px | none |
| Body | Ronzino | 32 | 500 | normal | none |
| Button / nav | Ronzino | 24 / 30 | 500 | normal | none |
| Caption | Ronzino | 21.12 | 500 | normal | none |

Patterns: **line-height is always below font size** (130/117, 126/113.4 — a 0.9 ratio) so lines physically collide. Tracking is strongly negative at display and relaxes to normal by 24px. Ronzino runs at a single weight 500 throughout; only the Phonk display face reaches 700. Bracket glyphs `[→] [*] [←]` are set inline as typographic punctuation.

## 4. Component Stylings

### Selection button — the signature component
The primary CTA is dressed as a **selected object in a design tool**:
- Body: bg `#f7f7f6`, text `#131313`, **1px solid `#2951e6`**, radius **`0px`**, height `50px`, padding `16px`, Ronzino 24px/500.
- Four corner handles: `16px × 16px` absolutely positioned at `top/left/right/bottom: -8px`, bg `#2951e6`, **1px solid `#f7f7f6`** — so each handle reads as a crisp square knob straddling the border.
- Label letters are duplicated in the DOM (`JJooiinn wwaaiittlliisstt`) to drive a per-letter GSAP hover animation.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Selection button | paper fill, 1px `#2951e6`, 0px, 4 corner handles | per-letter GSAP transform (JS, not CSS) | `.clipo-selection-button:focus-visible { outline: … }` — **defined but resolves to `outline: 0`** | — | not defined |
| Waitlist input | transparent, no border, 30px text | — | `:focus` and `:focus-visible` both set `outline: 0`; the wrapper uses `:focus-within` to shift label colour to `rgba(19,19,19,.58)` | — | — |
| Arrow chip | `#fad84c` fill, 0px, 57px | — | — | — | — |
| Social button | paper, `0.952381px` `#2951e6` | — | — | — | — |

**Focus is an anti-pattern.** Rules exist (`:focus-visible` with `outline-offset: 3px` on the ticket input) but the outline itself is zeroed, so nothing is visible; the only real feedback is a `:focus-within` label tint. Recommended on-brand replacement: `outline: 2px solid #2951e6; outline-offset: 3px`, which matches the handle motif.

### Waitlist ticket
A ticket-shaped panel using **single-side radii** (`16px 16px 0 0`, `0 0 16px 16px`, `16px 0 0 16px`) and a distinctive fractional **`0.952381px` `#f7f7f6` border** (20×) on its handle strips — the only place non-integer borders appear.

## 5. Layout Principles

- Full-bleed sections that alternate paper `#f7f7f6`, brand blue `#2951e6`, and near-black `#131313`.
- Headlines are placed asymmetrically (left, right, centre) and the mascot overlaps them in z-order — deliberate collision, not a grid.
- A sticky `Join waitlist` selection button pins top-right (`--sticky-top-right`).
- The dark closing section is a **grid of blue blocks** laid out tetris-like around a product screenshot.
- Spacing follows the 1.5× `--clipo-space-*` ramp.

## 6. Depth & Elevation

- **Radius is effectively empty** — the census returns only one-off values: `6.5px`, the ticket's single-side `16px` corners, and a `1.65px` pair. Every control is `0px`. This is among the squarest systems in the library.
- **Exactly one box-shadow on the entire page**, and it is an *inset* warm glow — `rgba(217,119,87,.7) 0 0 15px inset` — inside the product mockup, not chrome.
- Structure is 1px hairlines: `0.952381px #f7f7f6` (20×), `1px #f7f7f6` (4×), `0.952381px #2951e6` (3×), `1px #2951e6` (1×).
- No backdrop-filter anywhere.

## 7. Motion

**Motion is JS-driven, and the near-empty CSS census is a finding, not a gap.** The site loads **GSAP 3.13.0** (4 scripts) and **Rive** (2 scripts), which run the intro, the scroll reveals and the mascot. Only three CSS transitions exist on the whole page:

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.12s | ease | fast fade |
| opacity | 0.3s | ease-in-out | section fade |
| transform | 0.18s | cubic-bezier(0.2, 0, 0, 1) | control nudge |

Zero authored `@keyframes` (the only one present belongs to the Chrome extension — see header). Observed behaviour: a full-screen blue **loading intro** on a 480×480 canvas; scroll-triggered per-letter reveals where letters flip to an inverted block (white-on-ink) as they enter; the Rive mascot walking and blinking; and a per-letter hover on the CTA driven by duplicated letters in the DOM.

Ships **5 `prefers-reduced-motion: reduce` blocks** — good coverage for a site this animated.

## 8. Backgrounds, Effects & WebGL

- **Four canvases, all Rive-driven 2D**: `clipo-loading-intro__draw-surface` (480×480), `clipo-rive-web1` and `web2` (3023×1453 backing store), `clipo-rive-web3` (834×1113). These render the mascot and the intro — the site's entire illustrative layer.
- 3 `<video>` elements and 3 inline `<svg>`.
- Exactly **one CSS gradient**, and it is functional rather than atmospheric: `radial-gradient(circle at 100% 20px, transparent 0, transparent 36px, #fad84c 37px)` — a notch cut into a yellow shape.
- **Zero raster background layers, zero grain, zero backdrop-filter, no WebGL/Three.js.**

## 9. Do's and Don'ts

### Do
- Mix two display faces in one composition: a neo-grotesque at weight 500 beside an ultra-heavy UPPERCASE face at 700.
- Set line-height BELOW font size (~0.9) at display sizes so lines collide.
- Use strong negative tracking (-4%) at poster scale, relaxing to normal by 24px.
- Keep every control square (`0px`) and structure with 1px hairlines; no shadows.
- Dress interactive elements as design-tool objects — 16px `#2951e6` corner handles at `-8px`, each with a 1px paper border.
- Reserve `#2951e6` for interaction and the hotter `#2336f1` for illustration.
- Let the mascot overlap and collide with type rather than sit behind it.
- Use bracket glyphs `[→] [*] [←]` as typographic punctuation.
- Ship reduced-motion coverage when driving motion from GSAP/Rive.

### Don't
- Don't round corners, add shadows, blur or texture — the page is flat and square.
- Don't shrink the type: this page has almost no text below 21px.
- Don't treat the `clamp()` scales as fluid; the `0vw` term makes them fixed.
- Don't add a third accent — yellow and pink appear once each.
- Don't zero the focus outline the way the site does; use a 2px `#2951e6` ring at 3px offset.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| max 980px | desktop → tablet; sticky CTA and layout reflow |
| max 640px | tablet → phone |
| max 600px | phone layout |
| max 375px | small-phone tier |

Only **four breakpoints, all `max-width`** — a **desktop-first** ladder, the opposite of this library's usual mobile-first norm (compare Anthropic, also max-width-first). No container queries, no dark-scheme blocks (`darkSchemeBlocks: 0` — the dark sections are authored bands, not a theme), and **5 reduced-motion blocks**.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f7f7f6` · Text `#131313` · Muted `#858585` · Border `#2951e6` · Accent `#2951e6` (illustration `#2336f1`)
- Fonts: Phonk Sans Heavy (poster, 700 UPPERCASE) + Ronzino (everything, 500) · Scale 21.12/32/48.64/73.92/112.32 · Radius: 0px · Control height: 50px
- Focus: zeroed on site — use `outline: 2px solid #2951e6; outline-offset: 3px` · Handles: 16px `#2951e6` at -8px with 1px `#f7f7f6` border

<clipo-marketing_design_language>
Use the Clipo design language: a loud brutalist pre-launch poster for a designer's tool, built on the conceit that the page is itself a design canvas. Canvas is a slightly warm paper #f7f7f6, ink #131313, muted #858585, with one brand blue #2951e6 owning interaction and a hotter #2336f1 reserved for illustration; yellow #fad84c and pink #f7b7d4 each appear exactly once and are never structural. Type is enormous and deliberately mixed — a neo-grotesque (Ronzino) at weight 500 and 126/113.4 sits inside the same composition as an ultra-heavy UPPERCASE face (Phonk Sans Heavy) at 130/117 weight 700 with -4% tracking — and line-height always sits BELOW font size (~0.9) so lines collide. The modular scale is 21.12/32/48.64/73.92/112.32px at a 1.52 ratio on a 1.5 space ramp; nothing on the page is smaller than 21px. Everything is SQUARE: radius 0 on every control, exactly one box-shadow on the whole page (an inset warm glow inside a mockup), no blur or texture, and structure carried by 1px hairlines including a fractional 0.952381px tier. The signature component is a CTA dressed as a SELECTED OBJECT in a design tool — a paper fill with a 1px #2951e6 outline and four 16px #2951e6 corner handles pinned at -8px, each with a 1px paper border. Bracket glyphs [→] [*] [←] act as punctuation, a Rive-animated blue blob mascot overlaps and collides with the headlines at full-bleed scale, and motion is entirely GSAP 3.13 and Rive rather than CSS (only three CSS transitions exist, which is a finding not a gap), with five prefers-reduced-motion blocks and a desktop-first max-width breakpoint ladder. Feels: brutalist, playful, oversized, design-native. Avoid: rounding corners, adding shadows or blur, shrinking the type, adding a third accent, treating the clamp() scales as fluid (the 0vw term makes them fixed), and zeroing the focus outline the way the site does.
</clipo-marketing_design_language>