DWG · 00.01 · FOUNDATIONS

Foundations

The visual language of Drafthaus: graphite-on-near-black, a single drafting typeface, hatched fills for filled regions, and dimension lines wherever a divider would otherwise sit.

TOKENHEXUSE
--dh-paper
#0a0a0a
Page background — near-black
--dh-paper-2
#1a1a1a
Panel surface
--dh-paper-3
#1f1f1f
Raised surface / title block
--dh-ink
#ededed
Primary graphite ink
--dh-ink-bright
#ffffff
Highlighted ink / headings
--dh-ink-dim
#a1a1a1
Secondary ink / annotations
--dh-rule
#525252
Dimension lines / borders
--dh-warn
#ffb224
Caution
--dh-danger
#e5484d
Danger
--dh-ok
#46a758
Confirmed
TYPEFACE · JETBRAINS MONO
Aa Bb Cc · 0 1 2 3

One drafting typeface carries the whole system. Each role is a utility class you can apply directly — headings are uppercase and tracked, body stays sentence case.

Drawn to spec
Display.dh-display · 48px
Foundations
Title.dh-title · 36px
Section heading
Heading.dh-heading · 14px
Body copy is set in the drafting typeface at 13px with extended letter-spacing.
Body.dh-body · 13px
Field label
Label.dh-label · 12px
Annotation · tracked · dim
Annotation.dh-anno · 10px
DEFAULT · 7PX
DENSE · 4PX
CROSS · ±45°
TERMDEFINITION
Annotation
Small uppercase text above a component. Props: Button.annotation, Input.annotation.
Hint
Secondary text below a component. Props: Input.hint, Checkbox.hint.
Label
A component's primary, accessible name. Props: Input.label, Checkbox.label, Switch.label.
Dimension line
An arrowed rule that measures distance between blocks — DimensionDivider. Not an annotation.