Taste is a constraint, not a vibe

Ask ten teams to define good taste and you get ten shrugs and a Dieter Rams poster. 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 treating taste like accounting rules: constraints that must hold, encoded where the work happens.

This document is the encoding: the floors nothing at velofy may break, the tokens that enforce them, and the tooling that keeps taste in the code.

The floors

Floors are few, measurable, and checked before anything ships.

1. Flat color only. No gradients, no soft shadows, no glow. Depth comes from one raised surface tone and hairline borders.
2. One accent. One interactive hue per system, spent on attention, never on decoration. Ours is ember #ff6b35.
3. Contrast floors. Body ink clears WCAG AA with margin; dimmed text is for secondary reading, never anything actionable. Faint tones draw rules and placeholders only.
4. Type is a three-voice system. A serif for display, a grotesk for body, a mono for metadata: eyebrows, tags, timestamps, counts, in uppercase with wide tracking. No fourth voice.
5. Hairline separation, radius caps. Borders are 1px at low alpha; corner radii stay small (2–6px, pills excepted).
6. 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.
7. Whitespace is structural. Sections breathe on a clamp scale tied to viewport, not to arbitrary padding.

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. 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);
}

The near-black is warm (#080605, red-leaning) and the ink is warm white, so the page feels lit rather than rendered. The gut is a clamp, so the page breathes proportionally from phone to display.

Why agents changed the stakes

When humans wrote every frontend, taste lived in review comments and hallway taste-making, and it scaled badly. Agents generate plausible markup faster than anyone reviews it, and plausibility is 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.

Three tools carry the taste:

• A closed vocabulary. Summit.js, our agent-native framework, exposes a small set of s- directives and forbids eval. One obvious way to do most things is both a correctness and a taste property: the agent cannot reinvent the dropdown if the framework owns it.
• Machine-readable profiles. Experentia encodes design rules as evidence-backed statements an agent reads alongside the code, like "this lab uses one accent at 10% alpha for hover washes", with receipts, not a mood board in a prompt.
• Verified references. UI Atlas holds production-grade components that already pass the floors, so generation starts from a compliant ancestor instead of scratch.

All three are axiom three from the thesis applied to aesthetics: trust scales with verification, not with intelligence.

Consistency compounds

In July we moved Summit's and Experentia's docs onto one visual system in a single afternoon: the projects argue for the same thing, so they should not look like different labs. Each project that adopts the sheet makes the next cheaper and the catalogue more credible.

The checklist

Before any page ships, whoever or whatever built it runs this list:

1. Count the hues. More than one accent: redo.
2. Search the sheet for gradient, box-shadow with blur, border-radius above the cap: redo.
3. Check contrast on every muted tone used for reading, not decoration.
4. Confirm the three-voice type system survived; no fourth font snuck in.
5. Toggle reduced motion; confirm nothing essential lived only in an animation.
6. Squint test at arm's length: one thing should matter most. If it is the cookie-sized mono footer, the hierarchy is broken.