Theme Builder

Editor

Fonts

Radii

Blur

Shadows

Preview

Chakra Theme Preview

FONTS

Heading

Inter

Family

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

[

\

]

^

_

`

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

p

q

r

s

t

u

v

w

x

y

z

Weights

100

Aa

200

Aa

300

Aa

400

Aa

500

Aa

600

Aa

700

Aa

800

Aa

900

Aa

Body

Inter

Family

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

[

\

]

^

_

`

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

p

q

r

s

t

u

v

w

x

y

z

Weights

100

Aa

200

Aa

300

Aa

400

Aa

500

Aa

600

Aa

700

Aa

800

Aa

900

Aa

Mono

SFMono-Regular

Family

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

[

\

]

^

_

`

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

p

q

r

s

t

u

v

w

x

y

z

Weights

100

Aa

200

Aa

300

Aa

400

Aa

500

Aa

600

Aa

700

Aa

800

Aa

900

Aa

SPACING

Spacing KeyReal ValueExample
10.25rem
20.5rem
30.75rem
41rem
51.25rem
61.5rem
71.75rem
82rem
92.25rem
102.5rem
123rem
143.5rem
164rem
205rem
246rem
287rem
328rem
369rem
4010rem
4411rem
4812rem
5213rem
5614rem
6015rem
6416rem
7218rem
8020rem
9624rem
px1px
0.50.125rem
1.50.375rem
2.50.625rem
3.50.875rem

BORDERS

Radii

none
sm
base
md
lg
xl
2xl
3xl
full

Size

none
1px
2px
4px
8px

SHADOW

xs
sm
base
md
lg
xl
2xl
outline
inner
none
dark-lg