Design system
Design system
Furnace has one design system, built from scratch, used by every app on the platform. There is no per-app fork and no third-party component library underneath it — no Radix, no shadcn, no Material, no Chakra. Every control is Furnace's own, source and all.
The system is organized in three layers, each one built on the layer below it.
Layer 1 — native CSS
The foundation is plain CSS: custom-property tokens for spacing, type,
color, radius, and motion, composed through native cascade layers
(reset, tokens, utilities, components, overrides). There is no
CSS-in-JS and no utility-class framework. A component's root class carries
zero specificity, so an app can override it deliberately in its own layer
without fighting !important.
Spacing and type steps are derived from a single ratio rather than picked by eye, so the scale stays proportional as it grows — a small design decision with an outsized effect on how consistent unrelated screens end up looking.
Layer 2 — React components
On top of the tokens sits a component library: buttons, forms, dialogs, layout primitives, charts, and the assembled patterns apps are built from. Every component is accessible by default — keyboard navigation, focus management, and ARIA wiring are the component's job, not the app's, so an app that composes existing components inherits correct behavior rather than having to reimplement it per screen.
Components expose variants and state through data attributes, not modifier classes, which keeps one component's CSS legible without a combinatorial explosion of class names.
Layer 3 — SDL: interfaces as validated data
The top layer turns interfaces into data. SDL describes a screen as a validated JSON document built exclusively from layer-2 components — the same accessible, tokenized building blocks, just assembled by a document instead of by hand-written code. This is what lets both generated apps and AI-authored interfaces render with the same visual and accessibility guarantees as anything hand-built.
The live reference
The component styleguide(opens in a new tab) is the browsable version of layer 2: every component, in every state and variant, running live. It is the fastest way to see what the design system actually looks like rather than reading about it.
See also
Going deeper
- CSS isolation without hashing — how one global class namespace stays collision-free without hashed class names.