Design tokens · Debug

Responsive system

Typography

Mobile and desktop values are rendered together so scale changes can be reviewed without resizing the viewport.

text-display-1

Mobile · 2.375rem / 1.1

The quick brown fox jumps over the lazy dog

Desktop · 4rem / 1.1

The quick brown fox jumps over the lazy dog

text-display-2

Mobile · 1.875rem / 1.1

The quick brown fox jumps over the lazy dog

Desktop · 3rem / 1.1

The quick brown fox jumps over the lazy dog

text-3xl

Mobile · 1.625rem / 1.3

The quick brown fox jumps over the lazy dog

Desktop · 2.5rem / 1.3

The quick brown fox jumps over the lazy dog

text-2xl

Mobile · 1.375rem / 1.4

The quick brown fox jumps over the lazy dog

Desktop · 2rem / 1.3

The quick brown fox jumps over the lazy dog

text-xl

Mobile · 1.25rem / 1.6

The quick brown fox jumps over the lazy dog

Desktop · 1.625rem / 1.4

The quick brown fox jumps over the lazy dog

text-lg

Mobile · 1.125rem / 1.55

The quick brown fox jumps over the lazy dog

Desktop · 1.25rem / 1.6

The quick brown fox jumps over the lazy dog

text-base

Mobile · 1rem / 1.5

The quick brown fox jumps over the lazy dog

Desktop · 1.125rem / 1.55

The quick brown fox jumps over the lazy dog

text-sm

Mobile · 0.875rem / 1.5

The quick brown fox jumps over the lazy dog

Desktop · 1rem / 1.5

The quick brown fox jumps over the lazy dog

text-xs

Mobile · 0.75rem / 1.5

The quick brown fox jumps over the lazy dog

Desktop · 0.875rem / 1.5

The quick brown fox jumps over the lazy dog

text-xxs

Mobile · 0.75rem / 1.5

The quick brown fox jumps over the lazy dog

Desktop · 0.75rem / 1.5

The quick brown fox jumps over the lazy dog

Semantic palette

Functional colors

Named application roles. Prefer these semantic variables when the UI meaning is known.

focus

#8655f6

primary

#d7242a

primary-dark

#981a1d

primary-contrast

#ffffff

secondary

#596978

secondary-dark

#2f4356

secondary-contrast

#ffffff

tertiary

#1f2937

tertiary-dark

#d7242a

tertiary-contrast

#ffffff

disabled

#acb4bd

disabled-light

#d1d5db

disabled-contrast

#ffffff

error

#981a1d

error-contrast

#ffedee

warning

#9a3412

warning-contrast

#fff7ed

information

#1d4ed8

information-contrast

#eff6ff

success

#047857

success-contrast

#ecfdf5

muted

#374151

muted-contrast

#f3f4f6

text-primary

#1f2937

text-secondary

#6b7280

text-inverted

#ffffff

background-paper

#ffffff

background-accent-1

#ffffff

background-accent-2

#f0f4f7

background-accent-3

#dfe4e9

background-accent-4

#acb4bd

background-modal-overlay

#1f2937c7

divider-light

#f3f4f6

divider

#e5e7eb

divider-dark

#d1d5db

Semantic palette

Component colors

Named application roles. Prefer these semantic variables when the UI meaning is known.

tag-background-enabled

#f0f4f7

tag-background-hover

#dfe4e9

tag-background-selected

#1f2937

tag-background-disabled-fill

#f0f4f7

tag-background-disabled-border

#dfe4e9

tag-contrast-text-inverted

#ffffff

input-main-border

#6b7280

input-light-border

#ffffff

input-main-background

#ffffff

input-dark-background

#374151

navigation-border

#d7242a

button-group-background-enabled

#ffffff

button-group-background-hover

#f0f4f7

button-group-background-selected

#596978

button-group-contrast-text-inverted

#ffffff

breadcrumb-label-enabled

#6b7280

breadcrumb-label-active

#d7242a

skeleton-main-background

#f3f4f6

skeleton-dark-background

