BuildWithMe UI / Handbook

A starting point. Never a ceiling.

Package users get stable theme tokens. Source users can change every line.

Theme boundary

Wrap a component or preview with data-bwm-theme. The nearest boundary fully defines its canvas, panel, text, muted text, border, and focus colors, so nested themes do not leak.

[data-bwm-theme='dark'] {
  --bwm-component-canvas: #050505;
  --bwm-component-fg: #f4f1e8;
  --bwm-component-panel: #10100f;
}

Animation engines

CSS handles simple state changes. Motion and Anime.js are declared per component. Three.js stays isolated to immersive visuals and is never loaded by the catalog unless required.

Keep the accessible contract

When adapting source, preserve semantic controls, visible focus, labels, status announcements, and reduced-motion behavior.