Complete Reference

All tokens

Every CSS custom property defined in colors.css — all 148 tokens with light value, dark value, and semantic usage note.

Token Light Dark Usage
01 · Brand — Primary
--color-primary
#FF385C
#FF4D6A
 Main CTA buttons, brand highlights
--color-primary-light
#FF5A76
#FF6B85
 Hover glow, tinted backgrounds
--color-primary-lighter
#FF7D94
#FF8DA0
 Subtle tints, badge fills
--color-primary-dark
#D93B55
#E8314F
 Pressed state, deeper contrast
--color-primary-darker
#B32340
#CC2B47
 High-contrast text on light bg
--color-primary-hover
#E8314F
#FF5C78
 Button hover state
--color-primary-pressed
#CC2B47
#E83D5C
 Button active/pressed state
--color-primary-alpha
rgba(255,56,92,0.12)
rgba(255,77,106,0.18)
 Tinted surface fills
--color-primary-alpha-sm
rgba(255,56,92,0.06)
rgba(255,77,106,0.10)
 Subtle tag & token backgrounds
--color-primary-border
rgba(255,56,92,0.25)
rgba(255,77,106,0.30)
 Tinted border / outline
02 · Brand — Secondary & Accent
--color-secondary
#222222
#F5F5F7
 Dark text, secondary UI
--color-secondary-muted
#484848
#AEAEB2
 Subdued secondary elements
--color-secondary-light
#6E6E6E
#8E8E93
 Light secondary text
--color-accent
#00A699
#00C4B7
 Confirmations, secondary actions
--color-accent-light
#00BDB2
#33D1C5
 Accent hover, tinted fills
--color-accent-lighter
#33CEC4
#5DDCD2
 Subtle accent tints
--color-accent-dark
#008C81
#00A699
 Accent pressed, deep teal
--color-accent-darker
#006E65
#008C81
 High-contrast accent
--color-accent-hover
#009B8F
#00B8AC
 Accent button hover
--color-accent-pressed
#008478
#009E93
 Accent button pressed
--color-accent-alpha
rgba(0,166,153,0.12)
rgba(0,196,183,0.18)
 Accent tinted fills
--color-star
#FF385C
#FF4D6A
 Star rating filled
--color-star-empty
#DDDDDD
#3A3A3C
 Star rating empty
03 · System — Chromatic
--sys-red
#FF3B30
#FF453A
 System red — destructive actions
--sys-orange
#FF9500
#FF9F0A
 System orange — warnings
--sys-yellow
#FFCC00
#FFD60A
 System yellow — caution
--sys-green
#34C759
#30D158
 System green — success
--sys-mint
#00C7BE
#63E6E2
 System mint — fresh accent
--sys-teal
#30B0C7
#40CBE0
 System teal — informational
--sys-cyan
#32ADE6
#64D2FF
 System cyan — links, info
--sys-blue
#007AFF
#0A84FF
 System blue — primary links
--sys-indigo
#5856D6
#5E5CE6
 System indigo — premium feel
--sys-purple
#AF52DE
#BF5AF2
 System purple — creative
--sys-pink
#FF2D55
#FF375F
 System pink — vibrant accent
--sys-brown
#A2845E
#AC8E68
 System brown — earthy
04 · System — Grays
--sys-gray-1
#8E8E93
#8E8E93
 Mid gray — secondary icons
--sys-gray-2
#AEAEB2
#636366
 Light gray — tertiary text
--sys-gray-3
#C7C7CC
#48484A
 Lighter gray — disabled
--sys-gray-4
#D1D1D6
#3A3A3C
 Subtle separator
--sys-gray-5
#E5E5EA
#2C2C2E
 Surface raised
--sys-gray-6
#F2F2F7
#1C1C1E
 Background gray
05 · Semantic — Text
--color-text-primary
#1D1D1F
#F5F5F7
 Headings, primary body text
--color-text-secondary
#6E6E73
#98989D
 Captions, secondary body text
--color-text-tertiary
#868686
#6E6E73
 Tertiary labels, hints
