Colors

Semantic color tokens — light + dark values for every surface. Always reference these via CSS variables (e.g. var(--primary)) or the Tailwind utilities, never raw hex.

background

Token	Light	Dark	Description
--background-base	`#fafafa`	`#0a0a0a`	Default background colour of <body />, etc.
--background-secondary-40	`#f5f5f566`	`#1f1f1f66`	Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />
--background-secondary-50	`#f5f5f580`	`#1f1f1f80`	Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />
--background-accent-50	`#f5f5f580`	`#26262680`	Accent colour for hover effects on <DropdownMenuItem>, <SelectItem>, etc.
--background-secondary	`#f5f5f5`	`#1f1f1f`	Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />
--background-destructive-fill_(10)	`#dc26261a`	`#dc26264d`	To be used in faded background elements, like call outs, secondary buttons, etc
--background-destructive-hover_(20)	`#dc262633`	`#dc262626`
--background-success-fill_(10)	`#16a34a1a`	`#1665344d`	To be used in faded background elements, like call outs, secondary buttons, etc
--background-success-hover_(20)	`#16a34a33`	`#16653426`

foreground

Token	Light	Dark	Description
--foreground-base	`#171717`	`#fafafa`	Text colour for background elements
--foreground-muted	`#737373`	`#a3a3a3`	Text colour for muted elements

card

Token	Light	Dark	Description
--card-fill	`#ffffff`	`#171717`	Background color for <Card />
--card-foreground	`#171717`	`#fafafa`	Text colour for card element

popover

Token	Light	Dark	Description
--popover-fill	`#ffffffcc`	`#171717cc`	Background colour for popovers such as <DropdownMenu />, <HoverCard />, <Popover />
--popover-foreground	`#171717`	`#fafafa`	Text colour for popover elements

border

Token	Light	Dark	Description
--border-default	`#00000014`	`#ffffff1a`	Default border colour
--border-secondary-40	`#f5f5f566`	`#26262666`	Muted border like it Toast Buttons.
--border-destructive-50	`#fca5a5`	`#ef4444`	Used for outlining destructive elements, such as buttons or alerts
--border-success-50	`#22c55e`	`#16a34a`	Used for outlining destructive elements, such as buttons or alerts
--border-focus	`#c865f6`	`#cd82f0b2`	Used for outlining destructive elements, such as buttons or alerts

input

Token	Light	Dark	Description
--input-stroke	`#0000001a`	`#ffffff26`	Border colour for inputs such as <Input />, <Select />, <Textarea />
--input-fill	`#ffffff`	`#171717`

accent

Token	Light	Dark	Description
--accent-fill	`#f5f5f5`	`#ffffff08`	Accent colour for hover effects on <DropdownMenuItem>, <SelectItem>, etc.
--accent-foreground	`#171717`	`#fafafa`	Text colour for accent elements

ring

Token	Light	Dark	Description
--ring	`#cd82f0b2`	`#8b5cf680`	Ring colour used for focus state — lilac-400 @ 70%

button

Token	Light	Dark	Description
--button-default-fill	`#ffffff`	`#404040`	Use this variable on default buttons.
--button-default-hover	`#f5f5f5`	`#262626`	Hover fill for default buttons
--button-primary-fill	`#cd82f0`	`#cd82f0`	Primary colour for <Button /> NOTE: do not use this fill, use the Gradient/Primary/Default style for fill and hover
--button-primary-foreground	`#fafafa`	`#fafafa`	Primary text colour for <Button />
--button-primary-hover	`#c865f6`	`#c865f6`	Primary colour for <Button /> NOTE: do not use this fill, use the Gradient/Primary/Hover style for fill and hover
--button-secondary-fill	`#f5f5f5`	`#262626`	Secondary colour for <Button />
--button-secondary-foreground	`#171717`	`#fafafa`	Secondary text colour for <Button />
--button-secondary-hover	`#f5f5f5`	`#171717`	Placeholder colour of the secondary button background on hover
--button-destructive-fill	`#ef4444`	`#ef4444`	Used for destructive actions such as <Button variant="destructive"> and <Toast variant="destructive">
--button-destructive-foreground	`#fafafa`	`#fafafa`
--button-destructive-hover	`#b91c1c`	`#dc2626`
--button-success-fill	`#16a34a`	`#22c55e`
--button-success-hover	`#15803d`	`#16a34a`

sidebar

Token	Light	Dark	Description
--sidebar-background	`#f7f7f7`	`#101010`	Background for the sidebar — midpoint between neutral-50 base and neutral-100 surfaces
--sidebar-foreground	`#404040`	`#f5f5f5`	Text colour for sidebar elements
--sidebar-foreground-70	`#404040b2`	`#f5f5f5b2`	Secondary symbols in the sidebar
--sidebar-primary	`#6d28d9`	`#cd82f0`	Color for the buttons and accent elements in the sidebar
--sidebar-primary-foreground	`#fafafa`	`#ffffff`	Symbols color on the primary elements
--sidebar-accent	`#f5f5f5`	`#262626`	Accent surfaces, hover and other interactions
--sidebar-accent-foreground	`#171717`	`#f5f5f5`	Symbols on the accent surfaces in active state
--sidebar-border	`#e5e5e5`	`#ffffff1a`
--sidebar-ring	`#a3a3a3`	`#d4d4d4`

neon

Token	Light	Dark	Description
--neon-green	`#adfa1d`	`#adfa1d`

Additional themed tokens

Specialized color tokens emitted at the layout layer (not part of the semantic semantic.* tree).

Token	Value	Purpose
--button-primary-border	#964aba	Deeper purple for accent-tone button borders. The brand `--button-primary` (light lilac) loses saturation at 1px, so this token gives accent borders chromatic mass against any surface.

Liquid colors (brand)

Tidal's brand palette, all as Tailwind-style hex scales. Lilac is the bespoke brand hue (400 is the original brand lilac, 500 the former "Darker"); violet and indigo are Tailwind scales adopted as secondary brand hues. Reference by step (e.g. {violet.700}). Reference these only when defining a semantic token; never in component code directly.

Lilac

#fdf9ff

100

#f9edff

200

#f0d7fe

300

#e1b2f8

400

#cd82f0

500

#c865f6

600

#b942ea

700

#a732d8

800

#8f2db8

900

#7a2a9a

950

#541f6f

violet

#f5f3ff

100

#ede9fe

200

#ddd6fe

300

#c4b5fd

400

#a78bfa

500

#8b5cf6

600

#7c3aed

700

#6d28d9

800

#5b21b6

900

#4c1d95

950

#2e1065

indigo

#eef2ff

100

#e0e7ff

200

#c7d2fe

300

#a5b4fc

400

#818cf8

500

#6366f1

600

#4f46e5

700

#4338ca

800

#3730a3

900

#312e81

950

#1e1b4b