SnowyOwl — Token Reference

Color — Primitives

primitives/color.json

Raw color values. Never use these directly in components — always reference semantic color tokens instead.

Neutral

0
#ffffff

50
#f9fafb

100
#f3f4f6

200
#e5e7eb

300
#d1d5db

400
#9ca3af

500
#6b7280

600
#4b5563

700
#374151

800
#1f2937

900
#111827

950
#030712

1000
#000000

Gray

50
#efefef

100
#e6e6e6

200
#cccccc

300
#b3b3b3

400
#999999

500
#808080

600
#666666

700
#4d4d4d

800
#333333

900
#1a1a1a

Blue

50
#eff6ff

100
#dbeafe

200
#bfdbfe

300
#93c5fd

400
#60a5fa

500
#3b82f6

600
#2563eb

700
#1d4ed8

800
#1e40af

900
#063270

Green

50
#f0fdf4

100
#dcfce7

200
#C1EFD1

300
#8DE0A9

400
#4ade80

500
#22c55e

600
#16a34a

700
#148448

800
#086B39

900
#14532d

Yellow

50
#fffbeb

100
#fff8d6

200
#ffed99

300
#ffd94d

400
#ffd233

500
#ffc107

600
#F09C14

700
#DC800F

800
#B16400

900
#743E00

Orange

50
#fff7ed

100
#FBEBD8

200
#FFDABD

300
#FFBC85

400
#fb923c

500
#f97316

600
#ea580c

700
#C94500

800
#A72E05

900
#6F1E03

Red

50
#fef2f2

100
#fee2e2

200
#FFCACF

300
#F5A5B0

400
#f87171

500
#ef4444

600
#D9233B

700
#BB1637

800
#95020E

900
#6E0B13

Pink

50
#fdf2f8

100
#fce7f3

200
#fccfe8

300
#faa6c1

400
#f472b6

500
#ec4899

600
#db2777

700
#be185d

800
#9d174d

900
#831843

Magenta

50
#FFF3FB

100
#fce7f6

200
#f9c2ec

300
#f490d9

400
#ee5ec4

500
#e029a8

600
#c01a8c

700
#9a1270

800
#730d54

900
#4d0838

Purple

50
#faf5ff

100
#f3e8ff

200
#e9d5ff

300
#d8b4fe

400
#c084fc

500
#a855f7

600
#9333ea

700
#7e22ce

800
#541886

900
#3d115e

Mauve

50
#f6f3f5

100
#ece5ea

200
#ddd0d7

300
#c9b5bf

400
#a6808c

500
#8d6876

600
#6F5A7E

700
#5a5160

800
#433c4a

900
#2d2833

Sand

50
#faf7f5

100
#f5ede8

200
#ede0d8

300
#deccc3

400
#ccb7ae

500
#b89d92

600
#9e7f72

700
#7d6356

800
#5e4a40

900
#3d2f28

Slate

50
#f8fafc

100
#f1f5f9

200
#e2e8f0

300
#cbd5e1

400
#94a3b8

500
#64748b

600
#475569

700
#334155

800
#1e293b

900
#0f172a

Olive

50
#f6f7ee

100
#eef0dc

200
#e8ead8

300
#d0d4ae

400
#a8ad7e

500
#8a9057

600
#6e7344

700
#575c2e

800
#3f4220

900
#2a2d12

Teal

50
#f0fdfa

100
#ccfbf1

200
#99f6e4

300
#5eead4

400
#2dd4bf

500
#14b8a6

600
#0d9488

700
#0f766e

800
#115e59

900
#134e4a

Cyan

50
#ecfeff

100
#cffafe

200
#a5f3fc

300
#67e8f9

400
#22d3ee

500
#06b6d4

600
#0891b2

700
#0e7490

800
#155e75

900
#164e63

Color — Semantic

semantic/base.json

These are the tokens components consume. Override these in themes — never the primitives.

Surface

Token	Role	Value (light)
semantic.color.surface.default	Page / app background	#ffffff {color.neutral.0}
semantic.color.surface.subtle	Sidebar, secondary areas	#faf7f5 {color.sand.50}
semantic.color.surface.raised	Cards, panels	#ffffff {color.neutral.0}
semantic.color.surface.overlay	Modals, drawers	#ffffff {color.neutral.0}
semantic.color.surface.sunken	Inset areas, code blocks	#f5ede8 {color.sand.100}
semantic.color.surface.skeleton	Skeleton elements	#d1d5db {color.neutral.300}

