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

2.25rem / 600

heading 3

h3

1.5rem / 400

paragraph text

p

1.2rem / 300

link

a

1.2rem / 300

underline on hover or focus

buttons

Buttons all shrink to compact size for phone size

variants

primarysecondarytertiary

compact

primarysecondarytertiary

breakpoints

These aren't necessarily based on industry standards, more on where I see content "breaking" across the site. It's hard to rely on device standards any more (since there are a million) so it's more of easily-recallable names for each size.

desktop

default

tablet

(max-width: 1000px)

large phone

(max-width: 600px)

small phone

(max-width: 350px)