Colors

Light / dark preview

The same components rendered under each token set (scoped with data-theme, independent of the page theme). Toggle the page theme with .

shadcn tokens · light

• --background hsl(0 0% 100%) #ffffff · figma-fill
• --foreground hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --card hsl(0 0% 96.5%) #f6f6f6 · figma-variable:Light Grey
• --card-foreground hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --popover hsl(0 0% 100%) #ffffff · figma-fill
• --popover-foreground hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --primary hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --primary-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --secondary hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --secondary-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --muted hsl(0 0% 96.5%) #f6f6f6 · figma-variable:Light Grey
• --muted-foreground hsl(215 13.8% 34.1%) #4b5563 · figma-variable:Grey Text
• --accent hsl(206.2 80% 92.2%) #dbedfb · figma-variable:Light Blue
• --accent-foreground hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --destructive hsl(0 72.2% 50.6%) #dc2626 · not-in-figma
• --destructive-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --border hsl(220 13% 91%) #e5e7eb · figma-fill
• --input hsl(220 13% 91%) #e5e7eb · figma-fill
• --ring hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --chart-1 hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --chart-2 hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --chart-3 hsl(307.3 30.3% 78.6%) #d9b8d5 · figma-variable:Light Purple
• --chart-4 hsl(206.2 80% 92.2%) #dbedfb · figma-variable:Light Blue
• --chart-5 hsl(358.9 96.6% 88.6%) #fec6c7 · figma-variable:Pink
• --sidebar hsl(0 0% 96.5%) #f6f6f6 · figma-variable:Light Grey
• --sidebar-foreground hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --sidebar-primary hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --sidebar-primary-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --sidebar-accent hsl(206.2 80% 92.2%) #dbedfb · figma-variable:Light Blue
• --sidebar-accent-foreground hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --sidebar-border hsl(220 13% 91%) #e5e7eb · figma-fill
• --sidebar-ring hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange

shadcn tokens · dark (.dark)

• --background hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --foreground hsl(0 0% 100%) #ffffff · figma-fill
• --card hsl(215 27.9% 16.9%) #1f2937 · figma-fill
• --card-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --popover hsl(215 27.9% 16.9%) #1f2937 · figma-fill
• --popover-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --primary hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --primary-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --secondary hsl(0 0% 96.5%) #f6f6f6 · figma-variable:Light Grey
• --secondary-foreground hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --muted hsl(215 27.9% 16.9%) #1f2937 · figma-fill
• --muted-foreground hsl(217.9 10.6% 64.9%) #9ca3af · figma-fill
• --accent hsl(216.9 19.1% 26.7%) #374151 · figma-fill
• --accent-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --destructive hsl(0 84.2% 60.2%) #ef4444 · not-in-figma
• --destructive-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --border hsl(215 27.9% 16.9%) #1f2937 · figma-fill
• --input hsl(216.9 19.1% 26.7%) #374151 · figma-fill
• --ring hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --chart-1 hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --chart-2 hsl(0 0% 96.5%) #f6f6f6 · figma-variable:Light Grey
• --chart-3 hsl(288.5 15.7% 32.5%) #5b4660 · not-in-figma
• --chart-4 hsl(214.2 52% 24.5%) #1e3a5f · not-in-figma
• --chart-5 hsl(350.2 36.3% 26.5%) #5c2b33 · not-in-figma
• --sidebar hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --sidebar-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --sidebar-primary hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --sidebar-primary-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --sidebar-accent hsl(216.9 19.1% 26.7%) #374151 · figma-fill
• --sidebar-accent-foreground hsl(0 0% 100%) #ffffff · figma-fill
• --sidebar-border hsl(215 27.9% 16.9%) #1f2937 · figma-fill
• --sidebar-ring hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange

App-level brand tokens · light (apps only, never packages/)

• --brand-orange hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --brand-ink hsl(220.9 39.3% 11%) #111827 · figma-variable:Dark
• --brand-pink hsl(358.9 96.6% 88.6%) #fec6c7 · figma-variable:Pink
• --brand-lilac hsl(307.3 30.3% 78.6%) #d9b8d5 · figma-variable:Light Purple
• --brand-sky hsl(206.2 80% 92.2%) #dbedfb · figma-variable:Light Blue
• --brand-mist hsl(0 0% 96.5%) #f6f6f6 · figma-variable:Light Grey
• --brand-success hsl(160.1 84.1% 39.4%) #10b981 · figma-fill
• --brand-placeholder hsl(236 10.1% 70.8%) #adaebc · figma-fill

App-level brand tokens · dark

• --brand-orange hsl(12.4 99% 59.8%) #fe5d33 · figma-variable:Orange
• --brand-ink hsl(210 20% 98%) #f9fafb · not-in-figma
• --brand-pink hsl(350.2 36.3% 26.5%) #5c2b33 · not-in-figma
• --brand-lilac hsl(288.5 15.7% 32.5%) #5b4660 · not-in-figma
• --brand-sky hsl(214.2 52% 24.5%) #1e3a5f · not-in-figma
• --brand-mist hsl(215 27.9% 16.9%) #1f2937 · figma-fill
• --brand-success hsl(158.1 64.4% 51.6%) #34d399 · figma-fill
• --brand-placeholder hsl(220 8.9% 46.1%) #6b7280 · figma-fill