📦 Token Packages

  1. borderRadius
  2. color
  3. elevation
  4. focusRing
  5. fontFamily
  6. fontSize
  7. fontWeight
  8. letterSpacing
  9. lineHeight
  10. paragraphSpacing
  11. textCase
  12. textDecoration
  13. typeset

foundation

📦 borderRadius

xs

"12"

sm

"16"

md

"24"

lg

"32"

2xl

"56"

3xl

"64"

circle

"999"

📦 color

white

#ffffff

black

#000000

gray

25

#fcfcfd

50

#f9fafb

100

#f2f4f7

200

#e4e7ec

300

#d0d5dd

400

#98a2b3

500

#667085

600

#475467

700

#344054

800

#1d2939

900

#101828

purple

25

#fafaff

50

#f4f3ff

100

#ebe9fe

200

#d9d6fe

300

#bdb4fe

400

#9b8afb

500

#7a5af8

600

#6938ef

700

#5925dc

800

#4A1FB8

900

#3E1C96

red

25

#fffbfa

50

#fef3f2

100

#fee4e2

200

#fecdca

300

#fda29b

400

#f97066

500

#f04438

600

#d92d20

700

#b42318

yellow

25

#fffcf5

50

#fffaeb

100

#fef0c7

200

#fedf89

300

#fec84b

400

#fdb022

500

#f79009

600

#dc6803

700

#b54708

800

#93370D

900

#7A2E0E

green

25

#f6fef9

50

#ecfdf3

100

#d1fadf

200

#a6f4c5

300

#6ce9a6

400

#32d583

500

#12b76a

600

#039855

700

#027a48

blue

25

#f5faff

50

#eff8ff

100

#d1e9ff

200

#b2ddff

300

#84caff

400

#53b1fd

500

#2e90fa

600

#1570ef

700

#175cd3

pink

25

#fef6fb

50

#fdf2fa

100

#fce7f6

200

#fcceee

300

#faa7e0

400

#f670c7

500

#ee46bc

600

#dd2590

700

#c11574

opacity

0

rgba(0, 0, 0, 0)

60

rgba(0, 0, 0, 0.6)

theme

darkest

#4A1FB8

default

#5925dc

medium

#bdb4fe

light

#ebe9fe

lightest

#f4f3ff

fg

neutral

prominent

#101828

default

#344054

muted

#667085

disabled

#98a2b3

accent

active

#5925dc

hover

#4A1FB8

hover-light

#ebe9fe

disabled

#bdb4fe

onActive

#ffffff

success

default

#039855

onMuted

#027a48

onDefault

#ffffff

warning

default

#f79009

onMuted

#b54708

onDefault

#344054

error

default

#d92d20

onMuted

#b42318

onDefault

#ffffff

bg

neutral

default

#ffffff

hover

#f9fafb

muted

#f2f4f7

subtle

#f9fafb

disabled

#f9fafb

transparent

rgba(0, 0, 0, 0)

accent

active

#5925dc

hover

#4A1FB8

hover-light

#ebe9fe

muted

#bdb4fe

subtle

#f4f3ff

success

default

#027a48

muted

#d1fadf

warning

default

#fec84b

muted

#fef0c7

error

default

#d92d20

muted

#fee4e2

border

default

#e4e7ec

hover

#bdb4fe

active

#5925dc

error

#fda29b

negative

#ffffff

📦 elevation

xs

{"color":"#1018280d","type":"dropShadow","x":"0","y":"1","blur":"2","spread":"0"}

sm

[{"color":"#1018280f","type":"dropShadow","x":"0","y":"1","blur":"2","spread":"0"},{"color":"#1018281a","type":"dropShadow","x":"0","y":"1","blur":"3","spread":"0"}]

md

[{"color":"#1018280f","type":"dropShadow","x":"0","y":"2","blur":"4","spread":"-2"},{"color":"#1018281a","type":"dropShadow","x":"0","y":"4","blur":"8","spread":"-2"}]

lg

[{"color":"#10182805","type":"dropShadow","x":"0","y":"4","blur":"6","spread":"-2"},{"color":"#10182814","type":"dropShadow","x":"0","y":"12","blur":"16","spread":"-4"}]

xl

[{"color":"#10182805","type":"dropShadow","x":"0","y":"8","blur":"8","spread":"-4"},{"color":"#10182814","type":"dropShadow","x":"0","y":"20","blur":"24","spread":"-4"}]

2xl

{"color":"#1018281a","type":"dropShadow","x":"0","y":"24","blur":"48","spread":"-12"}

3xl

{"color":"#10182814","type":"dropShadow","x":"0","y":"32","blur":"64","spread":"-12"}

📦 focusRing

accent

{"color":"#ebe9fe","type":"dropShadow","x":"0","y":"0","blur":"0","spread":"4"}

muted

{"color":"#f2f4f7","type":"dropShadow","x":"0","y":"0","blur":"0","spread":"4"}

error

{"color":"#fee4e2","type":"dropShadow","x":"0","y":"0","blur":"0","spread":"4"}

📦 fontFamily

inter

"Inter"

📦 fontSize

12

"12"

14

"14"

16

