Style guide
Typography & Icons
Font Family
Geist Medium
Headings
Geist Regular
Body Texts
Geist Mono
Overline
Heading styles
Heading 1 Large
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Styles
Body Display
Body XL
Body L
Body
Body S
Body XS
Overline
Icons
Buttons & Navigation
Primary button
Secondary button
Light background
Dark background
Tertiary button
Light background
Tertiary Button
Dark background
Tertiary Button
Menu item
Light background
Product
Product
Dark background
Product
Product
Primary blue
Blue 500
#
316DFA
Blue 400
#
628BFF
Blue 300
#
8CA8FF
Blue 200
#
B4C5FF
Blue 100
#
DBE1FF
Blue 50
#
EFF0FF
Blue 600
#
125BE9
Blue 700
#
003DA9
Blue 800
#
002A78
Blue 900
#
00174B
Blue 950
#
000E34
Purple
Purple 500
#
6963F4
Purple 400
#
8682FF
Purple 300
#
A4A1FF
Purple 200
#
C3C0FF
Purple 100
#
E2DFFF
Purple 50
#
F2EFFF
Purple 600
#
4F47DA
Purple 700
#
3629C2
Purple 800
#
1E00A5
Purple 900
#
0F0069
Purple 950
#
08004B
Neutral
Blue 500
#
767778
Neutral 400
#
909192
Neutral 300
#
AAABAC
Neutral 200
#
C6C6C7
Neutral 100
#
E2E2E3
Neutral 50
#
F0F1F2
Neutral 600
#
5D5F60
Neutral 700
#
454748
Neutral 800
#
2F3132
Neutral 950
#
0F1112
Red
Red 400
#
EE6552
Red 300
#
FF8A78
Red 200
#
FFB4A8
Red 100
#
FFDAD4
Red 50
#
FFEDEA
Red 500
#
CC4D3C
Red 600
#
AA3526
Red 700
#
891D12
Red 800
#
680100
Orange
Orange 300
#
E99A49
Orange 200
#
FFB874
Orange 100
#
FFDCBF
Orange 50
#
FFEEE1
Orange 400
#
C98032
Orange 500
#
AB6719
Orange 600
#
8C4F00
Orange 700
#
6B3B00
Pink
Pink 400
#
FA518E
Pink 300
#
FF84A9
Pink 200
#
FFB1C4
Pink 100
#
FFD9E1
Pink 50
#
FFECEF
Pink 500
#
D83674
Pink 600
#
B6165B
Pink 700
#
8F0044
Pink 800
#
65002F
Cyan
Cyan 300
#
51B7DD
Cyan 200
#
70D2FA
Cyan 100
#
BCE9FF
Cyan 50
#
DFF4FF
Cyan 400
#
2E9CC1
Cyan 500
#
0081A4
Cyan 600
#
006783
Cyan 700
#
004D63
Color Ratio – 60/30/10
Color application
Cards
Calls to action
Blue 600
#
125BE9
Illustration backgrounds
Red 300
#
FF8A78
Orange 200
#
FFB874
Pink 300
#
FF84A9
Purple 300
#
A4A1FF
Text styles
Light background
OVERLINE
Body – Build automated donor journeys, and gain full visibility on every contribution. Serv.ly helps you simplify donation flows, ensure GDPR compliance, and turn one-time donors into long-term supporters.
For oss er Cornerstone det systemet som best hjelper oss med å nå våre mål og fylle vårt samfunnsoppdrag, avslutter Olsen.
Blue background
Heading
Heading highlight
Body Text
OVERLINE
Body – Build automated donor journeys, and gain full visibility on every contribution. Serv.ly helps you simplify donation flows, ensure GDPR compliance, and turn one-time donors into long-term supporters.
For oss er Cornerstone det systemet som best hjelper oss med å nå våre mål og fylle vårt samfunnsoppdrag, avslutter Olsen.
Dark background
OVERLINE
Body – Build automated donor journeys, and gain full visibility on every contribution. Serv.ly helps you simplify donation flows, ensure GDPR compliance, and turn one-time donors into long-term supporters.
For oss er Cornerstone det systemet som best hjelper oss med å nå våre mål og fylle vårt samfunnsoppdrag, avslutter Olsen.