Text

Token	Role	Value (light)	Swatch
semantic.color.text.default	Body text	#1f2937 {color.neutral.800}
semantic.color.text.subtle	Captions, metadata	#4b5563 {color.neutral.600}
semantic.color.text.disabled	Disabled state	#9ca3af {color.neutral.400}
semantic.color.text.inverse	On dark backgrounds	#ffffff {color.neutral.0}	Aa
semantic.color.text.link	Link default	#6F5A7E {color.mauve.600}
semantic.color.text.linkHover	Link hover	#5a5160 {color.mauve.700}

Border

Token	Role	Value (light)
semantic.color.border.default	Standard borders	#ede0d8 {color.sand.200}
semantic.color.border.subtle	Hairline, dividers	#f5ede8 {color.sand.100}
semantic.color.border.strong	Emphasized borders	#d1d5db {color.neutral.300}
semantic.color.border.focus	Focus ring	#9333ea {color.purple.600}

Interactive

Token	Role	Value (light)	Swatch
semantic.color.interactive.primary	Primary action	#6F5A7E {color.mauve.600}
semantic.color.interactive.primaryHover	Primary hover	#5a5160 {color.mauve.700}
semantic.color.interactive.primaryActive	Primary pressed	#433c4a {color.mauve.800}
semantic.color.interactive.primarySubtle	Primary tint bg	#f6f3f5 {color.mauve.50}
semantic.color.interactive.actionText	Text on primary button — white	#ffffff {color.neutral.0}	Aa
semantic.color.interactive.secondary	Filled secondary button color	#1f2937 {color.neutral.800}
semantic.color.interactive.secondaryHover	Secondary button hover — darkens	#111827 {color.neutral.900}
semantic.color.interactive.secondaryActive	Secondary button press — darkest	#030712 {color.neutral.950}
semantic.color.interactive.ghostHover	Ghost / list item hover bg — transient	#f5ede8 {color.sand.100}
semantic.color.interactive.ghostActive	Ghost / list item pressed bg — transient	#ede0d8 {color.sand.200}
semantic.color.interactive.navSelected	Selected nav/list item bg — dark, persistent	#6F5A7E {color.mauve.600}
semantic.color.interactive.navSelectedText	Text on selected item — white on dark bg	#ffffff {color.neutral.0}	Aa
semantic.color.interactive.navSelectedHover	Hover on already-selected item	#5a5160 {color.mauve.700}
semantic.color.interactive.navUnselected	Persistent unselected bg — subtle warm tint	#f5ede8 {color.sand.100}
semantic.color.interactive.danger	Danger button background	#BB1637 {color.red.700}
semantic.color.interactive.dangerHover	Danger button background hover	#95020E {color.red.800}
semantic.color.interactive.dangerActive	Danger button background active	#6E0B13 {color.red.900}

Status

Token	Role	Value (light)
semantic.color.status.success	Positive / confirmed	#148448 {color.green.700}
semantic.color.status.successSubtle	Success background tint	#dcfce7 {color.green.100}
semantic.color.status.warning	Caution	#C94500 {color.orange.700}
semantic.color.status.warningSubtle	Warning background tint	#FBEBD8 {color.orange.100}
semantic.color.status.error	Error / destructive	#D9233B {color.red.600}
semantic.color.status.errorSubtle	Error background tint	#fee2e2 {color.red.100}
semantic.color.status.info	Informational	#9333ea {color.purple.600}
semantic.color.status.infoSubtle	Info background tint	#f3e8ff {color.purple.100}

Shape Personality

semantic + themes

These 4 semantic tokens control the entire visual character of a theme. Override only these to switch between sharp, friendly, and elevated personalities.

Radius — Semantic

Token	Role	Base value	Sharp	Elevated
⭐ semantic.radius.component	Buttons, inputs, chips	8px (lg)	0px (none)	12px (xl)
⭐ semantic.radius.container	Cards, panels, modals	12px (xl)	0px (none)	16px (2xl)
semantic.radius.interactive	Interactive elements	8px (lg)	0px (none)	12px (xl)
semantic.radius.badge	Tags, badges, chips	9999px	2px	9999px
⭐ semantic.radius.control	Checkbox visual box	2px (xs)	0px (none)	2px (xs)

