Building a Clipped HUD Design System in Tailwind

A valorant-grade system is three tokens repeated everywhere: clipped corners (cards, buttons, panels), corner brackets for focus, and a 2–3px red rail for hierarchy. Constrain the chaos and 200+ screens stay coherent.

We tokenize clips as utilities — CLIP_CARD, CLIP_BTN, CLIP_PANEL — plus Oswald/Anton display type and a mono HUD layer. Every component composes from those; no one-off borders allowed past v1.

Ship it like code: versioned tokens, a11y contrast checks in CI, and a Figma file generated from the same values. Design debt becomes a lint error, not a meeting.