Design Style

Design Style

Every value on this page is read directly from the @ghds/tokens build output. Nothing here is hand-copied — when a token changes, this page updates with it. Each swatch uses the generated CSS variable (var(--…)) directly, so dark mode is reflected instantly too.

Reference Palette `ref.palette.*`

white

white

#ffffff

black

black

#000000

gray

gray.50

#faf9f7

gray.100

#f2f0ec

gray.200

#e4e1db

gray.300

#cfcac2

gray.400

#a8a29a

gray.500

#837d74

gray.600

#645e56

gray.700

#4a453f

gray.750

#3e3a34

gray.800

#322e29

gray.900

#1c1916

brand

brand.50

#eef0ff

brand.100

#dce0ff

brand.200

#bbc2ff

brand.300

#94a0ff

brand.400

#6f7bff

brand.500

#4f5bf2

brand.600

#3e47c9

brand.700

#313aa0

brand.800

#272f7a

brand.900

#1e2557

success

success.50

#e7f6ee

success.100

#c6e9d5

success.200

#97d6b3

success.300

#5fbe8b

success.400

#34a86c

success.500

#279455

success.600

#1e7d45

success.700

#155c32

success.800

#0f4626

success.900

#0a3019

danger

danger.50

#fdecec

danger.100

#fad1d2

danger.200

#f3a6a8

danger.300

#ec7a7d

danger.400

#e5484d

danger.500

#d93338

danger.600

#c62a2f

danger.700

#9e2226

danger.800

#781a1d

danger.900

#531214

warning

warning.50

#fcf3e2

warning.100

#f8e2b0

warning.200

#f0c766

warning.300

#e3a21c

warning.400

#c8870a

warning.500

#a87100

warning.600

#8a5a00

warning.700

#6b4500

warning.800

#4f3300

warning.900

#352200

info

info.50

#e8f2fb

info.100

#c7e0f5

info.200

#93c3ec

info.300

#57a2df

info.400

#2e86cc

info.500

#2479bd

info.600

#1f6fb8

info.700

#185488

info.800

#123f66

info.900

#0c2a44

Semantic Colors `sys.color.*`

