Tokens
Colors
The full GloBird palette. Toggle the theme in the header to see how the semantic colours respond to light and dark mode.
Semantic · Light & Dark aware
Use these in product code. They flip automatically when the theme is dark.
background
--background
foreground
--foreground
card
--card
popover
--popover
primary
--primary
primary-foreground
--primary-foreground
secondary
--secondary
secondary-foreground
--secondary-foreground
muted
--muted
muted-foreground
--muted-foreground
accent
--accent
accent-foreground
--accent-foreground
destructive
--destructive
destructive-foreground
--destructive-foreground
border
--border
input
--input
ring
--ring
positive
--positive
recessed
--recessed
disabled
--disabled
GloBird Brand
The raw GloBird brand palette. Use these for marketing and brand-led work, but stick to the semantic colours above for product UI, since those switch with the theme automatically.
gb-pink
--gb-pink
gb-deep-fuchsia
--gb-deep-fuchsia
gb-hyper-pink
--gb-hyper-pink
gb-yellow
--gb-yellow
gb-solar-flare
--gb-solar-flare
gb-green
--gb-green
gb-lavender-haze
--gb-lavender-haze
gb-pure-white
--gb-pure-white
gb-pure-black
--gb-pure-black
gb-light-grey-1
--gb-light-grey-1
gb-light-grey-2
--gb-light-grey-2
gb-light-grey-3
--gb-light-grey-3
gb-light-grey-4
--gb-light-grey-4
gb-mid-grey-1
--gb-mid-grey-1
gb-dark-grey-1
--gb-dark-grey-1
gb-card-black
--gb-card-black
gb-black-on-black
--gb-black-on-black
gb-error-1
--gb-error-1
gb-error-2
--gb-error-2