--color-text-muted
#B0B0B0
#48484A
 Decorative only — fails AA
--color-text-placeholder
#C7C7CC
#48484A
 Input placeholders
--color-text-inverse
#FFFFFF
#1D1D1F
 Text on dark/primary bg
--color-text-link
#007AFF
#409CFF
 Inline links
--color-text-link-hover
#0066D6
#60ACFF
 Link hover state
--color-text-on-primary
#FFFFFF
#FFFFFF
 Text placed on primary bg
--color-text-on-accent
#FFFFFF
#FFFFFF
 Text placed on accent bg
--color-text-disabled
#AEAEB2
#48484A
 Disabled control labels
06 · Semantic — Surfaces & Backgrounds
--color-bg
#FFFFFF
#000000
 Page background
--color-bg-secondary
#F5F5F7
#1C1C1E
 Secondary page area
--color-bg-tertiary
#EFEFEF
#2C2C2E
 Tertiary page area
--color-bg-muted
#F7F7F7
#1C1C1E
 Muted background variant
--color-bg-dark
#1D1D1F
#000000
 Dark surface override
--color-bg-grouped
#F2F2F7
#000000
 Grouped table bg (iOS style)
--color-bg-grouped-secondary
#FFFFFF
#1C1C1E
 Grouped table cell bg
--color-surface
#FFFFFF
#1C1C1E
 Card / panel surface
--color-surface-raised
#F7F7F7
#2C2C2E
 Elevated card / table head
--color-surface-overlay
rgba(255,255,255,0.92)
rgba(29,29,31,0.92)
 Modal / overlay surface
--color-surface-glass
rgba(255,255,255,0.72)
rgba(29,29,31,0.72)
 Frosted glass surface
--color-surface-inset
rgba(0,0,0,0.04)
rgba(255,255,255,0.05)
 Row hover / inset fills
--color-surface-tinted
rgba(255,56,92,0.04)
rgba(255,77,106,0.07)
 Brand-tinted surface
--color-surface-disabled
#F5F5F5
#2C2C2E
 Disabled control surface
--color-fill-primary
rgba(0,0,0,0.055)
rgba(255,255,255,0.10)
 Vibrancy fill — level 1
--color-fill-secondary
rgba(0,0,0,0.035)
rgba(255,255,255,0.065)
 Vibrancy fill — level 2
--color-fill-tertiary
rgba(0,0,0,0.022)
rgba(255,255,255,0.04)
 Vibrancy fill — level 3
--color-fill-quaternary
#00000003
rgba(255,255,255,0.022)
 Vibrancy fill — level 4
07 · Semantic — Borders & Separators
--color-border
#D2D2D7
#3A3A3C
 Default border
--color-border-light
#E5E5EA
#2C2C2E
 Subtle border
--color-border-lighter
#F0F0F0
#242426
 Hairline border
--color-border-dark
#AEAEB2
#4E4E52
 Strong border
--color-border-focus
#1D1D1F
#F5F5F7
 Focus outline
--color-border-focus-ring
rgba(0,122,255,0.48)
rgba(64,156,255,0.55)
 Focus ring shadow
--color-border-error
rgba(193,53,21,0.45)
rgba(255,69,58,0.45)
 Error input border
--color-border-disabled
#E0E0E0
#3A3A3C
 Disabled border
--color-separator
rgba(60,60,67,0.18)
rgba(255,255,255,0.15)
 Separator line
--color-separator-opaque
#C6C6C8
#38383A
 Opaque separator
--color-muted
#EBEBEB
#2C2C2E
 Muted fill / rule
--color-muted-dark
#DDDDDD
#3A3A3C
 Darker muted rule
08 · Status — Success
--color-success
#1A9E35
#30D158
 Success base
--color-success-light
#34C759
#4DDC6C
 Success lighter
--color-success-bg
rgba(52,199,89,0.10)
rgba(48,209,88,0.14)
 Success tinted fill
--color-success-border
rgba(52,199,89,0.30)
rgba(48,209,88,0.28)
 Success border
