Color palette: light tokens

Fixed identity colours with supporting mixes. Primary fills and readable primary text have separate roles in both modes.

Name	Light	Dark	Description	Tailwind utility
--vueda-brand-blue	oklch( 0.59053715 0.21130455 257.19718572 )		identity blue inherited from Arrai; unchanged in dark mode.
--vueda-brand-navy	oklch( 0.21742541 0.05238341 242.80769382 )		identity dark blue; the dark page surface and light text colour.
--vueda-brand-grey	oklch(0.92190602 0 0)		identity grey; dark body text and light supporting surfaces.
--background	oklch(1 0 0)	var(--vueda-brand-navy)	page surface.	color: background
--foreground	var(--vueda-brand-navy)	var(--vueda-brand-grey)	default text on the page.	color: foreground
--card	oklch(1 0 0)	color-mix(in srgb, var(--vueda-brand-navy) 96%, var(--vueda-brand-grey))	card surface, separated by an edge rather than elevation.	color: card
--card-foreground	var(--foreground)	var(--foreground)	text on a card.	color: card-foreground
--popover	oklch(1 0 0)	color-mix(in srgb, var(--vueda-brand-navy) 92%, var(--vueda-brand-grey))	floating menus, popovers, and command lists.	color: popover
--popover-foreground	var(--foreground)	var(--foreground)	text on a floating surface.	color: popover-foreground
--primary	var(--vueda-brand-blue)		primary action fill and selected-state markers.	color: primary
--primary-foreground	color-mix( in srgb, var(--vueda-brand-navy) 50%, oklch(0 0 0) )		dark labels on primary fills in both modes.	color: primary-foreground
--primary-hover	color-mix(in srgb, var(--primary) 90%, oklch(1 0 0))		primary fill on hover.	color: primary-hover
--primary-active	color-mix(in srgb, var(--primary) 82%, oklch(1 0 0))		primary fill when pressed.	color: primary-active
--primary-text	color-mix( in srgb, var(--primary) 72%, var(--vueda-brand-navy) )	color-mix(in srgb, var(--primary) 68%, oklch(1 0 0))	blue text on page, card, and lightly tinted surfaces.	color: primary-text
--primary-text-active	color-mix( in srgb, var(--primary) 64%, var(--vueda-brand-navy) )	color-mix(in srgb, var(--primary) 56%, oklch(1 0 0))	pressed primary link text.	color: primary-text-active
--secondary	color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))	color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))	neutral filled controls.	color: secondary
--secondary-foreground	var(--foreground)	var(--foreground)	text on secondary fills.	color: secondary-foreground
--secondary-hover	var(--vueda-brand-grey)	color-mix(in srgb, var(--vueda-brand-navy) 76%, var(--vueda-brand-grey))	secondary fill on hover.	color: secondary-hover
--secondary-active	color-mix( in srgb, var(--vueda-brand-grey) 88%, var(--vueda-brand-navy) )	color-mix(in srgb, var(--vueda-brand-navy) 64%, var(--vueda-brand-grey))	pressed secondary fill.	color: secondary-active
--muted	color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))	color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))	subdued supporting surfaces.	color: muted
--muted-foreground	color-mix( in srgb, var(--vueda-brand-navy) 68%, oklch(1 0 0) )	color-mix(in srgb, var(--vueda-brand-grey) 72%, var(--vueda-brand-navy))	captions and supporting labels.	color: muted-foreground
--accent	var(--vueda-brand-grey)	color-mix(in srgb, var(--vueda-brand-navy) 78%, var(--vueda-brand-grey))	menu hover and toggle selection; rows use half strength.	color: accent
--accent-foreground	var(--foreground)	var(--foreground)	text on neutral hover and selection surfaces.	color: accent-foreground
--accent-active	color-mix( in srgb, var(--vueda-brand-grey) 88%, var(--vueda-brand-navy) )	color-mix(in srgb, var(--vueda-brand-navy) 66%, var(--vueda-brand-grey))	pressed neutral surface.	color: accent-active
--destructive	oklch(0.5 0.18 27)	oklch(0.7 0.19 27)	destructive actions and error text; tinted surfaces use /10.	color: destructive
--destructive-foreground	oklch(1 0 0)		text on a destructive fill.	color: destructive-foreground
--destructive-hover	oklch(0.44 0.18 27)	oklch(0.56 0.18 27)	destructive fill on hover.	color: destructive-hover
--destructive-active	oklch(0.37 0.16 27)	oklch(0.58 0.18 27)	destructive fill when pressed.	color: destructive-active
--success	oklch(0.45 0.12 155)	oklch(0.72 0.16 155)	success text; pair with /10 surfaces and /50 edges.	color: success
--success-foreground	oklch(1 0 0)	var(--primary-foreground)	labels on solid success fills.	color: success-foreground
--warning	oklch(0.49 0.12 70)	oklch(0.78 0.15 70)	warning text; pair with /10 surfaces and /50 edges.	color: warning
--warning-foreground	oklch(1 0 0)	var(--primary-foreground)	labels on solid warning fills.	color: warning-foreground
--info	var(--primary-text)	var(--primary-text)	informational text and tints use the readable blue.	color: info
--info-foreground	oklch(1 0 0)	var(--primary-foreground)	labels on solid informational fills.	color: info-foreground
--border	color-mix(in srgb, var(--vueda-brand-navy) 14%, oklch(1 0 0))	color-mix(in srgb, var(--vueda-brand-navy) 82%, var(--vueda-brand-grey))	separators and default edges.	color: border
--border-strong	color-mix( in srgb, var(--vueda-brand-navy) 26%, oklch(1 0 0) )	color-mix(in srgb, var(--vueda-brand-navy) 70%, var(--vueda-brand-grey))	resting outline controls and stronger edges.	color: border-strong
--input	var(--border)	var(--border)	default painted input edge.	color: input
--field	color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))	color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))	editable field fill.	color: field
--field-hover	color-mix(in srgb, var(--vueda-brand-grey) 72%, oklch(1 0 0))	color-mix(in srgb, var(--vueda-brand-navy) 83%, var(--vueda-brand-grey))	editable field fill on hover.	color: field-hover
--disabled	var(--vueda-brand-grey)	color-mix(in srgb, var(--vueda-brand-navy) 82%, var(--vueda-brand-grey))	inert fill replacing a disabled control's tone.	color: disabled
--disabled-foreground	color-mix( in srgb, var(--vueda-brand-navy) 44%, oklch(1 0 0) )	color-mix(in srgb, var(--vueda-brand-grey) 44%, var(--vueda-brand-navy))	disabled labels on filled and transparent controls.	color: disabled-foreground
--field-line	var(--muted-foreground)	var(--muted-foreground)	editable field's bottom edge; read-only fields use --border.	color: field-line
--ring	var(--primary-text)	var(--primary-text)	focus colour with contrast independent of the primary fill.	color: ring
--overlay	color-mix(in srgb, var(--vueda-brand-navy) 60%, transparent)		modal scrim in either mode.	color: overlay
--sunken	color-mix( in srgb, var(--vueda-brand-grey) 72%, oklch(1 0 0) )	color-mix(in srgb, var(--vueda-brand-navy) 85%, oklch(0 0 0))	recessed code and empty-state surfaces.	color: sunken
--sidebar	color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))	color-mix(in srgb, var(--vueda-brand-navy) 65%, oklch(0 0 0))	sidebar and app chrome.	color: sidebar
--sidebar-foreground	var(--foreground)	var(--foreground)	sidebar text.	color: sidebar-foreground
--sidebar-primary	var(--primary)		brand rail and selected icon colour.	color: sidebar-primary
--sidebar-primary-foreground	var(--primary-foreground)		labels on sidebar primary fills.	color: sidebar-primary-foreground
--sidebar-primary-text	color-mix( in srgb, var(--sidebar-primary) 72%, var(--vueda-brand-navy) )	color-mix(in srgb, var(--sidebar-primary) 68%, oklch(1 0 0))	readable blue for tinted sidebar badges.	color: sidebar-primary-text
--sidebar-accent	var(--vueda-brand-grey)	color-mix(in srgb, var(--vueda-brand-navy) 92%, var(--vueda-brand-grey))	sidebar hover and selection fill.	color: sidebar-accent
--sidebar-accent-foreground	var(--foreground)	var(--foreground)	text on sidebar hover and selection.	color: sidebar-accent-foreground
--sidebar-accent-active	color-mix( in srgb, var(--vueda-brand-grey) 88%, var(--vueda-brand-navy) )	color-mix(in srgb, var(--vueda-brand-navy) 84%, var(--vueda-brand-grey))	pressed sidebar fill.	color: sidebar-accent-active
--sidebar-border	var(--border)	var(--border)	sidebar edges and separators.	color: sidebar-border
--sidebar-ring	var(--ring)	var(--ring)	sidebar focus colour.	color: sidebar-ring

