Live app tokens

Colors

MTC uses semantic color variables from the production app. Use these tokens directly instead of inventing page-level color values.

Background

--background

Page canvas. Light #f9fafb, dark #020407.

Raised Surface

--surface-raised

Cards, panels, dialogs, and persistent containers.

Selected

--surface-selected

Active nav, selected tabs, chosen cards, and focused workspaces.

Primary

--primary

The primary action color across CTAs, rings, and strong emphasis.

Status System

Use status background, border, and foreground tokens together. Do not use border-only indicators in light mode.

Info

Guidance, neutral insight, active progress.

Warning

Needs attention but is not blocking.

Danger

Destructive, failed, or blocked states.

Success

Completed, healthy, verified, published.

Light Mode

--background: #f9fafb
--foreground: #090a0c
--surface: #f4f5f9
--surface-raised: #ffffff
--surface-selected: #c6ebfc
--surface-selected-border: #00a9df
--primary: #0081bd

Dark Mode

--background: #020407
--foreground: #fafafa
--surface: #05090d
--surface-raised: #0a0f14
--surface-selected: #002538
--surface-selected-border: #00a8db
--primary: #0081bd