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

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

shadcn tokens · dark (.dark)

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

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

• --brand-orangehsl(12.4 99% 59.8%)#fe5d33 · figma-variable:Orange
• --brand-inkhsl(220.9 39.3% 11%)#111827 · figma-variable:Dark
• --brand-pinkhsl(358.9 96.6% 88.6%)#fec6c7 · figma-variable:Pink
• --brand-lilachsl(307.3 30.3% 78.6%)#d9b8d5 · figma-variable:Light Purple
• --brand-skyhsl(206.2 80% 92.2%)#dbedfb · figma-variable:Light Blue
• --brand-misthsl(0 0% 96.5%)#f6f6f6 · figma-variable:Light Grey
• --brand-successhsl(160.1 84.1% 39.4%)#10b981 · figma-fill
• --brand-placeholderhsl(236 10.1% 70.8%)#adaebc · figma-fill

App-level brand tokens · dark

• --brand-orangehsl(12.4 99% 59.8%)#fe5d33 · figma-variable:Orange
• --brand-inkhsl(210 20% 98%)#f9fafb · not-in-figma
• --brand-pinkhsl(350.2 36.3% 26.5%)#5c2b33 · not-in-figma
• --brand-lilachsl(288.5 15.7% 32.5%)#5b4660 · not-in-figma
• --brand-skyhsl(214.2 52% 24.5%)#1e3a5f · not-in-figma
• --brand-misthsl(215 27.9% 16.9%)#1f2937 · figma-fill
• --brand-successhsl(158.1 64.4% 51.6%)#34d399 · figma-fill
• --brand-placeholderhsl(220 8.9% 46.1%)#6b7280 · figma-fill