Tokens

--vueda-brand-blue

Field	Value
Light	oklch( 0.59053715 0.21130455 257.19718572 )
Source	client/lib/theme/vueda-tailwind/base.css:454

identity blue inherited from Arrai; unchanged in dark mode.

--vueda-brand-navy

Field	Value
Light	oklch( 0.21742541 0.05238341 242.80769382 )
Source	client/lib/theme/vueda-tailwind/base.css:457

identity dark blue; the dark page surface and light text colour.

--vueda-brand-grey

Field	Value
Light	oklch(0.92190602 0 0)
Source	client/lib/theme/vueda-tailwind/base.css:460

identity grey; dark body text and light supporting surfaces.

--background

Field	Value
Light	oklch(1 0 0)
Dark	var(--vueda-brand-navy)
Tailwind utility	color: background
Source	client/lib/theme/vueda-tailwind/base.css:463

page surface.

--foreground

Field	Value
Light	var(--vueda-brand-navy)
Dark	var(--vueda-brand-grey)
Tailwind utility	color: foreground
Source	client/lib/theme/vueda-tailwind/base.css:464

default text on the page.

--card

Field	Value
Light	oklch(1 0 0)
Dark	color-mix(in srgb, var(--vueda-brand-navy) 96%, var(--vueda-brand-grey))
Tailwind utility	color: card
Source	client/lib/theme/vueda-tailwind/base.css:465