--color-success-text
#1A7C2B
#30D158
 Success text label
09 · Status — Warning
--color-warning
#C45508
#FF9F0A
 Warning base
--color-warning-light
#FF9500
#FFAF34
 Warning lighter
--color-warning-bg
rgba(255,149,0,0.10)
rgba(255,159,10,0.14)
 Warning tinted fill
--color-warning-border
rgba(255,149,0,0.30)
rgba(255,159,10,0.28)
 Warning border
--color-warning-text
#9A3F00
#FF9F0A
 Warning text label
10 · Status — Error & Danger
--color-error
#C13515
#FF453A
 Error base
--color-error-light
#FF3B30
#FF6961
 Error lighter
--color-error-bg
rgba(255,59,48,0.10)
rgba(255,69,58,0.14)
 Error tinted fill
--color-error-border
rgba(255,59,48,0.25)
rgba(255,69,58,0.25)
 Error border
--color-error-text
#A02810
#FF453A
 Error text label
--color-danger
#C13515
#FF453A
 Destructive action base
--color-danger-hover
#A82C10
#FF6961
 Destructive hover
--color-danger-pressed
#8E240D
#FF8780
 Destructive pressed
--color-danger-alpha
rgba(193,53,21,0.10)
rgba(255,69,58,0.15)
 Destructive tinted fill
11 · Status — Info
--color-info
#0071D6
#409CFF
 Info base
--color-info-light
#007AFF
#60ACFF
 Info lighter
--color-info-bg
rgba(0,122,255,0.10)
rgba(64,156,255,0.14)
 Info tinted fill
--color-info-border
rgba(0,122,255,0.25)
rgba(64,156,255,0.25)
 Info border
--color-info-text
#0058A8
#409CFF
 Info text label
12 · Interactive States
--color-ghost-hover-bg
rgba(0,0,0,0.05)
rgba(255,255,255,0.08)
 Ghost button hover
--color-ghost-pressed-bg
rgba(0,0,0,0.09)
rgba(255,255,255,0.14)
 Ghost button pressed
--color-selection-bg
rgba(0,122,255,0.15)
rgba(64,156,255,0.20)
 Text selection highlight
--color-highlight-bg
rgba(255,214,10,0.30)
rgba(255,214,10,0.22)
 Search match highlight
13 · Overlays & Glass
--color-overlay
rgba(0,0,0,0.48)
rgba(0,0,0,0.62)
 Modal backdrop
--color-overlay-light
rgba(0,0,0,0.12)
rgba(0,0,0,0.28)
 Subtle overlay
--color-overlay-dark
rgba(0,0,0,0.72)
rgba(0,0,0,0.82)
 Heavy overlay
--color-glass-bg
rgba(255,255,255,0.65)
rgba(28,28,30,0.72)
 Liquid glass background
--color-glass-border
rgba(255,255,255,0.35)
rgba(255,255,255,0.12)
 Glass border
--color-glass-shadow
rgba(0,0,0,0.08)
rgba(0,0,0,0.36)
 Glass drop shadow
--color-glass-tint
rgba(255,56,92,0.08)
rgba(255,77,106,0.12)
 Brand-tinted glass
14 · Navigation & Header
--color-nav-bg
#F5F5F7
#1C1C1E
 Sidebar / nav background
--color-nav-text
#1D1D1F
#F5F5F7
 Nav item text
--color-nav-text-active
#FF385C
#FF4D6A
 Active nav item text
--color-nav-icon
#6E6E73
#8E8E93
 Nav icon color
--color-nav-icon-active
#FF385C
#FF4D6A
 Active nav icon
--color-nav-border
#D2D2D7
#3A3A3C
 Nav border / rule
--color-nav-hover
rgba(0,0,0,0.05)
rgba(255,255,255,0.07)
 Nav hover fill
--color-nav-active-bg
rgba(255,56,92,0.08)
rgba(255,77,106,0.12)
 Active nav item background
--color-header-bg
rgba(255,255,255,0.85)
rgba(0,0,0,0.82)
 Sticky header background
