Identity & Design Tokens

CSS Custom Properties standardizing all colors, typography and WCAG AA contrast for the entire CSET ecosystem.

Tokens CSS Source Code

styles.css

:root {
  --brand-primary: #030b44;
  --brand-secondary: #2e2a5e;
  --brand-dark: #0f072d;
  --brand-pcb: #0651a2;
  --brand-red: #700b0b;
  --brand-white: #ffffff;
}

[data-theme='light'] {
  --ui-bg: #f5f5f8;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f0f0f4;
  --ui-border: #d9dae3;
  --ui-border-strong: #8185a2;
  --ui-ink: var(--brand-primary);
  --ui-ink-muted: #4a4f78;
  --ui-accent: var(--brand-pcb);
}

[data-theme='dark'] {
  --ui-bg: var(--brand-dark);
  --ui-surface: var(--brand-primary);
  --ui-surface-muted: var(--brand-secondary);
  --ui-border: var(--brand-secondary);
  --ui-border-strong: #6d6a8e;
  --ui-ink: #ffffff;
  --ui-ink-muted: #8c8aa6;
  --ui-accent: #6a97c7;
}