design system
A working reference for oliviavoler.com, and maybe a cool artifact for you?
colors
A couple colors are re-used but aliased to other names for clarity (like primary and focus).
primary
#2C4A59
accent
#A6DFF8
text
#000000
textSubtle
#555555
link
#0AACF2
background
#FFFFFF
surface
#F6FAFC
dropShadow
#EEEEEE
border
#EEEEEE
borderDark
#DDDDDD
focus
#2C4A59
text
Currently using Inter loaded via next/fonts for optimized font loading.
heading 1
h1
clamp(46px, 9vw, 100px) / 800
heading 2
h2
1.5rem / 400
paragraph text
p
1.2rem / 300
link
a or next/link
1.2rem / 300
underline on hover or focus
buttons
Buttons all shrink to compact size for phone size
breakpoints
Coming soon 🏗️