Color

Prizma's color system is built on semantic tokens: components never reference raw hex values, they reference a role ("surface", "text", "border", "icon") that resolves to the right color for the active mode. Design and code share the same token names, so what's designed in Figma is what ships.

One brand ramp, one gray ramp, and a status set (positive, warning, negative, focus) cover every surface in the product.

Semantic, not literal

Components reference roles (surface, text, border, icon) — never a hex, never a primitive. If a needed role is missing, request a token instead of inlining a value.

Adaptive by design

Every semantic token carries a light and a dark value and inverts automatically. Tokens suffixed Static keep the same value in both modes.

One source of truth

The ramps live in Token Studio and sync to Figma and code. What's designed is what ships — no drift.

Gray

0#ffffff50#fcfcfd100#ebecef150#d9dae1200#c6c8d2250#b5b8c5300#a3a8b8400#82879a500#60667c600#4d5264700#3a3e4b750#30333e800#262831900#14151a1000#0000000 80%#ffffffcc900 80%#14151acc1000 80%#000000cc

Brand

50#e5f0ff100#bfdfff200#99ceff300#66a6ff400#3388ff500#006aff600#0055cc900#21273b

Status

Positive 500#189f60Positive 400#45b380Positive 50#e4fbf0Warning 500#ff9900Warning 400#ffb647Warning 50#fff7ebNegative 500#e71111Negative 400#ff5a5fNegative 50#fff0f0Focus 500#006affFocus 400#0099ff

Adaptive by design

Every token below carries a light and a dark value. Adaptive tokens invert between modes automatically; tokens suffixed Static keep the same value in both modes (for elements that must not change, like brand fills or overlays on imagery).

Surface rolessurface-*Background fills for frames, cards, and overlays. The gray scale inverts between modes.FramesCardsOverlaysStatus tints

Text rolestext-*Headings, body, labels, links, and status messages. Primary/secondary/tertiary carry the hierarchy.HeadingsBodyLinksStatus text

Border rolesborder-*Strokes for inputs, cards, dividers, and status rings — including the focus ring.InputsDividersFocus ringStatus rings

Icon rolesicon-*Glyph fills. Adaptive tokens invert with mode; static tokens never change.GlyphsStatus iconsStatic marks

Components reference semantic tokens, never primitives or raw hex values.
Never hardcode a hex in product code — if a needed role is missing, request a token instead of inlining a value.
Static tokens are for surfaces that must not adapt (brand fills, overlays on photography); everything else should invert with the mode.

Semantic tokens

Surface

Background fills for frames, cards, and overlays. Gray scale inverts between modes.

TokenLightDark

--surface-neutral-0Neutral 0#ffffff#000000

--surface-neutral-50Neutral 50#fcfcfd#14151a

--surface-neutral-100Neutral 100#ebecef#262831

--surface-neutral-150Neutral 150#d9dae1#30333e

--surface-neutral-200Neutral 200#c6c8d2#3a3e4b

--surface-neutral-250Neutral 250#b5b8c5#4d5264

--surface-neutral-300Neutral 300#a3a8b8#60667c

--surface-neutral-800Neutral 800#262831#ebecef

--surface-brand-50Brand 50#e5f0ff#21273b

--surface-brand-500-staticBrand 500 Static#006aff#006aff

--surface-status-warning-50Status Warning 50#fff7eb#271400

--surface-status-warning-500Status Warning 500#ff9900#ffb647

--surface-status-negative-50Status Negative 50#fff0f0#240001

--surface-status-positive-50Status Positive 50#e4fbf0#03190e

--surface-status-positive-500Status Positive 500#189f60#45b380

Text

Text fills for headings, body, labels, links, and status messages.

TokenLightDark

--text-primaryPrimary#262831#fcfcfd

--text-secondarySecondary#60667c#a3a8b8

--text-tertiaryTertiary#a3a8b8#60667c

--text-body-400Body 400#82879a#60667c

--text-link-defaultLink Default#006aff#3388ff

--text-link-visitedLink Visited#3a3e4b#a3a8b8

--text-accent-brandAccent Brand#006aff#006aff