card surface, separated by an edge rather than elevation.

--card-foreground

Field	Value
Light	var(--foreground)
Dark	var(--foreground)
Tailwind utility	color: card-foreground
Source	client/lib/theme/vueda-tailwind/base.css:466

text on a card.

--popover

Field	Value
Light	oklch(1 0 0)
Dark	color-mix(in srgb, var(--vueda-brand-navy) 92%, var(--vueda-brand-grey))
Tailwind utility	color: popover
Source	client/lib/theme/vueda-tailwind/base.css:467

floating menus, popovers, and command lists.

--popover-foreground

Field	Value
Light	var(--foreground)
Dark	var(--foreground)
Tailwind utility	color: popover-foreground
Source	client/lib/theme/vueda-tailwind/base.css:468

text on a floating surface.

--primary

Field	Value
Light	var(--vueda-brand-blue)
Tailwind utility	color: primary
Source	client/lib/theme/vueda-tailwind/base.css:471

primary action fill and selected-state markers.

--primary-foreground

Field	Value
Light	color-mix( in srgb, var(--vueda-brand-navy) 50%, oklch(0 0 0) )
Tailwind utility	color: primary-foreground
Source	client/lib/theme/vueda-tailwind/base.css:472

dark labels on primary fills in both modes.

--primary-hover

Field	Value
Light	color-mix(in srgb, var(--primary) 90%, oklch(1 0 0))
Tailwind utility	color: primary-hover
Source	client/lib/theme/vueda-tailwind/base.css:477

primary fill on hover.

--primary-active

Field	Value
Light	color-mix(in srgb, var(--primary) 82%, oklch(1 0 0))
Tailwind utility	color: primary-active
Source	client/lib/theme/vueda-tailwind/base.css:478

