MCA // TOKENS

Token reference

CSS variables, shadcn mappings, typography, and semantic status colors for Rhea Ops.

TOKENS

Color — light mode

--background#FAFAF8

Page substrate / dotted grid base

--foreground#18181B

Primary ink

--card#FFFFFF

Main surfaces

--surface-subtle#F7F7F4

Secondary panels

--muted#F2F2EF

Muted fills

--muted-foreground#666666

Body metadata

--border#DCDCD7

Default rule

--border-subtle#E9E9E4

Quiet rule

--border-strong#B8B8B0

Emphasis rule

--grid-dot#E6E6E1

Background grid dots

--primary#18181B

Primary action

--primary-foreground#FFFFFF

Primary action text

--status-success-bg#EAF7EE

Online / complete

--status-success-border#B8E3C3

Online / complete border

--status-success-text#256D3A

Online / complete text

--status-warning-bg#FFF6D8

Needs attention

--status-warning-border#F1D47A

Warning border

--status-warning-text#7A5A00

Warning text

--status-danger-bg#FDEDED

Blocked / failed

--status-danger-border#F2B8B8

Danger border

--status-danger-text#8A2525

Danger text

--status-info-bg#EAF3FF

Info / active route

--status-info-border#BBD7F6

Info border

--status-info-text#245D91

Info text

--status-pending-bg#F1EFFA

Queued / pending

--status-pending-border#D2C8F0

Pending border

--status-pending-text#5A4694

Pending text

TOKENS

Color — dark mode

--background#0A0A0A

Page substrate / dotted grid base

--foreground#F4F4F1

Primary ink

--card#111111

Main surfaces

--surface-subtle#171717

Secondary panels

--muted#1D1D1B

Muted fills

--muted-foreground#A7A7A0

Body metadata

--border#2F2F2B

Default rule

--border-subtle#242421

Quiet rule

--border-strong#5A5A52

Emphasis rule

--grid-dot#20201D

Background grid dots

--primary#F4F4F1

Primary action

--primary-foreground#0A0A0A

Primary action text

--status-success-bg#102317

Online / complete

--status-success-border#2B6B3C

Online / complete border

--status-success-text#7ED993

Online / complete text

--status-warning-bg#282009

Needs attention

--status-warning-border#8A6A16

Warning border

--status-warning-text#E9C95A

Warning text

--status-danger-bg#2A1111

Blocked / failed

--status-danger-border#8A3434

Danger border

--status-danger-text#F08A8A

Danger text

--status-info-bg#0D1D2F

Info / active route

--status-info-border#2D5F92

Info border

--status-info-text#8FC7FF

Info text

--status-pending-bg#1A152B

Queued / pending

--status-pending-border#5A4694

Pending border

--status-pending-text#BFAEFF

Pending text

PREVIEW

Both modes are first-class

light moderequired

MCA cockpit surface

Every product screen should ship with equivalent contrast, status states, and semantic token coverage in light mode.

Queue04review

dark moderequired

MCA cockpit surface

Every product screen should ship with equivalent contrast, status states, and semantic token coverage in dark mode.

Queue04review

TOKENS

Typography

Token	Size / line	Weight	Tracking	Use
display	40 / 44	600	-0.04em	Hero titles
h1	32 / 38	600	-0.035em	Page titles
h2	24 / 30	600	-0.03em	Section titles
h3	18 / 24	600	-0.02em	Card titles
body	14 / 22	400	-0.01em	Default body
body-sm	13 / 20	400	-0.01em	Dense UI copy
caption	12 / 16	400	0	Timestamps / hints
label	11 / 14	600	0.08em	Uppercase metadata

SHADCN MAP

CSS variables

:root, html[data-theme="light"] {
  --background: #FAFAF8;
  --foreground: #18181B;
  --card: #FFFFFF;
  --card-foreground: #18181B;
  --popover: #FFFFFF;
  --popover-foreground: #18181B;
  --primary: #18181B;
  --primary-foreground: #FFFFFF;
  --secondary: #F2F2EF;
  --secondary-foreground: #18181B;
  --muted: #F2F2EF;
  --muted-foreground: #666666;
  --accent: #EDEDEA;
  --accent-foreground: #18181B;
  --destructive: #8A2525;
  --destructive-foreground: #FFFFFF;
  --border: #DCDCD7;
  --input: #DCDCD7;
  --ring: #525252;
  --radius: 0px;

  --grid-dot: #E6E6E1;
  --surface-subtle: #F7F7F4;
  --border-subtle: #E9E9E4;
  --border-strong: #B8B8B0;
}

html[data-theme="dark"] {
  --background: #0A0A0A;
  --foreground: #F4F4F1;
  --card: #111111;
  --card-foreground: #F4F4F1;
  --popover: #111111;
  --popover-foreground: #F4F4F1;
  --primary: #F4F4F1;
  --primary-foreground: #0A0A0A;
  --secondary: #1D1D1B;
  --secondary-foreground: #F4F4F1;
  --muted: #1D1D1B;
  --muted-foreground: #A7A7A0;
  --accent: #171717;
  --accent-foreground: #F4F4F1;
  --destructive: #F08A8A;
  --destructive-foreground: #0A0A0A;
  --border: #2F2F2B;
  --input: #2F2F2B;
  --ring: #A7A7A0;
  --radius: 0px;

  --grid-dot: #20201D;
  --surface-subtle: #171717;
  --border-subtle: #242421;
  --border-strong: #5A5A52;
}