Role-based colors. Values that differ in the dark theme are shown alongside.
Preview	Token	CSS Variable	Light	Dark
	`sys.color.bg.canvas`	`--sys-color-bg-canvas`	`#faf9f7`	`#1c1916`
	`sys.color.bg.surface`	`--sys-color-bg-surface`	`#ffffff`	`#322e29`
	`sys.color.bg.muted`	`--sys-color-bg-muted`	`#f2f0ec`	`#3e3a34`
	`sys.color.bg.subtle`	`--sys-color-bg-subtle`	`#e4e1db`	`#4a453f`
	`sys.color.bg.overlay`	`--sys-color-bg-overlay`	`#000000`	—
	`sys.color.bg.primary.default`	`--sys-color-bg-primary-default`	`#3e47c9`	`#4f5bf2`
	`sys.color.bg.primary.hover`	`--sys-color-bg-primary-hover`	`#313aa0`	`#3e47c9`
	`sys.color.bg.primary.active`	`--sys-color-bg-primary-active`	`#272f7a`	`#313aa0`
	`sys.color.bg.primary.disabled`	`--sys-color-bg-primary-disabled`	`#e4e1db`	`#4a453f`
	`sys.color.bg.danger.default`	`--sys-color-bg-danger-default`	`#c62a2f`	—
	`sys.color.bg.danger.hover`	`--sys-color-bg-danger-hover`	`#9e2226`	—
	`sys.color.bg.danger.active`	`--sys-color-bg-danger-active`	`#781a1d`	—
	`sys.color.bg.success.default`	`--sys-color-bg-success-default`	`#1e7d45`	—
	`sys.color.bg.success.hover`	`--sys-color-bg-success-hover`	`#155c32`	—
	`sys.color.bg.warning.default`	`--sys-color-bg-warning-default`	`#8a5a00`	—
	`sys.color.bg.warning.hover`	`--sys-color-bg-warning-hover`	`#6b4500`	—
	`sys.color.bg.info.default`	`--sys-color-bg-info-default`	`#1f6fb8`	—
	`sys.color.bg.info.hover`	`--sys-color-bg-info-hover`	`#185488`	—
	`sys.color.text.primary`	`--sys-color-text-primary`	`#1c1916`	`#faf9f7`
	`sys.color.text.secondary`	`--sys-color-text-secondary`	`#645e56`	`#cfcac2`
	`sys.color.text.disabled`	`--sys-color-text-disabled`	`#837d74`	—
	`sys.color.text.link`	`--sys-color-text-link`	`#3e47c9`	`#bbc2ff`
	`sys.color.text.danger`	`--sys-color-text-danger`	`#9e2226`	`#f3a6a8`
	`sys.color.text.onPrimary`	`--sys-color-text-onPrimary`	`#ffffff`	—
	`sys.color.text.onDanger`	`--sys-color-text-onDanger`	`#ffffff`	—
	`sys.color.text.onSuccess`	`--sys-color-text-onSuccess`	`#ffffff`	—
	`sys.color.text.onWarning`	`--sys-color-text-onWarning`	`#ffffff`	—
	`sys.color.text.onInfo`	`--sys-color-text-onInfo`	`#ffffff`	—
	`sys.color.border.default`	`--sys-color-border-default`	`#cfcac2`	`#645e56`
	`sys.color.border.strong`	`--sys-color-border-strong`	`#a8a29a`	`#837d74`
	`sys.color.border.subtle`	`--sys-color-border-subtle`	`#e4e1db`	`#4a453f`
	`sys.color.border.focus`	`--sys-color-border-focus`	`#4f5bf2`	`#94a0ff`
	`sys.color.border.danger`	`--sys-color-border-danger`	`#c62a2f`	`#ec7a7d`
	`sys.color.icon.default`	`--sys-color-icon-default`	`#4a453f`	`#cfcac2`
	`sys.color.icon.muted`	`--sys-color-icon-muted`	`#837d74`	`#a8a29a`
	`sys.color.icon.onPrimary`	`--sys-color-icon-onPrimary`	`#ffffff`	—
	`sys.color.chart.1`	`--sys-color-chart-1`	`#4f5bf2`	`#94a0ff`
	`sys.color.chart.2`	`--sys-color-chart-2`	`#279455`	`#5fbe8b`
	`sys.color.chart.3`	`--sys-color-chart-3`	`#c8870a`	`#e3a21c`
	`sys.color.chart.4`	`--sys-color-chart-4`	`#e5484d`	`#ec7a7d`
	`sys.color.chart.5`	`--sys-color-chart-5`	`#2479bd`	`#57a2df`

Typography `sys.typography.*`

sys.typography.heading — 28px / 1.2 / 700

The quick brown fox jumps over the lazy dog — 0123

sys.typography.title — 22px / 1.2 / 700

The quick brown fox jumps over the lazy dog — 0123

sys.typography.body — 16px / 1.5 / 400

The quick brown fox jumps over the lazy dog — 0123

sys.typography.label — 14px / 1.5 / 500

The quick brown fox jumps over the lazy dog — 0123

sys.typography.caption — 12px / 1.5 / 400

The quick brown fox jumps over the lazy dog — 0123

sys.typography.code — 14px / 1.5 / 400

The quick brown fox jumps over the lazy dog — 0123

Spacing `sys.spacing.*`

	`sys.spacing.none`	`0px`
	`sys.spacing.xs`	`4px`
	`sys.spacing.sm`	`8px`
	`sys.spacing.md`	`16px`
	`sys.spacing.lg`	`24px`
	`sys.spacing.xl`	`32px`
	`sys.spacing.2xl`	`48px`

Corner Radius `sys.radius.*`

sm · 4px

md · 8px

lg · 12px

pill · 9999px

Shadow `sys.shadow.*`

sm

md

lg

xl