Design principles

The following principles drive every design decision in boodoo. They keep the system coherent, accessible, and enjoyable to use.

1 · Mobile first

We design for the smallest screen first, then scale up. Media queries are min-width based; base styles apply to everything and layer on at larger breakpoints.

2 · Accessible by default

Keyboard, screen-reader, touch, and reduced-motion support are not afterthoughts. Every component ships with correct ARIA and keyboard handling.

3 · Modular & composable

The framework is a set of small, independent pieces — tokens → utilities → components. Import only what you need; the build is designed to tree-shake and be lean.

4 · Tokens over magic values

Every color, radius, shadow, and timing value lives in a token. Change a token, change the whole system consistently.

5 · Progressive enhancement

Use the newest CSS only where it degrades gracefully, and always provide a solid fallback for older browsers.

6 · Both semantic & utility

You get value from composite components and from primitive utilities. Use whichever fits the moment — and mix them freely.

7 · Delight without decoration

Motion and elevation are purposeful: they communicate state, hierarchy, and affordance, never noise.