Four tonal ramps, each running 10 to 100. Charcoal 100 is the page colour, with white for all text on it. Rose and peach are accents, not fills for large areas.
Charcoal
Brand colours / charcoal
charcoal-10
#E0DFEB
charcoal-40
#ACAAC3
charcoal-70
#70729B
charcoal-100
#333570 · page background
Indigo
Brand colours / indigo
indigo-10
#EDE9FF
indigo-40
#B2B7F1
indigo-70
#6B72C8
indigo-100
#3D3D91
Rose
Brand colours / rose
rose-10
#FDEEF2
rose-40
#F6BACA
rose-70
#EF86A2
rose-100
#E8527A
Peach
Brand colours / peach
peach-10
#FEF2EF
peach-40
#FBCFC2
peach-70
#F8A98E
peach-100
#F5855A
Neutrals
Brand colours / neutrals
white
#FFFFFF · all text
Accents
Brand colours / accents-gradient
purple
#7549F2
pink
#DE53F7
Feedback
Brand colours / feedback
green
#1E9E6B · success
red
#D93F4C · error
lines-light
White at 20% · on dark backgrounds · Brand colours / borders
lines-dark
#333570 at 20% · on light backgrounds · Brand colours / borders
Gradients
Two gradients are in use. Only the accent gradient is built from variables; the button gradient has its three stops typed in.
Button gradient
#7C3FE6 → #C04CFF → #FF5DBE, 90° · button-gradient · not linked to variables
Visuelt Pro does almost all the work. Vollkorn italic appears only inside headings, on the phrase that carries the point, via heading-serif on an inline span.
Heading 1
heading-h1 · 80/80 · Medium · −2% · 60px at smaller breakpoints
More time for what matters
Heading 2 + serif
heading-h2 + heading-serif · 52/57 · Medium · −1.5% · 44px at smaller breakpoints
Identify risks, monitor progress, and empower proactive care.
Heading 3
heading-h3 · 32/38 · Semi Bold · −1% · 28 → 26 → 24 down the breakpoints
One primary action per view, in the gradient. Pair it with the outline button for the secondary action. The white button lives in the nav. Labels start with a verb.