#e5e7eb

Primitive palette

Primitive colors, bund only

Raw color ramps grouped by hue. Semantic colors should remain the default choice in product UI.

red

50

#ffedee

100

#fae1e1

200

#ffccce

300

#fa9da1

400

#fc656a

500

#e53840

600-p

#d7242a

700

#be1f24

800

#981a1d

900

#7f1519

cobalt

50

#f0f4f7

100

#dfe4e9

200

#acb4bd

300

#828e9a

400-p

#596978

500

#46596b

600

#2f4356

700

#263645

800

#1c2834

900

#131b22

monochrome

50

#f9fafb

100

#f3f4f6

200

#e5e7eb

300-p

#d1d5db

400

#9ca3af

500

#6b7280

600

#4b5563

650

#1f2937c7

700

#374151

800-p

#1f2937

850

#111827e5

900

#111827

white

#ffffff

black

#000000

orange

50

#fff7ed

100

#ffedd5

200

#fed7aa

300

#fdba74

400

#fb923c

500

#f97316

600-p

#ea580c

700

#c2410c

800

#9a3412

900

#7c2d12

yellow

50

#fffbeb

100

#fef3c7

200

#fde68a

200-diverge

#e4d78c

300

#fcd34d

400

#fbbf24

500-p

#f59e0b

600

#d97706

700

#b45309

800

#92400e

900

#78350f

green

50

#ecfdf5

100

#d1fae5

200

#a7f3d0

300

#6ee7b7

400

#34d399

500

#10b981

600-p

#059669

700

#047857

800

#065f46

900

#064e3b

teal

50

#f2fdfc

100

#cbfbf8

200

#98f6f3

300

#5de8ea

400

#2bced4

500

#14afb8

600-p

#0d8b96

700

#0f6b75

800

#11575f

900

#13474e

blue

50

#eff6ff

100

#dbeafe

200

#bfdbfe

300

#93c5fd

400

#60a5fa

500-p

#3b82f6

600

#2563eb

700

#1d4ed8

800

#1e40af

900

#1e3a8a

indigo

50

#eef2ff

100

#e0e7ff

200

#c7d2fe

300

#a5b4fc

400

#818cf8

500-p

#6366f1

600

#4f46e5

700

#4338ca

800

#3730a3

900

#312e81

purple

50

#f5f3ff

100

#ede9fe

200

#ddd6fe

200-diverge

#cec3de

300

#c4b5fd

400

#a78bfa

500-p

#8655f6

600

#7c3aed

700

#6d28d9

800

#5b21b6

900

#4c1d95

pink

50

#fdf2f8

100

#fce7f3

200

#fbcfe8

300

#f9a8d4

400

#f472b6

500-p

#ec4899

600

#db2777

700

#be185d

800

#9d174d

900

#831843

gray

50

#f9fafb

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

400

#9ca3af

500-p

#6b7280

600

#4b5563

700

#374151

800

#1f2937

900

#111827

Depth

Elevation

Generated shadow recipes shown on the paper surface used throughout the dashboard.

shadow-1

0 1px 3px 0 #1118271a, 0 0 1px 0 #11182733

shadow-2

0 3px 8px 0 #1118271a, 0 0 1px 0 #11182733, 0 1px 1px 0 #1118271a

shadow-3

0 1px 2px 0 #1118270d, 0 3px 8px 0 #11182726, 0 0 1px 0 #1118271a

shadow-4

0 2px 5px 0 #11182726, 0 10px 16px 0 #1118271a, 0 0 1px 0 #1118271a

shadow-5

0 2px 5px 0 #11182726, 0 10px 24px 0 #11182733, 0 0 1px 0 #1118271a

Responsive system

Breakpoints

Named layout thresholds generated from the BUND dimension tokens.

breakpoint-xxs

23.75rem

breakpoint-xs

30rem

breakpoint-sm

40rem

breakpoint-md

48rem

breakpoint-lg

64rem

breakpoint-xl

80rem

breakpoint-2xl

96.5rem

breakpoint-3xl

120rem