Template capabilities — design system, chrome, restaurant blocks, and interactive features.
Complete color system showing all palettes in both light and dark themes. Hover over any swatch to copy the color value.
100–900 scale (light mode)
primary-100
--primary-100
primary-200
--primary-200
primary-300
--primary-300
primary-400
--primary-400
primary-500
--primary-500
primary-600
--primary-600
primary-700
--primary-700
primary-800
--primary-800
primary-900
--primary-900
100–900 scale (light mode)
secondary-100
--secondary-100
secondary-200
--secondary-200
secondary-300
--secondary-300
secondary-400
--secondary-400
secondary-500
--secondary-500
secondary-600
--secondary-600
secondary-700
--secondary-700
secondary-800
--secondary-800
secondary-900
--secondary-900
100–900 scale (light mode)
accent-100
--accent-100
accent-200
--accent-200
accent-300
--accent-300
accent-400
--accent-400
accent-500
--accent-500
accent-600
--accent-600
accent-700
--accent-700
accent-800
--accent-800
accent-900
--accent-900
100–900 scale (light mode)
background-100
--background-100
background-200
--background-200
background-300
--background-300
background-400
--background-400
background-500
--background-500
background-600
--background-600
background-700
--background-700
background-800
--background-800
background-900
--background-900
100–900 scale (light mode)
foreground-100
--foreground-100
foreground-200
--foreground-200
foreground-300
--foreground-300
foreground-400
--foreground-400
foreground-500
--foreground-500
foreground-600
--foreground-600
foreground-700
--foreground-700
foreground-800
--foreground-800
foreground-900
--foreground-900
100–900 scale (light mode)
muted-100
--muted-100
muted-200
--muted-200
muted-300
--muted-300
muted-400
--muted-400
muted-500
--muted-500
muted-600
--muted-600
muted-700
--muted-700
muted-800
--muted-800
muted-900
--muted-900
100–900 scale (light mode)
destructive-100
--destructive-100
destructive-200
--destructive-200
destructive-300
--destructive-300
destructive-400
--destructive-400
destructive-500
--destructive-500
destructive-600
--destructive-600
destructive-700
--destructive-700
destructive-800
--destructive-800
destructive-900
--destructive-900
100–900 scale (light mode)
error-100
--error-100
error-200
--error-200
error-300
--error-300
error-400
--error-400
error-500
--error-500
error-600
--error-600
error-700
--error-700
error-800
--error-800
error-900
--error-900
100–900 scale (light mode)
warning-100
--warning-100
warning-200
--warning-200
warning-300
--warning-300
warning-400
--warning-400
warning-500
--warning-500
warning-600
--warning-600
warning-700
--warning-700
warning-800
--warning-800
warning-900
--warning-900
100–900 scale (light mode)
success-100
--success-100
success-200
--success-200
success-300
--success-300
success-400
--success-400
success-500
--success-500
success-600
--success-600
success-700
--success-700
success-800
--success-800
success-900
--success-900
100–900 scale (light mode)
info-100
--info-100
info-200
--info-200
info-300
--info-300
info-400
--info-400
info-500
--info-500
info-600
--info-600
info-700
--info-700
info-800
--info-800
info-900
--info-900
High-level design tokens that adapt to theme
background
--background
foreground
--foreground
card
--card
card-foreground
--card-foreground
popover
--popover
popover-foreground
--popover-foreground
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
border
--border
input
--input
ring
--ring
error
--error
warning
--warning
success
--success
info
--info
Colors for data visualization
chart-1
--chart-1
chart-2
--chart-2
chart-3
--chart-3
chart-4
--chart-4
chart-5
--chart-5