Shadow — Semantic

Token	Role	Base	Sharp	Elevated
⭐ semantic.shadow.component	Input / chip elevation	xs	none	sm
⭐ semantic.shadow.container	Card / panel elevation	sm	none	lg
semantic.shadow.floating	Dropdowns, popovers	md	none	xl
semantic.shadow.overlay	Modals, dialogs	xl	none	2xl
⭐ semantic.shadow.focus	Focus ring	0 0 0 3px rgba(147,51,234,1)	0 0 0 2px rgba(147,51,234,1)	0 0 0 4px rgba(147,51,234,0.35)

Typography

primitives/typography.json

Type Scale

Token	Value	Sample
font.size.2xs	10px	The quick brown fox
font.size.xs	12px	The quick brown fox
font.size.sm	14px	The quick brown fox
font.size.md ★ body	16px	The quick brown fox
font.size.lg	18px	The quick brown fox
font.size.xl	20px	The quick brown fox
font.size.2xl	24px	The quick brown fox
font.size.3xl	30px	The quick brown fox
font.size.4xl	36px	Heading
font.size.5xl	48px	Display
font.size.6xl	60px	Hero

Font Weights

Token	Value	Sample
font.weight.thin	100	The quick brown fox
font.weight.extraLight	200	The quick brown fox
font.weight.light	300	The quick brown fox
font.weight.regular	400	The quick brown fox
font.weight.medium	500	The quick brown fox
font.weight.semibold	600	The quick brown fox
font.weight.bold	700	The quick brown fox

⭐ Semantic Typography — Theme override points

Token	Role	Base value
⭐ semantic.typography.family-body	Body / UI font — swap for personality	Geologica
⭐ semantic.typography.family-heading	Heading font — swap for personality	Geologica
semantic.typography.family-code	Code blocks	JetBrains Mono

Text Styles — Composite

semantic/base.json → textStyle

Composite styles combining family, size, weight, line-height and letter-spacing. Components consume these directly. Each maps to a Figma Text Style.

Display & Headings

Token	Size	Weight	Sample
textStyle.display-2xl	72px	bold	Display 2XL
textStyle.display-xl	60px	bold	Display XL
textStyle.heading-xl	36px	bold	Heading XL
textStyle.heading-lg	30px	bold	Heading LG
textStyle.heading-md	24px	semibold	Heading MD
textStyle.heading-sm	20px	semibold	Heading SM
textStyle.heading-xs	18px	semibold	Heading XS

Body

Token	Size	Weight	Sample
textStyle.body-lg	18px	light	The quick brown fox jumps over the lazy dog
textStyle.body-md	16px	light	The quick brown fox jumps over the lazy dog
textStyle.body-sm	14px	regular	The quick brown fox jumps over the lazy dog

Labels, Captions & Utility

Token	Size	Weight	Sample
textStyle.label-lg	16px	medium	Button Label
textStyle.label-md	14px	medium	Input Label
textStyle.label-sm	12px	medium	Badge Tag Chip
textStyle.caption	12px	light	Image caption or helper text
textStyle.footnote	10px	light	Legal text, footnotes, fine print
textStyle.overline	12px	semibold	SECTION LABEL
textStyle.code	14px	regular	const token = "value"

Spacing

primitives/spacing.json

4px base unit. All values are multiples of 4.

Token	Value	Visual
space.0.5	2px
space.1	4px
space.2	8px
space.3	12px
space.4	16px
space.5	20px
space.6	24px
space.8	32px
space.10	40px
space.12	48px
space.16	64px
space.20	80px
space.24	96px
space.32	128px

Radius & Shadow — Primitives

primitives/shape.json

Raw scale values. Components consume these via semantic tokens, not directly.

Border Radius Scale

Token	Value	Visual
radius.none	0px
radius.xs	2px
radius.sm	4px
radius.md	6px
radius.lg	8px
radius.xl	12px
radius.2xl	16px
radius.3xl	24px
radius.full	9999px

Shadow Scale

Token	CSS Value	Role
shadow.none	none	No elevation
shadow.xs	0 1px 2px 0 rgba(0,0,0,0.05)	Inputs, chips
shadow.sm	0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.05)	Default component elevation
shadow.md	0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05)	Cards, dropdowns
shadow.lg	0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05)	Floating panels, popovers
shadow.xl	0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05)	Modals, dialogs
shadow.2xl	0 25px 50px -12px rgba(0,0,0,0.18)	Drawers, full-screen overlays
shadow.inner	inset 0 2px 4px 0 rgba(0,0,0,0.05)	Inset fields, pressed states