--text-status-negativeStatus Negative#e71111#ff5a5f

--text-status-warningStatus Warning#ff9900#ffb647

--text-status-positiveStatus Positive#189f60#189f60

Border

Stroke colors for inputs, cards, dividers, and status rings.

TokenLightDark

--border-neutral-100Neutral 100#ebecef#3a3e4b

--border-neutral-200Neutral 200#c6c8d2#4d5264

--border-neutral-250Neutral 250#b5b8c5#4d5264

--border-neutral-300Neutral 300#a3a8b8#60667c

--border-neutral-400Neutral 400#82879a#60667c

--border-neutral-500Neutral 500#60667c#a3a8b8

--border-brand-500Brand 500#006aff#006aff

--border-brand-600Brand 600#0055cc#3388ff

--border-status-focusStatus Focus#006aff#0099ff

--border-status-warningStatus Warning#ff9900#ffb647

--border-status-warning-staticStatus Warning Static#ff9900#ff9900

--border-status-negativeStatus Negative#e71111#ff5a5f

--border-status-negative-staticStatus Negative Static#e71111#e71111

--border-status-positive-staticStatus Positive Static#189f60#189f60

--border-neutral-100-staticNeutral 100 Static#ebecef#ebecef

Icon

Fill colors for icon glyphs. Adaptive tokens invert with mode; static tokens never change.

TokenLightDark

--icon-neutral-0Neutral 0#ffffff#262831

--icon-neutral-300Neutral 300#a3a8b8#60667c

--icon-neutral-500Neutral 500#60667c#a3a8b8

--icon-neutral-800Neutral 800#262831#ebecef

--icon-brand-500Brand 500#006aff#006aff

--icon-neutral-0-staticNeutral 0 Static#ffffff#ffffff

--icon-neutral-50-staticNeutral 50 Static#fcfcfd#fcfcfd

--icon-neutral-300-staticNeutral 300 Static#a3a8b8#a3a8b8

--icon-neutral-500-staticNeutral 500 Static#60667c#60667c

--icon-neutral-800-staticNeutral 800 Static#262831#262831

--icon-brand-500-staticBrand 500 Static#006aff#006aff

--icon-status-warningStatus Warning#ff9900#ffb647

--icon-status-negativeStatus Negative#e71111#ff5a5f

--icon-status-positiveStatus Positive#189f60#45b380

Component tokens

Button

Primary, secondary, and tertiary button surface, border, and text tokens.

TokenLightDark

--btn-primary-surface-defaultPrimary surface — rest#006aff#006aff

--btn-primary-surface-hoverPrimary surface — hover#3388ff#3388ff

--btn-primary-surface-pressedPrimary surface — pressed#0055cc#0055cc

--btn-primary-surface-disabledPrimary surface — disabled#ebecef#262831

--btn-primary-text-defaultPrimary text — rest#ffffff#ffffff

--btn-primary-text-disabledPrimary text — disabled#60667c#a3a8b8

--btn-secondary-border-defaultSecondary border — rest#006aff#006aff

--btn-secondary-border-hoverSecondary border — hover#3388ff#3388ff

--btn-secondary-border-pressedSecondary border — pressed#0055cc#0055cc

--btn-secondary-border-disabledSecondary border — disabled#ebecef#262831

--btn-secondary-text-defaultSecondary text — rest#006aff#006aff

--btn-secondary-text-disabledSecondary text — disabled#60667c#a3a8b8

--btn-tertiary-text-defaultTertiary text — rest#006aff#006aff

--btn-tertiary-text-disabledTertiary text — disabled#60667c#a3a8b8

Input

Text field surface, border, and label tokens across all states.

TokenLightDark

--input-surface-defaultSurface — rest#fcfcfd#14151a

--input-surface-focusedSurface — focused#fcfcfd#14151a

--input-surface-disabledSurface — disabled#ebecef#262831

--input-border-defaultBorder — rest#82879a#60667c

--input-border-focusedBorder — focused#006aff#0099ff

--input-border-disabledBorder — disabled#ebecef#3a3e4b

