Principles
Six rules every decision on heyrav.in has been tested against. When two options both look fine, these decide.
1. Neutral first, colour only where it means something
The whole interface is a single grey ramp. Colour appears in exactly four deliberate places - the aurora hero, the pointer gradient on case illustrations, text selection and the hero word's glitch - plus status colours where a form genuinely needs to say ok, careful or wrong. If colour does not carry information, it is noise.
2. One of everything
One button form (the solid ink pill). One elevation (--shadow-pop). One hairline colour. One reveal curve. When two components do the same job, they share one pattern - a second variant has to argue for itself.
3. Stepped, never fluid
Type and spacing step down at 900 and 640px rather than sliding through clamp(). A clamp renders sizes that are not on the scale (59.4px at 900 wide), which defeats the point of having one.
4. Read, not clicked - and the difference is visible
Cards and figures that are only read get a flat surface, a hairline and no hover state. Anything clickable gets a 44px target and a hover that strengthens (ink goes darker, borders go darker) - never one that makes the control paler under the cursor.
5. Measure, do not eyeball
Contrast ratios are computed, lightness steps are measured in L*, webfonts are proven with width probes, and every colour in the system lists its ratio. Decisions here cite a number or a bench, not taste alone.
6. Calm motion, always optional
Motion settles (--ease-out), plays once on entry, and has a reduced-motion branch that removes it without removing meaning. Loading and layout responses still happen - they just happen in one frame.