WorkAboutProcessArticlesContact
WorkAboutProcessArticlesContact

Style guide

A living reference for the components, tokens, and type scale used across this site.

Colors

Colors are defined in OKLCH for perceptual consistency and ease of use as a developer. Each palette has a light and dark variant; the site switches between them automatically using light-dark().

--color-neutral
1
oklch
2
oklch
3
oklch
35
oklch
4
oklch
5
oklch
55
oklch
6
oklch
65
oklch
7
oklch
8
oklch
1
oklch
2
oklch
3
oklch
35
oklch
4
oklch
5
oklch
55
oklch
6
oklch
65
oklch
7
oklch
8
oklch
--color-slate
1
oklch
2
oklch
3
oklch
4
oklch
1
oklch
2
oklch
3
oklch
4
oklch
--color-blue
1
oklch
1
oklch
--color-green
1
oklch
2
oklch
1
oklch
2
oklch
--color-red
1
oklch
2
oklch
1
oklch
2
oklch

Typography

H1

H2

H3

H1 (sm)

H2 (sm)

H3 (sm)

Body

Body (sm)

Link (chevron) [default]

Link (no chevron)

Buttons

Cards

A card

Tags

Tag

Tag link

Tag link with status dot

Status Dots

Book a call and let’s discuss your project.

Links

  • Unicorn Factory profile
  • LinkedIn
  • Resume / CV
  • Style guide