Design principles

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

Principles in Practice

Every token and component adheres to accessible, mobile-first, and composable standards:

<div class="d-flex flex-wrap align-items-center gap-3">
  <div class="p-2 border rounded text-center">
    <span class="badge bg-primary mb-1"><span>Accessible</span></span>
    <p class="small text-muted mb-0"><span>44px touch targets</span></p>
  </div>
  <div class="p-2 border rounded text-center">
    <span class="badge bg-success mb-1"><span>Composable</span></span>
    <p class="small text-muted mb-0"><span>Tokens &amp; utilities</span></p>
  </div>
</div>

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.