A mature design-system foundation you rebrand from a single colour ramp.
Core is the part of a design system that’s the same no matter who you are — the grid, type scale, elevation, focus model, and component anatomy. Switch the theme above: every surface re-skins from ten --brand-* values.
Colour
One brand ramp drives every interactive surface. Neutrals and semantic ramps round out the palette.
Brand (the override point)
Neutral spine
Semantic
Typography
Roboto headings, Open Sans body, Inter for UI/numerics — on a 4 px baseline. Swap the families per fork.
Spacing
Every step on a 4 px grid, from hairline gaps to page-level rhythm.
Radii & elevation
Four surface radii plus the pill, and a layered shadow ramp for depth.
Focus ring
A single high-contrast focus ring applies to every interactive surface. Tab through the controls to see it.
Driven by --focus-500 and --shadow-focus.
Links
Underlined links on the link colour; the underline thickens on hover.
Read the getting-started guide, or open an external reference .
Cards
8 px radius, 1 px border, soft shadow. Hover lifts; highlight stripes draw on the brand colour.
Shadow steps up and the border tends toward the brand on hover.
A 4 px inset stripe in the brand colour.
Same stripe, drawn down the leading edge.
Inputs
Labelled fields with hint, focus, and error states. The focus ring lands on every interactive surface.
Badges & chips
Inter Medium 12 badges in semantic colours; selectable pill chips.