This website’s system
A few rules, well chosen.
This website is a small system: eight text sizes, two weights, four greys and two state accents, one main motion curve and seven sounds. Almost everything you see here comes from it. I designed it and built it with Claude Code.
- 8 text sizes
- 2 weights: 400 and 500
- 1.8 MB home page weight on load
- 0 cookies
01 · Rules. Three rules that decide everything else.
Rule 1: Content carries the colour; the interface doesn’t.
The interface is white and four greys; colour is kept for states: the availability green and Figma blue for frames, focus and selection labels. That way the videos and screens in the case studies are what catch the eye.
Rule 2: Two weights and no bold.
Hierarchy comes from size and grey, not thickness. 400 and 500 are enough to read fast without shouting.
Rule 3: Motion confirms; it doesn’t decorate.
Every animation goes with something that happens: you arrive, you scroll, you tap. If you turn on “reduce motion”, the site goes almost still and everything keeps working.
02 · Type. Eight sizes, two families.
Inter for reading and IBM Plex Mono for data and labels. Each size has one job; the large ones adjust across three screen widths.
| Token | Use | Sizes | Weight |
|---|---|---|---|
| t8 | Headlines and figures | 56 / 48 / 38 px | 500 |
| t7 | Section titles | 36 / 32 / 28 px | 500 |
| t6 | Subtitles, decisions and quotes | 24 / 22 px | 500 |
| t5 | Ledes | 22 / 20 px | 400 |
| t4 | Body text | 18 / 17 px | 400 |
| t3 | Cards and lists | 15 px | 400 |
| t2 | Navigation, footers and metadata | 13 px | 400 |
| t1 | Labels and data | 11 px · IBM Plex Mono | 400 |
03 · Colour. Four greys, one background, two lines and two accents.
All the greys pass AA on white except the lightest, which is kept for labels, numbers, 11 px notes and ornaments, and for the second sentence of the mobile home headline, which at 30 px passes AA as large text. Colour only appears in states: the availability green and Figma blue for frames, focus and selection labels.
| Colour | Hex | Contrast on white | Use |
|---|---|---|---|
| Ink | #0A0A0A | 19.8:1 (AAA) | Headlines and main text |
| Grey 1 | #3A3A3A | 11.4:1 (AAA) | Body text in blocks |
| Grey 2 | #6B6B6B | 5.3:1 (AA) | Supporting text and navigation |
| Grey 3 | #8A8A8A | 3.5:1 (Support only) | Labels, numbers and ornaments |
- #F3F3F3: Background for controls and loading images
- rgba(0,0,0,.08): Separate without cutting
- rgba(0,0,0,.14): Borders of buttons and fields
States
- Hover (#EBEBEB): Hover on a grey fill
- Green (#43B966): Availability
- Figma blue (#0D99FF): Frames, focus and selection labels, as in Figma · 3.0:1 (Exception). The only colour that doesn’t pass AA, on purpose: the labels mimic Figma’s selection, and a darker blue breaks the reference. They’re short, decorative labels.
04 · Space and radii. Ten spaces, four radii.
Space grows in steps of 4 up to 16, and then it doubles.
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 px
- 4 px: labels
- 8 px: cards
- 16 px: panels
- 999 px: buttons
05 · Motion. One curve for almost everything.
It starts fast and slows down gently, like something settling into place. Three durations: 150 ms to respond, 300 to change state and 600 to enter the screen. Tap each one.
System curve: cubic-bezier(.22,1,.36,1)
- 150 ms: Respond (Hover, press, copy)
- 300 ms: Change state (Menu, tabs, image viewer)
- 600 ms: Enter the screen (Content as you scroll)
06 · Sound. Seven sounds, no files.
They’re generated in the browser with Web Audio, so they weigh nothing. They play as you use the site and you can turn them off with “Sound”, in the sidebar or in the menu. Here they always play: try them.
- Click: 50 ms
- Tap: 35 ms
- Open: 370 ms
- Close: 310 ms
- On: 190 ms
- Off: 190 ms
- Copy: 240 ms
07 · Components. The pieces of the site.
They’re the same ones the home page, the case studies and the consulting page use, not copies for this page.
- Buttons and links · 14 px, weight 400 · outside the scale on purpose, so they read as actions
- Availability · the only green in the interface, because it’s the only live state
- Quote · t6 at weight 400, with the opening mark hanging outside the margin
- Figure · tabular numbers so they don’t jump when they change
“Vins has a very broad view of the product: he connects decisions with their consequences and goes beyond the obvious.”
7.8 → 5.2 minutes per claim reviewed
For your product
A system like this, but for a product with more than 30 clients and 210 components, is what I did with Ethos.
For agents
The same system, in a format an AI can read.