Border Width

Token	Value	Visual
border.width.none	0px
border.width.thin	1px
border.width.medium	2px
border.width.thick	4px

Motion

primitives/shape.json → duration + easing

Duration

Token	Value	Role
duration.fast	100ms	Micro-interactions, tooltips
duration.normal	200ms	Standard transitions
duration.slow	300ms	Panels, modals entering
duration.slower	500ms	Larger layout shifts
duration.lazy	700ms	Page-level animations

Easing — hover any track to preview

Token	Value	Role
easing.default	cubic-bezier(0.4,0,0.2,1)	General purpose
easing.in	cubic-bezier(0.4,0,1,1)	Exits
easing.out	cubic-bezier(0,0,0.2,1)	Entrances
easing.spring	cubic-bezier(0.34,1.56,0.64,1)	Springy, playful

Grid & Layout

primitives/grid.json

Column min-widths (CSS Grid minmax)

Token	Value	Role
grid.column.min-xs	120px	Dense grids, icon lists
grid.column.min-sm	160px	Compact cards, small tiles
grid.column.min-md	240px	Standard cards, form fields
grid.column.min-lg	320px	Wide cards, content columns
grid.column.min-xl	400px	Large content blocks
grid.column.sidebar	260px	Sidebar in named-area layouts
grid.column.panel	360px	Detail panel, drawer

Breakpoints — min-width (mobile-first)

Token	Value	Role
breakpoint.xs	0px	Mobile — default, no media query needed
breakpoint.sm	480px	Large mobile / small tablet
breakpoint.md	768px	Tablet
breakpoint.lg	1024px	Small desktop / landscape tablet
breakpoint.xl	1280px	Desktop
breakpoint.2xl	1536px	Wide desktop

Gutters & Margins per breakpoint

Breakpoint	Min width	Gutter	Outer margin
xs	0px	16px	16px
sm	480px	16px	24px
md	768px	24px	32px
lg	1024px	32px	48px
xl	1280px	32px	64px
2xl	1536px	40px	80px

Max widths

Token	Value	Role
grid.maxWidth.content	720px	Prose / article body
grid.maxWidth.layout	1280px	Standard page layout
grid.maxWidth.wide	1536px	Wide / dashboard layouts

Theme Overview

6 built-in combinations

Each theme is a combination of a color mode and a style personality. Community themes override only the semantic tokens.

Theme	Color mode	Shape personality	Radius component	Shadow component
light	Light	Base (friendly)	8px	xs
dark	Dark	Base (friendly)	8px	xs (dark)
light-sharp	Light	Sharp / flat	0px	none
dark-sharp	Dark	Sharp / flat	0px	none
light-elevated	Light	Elevated / soft	12px	sm
dark-elevated	Dark	Elevated / soft	12px	sm (dark)

Light Theme

semantic/base.json

All semantic color tokens resolved for the light theme. Components consume these values via CSS custom properties.

Surface

Token	Role	Value
semantic.color.surface.default	Page background	#ffffff {color.neutral.0}
semantic.color.surface.subtle	Dashboard canvas, sidebar	#faf7f5 {color.sand.50}
semantic.color.surface.raised	Cards, panels	#ffffff {color.neutral.0}
semantic.color.surface.overlay	Modals, drawers	#ffffff {color.neutral.0}
semantic.color.surface.sunken	Inset areas, code blocks	#f5ede8 {color.sand.100}
semantic.color.surface.skeleton	Skeleton elements	#d1d5db {color.neutral.300}

Text

Token	Role	Value	Swatch
semantic.color.text.default	Body text	#1f2937 {color.neutral.800}
semantic.color.text.subtle	Captions, metadata	#4b5563 {color.neutral.600}
semantic.color.text.disabled	Disabled — WCAG exempt	#9ca3af {color.neutral.400}
semantic.color.text.inverse	On dark backgrounds	#ffffff {color.neutral.0}	Aa
semantic.color.text.link	Link	#6F5A7E {color.mauve.600}
semantic.color.text.linkHover	Link hover	#5a5160 {color.mauve.700}

