oc

// site foundations

design
system

Every visual building block used across this site.

01 - colors

card#111111
raised#1a1a1a
border#222222
outline#333333
disabled#666666
caption#999999
body#e8e8e8
accent#d71921
success#4a9e5c
warning#d4a843
action#F16A0D
green-surface#0a1a0d
green-border#1a3d22
green-muted#3d6645
indigo-surface#0d0d1a
indigo-border#1e1e33

white scale

class - text-titleThe quick brown fox
class - text-bodyThe quick brown fox
class - text-captionThe quick brown fox
class - text-disabledThe quick brown fox

status colors

class - text-successavailable
class - text-warningin review
class - text-accenturgent
class - text-actionview project

background scale

class - bg-surface#000000
class - bg-card#111111
class - bg-raised#1a1a1a
class - bg-border#222222
class - bg-outline#333333

accent palettes

// green

surface
border
Aamuted
Aatext

// indigo

surface
border
Aatext light
Aatext

02 - Typography

heading

doto

Heading

64px - heading-64

Heading

48px - heading-48

Heading

44px - heading-44

Heading

36px - heading-36

subtitle

space mono

Subtitle

24px - text-2xl

Subtitle

20px - text-xl

Subtitle

18px - text-lg

Subtitle

16px - text-base

Subtitle

14px - text-sm

Subtitle

12px - text-xs

text

space grotesk

Text

60px - text-6xl

Text

48px - text-5xl

Text

36px - text-4xl

Text

30px - text-3xl

Text

24px - text-2xl

Text

20px - text-xl

Text

18px - text-lg

Text

16px - text-base

Text

14px - text-sm

Text

12px - text-xs

custom classes

utility classes that apply specific styles to any text component

font-nothing-dots

Dots

Dots

font-nothing-subtitle

font nothing subtitle

font nothing subtitle

font nothing subtitle

font nothing subtitle

font-nothing-code

font nothing code

font nothing code

font nothing code

03 - spacing

spacing

4px base unit. every size is a multiple of 4 from small gaps between elements to full-section spacing.

nvisualpxclasses
1
4px
space-y-1
2
8px
space-y-2
4
16px
space-y-4
6
24px
space-y-6
8
32px
space-y-8
12
48px
space-y-12
16
64px
space-y-16
24
96px
space-y-24

04 - patterns

patterns

Dot grid backgrounds used to add texture to sections and hero areas.

dot-grid

16px grid · 1px dots

dot-grid-subtle

12px grid · 0.5px dots

05 - borders & radius

border colors

borderborder-border
#222222
outlineborder-outline
#333333

border radius

smrounded-sm
4px
lgrounded-lg
8px
xlrounded-xl
12px
2xlrounded-2xl
16px
fullrounded-full
9999px