Color

Colors come from packages/ui/src/tokens/tokens.json, built into CSS custom properties and a typed TS export. The swatches below are rendered directly from that export, so they cannot drift from what ships.

Usage

• Reference tokens as CSS variables: background: var(--om-orange).
• Or import the typed map: import { tokens, cssVar } from '@repo/ui/tokens'.
• Never hardcode hex/px in component code — the token-lint rule flags it.

The rules that matter

• Orange is ~2% of a layout. Primary CTAs and a single accent. Everything else is dark or paper neutrals.
• Status colors are system-only. --om-success (#1F5F33) / --om-error (#9B1D1D) use the brand’s system green/red; --om-warning / --om-info round out feedback. For state, never decoration.
• --color-* is legacy. It is migrating onto --om-* (same values) — see TOKEN-MAPPING.md. Build new work on --om-*.

Contrast (WCAG 2.2 AA)

• Body/--om-fg-2 on --om-ink, and --om-surface-ink-1 on --om-surface, clear AA for text.
• Focus ring is --om-orange-press (#C44801) everywhere — ~4.9:1 on white, ~3.4:1 on ink, so it passes the 3:1 non-text minimum on both surfaces (bright --om-orange would be ~2.3:1 on white). See DECISIONS.md.

All tokens

--om-orange

#FD5C01

--om-orange-cta

#C44801

--om-orange-cta-hover

#AE3F01

--om-orange-cta-press

#983700

--om-orange-hover

#E45201

--om-orange-press

#C44801

--om-orange-soft

#FFE7D6

--om-indigo-black

#0D111A

--om-ink

#1D2228

--om-ink-2

#0F1624

--om-graphite

#4D4D59

--om-iron

#555555

--om-steel

#6B6B6B

--om-zinc

#808080

--om-fog

#999999

--om-warm-white

#DDD5D2

--om-bone

#D9D9D4

--om-paper

#F0F0ED

--om-paper-2

#F6F6F6

--om-white

#FFFFFF

--om-electric-blue

#1D67F9

--om-violet

#5340D2

--om-violet-soft

#EEEAFE

--om-fg-1

#FFFFFF

--om-fg-2

#DDD5D2

--om-fg-3

#999999

--om-fg-muted

#6B6B6B

--om-fg-on-light-1

#1D2228

--om-fg-on-light-2

#4D4D59

--om-fg-on-light-3

#6B6B6B

--om-fg-accent

#FD5C01

--om-fg-on-orange

#FFFFFF

--om-fg-link

#1D67F9

--om-bg-1

#1D2228

--om-bg-2

#0D111A

--om-bg-3

#262C33

--om-bg-light-1

#F0F0ED

--om-bg-light-2

#FFFFFF

--om-bg-light-3

#F6F6F6

--om-bg-accent

#FD5C01

--om-bg-accent-soft

#FFE7D6

--om-bg-workspace

#F8F6F1

--om-surface

#FFFFFF

--om-surface-subtle

#F0EEE9

--om-surface-hover

#F8F6F1

--om-border-surface

#E0DCD4

--om-surface-ink-1

#0E0E0E

--om-surface-ink-2

#5C5C5C

--om-surface-ink-3

#6B6B6B

--om-neutral-50

#F9FAFB

--om-neutral-100

#F3F4F6

--om-neutral-200

#E5E7EB

--om-neutral-300

#D1D5DB

--om-neutral-400

#9CA3AF

--om-neutral-500

#6B7280

--om-neutral-600

#4B5563

--om-neutral-700

#374151

--om-neutral-800

#1F2937

--om-neutral-900

#102228

--om-neutral-950

#0A0F11

--om-navy

#102228

--om-navy-light

#1A3540

--om-navy-muted

#2A4A58

--om-navy-dark

#0A1518

--om-secondary

#1D67F9

--om-secondary-light

#EBF2FF

--om-secondary-muted

#4B87FA

--om-success

#1F5F33

--om-success-light

#E3EFE8

--om-success-dark

#163F24

--om-warning

#D97706

--om-warning-light

#FEF3C7

--om-warning-dark

#B45309

--om-error

#9B1D1D

--om-error-light

#F4E1E1

--om-error-dark

#771515

--om-info

#0284C7

--om-info-light

#E0F2FE

--om-crimson-50

#FEF2F2

--om-crimson-100

#FEE2E2

--om-crimson-200

#FECACA

--om-crimson-300

#FCA5A5

--om-crimson-400

#F87171

--om-crimson-500

#EF4444

--om-crimson-600

#B82E2E

--om-crimson-700

#A12828

--om-crimson-800

#991B1B

--om-crimson-900

#7F1D1D

--om-crimson-950

#450A0A

--om-bg

#F8F6F1

--om-panel

#FFFFFF

--om-panel-2

#F0EEE9

--om-text

#0E0E0E

--om-text-2

#5C5C5C

--om-text-muted

#6B6B6B

--om-line

#E0DCD4

--om-hover

#F8F6F1

--om-focus-ring

#C44801

--om-focus-ring-offset

#FFFFFF

--om-border-strong-dark

#4D4D59

--om-border-strong-light

#1D2228