Border

Token	Role	Value
semantic.color.border.default	Standard borders	#ede0d8 {color.sand.200}
semantic.color.border.subtle	Hairline, dividers	#f5ede8 {color.sand.100}
semantic.color.border.strong	Emphasized borders	#d1d5db {color.neutral.300}
semantic.color.border.focus	Focus ring	#9333ea {color.purple.600}

Interactive

Token	Role	Value	Swatch
semantic.color.interactive.primary	Primary button fill	#6F5A7E {color.mauve.600}
semantic.color.interactive.primaryHover	Darkens on hover	#5a5160 {color.mauve.700}
semantic.color.interactive.primaryActive	Darkens on press	#433c4a {color.mauve.800}
semantic.color.interactive.primarySubtle	Selected/active bg	#f6f3f5 {color.mauve.50}
semantic.color.interactive.actionText	Text on primary button — white	#ffffff {color.neutral.0}	Aa
semantic.color.interactive.secondary	Filled secondary button	#1f2937 {color.neutral.800}
semantic.color.interactive.secondaryHover	Darkens on hover	#111827 {color.neutral.900}
semantic.color.interactive.secondaryActive	Darkens on press	#030712 {color.neutral.950}
semantic.color.interactive.ghostHover	Ghost / list item hover bg — transient	#f5ede8 {color.sand.100}
semantic.color.interactive.ghostActive	Ghost / list item pressed bg — transient	#ede0d8 {color.sand.200}
semantic.color.interactive.navSelected	Selected nav/list item bg — dark, persistent	#6F5A7E {color.mauve.600}
semantic.color.interactive.navSelectedText	Text on selected item — white on dark bg	#ffffff {color.neutral.0}	Aa
semantic.color.interactive.navSelectedHover	Hover on already-selected item	#5a5160 {color.mauve.700}
semantic.color.interactive.navUnselected	Persistent unselected bg — subtle warm tint	#f5ede8 {color.sand.100}
semantic.color.interactive.danger	Danger button background	#BB1637 {color.red.700}
semantic.color.interactive.dangerHover	Danger button background hover	#95020E {color.red.800}
semantic.color.interactive.dangerActive	Danger button background active	#6E0B13 {color.red.900}

Status

Token	Role	Value
semantic.color.status.success	Positive	#148448 {color.green.700}
semantic.color.status.successSubtle	Success background tint	#dcfce7 {color.green.100}
semantic.color.status.warning	Caution	#c94500 {color.orange.700}
semantic.color.status.warningSubtle	Warning background tint	#fbebd8 {color.orange.100}
semantic.color.status.error	Error	#d9233b {color.red.600}
semantic.color.status.errorSubtle	Error background tint	#fee2e2 {color.red.100}
semantic.color.status.info	Informational	#9333ea {color.purple.600}
semantic.color.status.infoSubtle	Info background tint	#f3e8ff {color.purple.100}

Dark Theme

themes/dark.json

Semantic overrides for dark mode. Interactive primary uses mauve.400 with dark text (8.43 AAA). Status colors shifted to 400-step for AAA on dark surfaces. Status subtle backgrounds are 15% tinted hex values.

Surface

Token	Role	Value
semantic.color.surface.default	Page background	#030712 {color.neutral.950}
semantic.color.surface.subtle	Sidebar, secondary areas	#111827 {color.neutral.900}
semantic.color.surface.raised	Cards, panels	#1f2937 {color.neutral.800}
semantic.color.surface.overlay	Modals, drawers	#1f2937 {color.neutral.800}
semantic.color.surface.sunken	Inset areas, code blocks	#000000 {color.neutral.1000}
semantic.color.surface.skeleton	Skeleton elements	#4b5563 {color.neutral.600}

Text

Token	Role	Value	Swatch
semantic.color.text.default	Body text	#f9fafb {color.neutral.50}
semantic.color.text.subtle	Captions, metadata	#9ca3af {color.neutral.400}
semantic.color.text.disabled	Disabled — WCAG exempt	#4b5563 {color.neutral.600}
semantic.color.text.inverse	On light surfaces in dark theme	#111827 {color.neutral.900}	Aa
semantic.color.text.link	Link	#a6808c {color.mauve.400}
semantic.color.text.linkHover	Link hover	#c9b5bf {color.mauve.300}

Border