primary fill when pressed.

--primary-text

Field	Value
Light	color-mix( in srgb, var(--primary) 72%, var(--vueda-brand-navy) )
Dark	color-mix(in srgb, var(--primary) 68%, oklch(1 0 0))
Tailwind utility	color: primary-text
Source	client/lib/theme/vueda-tailwind/base.css:479

blue text on page, card, and lightly tinted surfaces.

--primary-text-active

Field	Value
Light	color-mix( in srgb, var(--primary) 64%, var(--vueda-brand-navy) )
Dark	color-mix(in srgb, var(--primary) 56%, oklch(1 0 0))
Tailwind utility	color: primary-text-active
Source	client/lib/theme/vueda-tailwind/base.css:484

pressed primary link text.

--secondary

Field	Value
Light	color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))
Dark	color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))
Tailwind utility	color: secondary
Source	client/lib/theme/vueda-tailwind/base.css:491

neutral filled controls.

--secondary-foreground

Field	Value
Light	var(--foreground)
Dark	var(--foreground)
Tailwind utility	color: secondary-foreground
Source	client/lib/theme/vueda-tailwind/base.css:492

text on secondary fills.

--secondary-hover

Field	Value
Light	var(--vueda-brand-grey)
Dark	color-mix(in srgb, var(--vueda-brand-navy) 76%, var(--vueda-brand-grey))
Tailwind utility	color: secondary-hover
Source	client/lib/theme/vueda-tailwind/base.css:493

secondary fill on hover.

--secondary-active

Field	Value
Light	color-mix( in srgb, var(--vueda-brand-grey) 88%, var(--vueda-brand-navy) )
Dark	color-mix(in srgb, var(--vueda-brand-navy) 64%, var(--vueda-brand-grey))
Tailwind utility	color: secondary-active
Source	client/lib/theme/vueda-tailwind/base.css:494

pressed secondary fill.

--muted

Field	Value
Light	color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))
Dark	color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))
Tailwind utility	color: muted
Source	client/lib/theme/vueda-tailwind/base.css:499

subdued supporting surfaces.

--muted-foreground

Field	Value
Light	color-mix( in srgb, var(--vueda-brand-navy) 68%, oklch(1 0 0) )
Dark	color-mix(in srgb, var(--vueda-brand-grey) 72%, var(--vueda-brand-navy))
Tailwind utility	color: muted-foreground
Source	client/lib/theme/vueda-tailwind/base.css:500

captions and supporting labels.

--accent

Field	Value
Light	var(--vueda-brand-grey)
Dark	color-mix(in srgb, var(--vueda-brand-navy) 78%, var(--vueda-brand-grey))
Tailwind utility	color: accent
Source	client/lib/theme/vueda-tailwind/base.css:505

menu hover and toggle selection; rows use half strength.

--accent-foreground

Field	Value
Light	var(--foreground)
Dark	var(--foreground)
Tailwind utility	color: accent-foreground
Source	client/lib/theme/vueda-tailwind/base.css:506

text on neutral hover and selection surfaces.

--accent-active

Field	Value
Light	color-mix( in srgb, var(--vueda-brand-grey) 88%, var(--vueda-brand-navy) )
Dark	color-mix(in srgb, var(--vueda-brand-navy) 66%, var(--vueda-brand-grey))
Tailwind utility	color: accent-active
Source	client/lib/theme/vueda-tailwind/base.css:507

pressed neutral surface.

--destructive

Field	Value
Light	oklch(0.5 0.18 27)
Dark	oklch(0.7 0.19 27)
Tailwind utility	color: destructive
Source	client/lib/theme/vueda-tailwind/base.css:514

destructive actions and error text; tinted surfaces use /10.

--destructive-foreground

Field	Value
Light	oklch(1 0 0)
Tailwind utility	color: destructive-foreground
Source	client/lib/theme/vueda-tailwind/base.css:515

text on a destructive fill.

--destructive-hover