"16"

18

"18"

20

"20"

24

"24"

30

"30"

36

"36"

48

"48"

60

"60"

72

"72"

📦 fontWeight

normal

"Regular"

medium

"Medium"

semiBold

"Semi Bold"

bold

"Bold"

📦 letterSpacing

display

"-2%"

text

"0%"

📦 lineHeight

18

"18"

20

"20"

24

"24"

28

"28"

30

"30"

32

"32"

36

"36"

38

"38"

44

"44"

60

"60"

72

"72"

90

"90"

📦 paragraphSpacing

0

"0"

12

"12"

14

"14"

16

"16"

18

"18"

20

"20"

24

"24"

28

"28"

30

"30"

32

"32"

36

"36"

38

"38"

48

"48"

60

"60"

72

"72"

📦 textCase

none

"none"

📦 textDecoration

none

"none"

underline

"underline"

📦 typeset

display

2xl

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"90","type":"lineHeights"},"fontSize":{"value":"72","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"72","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

semiBold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Semi Bold","type":"fontWeights"},"lineHeight":{"value":"90","type":"lineHeights"},"fontSize":{"value":"72","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"72","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"90","type":"lineHeights"},"fontSize":{"value":"72","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"72","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

xl

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"72","type":"lineHeights"},"fontSize":{"value":"60","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"60","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

semiBold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Semi Bold","type":"fontWeights"},"lineHeight":{"value":"72","type":"lineHeights"},"fontSize":{"value":"60","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"60","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"72","type":"lineHeights"},"fontSize":{"value":"60","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"60","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

lg

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"60","type":"lineHeights"},"fontSize":{"value":"48","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"48","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

semiBold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Semi Bold","type":"fontWeights"},"lineHeight":{"value":"60","type":"lineHeights"},"fontSize":{"value":"48","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"48","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"60","type":"lineHeights"},"fontSize":{"value":"48","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"48","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

md

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"44","type":"lineHeights"},"fontSize":{"value":"36","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"36","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

semiBold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Semi Bold","type":"fontWeights"},"lineHeight":{"value":"44","type":"lineHeights"},"fontSize":{"value":"36","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"36","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"44","type":"lineHeights"},"fontSize":{"value":"36","type":"fontSizes"},"letterSpacing":{"value":"-2%","type":"letterSpacing"},"paragraphSpacing":{"value":"36","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

sm

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"38","type":"lineHeights"},"fontSize":{"value":"30","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"30","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

semiBold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Semi Bold","type":"fontWeights"},"lineHeight":{"value":"38","type":"lineHeights"},"fontSize":{"value":"30","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"30","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"38","type":"lineHeights"},"fontSize":{"value":"30","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"30","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

xs

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"32","type":"lineHeights"},"fontSize":{"value":"24","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"24","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

semiBold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Semi Bold","type":"fontWeights"},"lineHeight":{"value":"32","type":"lineHeights"},"fontSize":{"value":"24","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"24","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"32","type":"lineHeights"},"fontSize":{"value":"24","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"24","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

text

xl

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"30","type":"lineHeights"},"fontSize":{"value":"20","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"20","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

medium

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Medium","type":"fontWeights"},"lineHeight":{"value":"30","type":"lineHeights"},"fontSize":{"value":"20","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"20","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"30","type":"lineHeights"},"fontSize":{"value":"20","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"20","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

lg

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"28","type":"lineHeights"},"fontSize":{"value":"18","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"18","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

medium

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Medium","type":"fontWeights"},"lineHeight":{"value":"28","type":"lineHeights"},"fontSize":{"value":"18","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"18","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"28","type":"lineHeights"},"fontSize":{"value":"18","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"18","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

md

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"24","type":"lineHeights"},"fontSize":{"value":"16","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"16","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

medium

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Medium","type":"fontWeights"},"lineHeight":{"value":"24","type":"lineHeights"},"fontSize":{"value":"16","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"16","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"24","type":"lineHeights"},"fontSize":{"value":"16","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"16","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

sm

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"20","type":"lineHeights"},"fontSize":{"value":"14","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"14","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

medium

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Medium","type":"fontWeights"},"lineHeight":{"value":"20","type":"lineHeights"},"fontSize":{"value":"14","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"14","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"20","type":"lineHeights"},"fontSize":{"value":"14","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"14","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

xs

normal

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Regular","type":"fontWeights"},"lineHeight":{"value":"18","type":"lineHeights"},"fontSize":{"value":"12","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"12","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

medium

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Medium","type":"fontWeights"},"lineHeight":{"value":"18","type":"lineHeights"},"fontSize":{"value":"12","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"12","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}

bold

{"fontFamily":{"value":"Inter","type":"fontFamilies"},"fontWeight":{"value":"Bold","type":"fontWeights"},"lineHeight":{"value":"18","type":"lineHeights"},"fontSize":{"value":"12","type":"fontSizes"},"letterSpacing":{"value":"0%","type":"letterSpacing"},"paragraphSpacing":{"value":"12","type":"paragraphSpacing"},"textCase":{"value":"none","type":"textCase"},"textDecoration":{"value":"none","type":"textDecoration"}}