--input-border-negativeBorder — negative#e71111#ff5a5f

--input-text-defaultText — rest#262831#fcfcfd

--input-text-placeholderText — placeholder#82879a#60667c

--input-text-disabledText — disabled#82879a#60667c

Checkbox

Box surface, check icon, border, and label tokens.

TokenLightDark

--checkbox-surface-defaultSurface — rest#fcfcfd#14151a

--checkbox-surface-selectedSurface — selected#006aff#006aff

--checkbox-surface-disabledSurface — disabled#82879a#60667c

--checkbox-border-defaultBorder — rest#82879a#60667c

--checkbox-border-focusedBorder — focused#006aff#0099ff

--checkbox-border-disabledBorder — disabled#82879a#60667c

--checkbox-icon-defaultIcon — check mark#ffffff#ffffff

--checkbox-text-defaultText — rest#262831#fcfcfd

--checkbox-text-disabledText — disabled#60667c#a3a8b8

Radio

Radio button surface, knob, border, and label tokens.

TokenLightDark

--radio-surface-defaultSurface — rest#fcfcfd#14151a

--radio-border-defaultBorder — rest#82879a#60667c

--radio-border-selectedBorder — selected#006aff#006aff

--radio-knob-selectedKnob — selected#006aff#006aff

--radio-surface-disabledSurface — disabled#82879a#60667c

--radio-border-disabledBorder — disabled#82879a#60667c

--radio-text-defaultText — rest#262831#fcfcfd

--radio-text-disabledText — disabled#60667c#a3a8b8

Toggle

Track surface in both states and knob color tokens.

TokenLightDark

--toggle-surface-onTrack — on#006aff#006aff

--toggle-surface-offTrack — off#82879a#60667c

--toggle-surface-disabledTrack — disabled#c6c8d2#3a3e4b

--toggle-knob-onKnob — on#ffffff#ffffff

--toggle-knob-offKnob — off#ffffff#ffffff

Field surface, border, label, and selected item highlight tokens.

TokenLightDark

--dropdown-label-colorLabel color#262831#fcfcfd

--dropdown-surface-fieldField surface#fcfcfd#14151a

--dropdown-border-defaultBorder — rest#82879a#60667c

--dropdown-item-surface-selectedItem — selected fill#ebecef#262831

Snackbar

Surface and border tokens for neutral, warning, negative, and positive variants.

TokenLightDark

--snackbar-surface-neutralSurface — neutral#e5f0ff#21273b

--snackbar-surface-warningSurface — warning#fff7eb#271400

--snackbar-surface-negativeSurface — negative#fff0f0#240001

--snackbar-surface-positiveSurface — positive#e4fbf0#03190e

--snackbar-border-neutralBorder — neutral#006aff#006aff

--snackbar-border-warningBorder — warning#ff9900#ffb647

--snackbar-border-negativeBorder — negative#e71111#ff5a5f

--snackbar-border-positiveBorder — positive#189f60#189f60

Card

Module card surface and text tokens.

TokenLightDark

--card-surface-primarySurface primary#262831#ebecef

--card-text-titleText — title#ebecef#262831

--card-text-subtitleText — subtitle#60667c#a3a8b8

Countdown

Timer component uses static dark tokens so it is always dark-on-dark regardless of page mode.

TokenLightDark

--timer-surfaceSurface (static)#14151a#14151a

--timer-borderBorder (static)#ebecef#ebecef

--timer-textText (static)#ffffff#ffffff

Tooltip always renders on a dark background regardless of page mode.

TokenLightDark

--tooltip-surfaceSurface (static)#14151a#14151a

--tooltip-textText (static)#ffffff#ffffff

Stepper

Progress stepper track colors. Active track is always brand blue; inactive is always a light gray.

TokenLightDark

--stepper-track-activeTrack — active (static)#006aff#006aff

--stepper-track-inactiveTrack — inactive (static)#c6c8d2#c6c8d2

Color

Semantic tokens

Surface

Text

Border

Icon

Component tokens

Button

Input

Checkbox

Radio

Toggle

Dropdown

Snackbar

Card

Countdown

Tooltip

Stepper