Token	Role	Value
semantic.color.border.default	Standard — 3:1+ on dark	#4b5563 {color.neutral.600}
semantic.color.border.subtle	Hairline, dividers	#374151 {color.neutral.700}
semantic.color.border.strong	Emphasized borders	#6b7280 {color.neutral.500}
semantic.color.border.focus	Focus ring	#a855f7 {color.purple.500}

Interactive

Token	Role	Value	Swatch
semantic.color.interactive.primary	Primary button fill	#a6808c {color.mauve.400}
semantic.color.interactive.primaryHover	Lightens on hover	#c9b5bf {color.mauve.300}
semantic.color.interactive.primaryActive	Darkens on press	#8d6876 {color.mauve.500}
semantic.color.interactive.primarySubtle	Selected/active bg	#1f2937 {color.neutral.800}
semantic.color.interactive.actionText	Dark text on light mauve	#030712 {color.neutral.950}	Aa
semantic.color.interactive.secondary	Filled secondary button (light fill)	#e5e7eb {color.neutral.200}
semantic.color.interactive.secondaryHover	Lightens on hover	#f3f4f6 {color.neutral.100}
semantic.color.interactive.secondaryActive	Slightly darker on press	#d1d5db {color.neutral.300}
semantic.color.interactive.ghostHover	Ghost / list item hover bg — transient	#1f2937 {color.neutral.800}
semantic.color.interactive.ghostActive	Ghost / list item pressed bg — transient	#374151 {color.neutral.700}
semantic.color.interactive.navSelected	Selected nav/list item — brand mauve, persistent	#a6808c {color.mauve.400}
semantic.color.interactive.navSelectedText	Text on selected item — white on mauve, 5.43 AA	#ffffff {color.neutral.0}	Aa
semantic.color.interactive.navSelectedHover	Hover on already-selected item	#c9b5bf {color.mauve.300}
semantic.color.interactive.navUnselected	Persistent unselected bg — subtle dark tint	#1f2937 {color.neutral.800}
semantic.color.interactive.danger	Danger button background	#f87171 {color.red.400}
semantic.color.interactive.dangerHover	Danger button background hover	#F5A5B0 {color.red.300}
semantic.color.interactive.dangerActive	Danger button background active	#ef4444 {color.red.500}

Status — 400-step colors, 15%-tinted subtle backgrounds

Token	Role	Value
semantic.color.status.success	Positive	#4ade80 {color.green.400}
semantic.color.status.successSubtle	Success bg — green.400 @ 15% opacity	rgba(74,222,128,0.15)
semantic.color.status.warning	Caution	#fb923c {color.orange.400}
semantic.color.status.warningSubtle	Warning bg — orange.400 @ 15% opacity	rgba(251,146,60,0.15)
semantic.color.status.error	Error	#f87171 {color.red.400}
semantic.color.status.errorSubtle	Error bg — red.400 @ 15% opacity	rgba(248,113,113,0.15)
semantic.color.status.info	Info	#c084fc {color.purple.400}
semantic.color.status.infoSubtle	Info bg — purple.400 @ 15% opacity	rgba(192,132,252,0.15)

Dataviz Colors

primitives/color.json → dataviz

Categorical series colors and semantic chart indicators. Series colors are pulled from existing palette ramps at their most perceptually distinct steps. Never use series colors to convey positive/negative meaning — use the indicator tokens for that.

Categorical Series — 10 colors

Token	Value	Role
dataviz.blue	#3b82f6	Series 1
dataviz.teal	#14b8a6	Series 2
dataviz.purple	#a855f7	Series 3
dataviz.orange	#f97316	Series 4
dataviz.pink	#ec4899	Series 5
dataviz.yellow	#f5b000	Series 6
dataviz.cyan	#06b6d4	Series 7
dataviz.green	#22c55e	Series 8
dataviz.magenta	#e029a8	Series 9
dataviz.sand	#b89d92	Series 10

Series — visual strip

1

2

3

4

5

6

7

8

9

10

Tip: run through a CVD simulator before finalizing chart components for accessibility.

Semantic Indicators

Token	Value	Role
dataviz.positive	#16a34a	Positive trend, growth, success
dataviz.negative	#dc2626	Negative trend, decline, loss
dataviz.neutral	#6b7280	Flat / no change
dataviz.highlight	#a855f7	Selected or hovered series