Ask ten teams to define good taste and you will get ten shrugs and a link to a Dieter Rams poster. That is a problem for us specifically, because half our frontends are written by agents, and an agent asked to "make it beautiful" produces the averaged internet: purple gradients, glassmorphism, six fonts. The fix is not a better prompt. It is treating taste the way we treat accounting rules — as constraints that must hold, encoded where the work happens.
This document is the encoding. It describes the floors nothing at velofy may break, the token system that enforces them, and the tooling we built so the taste travels with the code instead of living in one person's head.
The floors
Floors are non-negotiable. They are few, measurable, and checked before anything ships.
- Flat color only. No gradients, no soft shadows, no glow. Depth comes from one raised surface tone and hairline borders. On a dark field, a gradient is hiding a decision you did not make.
- One accent. Exactly one interactive hue per system, spent on attention, never on decoration. Ours is ember
#ff6b35. If everything is highlighted, nothing is. - Contrast floors. Body ink on background clears WCAG AA with margin; dimmed text is reserved for secondary reading, never for anything actionable. Faint tones draw rules and placeholders only.
- Type is a three-voice system. A serif for display, a grotesk for body, a mono for metadata — eyebrows, tags, timestamps, counts. Metadata speaks in uppercase mono with wide tracking. Nothing else gets to be a fourth voice.
- Hairline separation, radius caps. Borders are 1px at low alpha; corner radii stay small (2–6px, pills excepted). Big radii read as toy.
- Motion restraint. Entrances settle, they do not bounce; durations sit in the 150–300ms band; loops are slow enough to ignore. Every animation dies under
prefers-reduced-motion. - Whitespace is structural. Sections breathe on a clamp scale tied to viewport, not to arbitrary padding. Cramped is a bug; sparse is the look.
The tokens
Floors become enforceable when they compile down to variables. Every page below the apex hero on this site — research, log, labs, sponsor, open source — shares one sheet. These are the actual values:
:root{
--bg:#080605; /* warm near-black, not pure black */
--raised:#0f0c0a; /* hover surfaces */
--ink:#f2ede6; /* warm white body ink */
--mute:rgba(242,237,230,.55);
--line:rgba(242,237,230,.10);
--accent:#ff6b35; /* the one hue */
--display:"Instrument Serif",Georgia,serif;
--sans:"DM Sans",ui-sans-serif,system-ui,sans-serif;
--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--gut:clamp(20px,4vw,44px);
}
Two decisions in there carry more than they appear to. The near-black is
warm (#080605, red-leaning) and the ink is warm white, so
the page feels lit rather than rendered; pure #000 with
#fff text is the cheapest possible look. And the gut is a clamp,
so the page breathes proportionally on a phone and on a display. Small
decisions, made once, compounding across every page an agent ever generates
for us.
Why agents changed the stakes
When humans wrote every frontend, taste could live in review comments and hallway taste-making. It scaled badly but it scaled. Agents broke that bargain: they generate plausible markup at a speed no reviewer matches, and plausibility is exactly the failure mode — the averaged internet, again. The defence is the same one our accounting agent uses: shrink what the writer is allowed to improvise.
Concretely, three tools carry the taste:
- A closed vocabulary. Summit.js — our agent-native framework — exposes a small set of
s-directives and forbidseval. One obvious way to do most things is a safety property for correctness and a taste property simultaneously: an agent cannot reinvent the dropdown if the framework owns the dropdown. - Machine-readable profiles. Experentia encodes design rules as evidence-backed statements an agent reads alongside the code — "this lab uses one accent at 10% alpha for hover washes", with receipts — instead of hoping a prompt conveys a mood board.
- Verified references. UI Atlas holds production-grade components that already pass the floors, so generation starts from a compliant ancestor instead of from scratch.
Notice the shape: all three are axiom three from the thesis applied to aesthetics. Trust scales with verification, not with intelligence — a beautiful result nobody constrained is luck; a constrained result that passes the floors is a product.
Consistency compounds
In July we moved Summit's and Experentia's docs onto one visual system in a single afternoon, and the log entry said why: the two projects argue for the same thing, so they should not look like they came from different labs. That is the compounding case for tokens. Each project that adopts the sheet makes the next one cheaper and the whole catalogue more credible. A visitor who has seen one velofy page has effectively seen the grammar of all of them — and a partner embedding our components inherits the floors whether or not they read this essay.
The checklist
Before any page ships, whoever — or whatever — built it runs this list:
- Count the hues. More than one accent: redo.
- Search the sheet for
gradient,box-shadowwith blur,border-radiusabove the cap: redo. - Check contrast on every muted tone actually used for reading, not decoration.
- Confirm the three-voice type system survived — no fourth font snuck in.
- Toggle reduced motion; confirm nothing essential lived only in an animation.
- Squint test at arm's length: one thing should clearly matter most. If it is the cookie-sized mono footer, the hierarchy is broken.
Verdict
Taste is not the opposite of systems; it is a system with opinions. Write the opinions down, compile them to tokens, give agents a closed vocabulary and verified ancestors, and "beautiful" stops being a lottery. The vibe merchants will keep prompting for magic. We will keep shipping floors.