Material 3
What's On Durham design
Visual source of truth: Google Material 3, implemented in CSS. Destination UX books still govern hierarchy, empty states, and trip chrome.
-
Color
Lavender primary with black labels, cyan secondary, volt tertiary, quiet surfaces. Roles, not hex.
-
Typography
Fifteen M3 roles. Brand face is Inter Tight; plain face is Inter.
-
Motion
Break harness: press 0.96, hover 1.02, dual-declare springs, concentric radius, rail peek, dialog enter/exit, reduced-motion toggle.
-
Icons
Material Symbols: outlined idle, filled selected via the FILL axis.
-
Layout
Scaffold, breakpoints, panes, column grid, and canonical feed / two-pane layouts.
-
Foundations
Tokens, interaction, gestures, inputs, selection, states, elevation, shape, RTL — adopt, reject, or partial.
-
Components
Buttons, chips, nav bar, cards, fields, date pickers, and other M3 patterns in our tokens.
-
City Loop
Editorial preview: Explore · Confirm · Show up · Share, fourteen ideas with deep links, Studio seed pointers.
Use the accessibility toolbar Dark control to preview the dark scheme. This catalog is noindex.