Design System

Typography

text-xs

The quick brown fox jumps over the lazy dog

text-sm

The quick brown fox jumps over the lazy dog

text-base

The quick brown fox jumps over the lazy dog

text-lg

The quick brown fox jumps over the lazy dog

text-xl

The quick brown fox jumps over the lazy dog

text-2xl

The quick brown fox jumps over the lazy dog

text-3xl

The quick brown fox jumps over the lazy dog

text-4xl

The quick brown fox jumps over the lazy dog

Semantic Colors

Content

content-primary

#000000

content-strong

#0a0a0a

content-secondary

#6a7282

content-muted

#99a1af

content-inverse

#ffffff

content-accent

#24003d

content-danger

#FF2D3D

Surface

surface-canvas

#ffffff

surface-subtle

#f1f5f9

surface-muted

#e5e7eb

surface-selected

#7c3aed

surface-selectedStrong

#6d28d9

surface-inverse

#101828

surface-danger

#FF2D3D

Border

border-default

#d1d5dc

border-subtle

#e5e7eb

Action

action-primary

#7c3aed

action-primaryStrong

#5b21b6

action-primarySubtle

#f3e8ff

action-disabled

#d1d5dc

action-danger

#FF2D3D

Foundation Colors

Primary

primary-50

#f3e8ff

primary-100

#e9d5ff

primary-200

#d8b4fe

primary-300

#c084fc

primary-400

#a855f7

primary-500

#7c3aed

primary-600

#6d28d9

primary-700

#5b21b6

primary-800

#4c1d95

primary-900

#3b0764

primary-950

#24003d

Secondary

secondary-50

#f7fee7

secondary-100

#ecfccb

secondary-200

#d9f99d

secondary-300

#bef264

secondary-400

#a3e635

secondary-500

#84cc16

secondary-600

#65a30d

secondary-700

#4d7c0f

secondary-800

#3f6212

secondary-900

#365314

secondary-950

#1a2e05

Neutral

neutral-50

#fafafa

neutral-100

#f5f5f5

neutral-200

#e5e5e5

neutral-300

#d4d4d4

neutral-400

#a1a1a1

neutral-500

#737373

neutral-600

#525252

neutral-700

#404040

neutral-800

#262626

neutral-900

#171717

neutral-950

#0a0a0a

Slate

slate-50

#f8fafc

slate-100

#f1f5f9

slate-200

#e2e8f0

slate-300

#cad5e2

slate-400

#90a1b9

slate-500

#62748e

slate-600

#45556c

slate-700

#314158

slate-800

#1d293d

slate-900

#0f172b

slate-950

#020618

Gray

gray-50

#f9fafb

gray-100

#f3f4f6

gray-200

#e5e7eb

gray-300

#d1d5dc

gray-400

#99a1af

gray-500

#6a7282

gray-600

#4a5565

gray-700

#364153

gray-800

#1e2939

gray-900

#101828

gray-950

#030712

Zinc

zinc-50

#fafafa

zinc-100

#f4f4f5

zinc-200

#e4e4e7

zinc-300

#d4d4d8

zinc-400

#9f9fa9

zinc-500

#71717b

zinc-600

#52525c

zinc-700

#3f3f46

zinc-800

#27272a

zinc-900

#18181b

zinc-950

#09090b

Stone

stone-50

#fafaf9

stone-100

#f5f5f4

stone-200

#e7e5e4

stone-300

#d6d3d1

stone-400

#a6a09b

stone-500

#79716b

stone-600

#57534d

stone-700

#44403b

stone-800

#292524

stone-900

#1c1917

stone-950

#0c0a09

Red

red-50

#fef2f2

red-100

#fee2e2

red-200

#fecaca

red-300

#fca5a5

red-400

#f87171

red-500

#ef4444

red-600

#dc2626

red-700

#b91c1c

red-800

#991b1b

red-900

#7f1d1d

red-950

#450a0a

Orange

orange-50

#fff7ed

orange-100

#ffedd4

orange-200

#ffd6a8

orange-300

#ffb86a

orange-400

#ff8904

orange-500

#ff6900

orange-600

#f54a00

orange-700

#ca3500

orange-800

#9f2d00

orange-900

#7e2a0c

orange-950

#441306

Amber

amber-50

#fffbeb

amber-100

#fef3c6

amber-200

#fee685

amber-300

#ffd230

amber-400

#ffba00

amber-500

#fd9a00

amber-600

#e17100

amber-700

#bb4d00

amber-800

#973c00

amber-900

#7b3306

amber-950

#461901

Yellow

yellow-50

#fefce8

yellow-100

#fef9c2

yellow-200

#fff085

yellow-300

#ffdf20

yellow-400

#fcc800