Field	Value
Light	oklch(0.44 0.18 27)
Dark	oklch(0.56 0.18 27)
Tailwind utility	color: destructive-hover
Source	client/lib/theme/vueda-tailwind/base.css:516

destructive fill on hover.

--destructive-active

Field	Value
Light	oklch(0.37 0.16 27)
Dark	oklch(0.58 0.18 27)
Tailwind utility	color: destructive-active
Source	client/lib/theme/vueda-tailwind/base.css:517

destructive fill when pressed.

--success

Field	Value
Light	oklch(0.45 0.12 155)
Dark	oklch(0.72 0.16 155)
Tailwind utility	color: success
Source	client/lib/theme/vueda-tailwind/base.css:518

success text; pair with /10 surfaces and /50 edges.

--success-foreground

Field	Value
Light	oklch(1 0 0)
Dark	var(--primary-foreground)
Tailwind utility	color: success-foreground
Source	client/lib/theme/vueda-tailwind/base.css:519

labels on solid success fills.

--warning

Field	Value
Light	oklch(0.49 0.12 70)
Dark	oklch(0.78 0.15 70)
Tailwind utility	color: warning
Source	client/lib/theme/vueda-tailwind/base.css:520

warning text; pair with /10 surfaces and /50 edges.

--warning-foreground

Field	Value
Light	oklch(1 0 0)
Dark	var(--primary-foreground)
Tailwind utility	color: warning-foreground
Source	client/lib/theme/vueda-tailwind/base.css:521

labels on solid warning fills.

--info

Field	Value
Light	var(--primary-text)
Dark	var(--primary-text)
Tailwind utility	color: info
Source	client/lib/theme/vueda-tailwind/base.css:522

informational text and tints use the readable blue.

--info-foreground

Field	Value
Light	oklch(1 0 0)
Dark	var(--primary-foreground)
Tailwind utility	color: info-foreground
Source	client/lib/theme/vueda-tailwind/base.css:523

labels on solid informational fills.

--border

Field	Value
Light	color-mix(in srgb, var(--vueda-brand-navy) 14%, oklch(1 0 0))
Dark	color-mix(in srgb, var(--vueda-brand-navy) 82%, var(--vueda-brand-grey))
Tailwind utility	color: border
Source	client/lib/theme/vueda-tailwind/base.css:526

separators and default edges.

--border-strong

Field	Value
Light	color-mix( in srgb, var(--vueda-brand-navy) 26%, oklch(1 0 0) )
Dark	color-mix(in srgb, var(--vueda-brand-navy) 70%, var(--vueda-brand-grey))
Tailwind utility	color: border-strong
Source	client/lib/theme/vueda-tailwind/base.css:527

resting outline controls and stronger edges.

--input

Field	Value
Light	var(--border)
Dark	var(--border)
Tailwind utility	color: input
Source	client/lib/theme/vueda-tailwind/base.css:532

default painted input edge.

--field

Field	Value
Light	color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))
Dark	color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))
Tailwind utility	color: field
Source	client/lib/theme/vueda-tailwind/base.css:533

editable field fill.

--field-hover

Field	Value
Light	color-mix(in srgb, var(--vueda-brand-grey) 72%, oklch(1 0 0))
Dark	color-mix(in srgb, var(--vueda-brand-navy) 83%, var(--vueda-brand-grey))
Tailwind utility	color: field-hover
Source	client/lib/theme/vueda-tailwind/base.css:534

editable field fill on hover.

--disabled

Field	Value
Light	var(--vueda-brand-grey)
Dark	color-mix(in srgb, var(--vueda-brand-navy) 82%, var(--vueda-brand-grey))
Tailwind utility	color: disabled
Source	client/lib/theme/vueda-tailwind/base.css:535

inert fill replacing a disabled control's tone.

--disabled-foreground

Field	Value
Light	color-mix( in srgb, var(--vueda-brand-navy) 44%, oklch(1 0 0) )
Dark	color-mix(in srgb, var(--vueda-brand-grey) 44%, var(--vueda-brand-navy))
Tailwind utility	color: disabled-foreground
Source	client/lib/theme/vueda-tailwind/base.css:536

