← The Store

Bauhaus Token System

The site-wide design language: CSS variables + JS tokens, dark-aware.

1design system

What it is

The visual identity in code: CSS custom properties plus a JS token object, with a light/dark theme that switches on a data attribute. Every non-Tailwind surface styles itself from these tokens.

Where it lives

  • src/lib/tokens.js
  • src/styles/globals.css

See it in action

Architecture map →

FAQ

How does dark mode work?

The theme switches via a data-theme attribute on the document and is persisted in local storage; tokens resolve to the right values automatically.

Want a system like this built for you?Work with me →