Reference
Tokens
The values Figma and Compose both read from. Click any swatch to copy its hex — ⌘K to focus the section jumper.
Semantic colours
Meaning-named tokens — used via Aurum.colors.<group>.<name> in Compose code. Click any swatch to copy its hex.
Surface
Non-interactive backgrounds, text, icons, borders. Neutral by role.
Interactive
Buttons, links, form controls. Carries an explicit state axis.
Feedback
Badges, banners, status chips. Intense = loud; Subtle = muted wash.
Overlay
Modal scrims.
Popup
Tooltips, popovers.
Visual palette
Decorative colours for palette-keyed surfaces with no semantic meaning — used via Aurum.colors.visual.<family><shade>. 7 hue families, 11 shades each.
Purple
Blue
Green
Orange
Pink
Red
Yellow
Typography
14 scale composites + 6 component-level styles. Display = Frank Ruhl Libre (serif). Primary = Inter (sans).
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Design is not just what it looks like. Design is how it works.
Spacing
12-step scale, 1:1 with Figma. Use Aurum.space.sN.
Radius
Corner radii. Use Aurum.radius.<name>.
0dp
1.5dp
2dp
4dp
8dp
16dp
24dp
1000dp (pill sentinel)
Border width
Stroke weights for outlines — used via Aurum.borderWidth.<name>. sm (1dp) is the default hairline.
0dp
0.5dp
1dp
1.5dp
2dp
4dp
Icon size
xl (24dp) is the canonical icon size.
8dp
12dp
16dp
20dp
24dp
32dp
Elevation
Structured shadow: offset + blur + tint colour. Use Modifier.aurumShadow(Aurum.elevation.<level>).
0 / 2 / 16 / 0
tint · lowRaised
0 / 8 / 24 / 0
tint · midRaised
0 / 16 / 48 / 0
tint · highRaised
0 / 16 / 48 / 0
tint · bottomSheet