Color | Flint Design System by Inner Spark Media

Use the semantic token for the role: text.muted for secondary text on any surface.

Don't

Pick a gray from the ladder because it looks right. It won't follow dark mode or a future contrast fix.

Surface

Backgrounds: the page, cards, tinted areas, inverse bands and code.

Token	CSS variable	Light	Dark
`surface.page`	`--color-surface-page`	`#f8fafc`color.gray.50	`#0d1117`color.ink.900
`surface.default`	`--color-surface-default`	`#ffffff`color.white	`#161b22`color.ink.800
`surface.subtle`	`--color-surface-subtle`	`#f1f5f9`color.gray.100	`#21262d`color.ink.700
`surface.inverse`	`--color-surface-inverse`	`#0d2b45`color.blue.900	`#f8fafc`color.gray.50
`surface.code`	`--color-surface-code`	`#1e293b`color.gray.800	`#010409`color.ink.950

Text

Text and icons that sit on surfaces. Every pairing clears 7:1.

Token	CSS variable	Light	Dark
`text.heading`	`--color-text-heading`	`#0d2b45`color.blue.900	`#f0f6fc`color.ink.50
`text.default`	`--color-text-default`	`#1e293b`color.gray.800	`#c9d1d9`color.ink.100
`text.muted`	`--color-text-muted`	`#334155`color.gray.700	`#aeb8c2`color.ink.200
`text.placeholder`	`--color-text-placeholder`	`#334155`color.gray.700	`#aeb8c2`color.ink.200
`text.link`	`--color-text-link`	`#1550a0`color.blue.700	`#93c5fd`color.blue.300
`text.inverse`	`--color-text-inverse`	`#ffffff`color.white	`#0d1117`color.ink.900
`text.onCode`	`--color-text-on-code`	`#ffffff`color.white	`#ffffff`color.white

Action

Interactive fills and their labels. Labels on a fill use its "on" token.

Token	CSS variable	Light	Dark
`action.primary`	`--color-action-primary`	`#1550a0`color.blue.700	`#93c5fd`color.blue.300
`action.primaryHover`	`--color-action-primary-hover`	`#0d3b6e`color.blue.800	`#bfdbfe`color.blue.200
`action.onPrimary`	`--color-action-on-primary`	`#ffffff`color.white	`#0d1117`color.ink.900
`action.secondary`	`--color-action-secondary`	`#38bdf8`color.sky.400	`#38bdf8`color.sky.400
`action.focusRing`	`--color-action-focus-ring`	`#1550a0`color.blue.700	`#60a5fa`color.blue.400
`action.danger`	`--color-action-danger`	`#991b1b`color.red.800	`#fca5a5`color.red.300
`action.dangerHover`	`--color-action-danger-hover`	`#7f1d1d`color.red.900	`#fecaca`color.red.200
`action.onDanger`	`--color-action-on-danger`	`#ffffff`color.white	`#0d1117`color.ink.900
`action.disabled`	`--color-action-disabled`	`#64748b`color.gray.500	`#828b95`color.ink.400
`action.disabledBg`	`--color-action-disabled-bg`	`#f1f5f9`color.gray.100	`#21262d`color.ink.700

Border

Edges. Only control, controlHover, focus and error may outline a control.

Token	CSS variable	Light	Dark
`border.default`	`--color-border-default`	`#e2e8f0`color.gray.200	`#6e7681`color.ink.500
`border.control`	`--color-border-control`	`#64748b`color.gray.500	`#6e7681`color.ink.500
`border.controlHover`	`--color-border-control-hover`	`#475569`color.gray.600	`#9aa4af`color.ink.300
`border.strong`	`--color-border-strong`	`#cbd5e1`color.gray.300	`#aeb8c2`color.ink.200
`border.focus`	`--color-border-focus`	`#1550a0`color.blue.700	`#60a5fa`color.blue.400
`border.error`	`--color-border-error`	`#dc2626`color.red.600	`#f87171`color.red.400
`border.disabled`	`--color-border-disabled`	`#e2e8f0`color.gray.200	`#545d68`color.ink.600

Feedback

Success, warning, error and info. Keep each family together.

Token	CSS variable	Light	Dark
`feedback.success.surface`	`--color-feedback-success-surface`	`#f0fdf4`color.green.50	`#14532d`color.green.900
`feedback.success.border`	`--color-feedback-success-border`	`#bbf7d0`color.green.200	`#166534`color.green.800
`feedback.success.solid`	`--color-feedback-success-solid`	`#166534`color.green.800	`#4ade80`color.green.400
`feedback.success.text`	`--color-feedback-success-text`	`#14532d`color.green.900	`#bbf7d0`color.green.200
`feedback.success.onSolid`	`--color-feedback-success-on-solid`	`#ffffff`color.white	`#0d1117`color.ink.900
`feedback.warning.surface`	`--color-feedback-warning-surface`	`#fffbeb`color.amber.50	`#78350f`color.amber.900
`feedback.warning.border`	`--color-feedback-warning-border`	`#fde68a`color.amber.200	`#92400e`color.amber.800
`feedback.warning.solid`	`--color-feedback-warning-solid`	`#92400e`color.amber.800	`#fbbf24`color.amber.400
`feedback.warning.text`	`--color-feedback-warning-text`	`#78350f`color.amber.900	`#fde68a`color.amber.200
`feedback.warning.onSolid`	`--color-feedback-warning-on-solid`	`#ffffff`color.white	`#0d1117`color.ink.900
`feedback.error.surface`	`--color-feedback-error-surface`	`#fef2f2`color.red.50	`#7f1d1d`color.red.900
`feedback.error.border`	`--color-feedback-error-border`	`#fecaca`color.red.200	`#991b1b`color.red.800
`feedback.error.solid`	`--color-feedback-error-solid`	`#991b1b`color.red.800	`#fca5a5`color.red.300
`feedback.error.text`	`--color-feedback-error-text`	`#7f1d1d`color.red.900	`#fee2e2`color.red.100
`feedback.error.onSolid`	`--color-feedback-error-on-solid`	`#ffffff`color.white	`#0d1117`color.ink.900
`feedback.info.surface`	`--color-feedback-info-surface`	`#eff6ff`color.blue.50	`#0d2b45`color.blue.900
`feedback.info.border`	`--color-feedback-info-border`	`#dbeafe`color.blue.100	`#0d3b6e`color.blue.800
`feedback.info.solid`	`--color-feedback-info-solid`	`#1550a0`color.blue.700	`#93c5fd`color.blue.300
`feedback.info.text`	`--color-feedback-info-text`	`#0d3b6e`color.blue.800	`#93c5fd`color.blue.300
`feedback.info.onSolid`	`--color-feedback-info-on-solid`	`#ffffff`color.white	`#0d1117`color.ink.900

