Tokens
The values Figma and Compose both read from — path-identical with iOS. Select any swatch to copy its hex.
Semantic colours
Meaning-named tokens — Aurum.colors.<group>.<name> in Compose. Select any row to copy its hex.
Surface
Non-interactive backgrounds, text, icons, borders.
Interactive
Buttons, links, form controls — with an explicit state axis.
Feedback
Badges, banners, status. Intense is loud; Subtle is a wash.
Overlay
Modal scrims.
Popup
Tooltips and popovers.
Elevation
Visual palette
Decorative ramps with no semantic meaning — Aurum.colors.visual.<family><shade>.
Purple
Blue
Green
Orange
Pink
Red
Yellow
Silver
Typography
Display is Frank Ruhl Libre; primary is Inter — 14 scale composites plus component-level styles.
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.
Design is not just what it looks like. Design is how it works.
Spacing
1:1 with Figma and iOS — Aurum.space.sN.
Radius
Corner radii — Aurum.radius.<name>.
0dp
1.5dp
2dp
4dp
8dp
16dp
24dp
1000dp · pill sentinel
Border width
Stroke weights — Aurum.borderWidth.<name>. sm 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
Offset, blur and tint — 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