Color
Every colour in the product comes from one of the families below, through a CSS variable. A palette swaps what those families contain; nothing else moves.
Palettes
Persona
data-theme="persona"Ships today. Ube primary, neutral gray, white page.
Cüte
data-theme="cute"The original, before the Persona swap. Green primary.
Customer
data-theme="customer"Spruce and verdant. Near-black teal primary, lime accent.
A palette redeclares the colour families below, never the components — so nothing in a component changes when the theme does. Switching one is a document-level act: a theme file declares only the --color-* families, while the semantic tokens components read (--primary, --background) are declared once on :root and are already substituted by the time anything nested could override them. Below is the live palette, Cüte.
Brand colors
Name
Brand Yellow
CSS variable
--color-brand-yellow
Name
Brand Green
CSS variable
--color-brand-green
Name
Brand Cyan
CSS variable
--color-brand-cyan
Name
Brand Red
CSS variable
--color-brand-red
Name
Brand Purple
CSS variable
--color-brand-purple
Name
Brand Pink
CSS variable
--color-brand-pink
Name
Brand Black
CSS variable
--color-brand-black
gray
Name
gray 50
CSS variable
--color-gray-50
Name
gray 100
CSS variable
--color-gray-100
Name
gray 200
CSS variable
--color-gray-200
Name
gray 300
CSS variable
--color-gray-300
Name
gray 400
CSS variable
--color-gray-400
Name
gray 500
CSS variable
--color-gray-500
Name
gray 600
CSS variable
--color-gray-600
Name
gray 700
CSS variable
--color-gray-700
Name
gray 800
CSS variable
--color-gray-800
Name
gray 900
CSS variable
--color-gray-900
Name
gray 950
CSS variable
--color-gray-950
yellow
Name
yellow 50
CSS variable
--color-yellow-50
Name
yellow 100
CSS variable
--color-yellow-100
Name
yellow 200
CSS variable
--color-yellow-200
Name
yellow 300
CSS variable
--color-yellow-300
Name
yellow 400
CSS variable
--color-yellow-400
Name
yellow 500
CSS variable
--color-yellow-500
Name
yellow 600
CSS variable
--color-yellow-600
Name
yellow 700
CSS variable
--color-yellow-700
Name
yellow 800
CSS variable
--color-yellow-800
Name
yellow 900
CSS variable
--color-yellow-900
Name
yellow 950
CSS variable
--color-yellow-950
green
Name
green 50
CSS variable
--color-green-50
Name
green 100
CSS variable
--color-green-100
Name
green 200
CSS variable
--color-green-200
Name
green 300
CSS variable
--color-green-300
Name
green 400
CSS variable
--color-green-400
Name
green 500
CSS variable
--color-green-500
Name
green 600
CSS variable
--color-green-600
Name
green 700
CSS variable
--color-green-700
Name
green 800
CSS variable
--color-green-800
Name
green 900
CSS variable
--color-green-900
Name
green 950
CSS variable
--color-green-950
cyan
Name
cyan 50
CSS variable
--color-cyan-50
Name
cyan 100
CSS variable
--color-cyan-100
Name
cyan 200
CSS variable
--color-cyan-200
Name
cyan 300
CSS variable
--color-cyan-300
Name
cyan 400
CSS variable
--color-cyan-400
Name
cyan 500
CSS variable
--color-cyan-500
Name
cyan 600
CSS variable
--color-cyan-600
Name
cyan 700
CSS variable
--color-cyan-700
Name
cyan 800
CSS variable
--color-cyan-800
Name
cyan 900
CSS variable
--color-cyan-900
Name
cyan 950
CSS variable
--color-cyan-950
red
Name
red 50
CSS variable
--color-red-50
Name
red 100
CSS variable
--color-red-100
Name
red 200
CSS variable
--color-red-200
Name
red 300
CSS variable
--color-red-300
Name
red 400
CSS variable
--color-red-400
Name
red 500
CSS variable
--color-red-500
Name
red 600
CSS variable
--color-red-600
Name
red 700
CSS variable
--color-red-700
Name
red 800
CSS variable
--color-red-800
Name
red 900
CSS variable
--color-red-900
Name
red 950
CSS variable
--color-red-950
purple
Name
purple 50
CSS variable
--color-purple-50
Name
purple 100
CSS variable
--color-purple-100
Name
purple 200
CSS variable
--color-purple-200
Name
purple 300
CSS variable
--color-purple-300
Name
purple 400
CSS variable
--color-purple-400
Name
purple 500
CSS variable
--color-purple-500
Name
purple 600
CSS variable
--color-purple-600
Name
purple 700
CSS variable
--color-purple-700
Name
purple 800
CSS variable
--color-purple-800
Name
purple 900
CSS variable
--color-purple-900
Name
purple 950
CSS variable
--color-purple-950
pink
Name
pink 50
CSS variable
--color-pink-50
Name
pink 100
CSS variable
--color-pink-100
Name
pink 200
CSS variable
--color-pink-200
Name
pink 300
CSS variable
--color-pink-300
Name
pink 400
CSS variable
--color-pink-400
Name
pink 500
CSS variable
--color-pink-500
Name
pink 600
CSS variable
--color-pink-600
Name
pink 700
CSS variable
--color-pink-700
Name
pink 800
CSS variable
--color-pink-800
Name
pink 900
CSS variable
--color-pink-900
Name
pink 950
CSS variable
--color-pink-950