A drafting-room
design system
for React.
Drafthaus is a small set of React components rendered like a drafting-table plan — graphite ink on near-black paper, dimension lines as dividers, hatching for filled regions, and annotations on every UI element.
BP · v0.1.0
A — DETAIL · COMPONENT SAMPLER
Button
DWG · 01.01Badge
DWG · 01.05DEFAULTACTIVEPASSEDREVIEWBLOCKED
VIEW SPEC →Callout
DWG · 01.07Hatch
DWG · 02.0245° · 7PX45° · 4PX±45° · 7PX
B — INDEX · ALL COMPONENTS
- DWG · 01.01VIEW →ButtonClick target, three variants, three sizes.
- DWG · 01.02VIEW →InputText field with annotation and hints.
- DWG · 01.03VIEW →CheckboxDrafting-style tick mark in a square.
- DWG · 01.04VIEW →SwitchTwo-position toggle with travel ticks.
- DWG · 01.05VIEW →BadgeCompact label, five tones, hatched variant.
- DWG · 01.06VIEW →CardTitle block + scale footer.
- DWG · 01.07VIEW →CalloutMargin-note panel with reference number.
- DWG · 02.01VIEW →DimensionDividerSection break drawn as a dimension line.
- DWG · 02.02VIEW →HatchFilled region in three hatch densities.