Colors
Fluxion color documentation turns the current color token system into a readable public contract without changing the original Figma variable names.
This page documents primitive palette tokens, semantic color roles and mode-resolved outputs. It is intended to help designers understand intent and to help developers consume the same model through stable canonical paths.
Scope snapshot
Raw palette tokens promoted from TailwindCSS V2.
Theme V2 role-based colors across light and dark.
Resolved Mode V2 outputs for explicit theme consumption.
Consumption guidance
Use primitives for palette references
Primitive colors are the raw palette. They are useful for understanding the available spectrum, but product work should usually move up into semantic or mode layers.
Use semantic colors for system intent
Semantic colors are the most useful layer for design and documentation because they describe purpose: surface, foreground, border, brand, status and more.
Use mode-resolved colors for explicit implementation
Mode tokens expose the resolved light and dark outputs. Use them when implementation needs an explicit theme value rather than a role-level semantic token.
How this page is organized
- primitives are grouped as base neutrals and palette
- semantic and mode-resolved colors are grouped by intent, not by raw dump
- groups prioritize surfaces, text, borders, brand, status, charts and chips
Primitive colors
Primitive colors are the lowest-level palette exposed publicly by Fluxion.
TailwindCSS V2 primitives define the raw palette that higher Fluxion layers alias and compose.
Base neutrals
Raw black, white and transparent values used as the lowest-level neutral references.
primitives.color.tailwind.base.blackPrimitive#000000primitives.color.tailwind.base.transparentPrimitivetransparentprimitives.color.tailwind.base.whitePrimitive#FFFFFFPalette
Tailwind color families promoted as Fluxion primitives for palette construction and token aliasing.
primitives.color.tailwind.amber.100Primitive#FEF3C7primitives.color.tailwind.amber.200Primitive#FDE68Aprimitives.color.tailwind.amber.300Primitive#FCD34Dprimitives.color.tailwind.amber.400Primitive#FBBF24primitives.color.tailwind.amber.50Primitive#FFFBEBprimitives.color.tailwind.amber.500Primitive#F59E0Bprimitives.color.tailwind.amber.600Primitive#D97706primitives.color.tailwind.amber.700Primitive#B45309primitives.color.tailwind.amber.800Primitive#92400Eprimitives.color.tailwind.amber.900Primitive#78350Fprimitives.color.tailwind.amber.950Primitive#451A03primitives.color.tailwind.blue.100Primitive#DBEAFEprimitives.color.tailwind.blue.200Primitive#BFDBFEprimitives.color.tailwind.blue.300Primitive#93C5FDprimitives.color.tailwind.blue.400Primitive#60A5FAprimitives.color.tailwind.blue.50Primitive#EFF6FFprimitives.color.tailwind.blue.500Primitive#3B82F6primitives.color.tailwind.blue.600Primitive#2563EBprimitives.color.tailwind.blue.700Primitive#1D4ED8primitives.color.tailwind.blue.800Primitive#1E40AFprimitives.color.tailwind.blue.900Primitive#1E3A8Aprimitives.color.tailwind.blue.950Primitive#172554primitives.color.tailwind.cyan.100Primitive#CFFAFEprimitives.color.tailwind.cyan.200Primitive#A5F3FCprimitives.color.tailwind.cyan.300Primitive#67E8F9primitives.color.tailwind.cyan.400Primitive#22D3EEprimitives.color.tailwind.cyan.50Primitive#ECFEFFprimitives.color.tailwind.cyan.500Primitive#06B6D4primitives.color.tailwind.cyan.600Primitive#0891B2primitives.color.tailwind.cyan.700Primitive#0E7490primitives.color.tailwind.cyan.800Primitive#155E75primitives.color.tailwind.cyan.900Primitive#164E63primitives.color.tailwind.cyan.950Primitive#083344primitives.color.tailwind.emerald.100Primitive#D1FAE5primitives.color.tailwind.emerald.200Primitive#A7F3D0primitives.color.tailwind.emerald.300Primitive#6EE7B7primitives.color.tailwind.emerald.400Primitive#34D399primitives.color.tailwind.emerald.50Primitive#ECFDF5primitives.color.tailwind.emerald.500Primitive#10B981primitives.color.tailwind.emerald.600Primitive#059669primitives.color.tailwind.emerald.700Primitive#047857primitives.color.tailwind.emerald.800Primitive#065F46primitives.color.tailwind.emerald.900Primitive#064E3Bprimitives.color.tailwind.emerald.950Primitive#022C22primitives.color.tailwind.fuchsia.100Primitive#FAE8FFprimitives.color.tailwind.fuchsia.200Primitive#F5D0FEprimitives.color.tailwind.fuchsia.300Primitive#F0ABFCprimitives.color.tailwind.fuchsia.400Primitive#E879F9primitives.color.tailwind.fuchsia.50Primitive#FDF4FFprimitives.color.tailwind.fuchsia.500Primitive#D946EFprimitives.color.tailwind.fuchsia.600Primitive#C026D3primitives.color.tailwind.fuchsia.700Primitive#A21CAFprimitives.color.tailwind.fuchsia.800Primitive#86198Fprimitives.color.tailwind.fuchsia.900Primitive#701A75primitives.color.tailwind.fuchsia.950Primitive#4A044Eprimitives.color.tailwind.gray.100Primitive#F3F4F6primitives.color.tailwind.gray.200Primitive#E5E7EBprimitives.color.tailwind.gray.300Primitive#D1D5DBprimitives.color.tailwind.gray.400Primitive#9CA3AFprimitives.color.tailwind.gray.50Primitive#F9FAFBprimitives.color.tailwind.gray.500Primitive#6B7280primitives.color.tailwind.gray.600Primitive#4B5563primitives.color.tailwind.gray.700Primitive#374151primitives.color.tailwind.gray.800Primitive#1F2937primitives.color.tailwind.gray.900Primitive#111827primitives.color.tailwind.gray.950Primitive#030712primitives.color.tailwind.green.100Primitive#DCFCE7primitives.color.tailwind.green.200Primitive#BBF7D0primitives.color.tailwind.green.300Primitive#86EFACprimitives.color.tailwind.green.400Primitive#4ADE80primitives.color.tailwind.green.50Primitive#F0FDF4primitives.color.tailwind.green.500Primitive#22C55Eprimitives.color.tailwind.green.600Primitive#16A34Aprimitives.color.tailwind.green.700Primitive#15803Dprimitives.color.tailwind.green.800Primitive#166534primitives.color.tailwind.green.900Primitive#14532Dprimitives.color.tailwind.green.950Primitive#052E16primitives.color.tailwind.indigo.100Primitive#E0E7FFprimitives.color.tailwind.indigo.200Primitive#C7D2FEprimitives.color.tailwind.indigo.300Primitive#A5B4FCprimitives.color.tailwind.indigo.400Primitive#818CF8primitives.color.tailwind.indigo.50Primitive#EEF2FFprimitives.color.tailwind.indigo.500Primitive#6366F1primitives.color.tailwind.indigo.600Primitive#4F46E5primitives.color.tailwind.indigo.700Primitive#4338CAprimitives.color.tailwind.indigo.800Primitive#3730A3primitives.color.tailwind.indigo.900Primitive#312E81primitives.color.tailwind.indigo.950Primitive#1E1B4Bprimitives.color.tailwind.lime.100Primitive#ECFCCBprimitives.color.tailwind.lime.200Primitive#D9F99Dprimitives.color.tailwind.lime.300Primitive#BEF264primitives.color.tailwind.lime.400Primitive#A3E635primitives.color.tailwind.lime.50Primitive#F7FEE7primitives.color.tailwind.lime.500Primitive#84CC16primitives.color.tailwind.lime.600Primitive#65A30Dprimitives.color.tailwind.lime.700Primitive#4D7C0Fprimitives.color.tailwind.lime.800Primitive#3F6212primitives.color.tailwind.lime.900Primitive#365314primitives.color.tailwind.lime.950Primitive#1A2E05primitives.color.tailwind.neutral.100Primitive#F5F5F5primitives.color.tailwind.neutral.200Primitive#E5E5E5primitives.color.tailwind.neutral.300Primitive#D4D4D4primitives.color.tailwind.neutral.400Primitive#A3A3A3primitives.color.tailwind.neutral.50Primitive#FAFAFAprimitives.color.tailwind.neutral.500Primitive#737373primitives.color.tailwind.neutral.600Primitive#525252primitives.color.tailwind.neutral.700Primitive#404040primitives.color.tailwind.neutral.800Primitive#262626primitives.color.tailwind.neutral.900Primitive#171717primitives.color.tailwind.neutral.950Primitive#0A0A0Aprimitives.color.tailwind.orange.100Primitive#FFEDD5primitives.color.tailwind.orange.200Primitive#FED7AAprimitives.color.tailwind.orange.300Primitive#FDBA74primitives.color.tailwind.orange.400Primitive#FB923Cprimitives.color.tailwind.orange.50Primitive#FFF7EDprimitives.color.tailwind.orange.500Primitive#F97316primitives.color.tailwind.orange.600Primitive#EA580Cprimitives.color.tailwind.orange.700Primitive#C2410Cprimitives.color.tailwind.orange.800Primitive#9A3412primitives.color.tailwind.orange.900Primitive#7C2D12primitives.color.tailwind.orange.950Primitive#431407primitives.color.tailwind.pink.100Primitive#FCE7F3primitives.color.tailwind.pink.200Primitive#FBCFE8primitives.color.tailwind.pink.300Primitive#F9A8D4primitives.color.tailwind.pink.400Primitive#F472B6primitives.color.tailwind.pink.50Primitive#FDF2F8primitives.color.tailwind.pink.500Primitive#EC4899primitives.color.tailwind.pink.600Primitive#DB2777primitives.color.tailwind.pink.700Primitive#BE185Dprimitives.color.tailwind.pink.800Primitive#9D174Dprimitives.color.tailwind.pink.900Primitive#831843primitives.color.tailwind.pink.950Primitive#500724primitives.color.tailwind.purple.100Primitive#F3E8FFprimitives.color.tailwind.purple.200Primitive#E9D5FFprimitives.color.tailwind.purple.300Primitive#D8B4FEprimitives.color.tailwind.purple.400Primitive#C084FCprimitives.color.tailwind.purple.50Primitive#FAF5FFprimitives.color.tailwind.purple.500Primitive#A855F7primitives.color.tailwind.purple.600Primitive#9333EAprimitives.color.tailwind.purple.700Primitive#7E22CEprimitives.color.tailwind.purple.800Primitive#6B21A8primitives.color.tailwind.purple.900Primitive#581C87primitives.color.tailwind.purple.950Primitive#3B0764primitives.color.tailwind.red.100Primitive#FEE2E2primitives.color.tailwind.red.200Primitive#FECACAprimitives.color.tailwind.red.300Primitive#FCA5A5primitives.color.tailwind.red.400Primitive#F87171primitives.color.tailwind.red.50Primitive#FEF2F2primitives.color.tailwind.red.500Primitive#EF4444primitives.color.tailwind.red.600Primitive#DC2626primitives.color.tailwind.red.700Primitive#B91C1Cprimitives.color.tailwind.red.800Primitive#991B1Bprimitives.color.tailwind.red.900Primitive#7F1D1Dprimitives.color.tailwind.red.950Primitive#450A0Aprimitives.color.tailwind.rose.100Primitive#FFE4E6primitives.color.tailwind.rose.200Primitive#FECDD3primitives.color.tailwind.rose.300Primitive#FDA4AFprimitives.color.tailwind.rose.400Primitive#FB7185primitives.color.tailwind.rose.50Primitive#FFF1F2primitives.color.tailwind.rose.500Primitive#F43F5Eprimitives.color.tailwind.rose.600Primitive#E11D48primitives.color.tailwind.rose.700Primitive#BE123Cprimitives.color.tailwind.rose.800Primitive#9F1239primitives.color.tailwind.rose.900Primitive#881337primitives.color.tailwind.rose.950Primitive#4C0519primitives.color.tailwind.sky.100Primitive#E0F2FEprimitives.color.tailwind.sky.200Primitive#BAE6FDprimitives.color.tailwind.sky.300Primitive#7DD3FCprimitives.color.tailwind.sky.400Primitive#38BDF8primitives.color.tailwind.sky.50Primitive#F0F9FFprimitives.color.tailwind.sky.500Primitive#0EA5E9primitives.color.tailwind.sky.600Primitive#0284C7primitives.color.tailwind.sky.700Primitive#0369A1primitives.color.tailwind.sky.800Primitive#075985primitives.color.tailwind.sky.900Primitive#0C4A6Eprimitives.color.tailwind.sky.950Primitive#082F49primitives.color.tailwind.slate.100Primitive#F1F5F9primitives.color.tailwind.slate.200Primitive#E2E8F0primitives.color.tailwind.slate.300Primitive#CBD5E1primitives.color.tailwind.slate.400Primitive#94A3B8primitives.color.tailwind.slate.50Primitive#F8FAFCprimitives.color.tailwind.slate.500Primitive#64748Bprimitives.color.tailwind.slate.600Primitive#475569primitives.color.tailwind.slate.700Primitive#334155primitives.color.tailwind.slate.800Primitive#1E293Bprimitives.color.tailwind.slate.900Primitive#0F172Aprimitives.color.tailwind.slate.950Primitive#020617primitives.color.tailwind.stone.100Primitive#F5F5F4primitives.color.tailwind.stone.200Primitive#E7E5E4primitives.color.tailwind.stone.300Primitive#D6D3D1primitives.color.tailwind.stone.400Primitive#A8A29Eprimitives.color.tailwind.stone.50Primitive#FAFAF9primitives.color.tailwind.stone.500Primitive#78716Cprimitives.color.tailwind.stone.600Primitive#57534Eprimitives.color.tailwind.stone.700Primitive#44403Cprimitives.color.tailwind.stone.800Primitive#292524primitives.color.tailwind.stone.900Primitive#1C1917primitives.color.tailwind.stone.950Primitive#0C0A09primitives.color.tailwind.teal.100Primitive#CCFBF1primitives.color.tailwind.teal.200Primitive#99F6E4primitives.color.tailwind.teal.300Primitive#5EEAD4primitives.color.tailwind.teal.400Primitive#2DD4BFprimitives.color.tailwind.teal.50Primitive#F0FDFAprimitives.color.tailwind.teal.500Primitive#14B8A6primitives.color.tailwind.teal.600Primitive#0D9488primitives.color.tailwind.teal.700Primitive#0F766Eprimitives.color.tailwind.teal.800Primitive#115E59primitives.color.tailwind.teal.900Primitive#134E4Aprimitives.color.tailwind.teal.950Primitive#042F2Eprimitives.color.tailwind.violet.100Primitive#EDE9FEprimitives.color.tailwind.violet.200Primitive#DDD6FEprimitives.color.tailwind.violet.300Primitive#C4B5FDprimitives.color.tailwind.violet.400Primitive#A78BFAprimitives.color.tailwind.violet.50Primitive#F5F3FFprimitives.color.tailwind.violet.500Primitive#8B5CF6primitives.color.tailwind.violet.600Primitive#7C3AEDprimitives.color.tailwind.violet.700Primitive#6D28D9primitives.color.tailwind.violet.800Primitive#5B21B6primitives.color.tailwind.violet.900Primitive#4C1D95primitives.color.tailwind.violet.950Primitive#2E1065primitives.color.tailwind.yellow.100Primitive#FEF9C3primitives.color.tailwind.yellow.200Primitive#FEF08Aprimitives.color.tailwind.yellow.300Primitive#FDE047primitives.color.tailwind.yellow.400Primitive#FACC15primitives.color.tailwind.yellow.50Primitive#FEFCE8primitives.color.tailwind.yellow.500Primitive#EAB308primitives.color.tailwind.yellow.600Primitive#CA8A04primitives.color.tailwind.yellow.700Primitive#A16207primitives.color.tailwind.yellow.800Primitive#854D0Eprimitives.color.tailwind.yellow.900Primitive#713F12primitives.color.tailwind.yellow.950Primitive#422006primitives.color.tailwind.zinc.100Primitive#F4F4F5primitives.color.tailwind.zinc.200Primitive#E4E4E7primitives.color.tailwind.zinc.300Primitive#D4D4D8primitives.color.tailwind.zinc.400Primitive#A1A1AAprimitives.color.tailwind.zinc.50Primitive#FAFAFAprimitives.color.tailwind.zinc.500Primitive#71717Aprimitives.color.tailwind.zinc.600Primitive#52525Bprimitives.color.tailwind.zinc.700Primitive#3F3F46primitives.color.tailwind.zinc.800Primitive#27272Aprimitives.color.tailwind.zinc.900Primitive#18181Bprimitives.color.tailwind.zinc.950Primitive#09090BSemantic colors, light
Semantic light tokens describe role and intent for the light theme.
Theme V2 semantic roles for the light theme. These tokens describe intent rather than raw pigment.
Surfaces
Background, card, popover and muted fills that define planes, containers and resting surfaces.
semantic.color.background.black.lightSemantic#000000semantic.color.background.default.lightSemantic#FFFFFFsemantic.color.background.inverted.lightSemantic#000000semantic.color.background.soft.lightSemantic#F5F5F4semantic.color.card.default.lightSemantic#FFFFFFsemantic.color.card.muted.default.lightSemantic#F5F5F5semantic.color.card.web.lightSemantic#FFFFFFsemantic.color.muted.always.lightSemantic#F5F5F5semantic.color.muted.default.lightSemantic#F5F5F5semantic.color.popover.default.lightSemantic#FFFFFFsemantic.color.sidebar.background.lightSemantic#FAFAFAText and foreground
Foreground roles for readable text, inverted text and content placed on colored surfaces.
semantic.color.card.foreground.lightSemantic#0A0A0Asemantic.color.card.muted.foreground.lightSemantic#737373semantic.color.foreground.default.lightSemantic#0A0A0Asemantic.color.foreground.inverted.lightSemantic#FAFAFAsemantic.color.foreground.white.lightSemantic#FFFFFFsemantic.color.muted.foreground.lightSemantic#737373semantic.color.popover.foreground.lightSemantic#0A0A0Asemantic.color.sidebar.foreground.lightSemantic#0A0A0ABorders and rings
Stroke, input and focus colors that define separation, outlines and emphasis.
semantic.color.border.default.lightSemantic#D4D4D4semantic.color.card.border.accent.lightSemantic#737373semantic.color.card.border.brand.1.lightSemantic#34D399semantic.color.card.border.default.lightSemantic#D4D4D4semantic.color.input.default.lightSemantic#E5E5E5semantic.color.ring.default.lightSemantic#A3A3A3semantic.color.sidebar.border.lightSemantic#E5E5E5semantic.color.sidebar.ring.lightSemantic#A3A3A3Brand and actions
Brand roles, accent roles and action colors that carry Fluxion identity and interactive emphasis.
semantic.color.accent.default.lightSemantic#F5F5F5semantic.color.accent.foreground.lightSemantic#171717semantic.color.brand.1.border.lightSemantic#047857semantic.color.brand.1.default.lightSemantic#34D399semantic.color.brand.1.foreground.lightSemantic#022C22semantic.color.brand.1.muted.lightSemantic#ECFDF5semantic.color.brand.1.variant.lightSemantic#047857semantic.color.brand.2.border.lightSemantic#6B21A8semantic.color.brand.2.default.lightSemantic#9333EAsemantic.color.brand.2.foreground.lightSemantic#FAF5FFsemantic.color.brand.2.variant.lightSemantic#6B21A8semantic.color.primary.default.lightSemantic#171717semantic.color.primary.foreground.lightSemantic#FAFAFAsemantic.color.secondary.default.lightSemantic#E5E5E5semantic.color.secondary.foreground.lightSemantic#171717semantic.color.sidebar.accent.default.lightSemantic#E5E5E5semantic.color.sidebar.accent.foreground.lightSemantic#171717semantic.color.sidebar.primary.default.lightSemantic#171717semantic.color.sidebar.primary.foreground.lightSemantic#FAFAFAStatus
Feedback tokens for destructive, warning, success and info states.
semantic.color.card.border.destructive.lightSemantic#DC2626semantic.color.destructive.background.lightSemantic#FEE2E2semantic.color.destructive.default.lightSemantic#DC2626semantic.color.destructive.foreground.lightSemantic#FEF2F2semantic.color.info.background.lightSemantic#E0F2FEsemantic.color.info.default.lightSemantic#0EA5E9semantic.color.success.background.lightSemantic#ECFCCBsemantic.color.success.default.lightSemantic#65A30Dsemantic.color.warning.background.lightSemantic#FEF3C7semantic.color.warning.default.lightSemantic#FBBF24Charts
Sequential chart colors intended for data visualization and series differentiation.
semantic.color.chart.1.lightSemantic#34D399semantic.color.chart.2.lightSemantic#2563EBsemantic.color.chart.3.lightSemantic#7C3AEDsemantic.color.chart.4.lightSemantic#C026D3semantic.color.chart.5.lightSemantic#F97316semantic.color.chart.6.lightSemantic#FBBF24semantic.color.chart.7.lightSemantic#FB7185Chips
Foreground and background pairs used for chip and label styling across themes.
semantic.color.chip.1.background.lightSemantic#E2E8F0semantic.color.chip.1.foreground.lightSemantic#334155semantic.color.chip.10.background.lightSemantic#A5F3FCsemantic.color.chip.10.foreground.lightSemantic#155E75semantic.color.chip.11.background.lightSemantic#BAE6FDsemantic.color.chip.11.foreground.lightSemantic#075985semantic.color.chip.12.background.lightSemantic#DBEAFEsemantic.color.chip.12.foreground.lightSemantic#1D4ED8semantic.color.chip.13.background.lightSemantic#E0E7FFsemantic.color.chip.13.foreground.lightSemantic#4338CAsemantic.color.chip.14.background.lightSemantic#DDD6FEsemantic.color.chip.14.foreground.lightSemantic#6D28D9semantic.color.chip.15.background.lightSemantic#E9D5FFsemantic.color.chip.15.foreground.lightSemantic#7E22CEsemantic.color.chip.16.background.lightSemantic#FAE8FFsemantic.color.chip.16.foreground.lightSemantic#A21CAFsemantic.color.chip.17.background.lightSemantic#FCE7F3semantic.color.chip.17.foreground.lightSemantic#BE185Dsemantic.color.chip.18.background.lightSemantic#FFE4E6semantic.color.chip.18.foreground.lightSemantic#BE123Csemantic.color.chip.2.background.lightSemantic#FECACAsemantic.color.chip.2.foreground.lightSemantic#B91C1Csemantic.color.chip.3.background.lightSemantic#FED7AAsemantic.color.chip.3.foreground.lightSemantic#C2410Csemantic.color.chip.4.background.lightSemantic#FEF3C7semantic.color.chip.4.foreground.lightSemantic#92400Esemantic.color.chip.5.background.lightSemantic#FEF08Asemantic.color.chip.5.foreground.lightSemantic#854D0Esemantic.color.chip.6.background.lightSemantic#D9F99Dsemantic.color.chip.6.foreground.lightSemantic#3F6212semantic.color.chip.7.background.lightSemantic#BBF7D0semantic.color.chip.7.foreground.lightSemantic#166534semantic.color.chip.8.background.lightSemantic#A7F3D0semantic.color.chip.8.foreground.lightSemantic#065F46semantic.color.chip.9.background.lightSemantic#CCFBF1semantic.color.chip.9.foreground.lightSemantic#115E59Semantic colors, dark
Semantic dark tokens preserve the same meaning while resolving to dark-safe values.
Theme V2 semantic roles for the dark theme. These keep the same meaning while resolving to dark-safe values.
Surfaces
Background, card, popover and muted fills that define planes, containers and resting surfaces.
semantic.color.background.black.darkSemantic#000000semantic.color.background.default.darkSemantic#000000semantic.color.background.inverted.darkSemantic#FFFFFFsemantic.color.background.soft.darkSemantic#02221Asemantic.color.card.default.darkSemantic#171717semantic.color.card.muted.default.darkSemantic#262626semantic.color.card.web.darkSemantic#022C22semantic.color.muted.always.darkSemantic#F5F5F5semantic.color.muted.default.darkSemantic#262626semantic.color.popover.default.darkSemantic#171717semantic.color.sidebar.background.darkSemantic#171717Text and foreground
Foreground roles for readable text, inverted text and content placed on colored surfaces.
semantic.color.card.foreground.darkSemantic#FAFAFAsemantic.color.card.muted.foreground.darkSemantic#A3A3A3semantic.color.foreground.default.darkSemantic#FAFAFAsemantic.color.foreground.inverted.darkSemantic#0A0A0Asemantic.color.foreground.white.darkSemantic#FFFFFFsemantic.color.muted.foreground.darkSemantic#A3A3A3semantic.color.popover.foreground.darkSemantic#FAFAFAsemantic.color.sidebar.foreground.darkSemantic#FAFAFABorders and rings
Stroke, input and focus colors that define separation, outlines and emphasis.
semantic.color.border.default.darkSemantic#525252semantic.color.card.border.accent.darkSemantic#A3A3A3semantic.color.card.border.brand.1.darkSemantic#34D399semantic.color.card.border.default.darkSemantic#525252semantic.color.input.default.darkSemantic#FFFFFF26semantic.color.ring.default.darkSemantic#737373semantic.color.sidebar.border.darkSemantic#FFFFFF1Asemantic.color.sidebar.ring.darkSemantic#525252Brand and actions
Brand roles, accent roles and action colors that carry Fluxion identity and interactive emphasis.
semantic.color.accent.default.darkSemantic#404040semantic.color.accent.foreground.darkSemantic#FAFAFAsemantic.color.brand.1.border.darkSemantic#34D399semantic.color.brand.1.default.darkSemantic#34D399semantic.color.brand.1.foreground.darkSemantic#022C22semantic.color.brand.1.muted.darkSemantic#D1FAE5semantic.color.brand.1.variant.darkSemantic#34D399semantic.color.brand.2.border.darkSemantic#9333EAsemantic.color.brand.2.default.darkSemantic#9333EAsemantic.color.brand.2.foreground.darkSemantic#FAF5FFsemantic.color.brand.2.variant.darkSemantic#C084FCsemantic.color.primary.default.darkSemantic#E5E5E5semantic.color.primary.foreground.darkSemantic#171717semantic.color.secondary.default.darkSemantic#404040semantic.color.secondary.foreground.darkSemantic#FAFAFAsemantic.color.sidebar.accent.default.darkSemantic#262626semantic.color.sidebar.accent.foreground.darkSemantic#FAFAFAsemantic.color.sidebar.primary.default.darkSemantic#525252semantic.color.sidebar.primary.foreground.darkSemantic#FAFAFAStatus
Feedback tokens for destructive, warning, success and info states.
semantic.color.card.border.destructive.darkSemantic#F87171semantic.color.destructive.background.darkSemantic#7F1D1Dsemantic.color.destructive.default.darkSemantic#F87171semantic.color.destructive.foreground.darkSemantic#FEF2F2semantic.color.info.background.darkSemantic#082F49semantic.color.info.default.darkSemantic#38BDF8semantic.color.success.background.darkSemantic#365314semantic.color.success.default.darkSemantic#A3E635semantic.color.warning.background.darkSemantic#78350Fsemantic.color.warning.default.darkSemantic#D97706Charts
Sequential chart colors intended for data visualization and series differentiation.
semantic.color.chart.1.darkSemantic#6EE7B7semantic.color.chart.2.darkSemantic#60A5FAsemantic.color.chart.3.darkSemantic#A78BFAsemantic.color.chart.4.darkSemantic#E879F9semantic.color.chart.5.darkSemantic#FB923Csemantic.color.chart.6.darkSemantic#F59E0Bsemantic.color.chart.7.darkSemantic#F43F5EChips
Foreground and background pairs used for chip and label styling across themes.
semantic.color.chip.1.background.darkSemantic#475569semantic.color.chip.1.foreground.darkSemantic#E2E8F0semantic.color.chip.10.background.darkSemantic#155E75semantic.color.chip.10.foreground.darkSemantic#A5F3FCsemantic.color.chip.11.background.darkSemantic#075985semantic.color.chip.11.foreground.darkSemantic#BAE6FDsemantic.color.chip.12.background.darkSemantic#1E40AFsemantic.color.chip.12.foreground.darkSemantic#DBEAFEsemantic.color.chip.13.background.darkSemantic#4338CAsemantic.color.chip.13.foreground.darkSemantic#E0E7FFsemantic.color.chip.14.background.darkSemantic#6D28D9semantic.color.chip.14.foreground.darkSemantic#DDD6FEsemantic.color.chip.15.background.darkSemantic#7E22CEsemantic.color.chip.15.foreground.darkSemantic#E9D5FFsemantic.color.chip.16.background.darkSemantic#86198Fsemantic.color.chip.16.foreground.darkSemantic#FAE8FFsemantic.color.chip.17.background.darkSemantic#9D174Dsemantic.color.chip.17.foreground.darkSemantic#FCE7F3semantic.color.chip.18.background.darkSemantic#9F1239semantic.color.chip.18.foreground.darkSemantic#FECDD3semantic.color.chip.2.background.darkSemantic#7F1D1Dsemantic.color.chip.2.foreground.darkSemantic#FECACAsemantic.color.chip.3.background.darkSemantic#C2410Csemantic.color.chip.3.foreground.darkSemantic#FFEDD5semantic.color.chip.4.background.darkSemantic#92400Esemantic.color.chip.4.foreground.darkSemantic#FBBF24semantic.color.chip.5.background.darkSemantic#A16207semantic.color.chip.5.foreground.darkSemantic#FEF08Asemantic.color.chip.6.background.darkSemantic#4D7C0Fsemantic.color.chip.6.foreground.darkSemantic#D9F99Dsemantic.color.chip.7.background.darkSemantic#15803Dsemantic.color.chip.7.foreground.darkSemantic#BBF7D0semantic.color.chip.8.background.darkSemantic#065F46semantic.color.chip.8.foreground.darkSemantic#A7F3D0semantic.color.chip.9.background.darkSemantic#115E59semantic.color.chip.9.foreground.darkSemantic#CCFBF1Mode-resolved colors, light
Mode light tokens expose the resolved values used for explicit light-mode consumption.
Mode V2 light outputs expose explicit light-mode values for implementation and runtime consumption.
Surfaces
Background, card, popover and muted fills that define planes, containers and resting surfaces.
modes.light.alpha.10Mode#FFFFFFE5modes.light.alpha.20Mode#FFFFFFCCmodes.light.alpha.30Mode#FFFFFFB2modes.light.alpha.40Mode#FFFFFF99modes.light.alpha.5Mode#FFFFFFF2modes.light.alpha.50Mode#FFFFFF80modes.light.alpha.60Mode#FFFFFF66modes.light.alpha.70Mode#FFFFFF4Dmodes.light.alpha.80Mode#FFFFFF33modes.light.alpha.90Mode#FFFFFF1Amodes.light.base.background.blackMode#000000modes.light.base.background.defaultMode#FFFFFFmodes.light.base.background.invertedMode#000000modes.light.base.background.softMode#F5F5F4modes.light.base.card.defaultMode#FFFFFFmodes.light.base.card.muted.defaultMode#F5F5F5modes.light.base.card.webMode#FFFFFFmodes.light.base.muted.alwaysMode#F5F5F5modes.light.base.muted.defaultMode#F5F5F5modes.light.base.popover.defaultMode#FFFFFFmodes.light.base.sidebar.backgroundMode#FAFAFAText and foreground
Foreground roles for readable text, inverted text and content placed on colored surfaces.
modes.light.base.card.foregroundMode#0A0A0Amodes.light.base.card.muted.foregroundMode#737373modes.light.base.foreground.defaultMode#0A0A0Amodes.light.base.foreground.invertedMode#FAFAFAmodes.light.base.foreground.whiteMode#FFFFFFmodes.light.base.muted.foregroundMode#737373modes.light.base.popover.foregroundMode#0A0A0Amodes.light.base.sidebar.foregroundMode#0A0A0ABorders and rings
Stroke, input and focus colors that define separation, outlines and emphasis.
modes.light.base.border.defaultMode#D4D4D4modes.light.base.card.border.accentMode#737373modes.light.base.card.border.brand.1Mode#34D399modes.light.base.card.border.defaultMode#D4D4D4modes.light.base.card.border.destructiveMode#DC2626modes.light.base.input.defaultMode#E5E5E5modes.light.base.ring.defaultMode#A3A3A3modes.light.base.ring.offsetMode#FFFFFFmodes.light.base.sidebar.borderMode#E5E5E5modes.light.base.sidebar.ringMode#A3A3A3Brand and actions
Brand roles, accent roles and action colors that carry Fluxion identity and interactive emphasis.
modes.light.base.accent.defaultMode#F5F5F5modes.light.base.accent.foregroundMode#171717modes.light.base.brand.1.borderMode#047857modes.light.base.brand.1.defaultMode#34D399modes.light.base.brand.1.foregroundMode#022C22modes.light.base.brand.1.mutedMode#ECFDF5modes.light.base.brand.1.variantMode#047857modes.light.base.brand.2.borderMode#6B21A8modes.light.base.brand.2.defaultMode#9333EAmodes.light.base.brand.2.foregroundMode#FAF5FFmodes.light.base.brand.2.variantMode#6B21A8modes.light.base.primary.defaultMode#171717modes.light.base.primary.foregroundMode#FAFAFAmodes.light.base.secondary.defaultMode#E5E5E5modes.light.base.secondary.foregroundMode#171717modes.light.base.sidebar.accent.defaultMode#E5E5E5modes.light.base.sidebar.accent.foregroundMode#171717modes.light.base.sidebar.primary.defaultMode#171717modes.light.base.sidebar.primary.foregroundMode#FAFAFAStatus
Feedback tokens for destructive, warning, success and info states.
modes.light.base.destructive.backgroundMode#FEE2E2modes.light.base.destructive.defaultMode#DC2626modes.light.base.destructive.foregroundMode#FEF2F2modes.light.base.info.backgroundMode#E0F2FEmodes.light.base.info.defaultMode#0EA5E9modes.light.base.success.backgroundMode#ECFCCBmodes.light.base.success.defaultMode#65A30Dmodes.light.base.warning.backgroundMode#FEF3C7modes.light.base.warning.defaultMode#FBBF24Charts
Sequential chart colors intended for data visualization and series differentiation.
modes.light.base.chart.1Mode#34D399modes.light.base.chart.2Mode#2563EBmodes.light.base.chart.3Mode#7C3AEDmodes.light.base.chart.4Mode#C026D3modes.light.base.chart.5Mode#F97316modes.light.base.chart.6Mode#FBBF24modes.light.base.chart.7Mode#FB7185Chips
Foreground and background pairs used for chip and label styling across themes.
modes.light.base.chip.1.backgroundMode#E2E8F0modes.light.base.chip.1.foregroundMode#334155modes.light.base.chip.10.backgroundMode#A5F3FCmodes.light.base.chip.10.foregroundMode#155E75modes.light.base.chip.11.backgroundMode#BAE6FDmodes.light.base.chip.11.foregroundMode#075985modes.light.base.chip.12.backgroundMode#DBEAFEmodes.light.base.chip.12.foregroundMode#1D4ED8modes.light.base.chip.13.backgroundMode#E0E7FFmodes.light.base.chip.13.foregroundMode#4338CAmodes.light.base.chip.14.backgroundMode#DDD6FEmodes.light.base.chip.14.foregroundMode#6D28D9modes.light.base.chip.15.backgroundMode#E9D5FFmodes.light.base.chip.15.foregroundMode#7E22CEmodes.light.base.chip.16.backgroundMode#FAE8FFmodes.light.base.chip.16.foregroundMode#A21CAFmodes.light.base.chip.17.backgroundMode#FCE7F3modes.light.base.chip.17.foregroundMode#BE185Dmodes.light.base.chip.18.backgroundMode#FFE4E6modes.light.base.chip.18.foregroundMode#BE123Cmodes.light.base.chip.2.backgroundMode#FECACAmodes.light.base.chip.2.foregroundMode#B91C1Cmodes.light.base.chip.3.backgroundMode#FED7AAmodes.light.base.chip.3.foregroundMode#C2410Cmodes.light.base.chip.4.backgroundMode#FEF3C7modes.light.base.chip.4.foregroundMode#92400Emodes.light.base.chip.5.backgroundMode#FEF08Amodes.light.base.chip.5.foregroundMode#854D0Emodes.light.base.chip.6.backgroundMode#D9F99Dmodes.light.base.chip.6.foregroundMode#3F6212modes.light.base.chip.7.backgroundMode#BBF7D0modes.light.base.chip.7.foregroundMode#166534modes.light.base.chip.8.backgroundMode#A7F3D0modes.light.base.chip.8.foregroundMode#065F46modes.light.base.chip.9.backgroundMode#CCFBF1modes.light.base.chip.9.foregroundMode#115E59Mode-resolved colors, dark
Mode dark tokens expose the resolved values used for explicit dark-mode consumption.
Mode V2 dark outputs expose explicit dark-mode values for implementation and runtime consumption.
Surfaces
Background, card, popover and muted fills that define planes, containers and resting surfaces.
modes.dark.alpha.10Mode#0A0A0AE5modes.dark.alpha.20Mode#0A0A0ACCmodes.dark.alpha.30Mode#0A0A0AB2modes.dark.alpha.40Mode#0A0A0A99modes.dark.alpha.5Mode#0A0A0AF2modes.dark.alpha.50Mode#0A0A0A80modes.dark.alpha.60Mode#0A0A0A66modes.dark.alpha.70Mode#0A0A0A4Dmodes.dark.alpha.80Mode#0A0A0A33modes.dark.alpha.90Mode#0A0A0A1Amodes.dark.base.background.blackMode#000000modes.dark.base.background.defaultMode#000000modes.dark.base.background.invertedMode#FFFFFFmodes.dark.base.background.softMode#02221Amodes.dark.base.card.defaultMode#171717modes.dark.base.card.muted.defaultMode#262626modes.dark.base.card.webMode#022C22modes.dark.base.muted.alwaysMode#F5F5F5modes.dark.base.muted.defaultMode#262626modes.dark.base.popover.defaultMode#171717modes.dark.base.sidebar.backgroundMode#171717Text and foreground
Foreground roles for readable text, inverted text and content placed on colored surfaces.
modes.dark.base.card.foregroundMode#FAFAFAmodes.dark.base.card.muted.foregroundMode#A3A3A3modes.dark.base.foreground.defaultMode#FAFAFAmodes.dark.base.foreground.invertedMode#0A0A0Amodes.dark.base.foreground.whiteMode#FFFFFFmodes.dark.base.muted.foregroundMode#A3A3A3modes.dark.base.popover.foregroundMode#FAFAFAmodes.dark.base.sidebar.foregroundMode#FAFAFABorders and rings
Stroke, input and focus colors that define separation, outlines and emphasis.
modes.dark.base.border.defaultMode#525252modes.dark.base.card.border.accentMode#A3A3A3modes.dark.base.card.border.brand.1Mode#34D399modes.dark.base.card.border.defaultMode#525252modes.dark.base.card.border.destructiveMode#F87171modes.dark.base.input.defaultMode#FFFFFF26modes.dark.base.ring.defaultMode#737373modes.dark.base.ring.offsetMode#000000modes.dark.base.sidebar.borderMode#FFFFFF1Amodes.dark.base.sidebar.ringMode#525252Brand and actions
Brand roles, accent roles and action colors that carry Fluxion identity and interactive emphasis.
modes.dark.base.accent.defaultMode#404040modes.dark.base.accent.foregroundMode#FAFAFAmodes.dark.base.brand.1.borderMode#34D399modes.dark.base.brand.1.defaultMode#34D399modes.dark.base.brand.1.foregroundMode#022C22modes.dark.base.brand.1.mutedMode#D1FAE5modes.dark.base.brand.1.variantMode#34D399modes.dark.base.brand.2.borderMode#9333EAmodes.dark.base.brand.2.defaultMode#9333EAmodes.dark.base.brand.2.foregroundMode#FAF5FFmodes.dark.base.brand.2.variantMode#C084FCmodes.dark.base.primary.defaultMode#E5E5E5modes.dark.base.primary.foregroundMode#171717modes.dark.base.secondary.defaultMode#404040modes.dark.base.secondary.foregroundMode#FAFAFAmodes.dark.base.sidebar.accent.defaultMode#262626modes.dark.base.sidebar.accent.foregroundMode#FAFAFAmodes.dark.base.sidebar.primary.defaultMode#525252modes.dark.base.sidebar.primary.foregroundMode#FAFAFAStatus
Feedback tokens for destructive, warning, success and info states.
modes.dark.base.destructive.backgroundMode#7F1D1Dmodes.dark.base.destructive.defaultMode#F87171modes.dark.base.destructive.foregroundMode#FEF2F2modes.dark.base.info.backgroundMode#082F49modes.dark.base.info.defaultMode#38BDF8modes.dark.base.success.backgroundMode#365314modes.dark.base.success.defaultMode#A3E635modes.dark.base.warning.backgroundMode#78350Fmodes.dark.base.warning.defaultMode#D97706Charts
Sequential chart colors intended for data visualization and series differentiation.
modes.dark.base.chart.1Mode#6EE7B7modes.dark.base.chart.2Mode#60A5FAmodes.dark.base.chart.3Mode#A78BFAmodes.dark.base.chart.4Mode#E879F9modes.dark.base.chart.5Mode#FB923Cmodes.dark.base.chart.6Mode#F59E0Bmodes.dark.base.chart.7Mode#F43F5EChips
Foreground and background pairs used for chip and label styling across themes.
modes.dark.base.chip.1.backgroundMode#475569modes.dark.base.chip.1.foregroundMode#E2E8F0modes.dark.base.chip.10.backgroundMode#155E75modes.dark.base.chip.10.foregroundMode#A5F3FCmodes.dark.base.chip.11.backgroundMode#075985modes.dark.base.chip.11.foregroundMode#BAE6FDmodes.dark.base.chip.12.backgroundMode#1E40AFmodes.dark.base.chip.12.foregroundMode#DBEAFEmodes.dark.base.chip.13.backgroundMode#4338CAmodes.dark.base.chip.13.foregroundMode#E0E7FFmodes.dark.base.chip.14.backgroundMode#6D28D9modes.dark.base.chip.14.foregroundMode#DDD6FEmodes.dark.base.chip.15.backgroundMode#7E22CEmodes.dark.base.chip.15.foregroundMode#E9D5FFmodes.dark.base.chip.16.backgroundMode#86198Fmodes.dark.base.chip.16.foregroundMode#FAE8FFmodes.dark.base.chip.17.backgroundMode#9D174Dmodes.dark.base.chip.17.foregroundMode#FCE7F3modes.dark.base.chip.18.backgroundMode#9F1239modes.dark.base.chip.18.foregroundMode#FECDD3modes.dark.base.chip.2.backgroundMode#7F1D1Dmodes.dark.base.chip.2.foregroundMode#FECACAmodes.dark.base.chip.3.backgroundMode#C2410Cmodes.dark.base.chip.3.foregroundMode#FFEDD5modes.dark.base.chip.4.backgroundMode#92400Emodes.dark.base.chip.4.foregroundMode#FBBF24modes.dark.base.chip.5.backgroundMode#A16207modes.dark.base.chip.5.foregroundMode#FEF08Amodes.dark.base.chip.6.backgroundMode#4D7C0Fmodes.dark.base.chip.6.foregroundMode#D9F99Dmodes.dark.base.chip.7.backgroundMode#15803Dmodes.dark.base.chip.7.foregroundMode#BBF7D0modes.dark.base.chip.8.backgroundMode#065F46modes.dark.base.chip.8.foregroundMode#A7F3D0modes.dark.base.chip.9.backgroundMode#115E59modes.dark.base.chip.9.foregroundMode#CCFBF1Last updated on