--color-header-border
rgba(0,0,0,0.10)
rgba(255,255,255,0.10)
 Header bottom border
15 · Badges & Labels
--color-badge-primary-bg
rgba(255,56,92,0.10)
rgba(255,77,106,0.14)
 Primary badge fill
--color-badge-primary-text
#C13515
#FF4D6A
 Primary badge text
--color-badge-success-bg
rgba(52,199,89,0.10)
rgba(48,209,88,0.14)
 Success badge fill
--color-badge-success-text
#1A7C2B
#30D158
 Success badge text
--color-badge-warning-bg
rgba(255,149,0,0.10)
rgba(255,159,10,0.14)
 Warning badge fill
--color-badge-warning-text
#9A3F00
#FF9F0A
 Warning badge text
--color-badge-error-bg
rgba(255,59,48,0.10)
rgba(255,69,58,0.14)
 Error badge fill
--color-badge-error-text
#A02810
#FF453A
 Error badge text
--color-badge-info-bg
rgba(0,122,255,0.10)
rgba(64,156,255,0.14)
 Info badge fill
--color-badge-info-text
#0058A8
#409CFF
 Info badge text
--color-badge-neutral-bg
rgba(0,0,0,0.06)
rgba(255,255,255,0.08)
 Neutral badge fill
--color-badge-neutral-text
#6E6E73
#8E8E93
 Neutral badge text
16 · Code Syntax
--color-code-bg
#1C1C1E
#141414
 Code block background
--color-code-text
#F5F5F7
#F5F5F7
 Code default text
--color-code-comment
#7F8C8D
#636366
 Code comments
--color-code-keyword
#CF9FFF
#CF9FFF
 Language keywords
--color-code-string
#A8FF78
#A8FF78
 String literals
--color-code-number
#FF9F43
#FF9F43
 Numbers / values
--color-code-property
#6BCAFF
#6BCAFF
 Property names
--color-code-tag
#FF6B9D
#FF6B9D
 HTML tags
--color-code-attr
#FFD176
#FFD176
 HTML attributes

WCAG 2.1

Accessibility & contrast

All primary text pairings meet WCAG 2.1 AA at minimum. Ratios below are for the default light appearance.

PairingOn backgroundRatioLevelUse case
Aa
White on Primary--color-text-inverse
 #FF385C 3.8:1 AA Large CTA labels ≥ 18px bold
Aa
White on Secondary--color-text-inverse
 #222222 16.1:1 AAA Dark buttons, headings
Aa
Primary text on white--color-text-primary
 #FFFFFF 16.1:1 AAA Body copy, headings
Aa
Secondary text on white--color-text-secondary
 #FFFFFF 4.6:1 AA Captions, metadata
Aa
Accent on white--color-accent
 #FFFFFF 4.5:1 AA Links, confirmation
Aa
Muted text on white--color-text-muted
 #FFFFFF 2.3:1 Decorative only Disabled states only
Never use --color-text-muted for readable content. At 2.3:1 it fails WCAG AA for both normal and large text. Use it only for decorative elements and disabled placeholders.

Implementation

Usage

Reference every color through a CSS token. Dark mode requires zero additional code.

component.css
/* Tokens only — no raw hex in component files */
.btn-primary {
  background: var(--color-primary);
  color:      var(--color-text-inverse);
  transition: var(--transition-btn);
}
.btn-primary:hover         { background: var(--color-primary-hover); }
.btn-primary:focus-visible { box-shadow:  var(--focus-ring); }

.alert-error {
  background: var(--color-error-bg);
  color:      var(--color-error-text);
  border:     1px solid var(--color-error-border);
}
/* Dark mode handled automatically — no extra rules needed */
dark-toggle.js
// Manual dark toggle — adds .dark class to <html>
const toggleDark = () =>
  document.documentElement.classList.toggle('dark');

// Read token at runtime (Canvas, Chart.js, D3…)
const token = key =>
  getComputedStyle(document.documentElement).getPropertyValue(key).trim();

const primary = token('--color-primary'); // resolves current appearance