The Derby standard
A living source of truth for reusable web interfaces.
Wireframe is the reference implementation of the Derby component system: a reusable, nestable set of interface patterns for clear, accessible multi-page websites. This site is built with the same scaffold it documents.
The system
Three coordinated layers
Every Derby site is built from three layers that work together: a master switch in the HTML, a CSS-variable theme, and a single content engine. Change one rule and the whole site re-themes.
Master switch
The HTML declares the page or variant state via data attributes — the single source of truth for what is shown.
Theme
CSS variables in :root plus scoped override blocks. One rule swap re-themes every component.
Content engine
One content object holds every string and array. data-* hooks swap content in place.
Design tokens
Design tokens
A shared set of CSS variables every component themes from. Keep the keys, change the values per brand.
--ink
Primary text
--muted
Secondary text
--paper
Page background
--surface
Card background
--brand
Primary brand
--brand-dark
Header / dark bands
--accent
CTA / highlight
--line
Borders / hairlines
Registry
Component index
Every reusable component in the registry. Each is a standalone, nestable unit with its own data-hook contract.