Design system reference

Design Tokens

Color

color.*

primary

#AF9221

secondary

#1C1C1C

scales.primary

50

#F5EDCA

100

#E8D48A

200

#CFB14E

400

#8A7219

600

#655412

800

#3D3209

base

#AF9221

scales.secondary

50

#F0F0F0

100

#C8C8C8

200

#8A8A8A

400

#555555

600

#333333

900

#0A0A0A

base

#1C1C1C

pairings

primaryOnDark

#1C1C1C / #AF9221

darkOnPrimary

#AF9221 / #1C1C1C

lightBgDarkText

#F5EDCA / #3D3209

creamInk

#F7F4EC / #1C1C1C

gradients

charcoalToGold

linear-gradient(90deg, #1C1C1C, #AF9221)

goldToParchment

linear-gradient(90deg, #AF9221, #F5EDCA)

fullSpectrum

linear-gradient(90deg, #3D3209, #AF9221, #E8D48A)

Typography

typography.*
font-sansfont-displayfont-monotext-4xlfont-semibold

display - The quick brown fox jumps over the lazy dog.

textStyle.display

heading - The quick brown fox jumps over the lazy dog.

textStyle.heading

title - The quick brown fox jumps over the lazy dog.

textStyle.title

body - The quick brown fox jumps over the lazy dog.

textStyle.body

caption - The quick brown fox jumps over the lazy dog.

textStyle.caption

code - The quick brown fox jumps over the lazy dog.

textStyle.code

Spacing

spacing.*
p-5px-6py-3gap-3space-y-4

0 - 0rem

0px

1 - 0.25rem

4px

2 - 0.5rem

8px

3 - 0.75rem

12px

4 - 1rem

16px

5 - 1.25rem

20px

6 - 1.5rem

24px

8 - 2rem

32px

10 - 2.5rem

40px

12 - 3rem

48px

16 - 4rem

64px

20 - 5rem

80px

24 - 6rem

96px

Border Radius

radius.*
rounded-mdrounded-lgrounded-xlrounded-full

none

0px

sm

0.25rem

md

0.5rem

lg

0.75rem

xl

1rem

2xl

1.5rem

full

9999px

Shadow

shadow.*
shadow-smshadow-mdshadow-lgfocus:ring-2

xs

sm

md

lg

focus

Motion & Layout

motion.*, layout.*
transitionduration-200ease-in-outmax-w-5xllg:px-12
instant0ms
fast120ms
normal200ms
slow320ms
standardcubic-bezier(0.2, 0, 0, 1)
emphasizedcubic-bezier(0.2, 0, 0, 1.2)
deceleratecubic-bezier(0, 0, 0, 1)
acceleratecubic-bezier(0.3, 0, 1, 1)
sm640px
md768px
lg1024px
xl1280px
2xl1536px
reading70ch