Color Tokens
Porchlight colors are authored in OKLCH for perceptual uniformity. All
semantic colors use light-dark() so they adapt automatically to the
user’s color scheme.
Brand ramp
A 9-step ramp at hue 82 (amber-gold). Override --pl-brand-* to
retheme.
| Token | Value | Purpose |
|---|---|---|
--pl-brand-1 |
oklch(97% 0.02 82deg) |
Lightest tint |
--pl-brand-2 |
oklch(89% 0.05 82deg) |
Subtle tint |
--pl-brand-3 |
oklch(80% 0.09 82deg) |
Soft tint |
--pl-brand-4 |
oklch(70% 0.13 82deg) |
Dark-mode accent |
--pl-brand-5 |
oklch(63% 0.15 82deg) |
Saturated middle |
--pl-brand-6 |
oklch(56% 0.14 82deg) |
Active/hover support |
--pl-brand-7 |
oklch(48% 0.11 82deg) |
Light-mode accent |
--pl-brand-8 |
oklch(39% 0.07 82deg) |
Deep accent support |
--pl-brand-9 |
oklch(29% 0.04 82deg) |
Darkest accent support |
Semantic pairs
Foreground/background are defined as intentional pairs. Each pair is verified to meet WCAG-AA contrast (4.5:1 minimum) in both light and dark themes via the deterministic contrast test suite.
| Token | Light value | Dark value | Purpose |
|---|---|---|---|
--pl-color-bg |
oklch(98% 0.005 60deg) |
oklch(14% 0.008 55deg) |
Page background |
--pl-color-surface |
oklch(100% 0 0deg) |
oklch(18% 0.008 55deg) |
Cards, panels |
--pl-color-surface-2 |
oklch(94% 0.008 60deg) |
oklch(22% 0.012 55deg) |
Hover, subtle surfaces |
--pl-color-text |
oklch(20% 0.012 55deg) |
oklch(96% 0.008 60deg) |
Primary text |
--pl-color-text-muted |
oklch(46% 0.015 55deg) |
oklch(72% 0.012 55deg) |
Secondary text |
--pl-color-border |
oklch(80% 0.015 55deg / 75%) |
oklch(45% 0.012 55deg / 30%) |
Dividers, borders |
--pl-color-accent |
brand-7 |
brand-4 |
Links, primary actions |
--pl-color-accent-text |
white |
oklch(16% 0.01 55deg) |
Text on accent |
Status colors
Three semantic states, each with a fill, background tint, and text color:
| Token group | Light | Dark | Usage |
|---|---|---|---|
--pl-color-danger |
oklch(60% 0.22 25deg) |
same | Icon, border |
--pl-color-danger-bg |
oklch(96% 0.04 25deg) |
oklch(22% 0.08 25deg) |
Alert background |
--pl-color-danger-text |
oklch(36% 0.18 25deg) |
oklch(90% 0.06 25deg) |
Text on tinted bg |
--pl-color-success |
oklch(58% 0.18 150deg) |
same | Icon, border |
--pl-color-success-bg |
oklch(96% 0.04 150deg) |
oklch(22% 0.08 150deg) |
Alert background |
--pl-color-success-text |
oklch(34% 0.15 150deg) |
oklch(82% 0.15 150deg) |
Text on tinted bg |
--pl-color-warning |
oklch(62% 0.19 75deg) |
same | Icon, border |
--pl-color-warning-bg |
oklch(96% 0.06 75deg) |
oklch(24% 0.09 75deg) |
Alert background |
--pl-color-warning-text |
oklch(40% 0.17 75deg) |
oklch(84% 0.15 75deg) |
Text on tinted bg |
Focus ring
| Token | Light | Dark |
|---|---|---|
--pl-focus-color |
oklch(52% 0.14 82deg) |
oklch(72% 0.13 82deg) |
--pl-focus-offset |
2px |
2px |
--pl-focus-size |
2px |
2px |
Overriding colors
See the Theming guide for how to override tokens in your application.