Tokens
The values Figma and SwiftUI both read from — path-identical with Android. Select any swatch to copy its hex.
Semantic colours
Meaning-named tokens — Aurum.colors.<group>.<name> in SwiftUI. 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. Every style keeps its Dynamic Type anchor — sizes are reference pt at the default scale.
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 Android — Aurum.space.sN.
Radius
Corner radii — Aurum.radius.<name>.
0pt
1.5pt
2pt
4pt
8pt
16pt
24pt
1000pt · pill sentinel
Border width
Stroke weights — Aurum.borderWidth.<name>. sm is the default hairline.
0pt
0.5pt
1pt
1.5pt
2pt
4pt
Icon size
xl (24pt) is the canonical icon size.
8pt
12pt
16pt
20pt
24pt
32pt
Elevation
Offset, blur and tint — .aurumShadow(Aurum.elevation.<level>). Tokens store raw Figma values; the Paint layer halves blur to an Apple shadow radius at render time.
0 / 2 / 16 / 0
tint · lowRaised
0 / 8 / 24 / 0
tint · midRaised
0 / 16 / 48 / 0
tint · highRaised
0 / 16 / 48 / 0
tint · bottomSheet