Tokens
Everything is a CSS variable in src/styles/theme.css. Use the semantic tokens in product code; reach for brand tokens only for deliberately branded surfaces.
Brand colour
The palette straight from the brand book.
brand-dark-blue
--rf-dark-blue
brand-royal-blue
--rf-royal-blue
brand-gold
--rf-gold
brand-gold-light
--rf-gold-light
brand-gold-deep
--rf-gold-deep
brand-amber
--rf-amber
brand-magla
--rf-magla
brand-perla
--rf-perla
brand-ink
--rf-ink
brand-grey
--rf-grey
brand-signal
--rf-signal
Semantic colour
Theme-aware roles — these flip with the dark toggle.
background
foreground
surface
muted
primary
accent
secondary
destructive
border
Typography
Figtree for display, Nunito Sans for text.
Radulović Finance
display · 64 / 1.0 · Figtree BlackRadulović Finance
h1 · 40 / 1.1 · Figtree ExtraBoldRadulović Finance
h2 · 32 / 1.2 · Figtree BoldRadulović Finance
h3 · 24 / 1.2 · Figtree BoldRadulović Finance
body-lg · 20 / 1.4 · Nunito SansRadulović Finance
body · 16 / 1.5 · Nunito SansRadulović Finance
caption · 14 / 1.4 · Nunito SansRadius, elevation & spacing
8-pt rhythm with soft corners.
Radius
xs
sm
md
lg
xl
Elevation
shadow-sm
shadow-md
shadow-lg
shadow-gold
Spacing