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`	`#18181b`	Default background colour of <body />, etc.
--background-muted-40	`#f4f4f566`	`#1f1f2366`	Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />
--background-muted-50	`#f4f4f580`	`#1f1f2380`	Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />
--background-accent-50	`#f4f4f580`	`#27272a80`	Accent colour for hover effects on <DropdownMenuItem>, <SelectItem>, etc.
--background-muted	`#f4f4f5`	`#1f1f23`	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	`#18181b`	`#fafafa`	Text colour for background elements
--foreground-muted	`#71717a`	`#a1a1aa`	Text colour for muted elements

card

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

popover

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

border

Token	Light	Dark	Description
--border-default	`#00000014`	`#ffffff14`	Default border colour
--border-muted-40	`#f4f4f566`	`#27272a66`	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	`#0000000d`	`#ffffff14`	Border colour for inputs such as <Input />, <Select />, <Textarea />
--input-fill	`#f4f4f5`	`#1f1f23`

accent

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

ring

Token	Light	Dark	Description
--ring	`#cd82f0b2`	`#5505af80`	Ring colour used for focus state

button

Token	Light	Dark	Description
--button-default-fill	`#ffffff`	`#333339`	Use this variable on default buttons.
--button-default-hover	`#f4f4f5`	`#27272a`	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	`#f4f4f5`	`#1f1f23`	Secondary colour for <Button />
--button-secondary-foreground	`#18181b`	`#fafafa`	Secondary text colour for <Button />
--button-secondary-hover	`#f4f4f5`	`#09090b`	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	`#f4f4f5`	`#27272a`	Background for the sidebar
--sidebar-foreground	`#3f3f46`	`#f4f4f5`	Text colour for sidebar elements
--sidebar-foreground-70	`#3f3f46b2`	`#f4f4f5b2`	Secondary symbols in the sidebar
--sidebar-primary	`#5505af`	`#cd82f0`	Color for the buttons and accent elements in the sidebar
--sidebar-primary-foreground	`#fafafa`	`#ffffff`	Symbols color on the primary elements
--sidebar-accent	`#f4f4f5`	`#27272a`	Accent surfaces, hover and other interactions
--sidebar-accent-foreground	`#18181b`	`#f4f4f5`	Symbols on the accent surfaces in active state
--sidebar-border	`#e4e4e7`	`#27272a`
--sidebar-ring	`#a1a1aa`	`#d4d4d8`

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 viola 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 with alpha variants. Reference these only when defining a semantic token; never in component code directly.

Lilac

#cd82f04d

#cd82f080

#cd82f0b2

Full

#cd82f0

Darker

#c865f6

Viola

#5505af4d

#5505af80

#5505afb2

Full

#5505af

Mandarin

#ff5f1e4d

#ff5f1e80

#ff5f1eb2

Full

#ff5f1e