Design Rules

Beaket UI is a brutalist design system. These rules explain why things look the way they do — and what to preserve when you customize.

No decoration

No gradients. No border-radius (except Radio). No blur shadows. No opacity for styling. If it's a border, show the border. If it's a shadow, make it structural.

Shadows signal state

Offset shadows are not decoration — they communicate interactivity. Default is present, hover grows, active shrinks, disabled removes. This is the system's primary state language.

One pattern, everywhere

Same focus ring on every component: outline-2 outline-signal-blue outline-offset-2. Same disabled style everywhere: border-dashed border-chrome bg-frost text-steel. Users learn the system once and trust it completely.

Own it, keep it right

You own the code after installation. Every component accepts className — customize freely. But preserve touch targets (44px+), keyboard navigation, and ARIA attributes. The invisible quality matters most.