A loud brutalist pre-launch poster for a designer’s clipping tool, built on the conceit that the page is itself a design canvas — and the clearest example of design-tool UI motifs used as brand language. The signature component is a CTA dressed as a SELECTED OBJECT: a paper fill at 0px radius with a 1px #2951e6 outline and four 16px blue corner handles pinned at -8px, each carrying its own 1px paper border, so the button reads as something you have just marquee-selected. Type is enormous and deliberately mixed, putting a neo-grotesque (Ronzino) at weight 500 and 126/113.4 into 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 at roughly 0.9 so lines physically collide. Nothing on the page is smaller than 21px. It publishes a real 108-token --clipo-* system: four base hues each with a 5-90 alpha ramp and d-1..d-4 / l-1..l-4 shades, on a 1.52x modular type scale and a 1.5x space ramp. Colour is disciplined — warm paper #f7f7f6 and ink #131313, one interactive blue #2951e6 against a hotter #2336f1 reserved strictly for illustration, with yellow and pink appearing exactly once each. Everything is square with zero real elevation (a single inset glow inside a mockup) and structure carried by 1px hairlines including a fractional 0.952381px tier, while a Rive-animated blue blob mascot walks through the layout at full-bleed scale and overlaps the headlines rather than sitting behind them. Motion is entirely GSAP and Rive, so only three CSS transitions exist on the whole page.
⚠ site only, pre-launch
Browse Clipo 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: 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 aclaude-pulsekeyframe. 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.
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.
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).
| 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 |
| 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.
--clipo-text-caption/body/copy/headline/poster = 21.12 / 32 / 48.64 / 73.92 / 112.32 px — a 1.52× modular ratio.--clipo-space-2xs…4xl = 0.47 / 0.71 / 1.07 / 1.6 / 2.4 / 3.6 / 5.4 rem — a 1.5× ratio.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.PhonkSansHeavy (282×) — an ultra-heavy condensed grotesque, UPPERCASE only. Specimen uses Archivo Black (open stand-in); the site ships Phonk Sans Heavy.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.| 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.
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.