disabled labels on filled and transparent controls.

--field-line

Field	Value
Light	var(--muted-foreground)
Dark	var(--muted-foreground)
Tailwind utility	color: field-line
Source	client/lib/theme/vueda-tailwind/base.css:541

editable field's bottom edge; read-only fields use --border.

--ring

Field	Value
Light	var(--primary-text)
Dark	var(--primary-text)
Tailwind utility	color: ring
Source	client/lib/theme/vueda-tailwind/base.css:542

focus colour with contrast independent of the primary fill.

--overlay

Field	Value
Light	color-mix(in srgb, var(--vueda-brand-navy) 60%, transparent)
Tailwind utility	color: overlay
Source	client/lib/theme/vueda-tailwind/base.css:543

modal scrim in either mode.

--sunken

Field	Value
Light	color-mix( in srgb, var(--vueda-brand-grey) 72%, oklch(1 0 0) )
Dark	color-mix(in srgb, var(--vueda-brand-navy) 85%, oklch(0 0 0))
Tailwind utility	color: sunken
Source	client/lib/theme/vueda-tailwind/base.css:544

recessed code and empty-state surfaces.

--sidebar

Field	Value
Light	color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))
Dark	color-mix(in srgb, var(--vueda-brand-navy) 65%, oklch(0 0 0))
Tailwind utility	color: sidebar
Source	client/lib/theme/vueda-tailwind/base.css:551

sidebar and app chrome.

--sidebar-foreground

Field	Value
Light	var(--foreground)
Dark	var(--foreground)
Tailwind utility	color: sidebar-foreground
Source	client/lib/theme/vueda-tailwind/base.css:552

sidebar text.

--sidebar-primary

Field	Value
Light	var(--primary)
Tailwind utility	color: sidebar-primary
Source	client/lib/theme/vueda-tailwind/base.css:553

brand rail and selected icon colour.

--sidebar-primary-foreground

Field	Value
Light	var(--primary-foreground)
Tailwind utility	color: sidebar-primary-foreground
Source	client/lib/theme/vueda-tailwind/base.css:554

labels on sidebar primary fills.

--sidebar-primary-text

Field	Value
Light	color-mix( in srgb, var(--sidebar-primary) 72%, var(--vueda-brand-navy) )
Dark	color-mix(in srgb, var(--sidebar-primary) 68%, oklch(1 0 0))
Tailwind utility	color: sidebar-primary-text
Source	client/lib/theme/vueda-tailwind/base.css:555

readable blue for tinted sidebar badges.

--sidebar-accent

Field	Value
Light	var(--vueda-brand-grey)
Dark	color-mix(in srgb, var(--vueda-brand-navy) 92%, var(--vueda-brand-grey))
Tailwind utility	color: sidebar-accent
Source	client/lib/theme/vueda-tailwind/base.css:560

sidebar hover and selection fill.

--sidebar-accent-foreground

Field	Value
Light	var(--foreground)
Dark	var(--foreground)
Tailwind utility	color: sidebar-accent-foreground
Source	client/lib/theme/vueda-tailwind/base.css:561

text on sidebar hover and selection.

--sidebar-accent-active

Field	Value
Light	color-mix( in srgb, var(--vueda-brand-grey) 88%, var(--vueda-brand-navy) )
Dark	color-mix(in srgb, var(--vueda-brand-navy) 84%, var(--vueda-brand-grey))
Tailwind utility	color: sidebar-accent-active
Source	client/lib/theme/vueda-tailwind/base.css:562

pressed sidebar fill.

--sidebar-border

Field	Value
Light	var(--border)
Dark	var(--border)
Tailwind utility	color: sidebar-border
Source	client/lib/theme/vueda-tailwind/base.css:567

sidebar edges and separators.

--sidebar-ring

Field	Value
Light	var(--ring)
Dark	var(--ring)
Tailwind utility	color: sidebar-ring
Source	client/lib/theme/vueda-tailwind/base.css:568

sidebar focus colour.