PRISM Design System

Semantic tokens

Mapped to exact theme hex values

Token	Role	Current value
`--color-action-primary`	Primary CTAs, focused elements	#0066CC
`--color-surface-default`	App background	#FFFFFF
`--color-surface-raised`	Cards, modals, dropdowns	#F5F5F5
`--color-text-primary`	Main body text	#111111
`--color-text-inverse`	Text on dark/colored surfaces	#FFFFFF
`--color-feedback-success`	Success feedback	#00AA44
`--color-feedback-warning`	Warning feedback	#F4A300
`--color-feedback-danger`	Error / danger feedback	#E50914

Usage notes

Actions: Use --color-action-primary only for primary CTAs and focus states.
Surfaces: Use --color-surface-default for page background, --color-surface-raised for cards.
Text: Use --color-text-primary on light surfaces, --color-text-inverse on dark/colored.
Feedback: Success, warning, and danger tokens are for status—not destructive actions.

Token setup (CSS)

/* Semantic tokens – Base theme defaults */
:root {
  --color-action-primary: #0066CC;  /* Primary CTAs */
  --color-surface-default: #FFFFFF; /* App background */
  --color-text-primary: #111111;    /* Main text */
  --color-surface-raised: #F5F5F5;  /* Cards, modals */
  --color-text-inverse: #FFFFFF;    /* Text on colored surfaces */

  --color-feedback-success: #00AA44; /* Success feedback */
  --color-feedback-warning: #F4A300; /* Warning feedback */
  --color-feedback-danger: #E50914;  /* Error feedback */
}

Button

Primary, secondary, and ghost variants

Primary buttons use var(--color-action-primary) for background and var(--color-text-inverse) for text, except in the Education theme where text is forced to #111111 for contrast.

Primary: Background var(--color-action-primary), text var(--color-text-inverse) (Education overrides to #111111).
Secondary: Border and text use var(--color-action-primary) on default surface.
Ghost: Text-only emphasis using var(--color-action-primary), no solid background.

Button CSS

.btn {
  /* Shared button styles */
  border-radius: 999px;
  padding: 8px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--color-text-primary);
  /* Motion: micro-interactions use 200ms */
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

/* Primary – uses semantic action token */
.btn-primary {
  background: var(--color-action-primary);   /* Primary CTA */
  color: var(--color-text-inverse);         /* Text on colored background */
}

/* Education theme override: light amber background needs dark text */
[data-theme="education"] .btn-primary {
  color: #111111; /* Explicit contrast rule */
}

/* Secondary and ghost variants */
.btn-secondary {
  background: var(--color-surface-default);
  color: var(--color-action-primary);
  border-color: var(--color-action-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--color-action-primary);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

Card

Raised surfaces and nested cards

Cards use var(--color-surface-raised) and var(--border-radius-default). Nested cards switch to var(--color-surface-default) with a subtle border and shadow.

Outer card

Raised surface

This is a raised card using the semantic raised surface token.

Nested card

Uses default surface

Nested cards use the default surface to maintain hierarchy and separation.

Card CSS

.card {
  background: var(--color-surface-raised);     /* Raised surface */
  border-radius: var(--border-radius-default); /* Theme radius */
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: var(--card-border);                  /* Entertainment uses light border */
}

/* Nested cards: use default surface for contrast */
.card .card {
  background: var(--color-surface-default);    /* Default surface inside card */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.1);
}

Input

Accessible text fields

Label

Helper text explaining the expected input.

Error message using danger feedback token.

Inputs use var(--color-surface-default) for background and var(--color-text-primary) for text. Focus states are always visible and use var(--color-action-primary).

Input CSS

.field label {
  font-weight: 500;
  color: var(--color-text-primary);
}

.field input {
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 8px 10px;
}

/* Focus: visible, never outline: none */
.field input:focus-visible {
  outline: 2px solid var(--color-action-primary); /* Focus uses action primary */
  outline-offset: 2px;
  border-color: transparent;
}

/* Error text uses feedback danger token */
.field-error {
  color: var(--color-feedback-danger);
}

Badge

Status and confidence indicators

Neutral Success Warning Danger

Confidence badges map to feedback tokens: high → success, medium → warning, low → danger. Labels are always visible text, not just color.

Badge CSS

.badge {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.badge-success {
  background: var(--color-feedback-success);  /* High confidence */
  color: var(--color-text-inverse);
}

.badge-warning {
  background: var(--color-feedback-warning);  /* Medium confidence */
  color: var(--color-text-primary);
}

.badge-danger {
  background: var(--color-feedback-danger);   /* Low confidence / errors */
  color: var(--color-text-inverse);
}

Theme overview

Base, Entertainment, and Education

Use the dropdown at the top to switch themes. JavaScript updates data-theme on <html> and redefines all CSS variables to match the selected theme’s exact hex values.

Theme tokens

Token	Base	Entertainment	Education
`--color-action-primary`	#0066CC	#E50914	#F4A300
`--color-surface-default`	#FFFFFF	#0A0A0A	#FFFBF2
`--color-text-primary`	#111111	#FFFFFF	#111111
`--color-surface-raised`	#F5F5F5	#1A1A1A	#F5F5F5
`--color-text-inverse`	#FFFFFF	#FFFFFF	#FFFFFF

Theme switching logic (JS)

const themes = {
  base: {
    '--color-action-primary': '#0066CC',
    '--color-surface-default': '#FFFFFF',
    '--color-text-primary': '#111111',
    '--color-surface-raised': '#F5F5F5',
    '--color-text-inverse': '#FFFFFF'
  },
  entertainment: {
    '--color-action-primary': '#E50914',
    '--color-surface-default': '#0A0A0A',
    '--color-text-primary': '#FFFFFF',
    '--color-surface-raised': '#1A1A1A',
    '--color-text-inverse': '#FFFFFF'
  },
  education: {
    '--color-action-primary': '#F4A300',
    '--color-surface-default': '#FFFBF2',
    '--color-text-primary': '#111111',
    '--color-surface-raised': '#F5F5F5',
    '--color-text-inverse': '#FFFFFF'
  }
};

function applyTheme(name) {
  const root = document.documentElement;
  root.setAttribute('data-theme', name); // Required by PRISM
  const tokens = themes[name];
  Object.keys(tokens).forEach(key => {
    root.style.setProperty(key, tokens[key]); // Redefine CSS variables
  });
}

Agentic UI patterns

Intent preview, confidence, and escalation

Intent preview: Update billing address

Confidence: Medium

The agent plans to update the billing address for your primary payment method.

Medium confidence → user can approve or edit. Explanation clarifies why the agent is uncertain.

Confidence & escalation rules

High confidence: Use success badge (var(--color-feedback-success)), offer “Approve” as primary action.
Medium confidence: Use warning badge, always offer both “Approve” and “Edit” actions.
Low confidence: Use danger badge and show a clear human handoff option (e.g., “Talk to a person”).
Explanation: For low confidence, explain why (e.g., “Uncertain due to missing data”).
Accessibility: Confidence labels must be visible text, not just color.

Accessibility & motion

Contrast, focus, and reduced motion

Contrast: Text on any background must meet at least 4.5:1 (3:1 for large text).
Primary buttons: Base & Entertainment use white text; Education uses #111111 on amber.
Focus: All interactive controls have visible focus using a 2px outline with --color-action-primary.
Motion: Micro-interactions use 200ms transitions and respect prefers-reduced-motion: reduce.
Names: All controls have accessible names via visible text or aria-label.