Global Tokens

Usage

Install:

Import:

background-color

#F9FAFC
#F0F2F7
#FFFFFF

border-color

#E1E4EB
#C7CCD6

color

primary

#1948CB
#2E62F2
#99B4FF
#0331AD
#081A4D

success

#0D7080
#197D8C
#B8DCE5
#005866
#003942

warning

#B24700
#BD550F
#FFAF7A
#873600
#4D1F00

critical

#CB244C
#DE1F4D
#FFB2C5
#AB0029
#470011
#FFFFFF

text-color

#2C323D

Hello human!

#525966

Hello human!

#7F8794

Hello human!

code

#2C323D

<hello human>

#CB244C

<hello human>

#B24700

<hello human>

#946700

<hello human>

#0D7080

<hello human>

#0074C2

<hello human>

#2551CB

<hello human>

#6019CB

<hello human>

#525966

<hello human>

background-color

#212733
#181D26
#2C323D

border-color

#3E4552
#525966

color

primary

#3EA6FF
#70BDFF
#CCE7FF
#3792E0
#246094

success

#00B2B2
#2BD9D9
#C2FFFF
#009E9E
#006B6B

warning

#FFAA00
#FFCC66
#FFEECC
#CC8800
#805500

critical

#FF7066
#FF8880
#FFCFCC
#FF5457
#B23B3C
#000000

text-color

#FFFFFF

Hello human!

#B0B5C1

Hello human!

#7F8794

Hello human!

code

#FFFFFF

<hello human>

#F07971

<hello human>

#F78C6C

<hello human>

#FFCE6B

<hello human>

#C3E88D

<hello human>

#9BEDED

<hello human>

#82A3FF

<hello human>

#CD92EA

<hello human>

#B0B5C1

<hello human>

'Source Sans Pro', 'Roboto', 'Helvetica', sans-serif

Hello human!

'Source Sans Pro', 'Roboto', 'Helvetica', sans-serif

Hello human!

'Source Code Pro', Courier, monospace

Hello human!

'Source Sans Pro', 'Roboto', 'Helvetica', sans-serif

Hello human!

'Source Code Pro', Courier, monospace

Hello human!

'Source Code Pro', Courier, monospace

Hello human!

base

0.75rem

Hello human!

0.75rem

Hello human!

0.875rem

Hello human!

1rem

Hello human!

1.125rem

Hello human!

1.25rem

Hello human!

1.25rem

Hello human!

1.375rem

Hello human!

1.5rem

Hello human!

2rem

Hello human!

desktop

1.375rem

Hello human!

1.375rem

Hello human!

1.5rem

Hello human!

1.75rem

Hello human!

2.625rem

Hello human!

base

1rem

Hello human!

1rem

Hello human!

1rem

Hello human!

1.375rem

Hello human!

1.375rem

Hello human!

1.5rem

Hello human!

1.5rem

Hello human!

1.5rem

Hello human!

1.75rem

Hello human!

2rem

Hello human!

desktop

1.75rem

Hello human!

1.75rem

Hello human!

1.75rem

Hello human!

2rem

Hello human!

2.625rem

Hello human!

400

Hello human!

600

Hello human!

0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.05)
0 4px 12px rgba(0,0,0,0.1)

breakpoint

31.25rem
46.875rem
62.5rem
75rem

width

30rem
45rem
65rem

font

0.75rem
0.875rem
1rem
1.125rem
1.25rem
1.375rem
1.5rem
1.75rem
2rem
2.625rem

tap

3rem
2.25rem
0
0.25rem
0.5rem
0.75rem
1rem
1.25rem
1.5rem
2rem
2.5rem
3rem
3.75rem