Semantic colors

Purpose-led color assignments for surfaces, text, boundaries, actions, focus, status, data and identity.

Neutral boundary ladder

Outline strength

Choose by purpose, not by visual preference alone. Focus, validation and destructive boundaries remain separate semantic states.

Quietcolor.border-subtle

neutral.100#f5f5f5

Very soft grouping where spacing still does most of the work.

Dividercolor.border-divider

neutral.200#e5e5e5

Standard separators between content regions, rows or sections.

Controlcolor.border-control

neutral.300#d4d4d4

Default boundary for Inputs, outline Buttons and field-like controls.

Strongcolor.border-control-hover

neutral.400#a3a3a3

Hover and intentional boundary emphasis; not a focus or error state.

PreviewSemantic roleUses tokenResolved valueUsed for

--sous-color-action-destructivered.600#dc2626Destructive action background.

--sous-color-action-destructive-hoverred.700#b91c1cDestructive action hover state.

--sous-color-action-destructive-pressedred.800#991b1bDestructive action pressed state.

--sous-color-action-destructive-textneutral.0#ffffffText and icons on destructive actions.

--sous-color-action-disabledneutral.100#f5f5f5Unavailable action background.

--sous-color-action-disabled-textneutral.400#a3a3a3Unavailable action text and icon.

--sous-color-action-outline-borderneutral.200#e5e5e5Shared semantic color role.

--sous-color-action-outline-border-hoverneutral.300#d4d4d4Shared semantic color role.

--sous-color-action-outline-hoveralpha.black.2rgb(0 0 0 / 2%)Shared semantic color role.

--sous-color-action-primaryneutral.900#171717Normal dominant action background.

--sous-color-action-primary-hoverneutral.700#404040Primary action hover state.

--sous-color-action-primary-pressedneutral.950#0a0a0aPrimary action pressed state.

--sous-color-action-primary-textneutral.0#ffffffText and icons on the primary action.

--sous-color-action-quiet-hoveralpha.black.4rgb(0 0 0 / 4%)Alpha hover surface for ghost actions.

--sous-color-action-quiet-pressedalpha.black.8rgb(0 0 0 / 8%)Alpha pressed surface for ghost actions.

--sous-color-action-secondaryneutral.100#f5f5f5Lower-hierarchy action background.

--sous-color-action-secondary-hoverneutral.200#e5e5e5Secondary action hover state.

--sous-color-action-secondary-pressedneutral.300#d4d4d4Secondary action pressed state.

--sous-color-action-secondary-textneutral.900#171717Text and icons on secondary actions.

--sous-color-border-controlneutral.300#d4d4d4Default interactive control boundary.

--sous-color-border-control-hoverneutral.400#a3a3a3Hover boundary for enabled fields and field-like controls.

--sous-color-border-dividerneutral.200#e5e5e5Explicit content divisions.

--sous-color-border-inverseneutral.700#404040Boundaries on inverse surfaces.

--sous-color-border-strongneutral.400#a3a3a3Intentional boundary emphasis.

--sous-color-border-subtleneutral.100#f5f5f5Repeated low-emphasis separation.

--sous-color-brand-identitybrand.identity#212966SOUS identity only; not a normal action color.

--sous-color-canvasneutral.0#ffffffApplication and page background.

--sous-color-data-categorical-1blue.600#2563ebCategorical chart series; not a status color.

--sous-color-data-categorical-2green.600#16a34aCategorical chart series; not a status color.

--sous-color-data-categorical-3violet.600#7c3aedCategorical chart series; not a status color.

--sous-color-data-categorical-4orange.600#ea580cCategorical chart series; not a status color.

--sous-color-data-categorical-5sky.600#0284c7Categorical chart series; not a status color.

--sous-color-data-categorical-6pink.600#db2777Categorical chart series; not a status color.

--sous-color-data-categorical-7amber.600#d97706Categorical chart series; not a status color.

--sous-color-data-categorical-8teal.700#0f766eCategorical chart series; not a status color.

--sous-color-data-divergent-negativered.600#dc2626Divergent data scale around a meaningful midpoint.