Accent

Small highlights. Not for large fills.

Token	CSS variable	Light	Dark
`accent.aaaSurface`	`--color-accent-aaa-surface`	`#ede9fe`color.violet.100	`#4c1d95`color.violet.900
`accent.aaaSolid`	`--color-accent-aaa-solid`	`#6d28d9`color.violet.700	`#c4b5fd`color.violet.300
`accent.aaaText`	`--color-accent-aaa-text`	`#5b21b6`color.violet.800	`#ddd6fe`color.violet.200
`accent.onAaa`	`--color-accent-on-aaa`	`#ffffff`color.white	`#0d1117`color.ink.900
`accent.cyan`	`--color-accent-cyan`	`#0c4a6e`color.sky.900	`#7dd3fc`color.sky.300

Selected

The selected state, always paired with a second cue such as weight or a bar.

Token	CSS variable	Light	Dark
`selected.surface`	`--color-selected-surface`	`#eff6ff`color.blue.50	`#0d3b6e`color.blue.800
`selected.text`	`--color-selected-text`	`#1550a0`color.blue.700	`#bfdbfe`color.blue.200

Chart

Data visualization marks. See Data visualization.

Token	CSS variable	Light	Dark
`chart.1`	`--color-chart-1`	`#1a5fa8`color.blue.600	`#60a5fa`color.blue.400
`chart.2`	`--color-chart-2`	`#b45309`color.amber.700	`#fbbf24`color.amber.400
`chart.3`	`--color-chart-3`	`#7c3aed`color.violet.600	`#a78bfa`color.violet.400
`chart.4`	`--color-chart-4`	`#15803d`color.green.700	`#4ade80`color.green.400
`chart.5`	`--color-chart-5`	`#dc2626`color.red.600	`#f87171`color.red.400

Overlay

The dimmed layer behind dialogs and drawers.

Token	CSS variable	Light	Dark
`overlayScrim`	`--color-overlay-scrim`	`rgba(15, 23, 42, 0.5)`literal value	`rgba(0, 0, 0, 0.6)`literal value

The ladders

The primitive ramps every semantic color points at. Reference only.

blue
Step	50	100	200	300	400	500	600	700	800	900
Value	`#eff6ff`	`#dbeafe`	`#bfdbfe`	`#93c5fd`	`#60a5fa`	`#2767cc`	`#1a5fa8`	`#1550a0`	`#0d3b6e`	`#0d2b45`

sky
Step	50	100	200	300	400	500	600	700	800	900
Value	`#f0f9ff`	`#e0f2fe`	`#bae6fd`	`#7dd3fc`	`#38bdf8`	`#0ea5e9`	`#0284c7`	`#0369a1`	`#075985`	`#0c4a6e`

gray
Step	50	100	200	300	350	400	450	500	550	600	700	800	900
Value	`#f8fafc`	`#f1f5f9`	`#e2e8f0`	`#cbd5e1`	`#9fadc1`	`#94a3b8`	`#8492a6`	`#64748b`	`#5f6f84`	`#475569`	`#334155`	`#1e293b`	`#0f172a`

ink
Step	50	100	200	300	400	500	600	700	800	900	950
Value	`#f0f6fc`	`#c9d1d9`	`#aeb8c2`	`#9aa4af`	`#828b95`	`#6e7681`	`#545d68`	`#21262d`	`#161b22`	`#0d1117`	`#010409`

green
Step	50	100	200	300	400	500	600	700	800	900
Value	`#f0fdf4`	`#dcfce7`	`#bbf7d0`	`#86efac`	`#4ade80`	`#22c55e`	`#16a34a`	`#15803d`	`#166534`	`#14532d`

amber
Step	50	100	200	300	400	500	600	700	800	900
Value	`#fffbeb`	`#fef3c7`	`#fde68a`	`#fcd34d`	`#fbbf24`	`#f59e0b`	`#d97706`	`#b45309`	`#92400e`	`#78350f`

red
Step	50	100	200	300	400	500	600	700	800	900
Value	`#fef2f2`	`#fee2e2`	`#fecaca`	`#fca5a5`	`#f87171`	`#ef4444`	`#dc2626`	`#b91c1c`	`#991b1b`	`#7f1d1d`

violet
Step	50	100	200	300	400	500	600	700	800	900
Value	`#f5f3ff`	`#ede9fe`	`#ddd6fe`	`#c4b5fd`	`#a78bfa`	`#8b5cf6`	`#7c3aed`	`#6d28d9`	`#5b21b6`	`#4c1d95`