Design system
The parts Oriel is built from
Every colour, type style and component lives in Framer styles. Change one here and the whole site follows.
01 · Colour
Ten colour styles
Paper
#FFFFFF
Page background
Wash
#F7F6F3
Cards and bands
Line
#E8E6E1
Borders, dividers
Ink
#17171B
Text, buttons, footer
Muted
#5E5D66
Secondary text
Faint
#8E8D96
Captions, labels
Accent
#5B45C4
Links, highlights
Grain A
#F4C3A3
Gradient, warm
Grain B
#C8B6F2
Gradient, lilac
Grain C
#BBD6F3
Gradient, sky
02 · Type
Three free typefaces
Source Serif 4 for headings, Hanken Grotesk for text and DM Mono for labels. All three are under the SIL Open Font License, free for commercial use.
Display
Source Serif 4 · 76
Read less. Know more.
H1
Source Serif 4 · 60
A quieter room for research
H2
Source Serif 4 · 46
Everything, line by line
H3
Source Serif 4 · 24
Ask while you read
Lead
Hanken Grotesk · 18
Bring your papers, notes and links into one calm workspace.
Body
Hanken Grotesk · 16
Every answer links to the page it came from, so you can check it in a click.
UI
Hanken Grotesk · 14
Start free
Label
DM Mono · 12
How it works
Number
Source Serif 4 · 56
1,200