--sous-color-data-divergent-neutralneutral.300#d4d4d4Divergent data scale around a meaningful midpoint.

--sous-color-data-divergent-positivegreen.600#16a34aDivergent data scale around a meaningful midpoint.

--sous-color-data-sequential-highblue.800#1e40afSequential data scale for increasing magnitude.

--sous-color-data-sequential-lowblue.100#dbeafeSequential data scale for increasing magnitude.

--sous-color-data-sequential-midblue.400#60a5faSequential data scale for increasing magnitude.

--sous-color-focusneutral.950#0a0a0aKeyboard focus indicator.

--sous-color-focus-offsetneutral.0#ffffffSeparation between focus ring and component.

--sous-color-overlay-scrimalpha.black.48rgb(0 0 0 / 48%)Backdrop behind dialogs, sheets and other modal overlays.

--sous-color-selectionneutral.100#f5f5f5Selected rows, options, tabs or objects.

--sous-color-selection-strongneutral.200#e5e5e5Stronger selected emphasis when required.

--sous-color-status-danger-borderred.200#fecacaDanger status border; pair with a written status.

--sous-color-status-danger-iconred.600#dc2626Danger status icon; pair with a written status.

--sous-color-status-danger-surfacered.50#fef2f2Danger status surface; pair with a written status.

--sous-color-status-danger-textred.800#991b1bDanger status text; pair with a written status.

--sous-color-status-info-borderblue.200#bfdbfeInfo status border; pair with a written status.

--sous-color-status-info-iconblue.600#2563ebInfo status icon; pair with a written status.

--sous-color-status-info-surfaceblue.50#eff6ffInfo status surface; pair with a written status.

--sous-color-status-info-textblue.800#1e40afInfo status text; pair with a written status.

--sous-color-status-neutral-borderneutral.300#d4d4d4Neutral status border; pair with a written status.

--sous-color-status-neutral-iconneutral.500#737373Neutral status icon; pair with a written status.

--sous-color-status-neutral-surfaceneutral.100#f5f5f5Neutral status surface; pair with a written status.

--sous-color-status-neutral-textneutral.700#404040Neutral status text; pair with a written status.

--sous-color-status-success-bordergreen.200#bbf7d0Success status border; pair with a written status.

--sous-color-status-success-icongreen.600#16a34aSuccess status icon; pair with a written status.

--sous-color-status-success-surfacegreen.50#f0fdf4Success status surface; pair with a written status.

--sous-color-status-success-textgreen.800#166534Success status text; pair with a written status.

--sous-color-status-warning-borderamber.200#fde68aWarning status border; pair with a written status.

--sous-color-status-warning-iconamber.600#d97706Warning status icon; pair with a written status.

--sous-color-status-warning-surfaceamber.50#fffbebWarning status surface; pair with a written status.

--sous-color-status-warning-textamber.800#92400eWarning status text; pair with a written status.

--sous-color-surfaceneutral.0#ffffffDefault meaningful grouped surface.

--sous-color-surface-inverseneutral.950#0a0a0aDark inverse surfaces such as compact toasts.

--sous-color-surface-raisedneutral.0#ffffffOverlay surfaces only.

--sous-color-surface-subtleneutral.50#fafafaQuiet grouping, hover or selected support.

--sous-color-surface-sunkenneutral.100#f5f5f5Recessed or loading regions.

--sous-color-text-disabledneutral.400#a3a3a3Unavailable content only.

--sous-color-text-inverseneutral.0#ffffffText placed on an inverse surface or dark action.

--sous-color-text-linkneutral.900#171717Monochrome navigation and disclosure links.

--sous-color-text-link-hoverneutral.700#404040Hover state for monochrome links.

--sous-color-text-primaryneutral.950#0a0a0aTitles, labels and normal high-emphasis content.

--sous-color-text-secondaryneutral.600#525252Supporting content and descriptions.

--sous-color-text-tertiaryneutral.500#737373Readable low-emphasis metadata.

--sous-color-validation-errorred.600#dc2626Invalid control boundary or indicator.

--sous-color-validation-error-textred.700#b91c1cValidation message text.