yellow-500

#efb100

yellow-600

#d08700

yellow-700

#a65f00

yellow-800

#894b00

yellow-900

#733e0a

yellow-950

#432004

Lime

lime-50

#f7fee7

lime-100

#ecfcca

lime-200

#d8f999

lime-300

#bbf451

lime-400

#9ae600

lime-500

#7ccf00

lime-600

#5ea500

lime-700

#497d00

lime-800

#3d6300

lime-900

#35530e

lime-950

#192e03

Green

green-50

#f0fdf4

green-100

#dcfce7

green-200

#b9f8cf

green-300

#7bf1a8

green-400

#05df72

green-500

#00c951

green-600

#00a63e

green-700

#008236

green-800

#016630

green-900

#0d542b

green-950

#052e16

Emerald

emerald-50

#ecfdf5

emerald-100

#d0fae5

emerald-200

#a4f4cf

emerald-300

#5ee9b5

emerald-400

#00d492

emerald-500

#00bc7d

emerald-600

#009966

emerald-700

#007a55

emerald-800

#006045

emerald-900

#004f3b

emerald-950

#002c22

Teal

teal-50

#f0fdfa

teal-100

#cbfbf1

teal-200

#96f7e4

teal-300

#46ecd5

teal-400

#00d5be

teal-500

#00bba7

teal-600

#009689

teal-700

#00786f

teal-800

#005f5a

teal-900

#0b4f4a

teal-950

#022f2e

Cyan

cyan-50

#ecfeff

cyan-100

#cefafe

cyan-200

#a2f4fd

cyan-300

#53eafd

cyan-400

#00d3f2

cyan-500

#00b8db

cyan-600

#0092b8

cyan-700

#007595

cyan-800

#005f78

cyan-900

#104e64

cyan-950

#053345

Sky

sky-50

#f0f9ff

sky-100

#e0f2fe

sky-200

#b8e6fe

sky-300

#74d4ff

sky-400

#00bcff

sky-500

#00a6f4

sky-600

#0084d1

sky-700

#0069a8

sky-800

#00598a

sky-900

#024a70

sky-950

#052f4a

Blue

blue-50

#e6ffff

blue-100

#dbeafe

blue-200

#bedbff

blue-300

#8ec5ff

blue-400

#51a2ff

blue-500

#2b7fff

blue-600

#155dfc

blue-700

#1447e6

blue-800

#193cb8

blue-900

#1c398e

blue-950

#162456

Indigo

indigo-50

#eef2ff

indigo-100

#e0e7ff

indigo-200

#c6d2ff

indigo-300

#a3b3ff

indigo-400

#7c86ff

indigo-500

#615fff

indigo-600

#4f39f6

indigo-700

#432dd7

indigo-800

#372aac

indigo-900

#312c85

indigo-950

#1e1a4d

Violet

violet-50

#f5f3ff

violet-100

#ede9fe

violet-200

#ddd6ff

violet-300

#c4b4ff

violet-400

#a684ff

violet-500

#8e51ff

violet-600

#7f22fe

violet-700

#7008e7

violet-800

#5d0ec0

violet-900

#4d179a

violet-950

#2f0d68

Purple

purple-50

#faf5ff

purple-100

#f3e8ff

purple-200

#e9d4ff

purple-300

#dab2ff

purple-400

#c27aff

purple-500

#ad46ff

purple-600

#9810fa

purple-700

#8200db

purple-800

#6e11b0

purple-900

#59168b

purple-950

#3c0366

Fuchsia

fuchsia-50

#fdf4ff

fuchsia-100

#fae8ff

fuchsia-200

#f6cfff

fuchsia-300

#f4a8ff

fuchsia-400

#ed6bff

fuchsia-500

#e12afb

fuchsia-600

#c800de

fuchsia-700

#a800b7

fuchsia-800

#8a0194

fuchsia-900

#721378

fuchsia-950

#4b004f

Pink

pink-50

#fdf2f8

pink-100

#fce7f3

pink-200

#fccee8

pink-300

#fda5d5

pink-400

#fb64b6

pink-500

#f6339a

pink-600

#e60076

pink-700

#c6005c

pink-800

#a3004c

pink-900

#861043

pink-950

#510424

Rose

rose-50

#fff1f2

rose-100

#ffe4e6

rose-200

#fecdd3

rose-300

#fda4af

rose-400

#fb7185

rose-500

#f43f5e

rose-600

#e11d48

rose-700

#be123c

rose-800

#9f1239

rose-900

#881337

rose-950

#4c0519

White

white

#ffffff

Spacing

1

4px

2

8px

3

12px

4

16px

5

20px

6

24px

8

32px

10

40px

12

48px

16

64px

Shadows

none