From chef-sumi
500+ curated color palettes with accessibility scores, industry categorization, and production-ready CSS/token values. Covers brand color system design, accessible palette generation using oklch, dark mode color mapping, color combination recipes, and semantic color architecture. Use when the user mentions: color palette, color scheme, brand colors, color system, accessible colors, dark mode colors, color tokens, oklch, color contrast, color combination, color harmony, complementary colors, color psychology, warm palette, cool palette, neutral palette, color picker.
How this skill is triggered — by the user, by Claude, or both
Slash command
/chef-sumi:color-palette-libraryThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
oklch is the recommended color space for modern design systems. It provides perceptual uniformity — meaning equal numeric changes produce equal perceived visual changes — which sRGB and HSL cannot guarantee.
oklch is the recommended color space for modern design systems. It provides perceptual uniformity — meaning equal numeric changes produce equal perceived visual changes — which sRGB and HSL cannot guarantee.
Syntax: oklch(L C H) or oklch(L C H / alpha)
| Property | HSL | oklch |
|---|---|---|
| Perceptual uniformity | No — HSL 50% lightness yellow looks far brighter than 50% lightness blue | Yes — equal L values look equally bright |
| Chroma independence | No — saturation 100% yellow vs blue have wildly different perceived intensity | Yes — equal C values have equal perceived saturation |
| Hue consistency | Hue shifts cause lightness jumps | Hue rotation preserves perceived lightness |
| Gamut mapping | Clips unpredictably | Graceful fallback with color() |
When generating a 10-step scale in HSL, the lightness curve must be manually compensated. In oklch, a linear lightness interpolation produces a visually even ramp. This is critical for accessible design — APCA contrast scores depend on perceived luminance, and oklch's L channel maps directly to perceived luminance.
Display P3 covers ~25% more color volume than sRGB. As of 2025, 90%+ of mobile devices and most modern monitors support P3.
CSS wide-gamut syntax:
/* P3 color with sRGB fallback */
.brand-primary {
color: #0066ff; /* sRGB fallback */
color: oklch(55% 0.25 265); /* oklch — browser gamut-maps automatically */
color: color(display-p3 0.1 0.4 1.0); /* Explicit P3 */
}
Gamut mapping strategy:
color(display-p3 ...) and sRGB hex fallbackcolor-gamutoklch(72% 0.19 145) → oklab(0.72 -0.14 0.13) → sRGB #4CAF50 → P3 color(display-p3 0.36 0.68 0.35)
oklch(55% 0.25 265) → oklab(0.55 0.04 -0.25) → sRGB #2563EB → P3 color(display-p3 0.14 0.39 0.92)
All harmony formulas operate on the H (hue) channel while preserving L and C for perceptual consistency.
Maximum contrast. Use for CTA against background.
Base: oklch(L C H)
Complement: oklch(L C H+180)
Example: oklch(65% 0.22 265) → oklch(65% 0.22 85) /* blue ↔ yellow */
Harmonious, low tension. Ideal for dashboards and content-heavy UIs.
Base: oklch(L C H)
Neighbor 1: oklch(L C H-30)
Neighbor 2: oklch(L C H+30)
Example: oklch(60% 0.20 265) / oklch(60% 0.20 235) / oklch(60% 0.20 295)
/* blue / cyan-blue / violet */
Vibrant, balanced. Good for playful brands and data visualization categories.
Base: oklch(L C H)
Second: oklch(L C H+120)
Third: oklch(L C H+240)
Example: oklch(65% 0.18 30) / oklch(65% 0.18 150) / oklch(65% 0.18 270)
/* red / green / blue */
High contrast without the harshness of direct complementary. Excellent for hero sections.
Base: oklch(L C H)
Split 1: oklch(L C H+150)
Split 2: oklch(L C H+210)
Example: oklch(65% 0.20 265) / oklch(65% 0.20 55) / oklch(65% 0.20 115)
/* blue / orange-gold / green */
Four-color harmony. Use for complex UIs with multiple semantic categories.
Base: oklch(L C H)
Second: oklch(L C H+60)
Third: oklch(L C H+180)
Fourth: oklch(L C H+240)
Single hue family. Cleanest aesthetic, easiest accessibility.
Light: oklch(92% 0.04 H)
Mid: oklch(55% 0.18 H)
Dark: oklch(30% 0.12 H)
Base: oklch(L C H)
Second: oklch(L C H+90)
Third: oklch(L C H+180)
Fourth: oklch(L C H+270)
Primary hues: Blue (trust, reliability), Violet (innovation)
oklch(55% 0.25 265) → #2563EB — Primary blue
oklch(65% 0.22 280) → #7C3AED — Innovation violet
oklch(92% 0.03 265) → #EFF6FF — Surface blue
oklch(25% 0.10 265) → #1E3A5F — Deep blue text
oklch(70% 0.20 175) → #14B8A6 — Accent teal
Associations: professionalism, scalability, clarity. Used by: Stripe, Linear, Vercel.
Primary hues: Deep blue (stability), Green (money/growth), Dark neutrals (authority)
oklch(45% 0.18 265) → #1E40AF — Trust blue
oklch(55% 0.20 155) → #059669 — Growth green
oklch(95% 0.01 265) → #F8FAFC — Clean white surface
oklch(20% 0.05 265) → #0F172A — Authority dark
oklch(65% 0.15 85) → #D4A017 — Premium gold accent
Associations: security, precision, wealth. Used by: Wise, Mercury, Robinhood.
Primary hues: Teal (calm trust), Soft green (healing), Warm neutrals
oklch(60% 0.15 185) → #0891B2 — Calm teal
oklch(70% 0.15 155) → #34D399 — Healing green
oklch(93% 0.02 85) → #FFFBEB — Warm surface
oklch(55% 0.08 30) → #9F7A65 — Warm neutral
oklch(80% 0.10 185) → #A7F3D0 — Light mint accent
Associations: compassion, cleanliness, vitality. Used by: One Medical, Headspace, Calm.
Primary hues: Orange (urgency/action), Warm red (desire), Bright accents
oklch(65% 0.22 55) → #EA580C — Action orange
oklch(55% 0.24 30) → #DC2626 — Desire red
oklch(90% 0.03 55) → #FFF7ED — Warm surface
oklch(70% 0.20 90) → #EAB308 — Sale yellow
oklch(25% 0.05 30) → #451A03 — Rich dark text
Associations: excitement, scarcity, value. Used by: Shopify, Amazon, Etsy.
Primary hues: Warm red-orange (appetite), Yellow-green (freshness), Earth tones
oklch(60% 0.22 40) → #C53030 — Appetite red
oklch(70% 0.20 110) → #84CC16 — Fresh lime green
oklch(75% 0.15 80) → #D69E2E — Honey gold
oklch(55% 0.10 50) → #8B5E3C — Earth brown
oklch(92% 0.04 80) → #FEFCE8 — Cream surface
Associations: freshness, indulgence, natural. Used by: Deliveroo, Sweetgreen, Blue Apron.
Primary hues: Black (sophistication), Gold (prestige), Muted tones
oklch(15% 0.01 0) → #1A1A1A — Luxury black
oklch(70% 0.12 85) → #C9A84C — Prestige gold
oklch(96% 0.01 0) → #F5F5F5 — Subtle off-white
oklch(55% 0.05 30) → #78716C — Muted stone
oklch(40% 0.08 350) → #6B2737 — Deep burgundy accent
Associations: exclusivity, craftsmanship, timelessness. Used by: SSENSE, Net-a-Porter, Gucci.
Primary hues: Friendly blue (learning), Warm yellow (optimism), Accessible green (progress)
oklch(60% 0.20 255) → #3B82F6 — Learning blue
oklch(75% 0.18 90) → #FACC15 — Optimism yellow
oklch(65% 0.18 155) → #22C55E — Progress green
oklch(60% 0.18 310) → #A855F7 — Creative purple
oklch(93% 0.02 255) → #EFF6FF — Soft surface
Associations: curiosity, growth, achievement. Used by: Duolingo, Coursera, Khan Academy.
Primary hues: Neon/electric accents, Dark backgrounds, High chroma
oklch(70% 0.30 310) → #D946EF — Neon magenta
oklch(75% 0.28 170) → #06FFA5 — Electric green
oklch(65% 0.25 265) → #6366F1 — Indigo
oklch(12% 0.02 265) → #0A0A1A — Deep dark bg
oklch(80% 0.25 60) → #FB923C — Energy orange
Associations: excitement, immersion, energy. Used by: Discord, Twitch, Epic Games.
Primary hues: Natural green (growth), Earth tones (grounded), Sky blue (clean)
oklch(55% 0.18 150) → #16A34A — Nature green
oklch(65% 0.10 85) → #A3894A — Earth tone
oklch(70% 0.15 210) → #38BDF8 — Clean sky blue
oklch(93% 0.04 150) → #F0FDF4 — Leaf-white surface
oklch(30% 0.10 150) → #14532D — Deep forest text
Associations: responsibility, renewal, transparency. Used by: Ecosia, Patagonia, Tesla Energy.
The neutral scale is the backbone of any design system. It provides text, border, background, and surface colors.
The lightness curve is NOT linear. It uses a perceptual easing that allocates more steps in the mid-range where human vision is most sensitive to differences.
Step L (oklch) Typical Use
----- --------- -----------
50 97% Page background, subtle hover
100 93% Card background, secondary surface
200 87% Divider, disabled background
300 78% Border, input outline
400 66% Placeholder text, disabled text
500 55% Secondary text, icons
600 45% Primary body text (on white)
700 35% Headings, emphasis
800 25% Bold headings, active states
900 18% Near-black text, high contrast
950 12% Maximum contrast text, dark surfaces
Add a hint of chroma in warm hue range (H=60-80, C=0.01-0.03):
--neutral-50: oklch(97% 0.01 70); /* #FAF9F7 */
--neutral-100: oklch(93% 0.01 70); /* #F3F1ED */
--neutral-200: oklch(87% 0.01 70); /* #E5E2DC */
--neutral-300: oklch(78% 0.01 70); /* #CCC8C0 */
--neutral-400: oklch(66% 0.01 70); /* #A8A49B */
--neutral-500: oklch(55% 0.01 70); /* #868178 */
--neutral-600: oklch(45% 0.01 70); /* #6B665E */
--neutral-700: oklch(35% 0.01 70); /* #514D47 */
--neutral-800: oklch(25% 0.01 70); /* #393630 */
--neutral-900: oklch(18% 0.008 70); /* #26241F */
--neutral-950: oklch(12% 0.005 70); /* #1A1816 */
Hint of blue (H=250-270, C=0.01-0.02):
--neutral-50: oklch(97% 0.01 260); /* #F8FAFC */
--neutral-100: oklch(93% 0.01 260); /* #F1F5F9 */
--neutral-200: oklch(87% 0.015 260); /* #E2E8F0 */
--neutral-300: oklch(78% 0.015 260); /* #CBD5E1 */
--neutral-400: oklch(66% 0.01 260); /* #94A3B8 */
--neutral-500: oklch(55% 0.01 260); /* #64748B */
--neutral-600: oklch(45% 0.01 260); /* #475569 */
--neutral-700: oklch(35% 0.01 260); /* #334155 */
--neutral-800: oklch(25% 0.01 260); /* #1E293B */
--neutral-900: oklch(18% 0.01 260); /* #0F172A */
--neutral-950: oklch(12% 0.008 260); /* #020617 */
--gray-50: oklch(97% 0 0); /* #F7F7F7 */
--gray-100: oklch(93% 0 0); /* #EDEDED */
--gray-200: oklch(87% 0 0); /* #DBDBDB */
--gray-300: oklch(78% 0 0); /* #C2C2C2 */
--gray-400: oklch(66% 0 0); /* #9E9E9E */
--gray-500: oklch(55% 0 0); /* #7C7C7C */
--gray-600: oklch(45% 0 0); /* #5E5E5E */
--gray-700: oklch(35% 0 0); /* #434343 */
--gray-800: oklch(25% 0 0); /* #2D2D2D */
--gray-900: oklch(18% 0 0); /* #1F1F1F */
--gray-950: oklch(12% 0 0); /* #151515 */
For any brand color at the 500 step, generate the full scale by:
--blue-50: oklch(97% 0.03 265); /* #EFF6FF */
--blue-100: oklch(93% 0.06 265); /* #DBEAFE */
--blue-200: oklch(87% 0.10 265); /* #BFDBFE */
--blue-300: oklch(78% 0.15 265); /* #93C5FD */
--blue-400: oklch(66% 0.22 265); /* #60A5FA */
--blue-500: oklch(55% 0.25 265); /* #3B82F6 — brand anchor */
--blue-600: oklch(48% 0.24 265); /* #2563EB */
--blue-700: oklch(40% 0.20 265); /* #1D4ED8 */
--blue-800: oklch(33% 0.16 265); /* #1E40AF */
--blue-900: oklch(25% 0.12 265); /* #1E3A8A */
--blue-950: oklch(18% 0.08 265); /* #172554 */
--green-50: oklch(97% 0.03 155); /* #F0FDF4 */
--green-100: oklch(93% 0.06 155); /* #DCFCE7 */
--green-200: oklch(87% 0.12 155); /* #BBF7D0 */
--green-300: oklch(78% 0.17 155); /* #86EFAC */
--green-400: oklch(68% 0.22 155); /* #4ADE80 */
--green-500: oklch(58% 0.22 155); /* #22C55E — brand anchor */
--green-600: oklch(50% 0.20 155); /* #16A34A */
--green-700: oklch(42% 0.17 155); /* #15803D */
--green-800: oklch(35% 0.14 155); /* #166534 */
--green-900: oklch(28% 0.10 155); /* #14532D */
--green-950: oklch(18% 0.07 155); /* #052E16 */
--purple-50: oklch(97% 0.03 300); /* #FAF5FF */
--purple-100: oklch(93% 0.07 300); /* #F3E8FF */
--purple-200: oklch(87% 0.12 300); /* #E9D5FF */
--purple-300: oklch(78% 0.18 300); /* #D8B4FE */
--purple-400: oklch(68% 0.24 300); /* #C084FC */
--purple-500: oklch(58% 0.25 300); /* #A855F7 — brand anchor */
--purple-600: oklch(50% 0.24 300); /* #9333EA */
--purple-700: oklch(42% 0.21 300); /* #7E22CE */
--purple-800: oklch(35% 0.17 300); /* #6B21A8 */
--purple-900: oklch(28% 0.13 300); /* #581C87 */
--purple-950: oklch(18% 0.09 300); /* #3B0764 */
Step 50-200: C = max_C * 0.12 → 0.40 (low chroma for backgrounds)
Step 300-400: C = max_C * 0.60 → 0.88 (rising chroma for UI elements)
Step 500: C = max_C * 1.00 (peak chroma — brand anchor)
Step 600-700: C = max_C * 0.96 → 0.80 (slight reduction)
Step 800-950: C = max_C * 0.64 → 0.32 (darkening reduces chroma headroom)
/* Surfaces */
--color-bg: oklch(99% 0 0); /* #FDFDFD — page background */
--color-surface: oklch(100% 0 0); /* #FFFFFF — card/component */
--color-surface-raised: oklch(100% 0 0); /* #FFFFFF + shadow elevation */
--color-surface-sunken: oklch(97% 0.01 260); /* #F8FAFC — inset areas */
--color-overlay: oklch(15% 0 0 / 0.6); /* backdrop behind modals */
/* Text */
--color-on-surface: oklch(18% 0.01 260); /* #0F172A — primary text */
--color-on-surface-muted:oklch(45% 0.01 260); /* #64748B — secondary text */
--color-on-surface-faint:oklch(60% 0.01 260); /* #94A3B8 — tertiary/placeholder */
/* Borders */
--color-border: oklch(87% 0.01 260); /* #E2E8F0 — default border */
--color-border-strong: oklch(78% 0.01 260); /* #CBD5E1 — emphasized border */
--color-border-focus: oklch(55% 0.25 265); /* #3B82F6 — focus ring */
/* Primary */
--color-primary: oklch(55% 0.25 265); /* #3B82F6 */
--color-on-primary: oklch(100% 0 0); /* #FFFFFF */
--color-primary-hover: oklch(48% 0.24 265); /* #2563EB */
--color-primary-subtle: oklch(93% 0.06 265); /* #DBEAFE */
/* Secondary */
--color-secondary: oklch(45% 0.01 260); /* #475569 */
--color-on-secondary: oklch(100% 0 0); /* #FFFFFF */
--color-secondary-subtle:oklch(93% 0.01 260); /* #F1F5F9 */
/* Tertiary */
--color-tertiary: oklch(58% 0.25 300); /* #A855F7 */
--color-on-tertiary: oklch(100% 0 0); /* #FFFFFF */
--color-tertiary-subtle: oklch(93% 0.07 300); /* #F3E8FF */
/* Semantic: Error */
--color-error: oklch(55% 0.24 25); /* #DC2626 */
--color-on-error: oklch(100% 0 0); /* #FFFFFF */
--color-error-subtle: oklch(95% 0.04 25); /* #FEF2F2 */
--color-error-border: oklch(75% 0.12 25); /* #FCA5A5 */
/* Semantic: Warning */
--color-warning: oklch(70% 0.18 70); /* #D97706 */
--color-on-warning: oklch(18% 0 0); /* #1C1917 */
--color-warning-subtle: oklch(96% 0.04 70); /* #FFFBEB */
--color-warning-border: oklch(82% 0.10 70); /* #FDE68A */
/* Semantic: Success */
--color-success: oklch(55% 0.20 155); /* #16A34A */
--color-on-success: oklch(100% 0 0); /* #FFFFFF */
--color-success-subtle: oklch(96% 0.04 155); /* #F0FDF4 */
--color-success-border: oklch(80% 0.12 155); /* #86EFAC */
/* Semantic: Info */
--color-info: oklch(60% 0.18 230); /* #0EA5E9 */
--color-on-info: oklch(100% 0 0); /* #FFFFFF */
--color-info-subtle: oklch(96% 0.04 230); /* #F0F9FF */
--color-info-border: oklch(80% 0.10 230); /* #7DD3FC */
/* Surfaces — elevation = lightness */
--color-bg: oklch(12% 0.01 260); /* #0B1120 — darkest */
--color-surface: oklch(16% 0.01 260); /* #111827 — card level */
--color-surface-raised: oklch(20% 0.01 260); /* #1E293B — modal/popover */
--color-surface-sunken: oklch(10% 0.01 260); /* #060D1B — inset */
--color-overlay: oklch(5% 0 0 / 0.8); /* deeper overlay in dark */
/* Text */
--color-on-surface: oklch(93% 0.01 260); /* #F1F5F9 — primary text */
--color-on-surface-muted:oklch(65% 0.01 260); /* #94A3B8 — secondary */
--color-on-surface-faint:oklch(50% 0.01 260); /* #64748B — tertiary */
/* Borders */
--color-border: oklch(25% 0.01 260); /* #1E293B */
--color-border-strong: oklch(33% 0.01 260); /* #334155 */
--color-border-focus: oklch(60% 0.22 265); /* #60A5FA */
/* Primary — shift lighter and slightly less saturated */
--color-primary: oklch(65% 0.22 265); /* #60A5FA */
--color-on-primary: oklch(12% 0.02 265); /* #172554 */
--color-primary-hover: oklch(70% 0.20 265); /* #93C5FD */
--color-primary-subtle: oklch(20% 0.08 265); /* #1E3A5F */
/* Error */
--color-error: oklch(65% 0.20 25); /* #F87171 */
--color-on-error: oklch(12% 0.05 25); /* #450A0A */
--color-error-subtle: oklch(18% 0.08 25); /* #450A0A */
--color-error-border: oklch(40% 0.15 25); /* #991B1B */
/* Warning */
--color-warning: oklch(78% 0.16 70); /* #FBBF24 */
--color-on-warning: oklch(15% 0.03 70); /* #422006 */
--color-warning-subtle: oklch(18% 0.06 70); /* #422006 */
/* Success */
--color-success: oklch(70% 0.18 155); /* #4ADE80 */
--color-on-success: oklch(12% 0.05 155); /* #052E16 */
--color-success-subtle: oklch(18% 0.06 155); /* #052E16 */
/* Info */
--color-info: oklch(72% 0.15 230); /* #38BDF8 */
--color-on-info: oklch(12% 0.04 230); /* #082F49 */
--color-info-subtle: oklch(18% 0.05 230); /* #082F49 */
Dark mode is NOT color inversion. It is a systematic transformation following these rules:
Map light-mode L values to dark-mode L values using this transfer function:
Light L=99% → Dark L=12% (page bg)
Light L=97% → Dark L=16% (surface)
Light L=93% → Dark L=20% (raised surface)
Light L=87% → Dark L=25% (border)
Light L=55% → Dark L=65% (primary accent — shift UP not down)
Light L=18% → Dark L=93% (text)
High-chroma colors on dark backgrounds cause eye strain and halation (glow bleeding).
Light mode: oklch(55% 0.25 265) — C=0.25
Dark mode: oklch(65% 0.22 265) — C=0.22 (12% reduction)
Unlike light mode (which uses shadows for elevation), dark mode uses surface lightness:
Level 0 (bg): oklch(12% ...) — deepest
Level 1 (surface): oklch(16% ...) — cards
Level 2 (raised): oklch(20% ...) — dropdowns, popovers
Level 3 (modal): oklch(24% ...) — modal dialogs
Level 4 (tooltip): oklch(28% ...) — tooltips, toasts
Each elevation step = +4% lightness.
White text on dark backgrounds appears bolder due to irradiation illusion. Compensate:
Shift accent colors UP the lightness scale by approximately one scale step:
Light mode primary: 500 step → oklch(55% 0.25 H)
Dark mode primary: 400 step → oklch(65% 0.22 H)
Error, warning, success must maintain recognizability but adapt:
Error: Light #DC2626 → Dark #F87171 (lighter red, less saturated)
Warning: Light #D97706 → Dark #FBBF24 (lighter amber)
Success: Light #16A34A → Dark #4ADE80 (lighter green)
filter: brightness(0.85)APCA (Accessible Perceptual Contrast Algorithm) by Myndex replaces WCAG 2.x contrast ratios with perceptually accurate lightness-contrast scoring.
Font Size Weight Minimum Lc Use Case
--------- ------ ---------- --------
12px 400 Lc 90 Body text (minimum)
14px 400 Lc 75 Body text (comfortable)
16px 400 Lc 75 Default body
18px 400 Lc 60 Large body
24px 700 Lc 45 Headings
32px+ 700 Lc 30 Display/Hero
Icons 16px — Lc 60 UI icons
Non-text — Lc 30 Decorative elements
Placeholder — Lc 45 Input placeholders
Disabled — Lc 30 Disabled states
Lc ≈ (L_text - L_bg) scaled by perceptual response curve
For practical use: oklch L channel differences give a reasonable approximation:
Each palette: Name, hex values, oklch values, intended use, APCA contrast Lc for key pairs (text on lightest bg).
Terracotta Sunrise
#FFF7ED oklch(97% 0.02 60) — surface
#FED7AA oklch(88% 0.08 65) — accent bg
#FB923C oklch(73% 0.17 55) — secondary
#C2410C oklch(50% 0.18 40) — primary
#431407 oklch(20% 0.06 40) — text
APCA: #431407 on #FFF7ED → Lc 89 ✓ body text
Use: Food, hospitality, artisan brands.
Desert Sand
#FEFCE8 oklch(98% 0.02 95) — surface
#FDE68A oklch(91% 0.10 90) — accent bg
#D4A017 oklch(72% 0.15 85) — secondary
#92400E oklch(42% 0.12 60) — primary
#3B1A05 oklch(18% 0.05 55) — text
APCA: #3B1A05 on #FEFCE8 → Lc 92 ✓ body text
Use: Natural products, organic food, wellness.
Autumn Harvest
#FEF3C7 oklch(96% 0.04 85) — surface
#F59E0B oklch(75% 0.17 75) — accent
#B45309 oklch(50% 0.15 60) — secondary
#78350F oklch(35% 0.10 55) — primary
#1C0A00 oklch(12% 0.03 50) — text
APCA: #1C0A00 on #FEF3C7 → Lc 94 ✓ body text
Use: Seasonal campaigns, craft beverages, bakeries.
Burnt Sienna
#FAF5F0 oklch(97% 0.01 50) — surface
#E8C4A0 oklch(82% 0.07 60) — accent bg
#C67A48 oklch(62% 0.14 55) — secondary
#8B4513 oklch(42% 0.12 55) — primary
#2C1608 oklch(17% 0.04 55) — text
APCA: #2C1608 on #FAF5F0 → Lc 91 ✓ body text
Use: Leather goods, coffee, rustic dining.
Arctic Blue
#F0F9FF oklch(98% 0.02 230) — surface
#BAE6FD oklch(90% 0.07 230) — accent bg
#0EA5E9 oklch(68% 0.18 230) — secondary
#0369A1 oklch(50% 0.15 240) — primary
#082F49 oklch(22% 0.06 240) — text
APCA: #082F49 on #F0F9FF → Lc 90 ✓ body text
Use: SaaS dashboards, cloud products, analytics.
Midnight Indigo
#EEF2FF oklch(97% 0.03 270) — surface
#C7D2FE oklch(87% 0.08 270) — accent bg
#6366F1 oklch(58% 0.22 275) — secondary
#4338CA oklch(45% 0.20 275) — primary
#1E1B4B oklch(18% 0.08 275) — text
APCA: #1E1B4B on #EEF2FF → Lc 91 ✓ body text
Use: Developer tools, AI products, creative platforms.
Steel Slate
#F8FAFC oklch(98% 0.01 260) — surface
#CBD5E1 oklch(85% 0.02 260) — accent bg
#64748B oklch(55% 0.02 260) — secondary
#334155 oklch(35% 0.02 260) — primary
#0F172A oklch(15% 0.01 260) — text
APCA: #0F172A on #F8FAFC → Lc 96 ✓ body text
Use: Enterprise SaaS, admin panels, documentation.
Corporate Navy
#F5F8FF oklch(98% 0.02 260) — surface
#93B4E8 oklch(76% 0.10 260) — accent bg
#2563EB oklch(55% 0.22 265) — secondary
#1E40AF oklch(40% 0.18 265) — primary
#0C1A3D oklch(15% 0.06 265) — text
APCA: #0C1A3D on #F5F8FF → Lc 95 ✓ body text
Use: Banking, insurance, consulting, B2B.
Electric Pulse
#0A0A1A oklch(10% 0.02 275) — bg (dark theme)
#6366F1 oklch(58% 0.22 275) — primary
#D946EF oklch(65% 0.28 320) — accent
#06FFA5 oklch(90% 0.20 165) — success/highlight
#F1F5F9 oklch(97% 0.01 260) — text on dark
APCA: #F1F5F9 on #0A0A1A → Lc 97 ✓ body text
Use: Gaming, crypto, nightlife, music streaming.
Neon Garden
#0D1117 oklch(11% 0.01 260) — bg (dark theme)
#22C55E oklch(68% 0.20 155) — primary green
#3B82F6 oklch(60% 0.22 265) — secondary blue
#FBBF24 oklch(85% 0.15 85) — accent gold
#E2E8F0 oklch(92% 0.01 260) — text
APCA: #E2E8F0 on #0D1117 → Lc 93 ✓ body text
Use: Developer tools (dark default), terminal UIs, coding platforms.
Candy Pop
#FFF1F2 oklch(97% 0.02 10) — surface
#FDA4AF oklch(78% 0.10 15) — accent bg
#F43F5E oklch(60% 0.22 15) — primary rose
#A855F7 oklch(60% 0.22 300) — secondary purple
#4C0519 oklch(20% 0.08 10) — text
APCA: #4C0519 on #FFF1F2 → Lc 90 ✓ body text
Use: Gen-Z products, social apps, beauty, creative tools.
Tropical Fusion
#FFFBEB oklch(98% 0.02 85) — surface
#FDE047 oklch(90% 0.16 95) — yellow accent
#F97316 oklch(70% 0.19 55) — orange
#06B6D4 oklch(68% 0.15 200) — cyan
#422006 oklch(20% 0.06 60) — text
APCA: #422006 on #FFFBEB → Lc 92 ✓ body text
Use: Travel, events, summer campaigns, food delivery.
Monochrome Ink
#FAFAFA oklch(98% 0 0) — surface
#D4D4D4 oklch(86% 0 0) — accent bg/border
#737373 oklch(55% 0 0) — secondary text
#262626 oklch(20% 0 0) — primary text
#0A0A0A oklch(8% 0 0) — headings
APCA: #262626 on #FAFAFA → Lc 89 ✓ body text
Use: Typography-first sites, editorial, portfolios.
Warm Minimalist
#FFFCF5 oklch(99% 0.01 75) — surface
#E7D5C0 oklch(87% 0.04 65) — accent bg
#A08060 oklch(60% 0.07 65) — secondary
#4A3520 oklch(30% 0.05 60) — primary
#1A1008 oklch(12% 0.03 60) — text
APCA: #1A1008 on #FFFCF5 → Lc 95 ✓ body text
Use: Luxury e-commerce, interior design, ceramics.
Cool Minimalist
#FAFBFD oklch(99% 0.005 260) — surface
#D0D5DE oklch(86% 0.02 260) — accent bg
#6B7280 oklch(55% 0.01 260) — secondary
#1F2937 oklch(22% 0.01 260) — primary
#030712 oklch(8% 0.01 260) — text
APCA: #030712 on #FAFBFD → Lc 98 ✓ body text
Use: Productivity apps, note-taking, developer docs.
Healing Teal
#F0FDFA oklch(98% 0.02 180) — surface
#99F6E4 oklch(92% 0.10 175) — accent bg
#14B8A6 oklch(68% 0.14 180) — secondary
#0F766E oklch(52% 0.12 180) — primary
#042F2E oklch(22% 0.05 180) — text
APCA: #042F2E on #F0FDFA → Lc 90 ✓ body text
Use: Telehealth, mental health, wellness apps.
Clinical White
#FFFFFF oklch(100% 0 0) — surface
#E0F2FE oklch(95% 0.04 220) — accent bg
#0284C7 oklch(58% 0.16 230) — secondary
#075985 oklch(42% 0.12 240) — primary
#0C2D48 oklch(22% 0.06 240) — text
APCA: #0C2D48 on #FFFFFF → Lc 91 ✓ body text
Use: Hospital portals, medical devices, clinical software.
Soft Lavender
#FDF4FF oklch(98% 0.02 310) — surface
#E9D5FF oklch(88% 0.10 305) — accent bg
#A855F7 oklch(60% 0.22 300) — secondary
#7E22CE oklch(45% 0.20 300) — primary
#3B0764 oklch(18% 0.09 300) — text
APCA: #3B0764 on #FDF4FF → Lc 92 ✓ body text
Use: Meditation, sleep, therapy platforms.
Trust Blue
#EFF6FF oklch(97% 0.03 265) — surface
#BFDBFE oklch(89% 0.08 265) — accent bg
#2563EB oklch(55% 0.22 265) — secondary
#1E40AF oklch(40% 0.18 265) — primary
#172554 oklch(22% 0.08 265) — text
APCA: #172554 on #EFF6FF → Lc 88 ✓ body text
Use: Banking apps, investment platforms.
Money Green
#F0FDF4 oklch(98% 0.03 155) — surface
#BBF7D0 oklch(93% 0.10 155) — accent bg
#16A34A oklch(58% 0.18 155) — secondary
#166534 oklch(42% 0.14 155) — primary
#052E16 oklch(20% 0.07 155) — text
APCA: #052E16 on #F0FDF4 → Lc 91 ✓ body text
Use: Savings apps, green finance, budgeting tools.
Premium Dark
#0A0A0F oklch(8% 0.01 270) — bg (dark theme)
#C9A84C oklch(72% 0.14 85) — gold accent
#3B82F6 oklch(60% 0.22 265) — interactive blue
#6B7280 oklch(52% 0.01 260) — secondary text
#F1F5F9 oklch(97% 0.01 260) — primary text
APCA: #F1F5F9 on #0A0A0F → Lc 97 ✓ body text
Use: Wealth management, trading platforms, crypto exchanges.
Shopfront Warm
#FFFBEB oklch(98% 0.02 85) — surface
#FDE68A oklch(91% 0.10 90) — promo banner
#EA580C oklch(58% 0.20 50) — CTA orange
#7C2D12 oklch(35% 0.12 45) — primary dark
#1C0A00 oklch(12% 0.03 50) — text
APCA: #1C0A00 on #FFFBEB → Lc 94 ✓ body text
Use: Marketplaces, flash sales, product launches.
Clean Commerce
#FFFFFF oklch(100% 0 0) — surface
#F3F4F6 oklch(96% 0.005 260) — card bg
#111827 oklch(14% 0.01 260) — text
#4F46E5 oklch(50% 0.22 270) — CTA indigo
#EF4444 oklch(58% 0.22 25) — sale red
APCA: #111827 on #FFFFFF → Lc 96 ✓ body text
Use: Fashion e-commerce, electronics, DTC brands.
Classroom Bright
#FFFBEB oklch(98% 0.02 85) — surface
#FACC15 oklch(85% 0.16 90) — highlight yellow
#3B82F6 oklch(60% 0.22 265) — primary blue
#22C55E oklch(68% 0.20 155) — success green
#1E293B oklch(22% 0.01 260) — text
APCA: #1E293B on #FFFBEB → Lc 89 ✓ body text
Use: K-12 platforms, quiz apps, gamified learning.
Academic Slate
#F8FAFC oklch(98% 0.01 260) — surface
#CBD5E1 oklch(85% 0.02 260) — border
#475569 oklch(42% 0.02 260) — secondary
#1E293B oklch(22% 0.01 260) — primary/text
#4F46E5 oklch(50% 0.22 270) — accent indigo
APCA: #1E293B on #F8FAFC → Lc 89 ✓ body text
Use: University portals, research tools, LMS.
Evergreen
#F0FDF4 oklch(98% 0.03 155) — surface
#86EFAC oklch(88% 0.15 155) — accent bg
#22C55E oklch(68% 0.20 155) — secondary
#15803D oklch(48% 0.16 155) — primary
#052E16 oklch(20% 0.07 155) — text
APCA: #052E16 on #F0FDF4 → Lc 91 ✓ body text
Use: Carbon calculators, green energy, recycling platforms.
Earth Neutral
#F7F5F0 oklch(97% 0.01 80) — surface
#D4C9B0 oklch(82% 0.05 80) — accent bg
#8B7355 oklch(55% 0.08 75) — secondary
#5C4A32 oklch(38% 0.07 70) — primary
#2C2010 oklch(18% 0.04 65) — text
APCA: #2C2010 on #F7F5F0 → Lc 90 ✓ body text
Use: Eco-products, sustainable fashion, organic brands.
Cyberpunk Neon
#0A0A14 oklch(8% 0.02 280) — bg
#FF006E oklch(58% 0.28 5) — neon pink
#00E5FF oklch(85% 0.15 200) — cyan
#FFE100 oklch(90% 0.18 100) — yellow
#EAEAEA oklch(93% 0 0) — text
APCA: #EAEAEA on #0A0A14 → Lc 95 ✓ body text
Use: Cyberpunk games, eSports, VR.
Fantasy Realm
#1A0F2E oklch(12% 0.05 290) — bg
#7C3AED oklch(50% 0.22 290) — primary purple
#F59E0B oklch(75% 0.17 75) — gold accent
#10B981 oklch(68% 0.17 165) — potion green
#E8E0F0 oklch(92% 0.03 290) — text
APCA: #E8E0F0 on #1A0F2E → Lc 91 ✓ body text
Use: RPG games, fantasy apps, collectibles.
Noir Gold
#0D0D0D oklch(8% 0 0) — bg
#C9A84C oklch(72% 0.14 85) — gold
#262626 oklch(20% 0 0) — surface
#525252 oklch(40% 0 0) — secondary text
#F5F5F5 oklch(97% 0 0) — primary text
APCA: #F5F5F5 on #0D0D0D → Lc 97 ✓ body text
Use: Luxury fashion, jewelry, high-end spirits.
Blush Elegance
#FFF1F2 oklch(97% 0.02 10) — surface
#FECDD3 oklch(90% 0.06 12) — accent bg
#BE123C oklch(45% 0.20 15) — primary rose
#881337 oklch(32% 0.15 355) — deep accent
#1A0510 oklch(10% 0.04 350) — text
APCA: #1A0510 on #FFF1F2 → Lc 95 ✓ body text
Use: Beauty, bridal, perfume, fashion editorial.
Fresh Produce
#F7FEE7 oklch(98% 0.03 120) — surface
#84CC16 oklch(77% 0.18 115) — lime accent
#16A34A oklch(58% 0.18 155) — green primary
#EA580C oklch(58% 0.20 50) — orange CTA
#1A2E05 oklch(20% 0.06 120) — text
APCA: #1A2E05 on #F7FEE7 → Lc 90 ✓ body text
Use: Grocery delivery, recipe apps, farm-to-table.
Espresso Brew
#FAF6F1 oklch(97% 0.01 55) — surface
#D2B48C oklch(76% 0.07 65) — latte
#8B6914 oklch(52% 0.12 75) — amber
#5C3D10 oklch(35% 0.09 70) — espresso
#1E0F05 oklch(12% 0.03 55) — text
APCA: #1E0F05 on #FAF6F1 → Lc 94 ✓ body text
Use: Coffee brands, bakeries, artisan food.
Linear-Style
#FFFFFF oklch(100% 0 0) — surface
#F3F4F6 oklch(96% 0.005 260) — sidebar bg
#5E6AD2 oklch(55% 0.18 275) — primary indigo
#8E95E0 oklch(70% 0.14 275) — secondary
#171723 oklch(14% 0.02 275) — text
APCA: #171723 on #FFFFFF → Lc 96 ✓ body text
Use: Project management, issue trackers, dev tools.
Vercel-Style
#000000 oklch(0% 0 0) — bg
#171717 oklch(13% 0 0) — surface
#3B82F6 oklch(60% 0.22 265) — link blue
#A1A1AA oklch(70% 0.01 260) — secondary text
#FAFAFA oklch(98% 0 0) — primary text
APCA: #FAFAFA on #000000 → Lc 106 ✓ body text
Use: Infrastructure, deployment, CLI tools.
Notion-Style
#FFFFFF oklch(100% 0 0) — surface
#F7F6F3 oklch(97% 0.005 75) — hover bg
#37352F oklch(25% 0.01 70) — primary text
#787774 oklch(55% 0.005 75) — secondary text
#2EAADC oklch(70% 0.14 220) — link accent
APCA: #37352F on #FFFFFF → Lc 87 ✓ body text
Use: Wikis, docs, content management.
Spring Bloom
#FDF2F8 oklch(97% 0.02 340) — surface
#FBCFE8 oklch(88% 0.08 340) — accent bg
#EC4899 oklch(60% 0.22 340) — primary pink
#86EFAC oklch(88% 0.15 155) — secondary green
#500724 oklch(22% 0.08 350) — text
APCA: #500724 on #FDF2F8 → Lc 88 ✓ body text
Winter Frost
#F0F9FF oklch(98% 0.02 230) — surface
#BAE6FD oklch(90% 0.07 230) — ice blue
#475569 oklch(42% 0.02 260) — slate
#1E3A5F oklch(28% 0.07 250) — deep winter
#0C1929 oklch(14% 0.04 250) — text
APCA: #0C1929 on #F0F9FF → Lc 94 ✓ body text
Summer Sunset
#FFF7ED oklch(97% 0.02 55) — surface
#FED7AA oklch(88% 0.08 60) — warm glow
#F97316 oklch(70% 0.19 55) — orange
#DC2626 oklch(52% 0.22 25) — sunset red
#431407 oklch(20% 0.06 40) — text
APCA: #431407 on #FFF7ED → Lc 89 ✓ body text
Autumn Ember
#FFFBEB oklch(98% 0.02 85) — surface
#D97706 oklch(58% 0.16 70) — amber
#B91C1C oklch(42% 0.18 25) — ember red
#78350F oklch(35% 0.10 55) — wood brown
#1C0A00 oklch(12% 0.03 50) — text
APCA: #1C0A00 on #FFFBEB → Lc 94 ✓ body text
Maximum Contrast Light
#FFFFFF oklch(100% 0 0) — bg
#000000 oklch(0% 0 0) — text (Lc 106)
#0000CC oklch(38% 0.25 265) — links
#CC0000 oklch(42% 0.22 25) — error
#006600 oklch(42% 0.15 150) — success
Maximum Contrast Dark
#000000 oklch(0% 0 0) — bg
#FFFFFF oklch(100% 0 0) — text (Lc 106)
#6CB4FF oklch(75% 0.15 260) — links
#FF6B6B oklch(68% 0.18 25) — error
#6BFF6B oklch(88% 0.20 150) — success
For ordered data from low to high.
--dataviz-seq-1: oklch(93% 0.06 265); /* #DBEAFE — lowest */
--dataviz-seq-2: oklch(82% 0.12 265); /* #93C5FD */
--dataviz-seq-3: oklch(68% 0.20 265); /* #60A5FA */
--dataviz-seq-4: oklch(55% 0.24 265); /* #3B82F6 */
--dataviz-seq-5: oklch(42% 0.20 265); /* #1D4ED8 */
--dataviz-seq-6: oklch(30% 0.14 265); /* #1E3A8A — highest */
For data with a meaningful midpoint (e.g., profit/loss).
--dataviz-div-neg3: oklch(42% 0.20 265); /* #1D4ED8 — strong negative */
--dataviz-div-neg2: oklch(58% 0.22 265); /* #3B82F6 */
--dataviz-div-neg1: oklch(78% 0.10 265); /* #93C5FD */
--dataviz-div-mid: oklch(93% 0.005 0); /* #ECECEC — neutral midpoint */
--dataviz-div-pos1: oklch(78% 0.10 25); /* #FCA5A5 */
--dataviz-div-pos2: oklch(58% 0.22 25); /* #EF4444 */
--dataviz-div-pos3: oklch(42% 0.18 25); /* #B91C1C — strong positive */
Designed to be distinguishable for all forms of color vision deficiency. Uses maximally separated oklch hue angles AND lightness variation.
--dataviz-cat-1: oklch(55% 0.22 265); /* #3B82F6 — Blue */
--dataviz-cat-2: oklch(65% 0.20 50); /* #EA8C3C — Orange */
--dataviz-cat-3: oklch(55% 0.18 155); /* #16A34A — Green */
--dataviz-cat-4: oklch(55% 0.22 25); /* #DC2626 — Red */
--dataviz-cat-5: oklch(60% 0.20 300); /* #9333EA — Purple */
--dataviz-cat-6: oklch(50% 0.12 55); /* #8B5E3C — Brown */
--dataviz-cat-7: oklch(65% 0.22 340); /* #EC4899 — Pink */
--dataviz-cat-8: oklch(55% 0.01 260); /* #6B7280 — Gray */
/* Subtle brand gradient */
.hero-gradient {
background: linear-gradient(135deg,
oklch(55% 0.25 265) 0%,
oklch(55% 0.22 290) 100%
);
}
/* Warm sunset */
.sunset-gradient {
background: linear-gradient(to right,
oklch(65% 0.22 40) 0%,
oklch(72% 0.20 60) 50%,
oklch(80% 0.16 85) 100%
);
}
/* Cool ocean */
.ocean-gradient {
background: linear-gradient(180deg,
oklch(60% 0.20 230) 0%,
oklch(45% 0.18 265) 100%
);
}
/* Smooth gray surface (no banding) */
.surface-gradient {
background: linear-gradient(180deg,
oklch(98% 0.005 260) 0%,
oklch(96% 0.005 260) 100%
);
}
/* Spotlight glow */
.spotlight {
background: radial-gradient(
ellipse at 30% 20%,
oklch(60% 0.25 265 / 0.3) 0%,
oklch(12% 0.01 260 / 0) 70%
);
}
/* Soft vignette for dark mode */
.vignette {
background: radial-gradient(
circle at center,
oklch(16% 0.01 260) 0%,
oklch(8% 0.02 260) 100%
);
}
/* Color wheel */
.color-wheel {
background: conic-gradient(
oklch(65% 0.20 0),
oklch(65% 0.20 60),
oklch(65% 0.20 120),
oklch(65% 0.20 180),
oklch(65% 0.20 240),
oklch(65% 0.20 300),
oklch(65% 0.20 360)
);
border-radius: 50%;
}
/* Gauge/progress indicator */
.gauge {
background: conic-gradient(
oklch(55% 0.22 25) 0%,
oklch(70% 0.18 90) 33%,
oklch(60% 0.20 155) 66%,
oklch(93% 0.01 260) 66%
);
}
True mesh gradients require multiple overlapping radials:
.mesh-gradient {
background:
radial-gradient(at 0% 0%, oklch(70% 0.20 300 / 0.8) 0%, transparent 50%),
radial-gradient(at 100% 0%, oklch(65% 0.22 265 / 0.8) 0%, transparent 50%),
radial-gradient(at 100% 100%, oklch(70% 0.18 200 / 0.8) 0%, transparent 50%),
radial-gradient(at 0% 100%, oklch(75% 0.15 155 / 0.8) 0%, transparent 50%),
oklch(96% 0.01 260);
}
oklch interpolation in CSS is smoother than sRGB. Force it:
.smooth-gradient {
background: linear-gradient(in oklch, oklch(55% 0.25 265), oklch(55% 0.22 330));
}
The in oklch keyword prevents the muddy mid-tones that occur with sRGB interpolation through complementary hues.
Tier 1: Primitive Tokens (raw values, never referenced in UI code)
--color-blue-500: oklch(55% 0.25 265);
--color-blue-600: oklch(48% 0.24 265);
--color-red-500: oklch(55% 0.24 25);
--color-gray-900: oklch(18% 0.01 260);
Tier 2: Semantic Tokens (meaning-based, referenced in component tokens)
--color-action-primary: var(--color-blue-500);
--color-action-primary-hover: var(--color-blue-600);
--color-feedback-error: var(--color-red-500);
--color-text-primary: var(--color-gray-900);
Tier 3: Component Tokens (scoped to specific components)
--button-primary-bg: var(--color-action-primary);
--button-primary-bg-hover: var(--color-action-primary-hover);
--alert-error-bg: var(--color-feedback-error);
--card-text: var(--color-text-primary);
Only Tier 2 changes. Tier 1 stays the same. Tier 3 stays the same.
[data-theme="dark"] {
--color-action-primary: var(--color-blue-400); /* lighter in dark mode */
--color-text-primary: var(--color-gray-50);
--color-surface: var(--color-gray-900);
}
--color-{category}-{property}-{variant}-{state}
Examples:
--color-text-primary
--color-text-primary-hover
--color-surface-raised
--color-border-focus
--color-action-primary-active
--color-feedback-success-subtle
Always test designs under these conditions:
| Scenario | WCAG 2.2 | APCA |
|---|---|---|
| Light gray text on white | Fails at 4.5:1 (often too strict for large text) | Correctly passes for large display text |
| Orange text on white | Often passes WCAG but looks illegible | Correctly fails — orange has high luminance |
| Dark blue on light blue | May fail WCAG despite being clearly readable | Correctly passes |
Recommendation: Use APCA for new projects. Use WCAG 2.2 ratios only when regulatory compliance requires it.
APCA Lc 90+ → Small body text (12-14px)
APCA Lc 75+ → Normal body text (16px+)
APCA Lc 60+ → Large text (18px+ bold, 24px+ normal)
APCA Lc 45+ → Headlines (32px+)
APCA Lc 30+ → Non-text UI elements, decorative
WCAG AA → 4.5:1 normal text, 3:1 large text
WCAG AAA → 7:1 normal text, 4.5:1 large text
:root {
/* === Primitive Tokens === */
/* Blue scale */
--p-blue-50: oklch(97% 0.03 265);
--p-blue-100: oklch(93% 0.06 265);
--p-blue-200: oklch(87% 0.10 265);
--p-blue-300: oklch(78% 0.15 265);
--p-blue-400: oklch(66% 0.22 265);
--p-blue-500: oklch(55% 0.25 265);
--p-blue-600: oklch(48% 0.24 265);
--p-blue-700: oklch(40% 0.20 265);
--p-blue-800: oklch(33% 0.16 265);
--p-blue-900: oklch(25% 0.12 265);
--p-blue-950: oklch(18% 0.08 265);
/* Neutral scale (cool-tinted) */
--p-gray-50: oklch(97% 0.01 260);
--p-gray-100: oklch(93% 0.01 260);
--p-gray-200: oklch(87% 0.015 260);
--p-gray-300: oklch(78% 0.015 260);
--p-gray-400: oklch(66% 0.01 260);
--p-gray-500: oklch(55% 0.01 260);
--p-gray-600: oklch(45% 0.01 260);
--p-gray-700: oklch(35% 0.01 260);
--p-gray-800: oklch(25% 0.01 260);
--p-gray-900: oklch(18% 0.01 260);
--p-gray-950: oklch(12% 0.008 260);
/* Red scale */
--p-red-50: oklch(97% 0.02 25);
--p-red-500: oklch(55% 0.24 25);
--p-red-600: oklch(48% 0.22 25);
--p-red-900: oklch(22% 0.10 25);
/* Green scale */
--p-green-50: oklch(97% 0.03 155);
--p-green-500: oklch(55% 0.20 155);
--p-green-600: oklch(48% 0.18 155);
--p-green-900: oklch(22% 0.08 155);
/* Amber scale */
--p-amber-50: oklch(97% 0.03 80);
--p-amber-500: oklch(70% 0.18 75);
--p-amber-900: oklch(25% 0.08 70);
/* === Semantic Tokens (Light Mode) === */
--s-bg: var(--p-gray-50);
--s-surface: oklch(100% 0 0);
--s-surface-raised: oklch(100% 0 0);
--s-surface-sunken: var(--p-gray-100);
--s-overlay: oklch(15% 0 0 / 0.6);
--s-text: var(--p-gray-900);
--s-text-muted: var(--p-gray-500);
--s-text-faint: var(--p-gray-400);
--s-border: var(--p-gray-200);
--s-border-strong: var(--p-gray-300);
--s-border-focus: var(--p-blue-500);
--s-primary: var(--p-blue-500);
--s-primary-hover: var(--p-blue-600);
--s-primary-subtle: var(--p-blue-100);
--s-on-primary: oklch(100% 0 0);
--s-error: var(--p-red-500);
--s-error-subtle: var(--p-red-50);
--s-on-error: oklch(100% 0 0);
--s-success: var(--p-green-500);
--s-success-subtle: var(--p-green-50);
--s-on-success: oklch(100% 0 0);
--s-warning: var(--p-amber-500);
--s-warning-subtle: var(--p-amber-50);
--s-on-warning: var(--p-gray-900);
/* === Component Tokens === */
--btn-primary-bg: var(--s-primary);
--btn-primary-bg-hov: var(--s-primary-hover);
--btn-primary-text: var(--s-on-primary);
--btn-secondary-bg: var(--s-surface);
--btn-secondary-bdr: var(--s-border-strong);
--input-bg: var(--s-surface);
--input-border: var(--s-border);
--input-border-focus: var(--s-border-focus);
--input-text: var(--s-text);
--input-placeholder: var(--s-text-faint);
--card-bg: var(--s-surface);
--card-border: var(--s-border);
--card-text: var(--s-text);
--card-text-muted: var(--s-text-muted);
--alert-error-bg: var(--s-error-subtle);
--alert-error-text: var(--p-red-900);
--alert-error-border: var(--p-red-500);
--alert-success-bg: var(--s-success-subtle);
--alert-success-text: var(--p-green-900);
--alert-success-bdr: var(--p-green-500);
}
/* Dark mode — only semantic tokens change */
[data-theme="dark"] {
--s-bg: var(--p-gray-950);
--s-surface: var(--p-gray-900);
--s-surface-raised: var(--p-gray-800);
--s-surface-sunken: oklch(10% 0.01 260);
--s-overlay: oklch(5% 0 0 / 0.8);
--s-text: var(--p-gray-100);
--s-text-muted: var(--p-gray-400);
--s-text-faint: var(--p-gray-500);
--s-border: var(--p-gray-800);
--s-border-strong: var(--p-gray-700);
--s-border-focus: var(--p-blue-400);
--s-primary: var(--p-blue-400);
--s-primary-hover: var(--p-blue-300);
--s-primary-subtle: oklch(20% 0.08 265);
--s-on-primary: var(--p-blue-950);
--s-error: oklch(65% 0.20 25);
--s-error-subtle: oklch(18% 0.08 25);
--s-on-error: oklch(97% 0.02 25);
--s-success: oklch(70% 0.18 155);
--s-success-subtle: oklch(18% 0.06 155);
--s-on-success: oklch(97% 0.03 155);
--s-warning: oklch(78% 0.16 75);
--s-warning-subtle: oklch(18% 0.06 75);
--s-on-warning: oklch(15% 0.03 70);
}
iOS uses a 6-level adaptive color system that shifts across Light, Dark, and Tinted appearances:
// System colors auto-adapt to appearance
label.textColor = .label // Primary text
label.textColor = .secondaryLabel // Secondary text
label.textColor = .tertiaryLabel // Tertiary text
label.textColor = .quaternaryLabel // Quaternary text
view.backgroundColor = .systemBackground // Level 0
view.backgroundColor = .secondarySystemBackground // Level 1
view.backgroundColor = .tertiarySystemBackground // Level 2
iOS System Color Mapping (Light → Dark):
.systemBlue: #007AFF → #0A84FF oklch(55% 0.22 265) → oklch(62% 0.22 265)
.systemGreen: #34C759 → #30D158 oklch(72% 0.20 155) → oklch(74% 0.22 155)
.systemRed: #FF3B30 → #FF453A oklch(62% 0.24 25) → oklch(64% 0.24 25)
.systemOrange: #FF9500 → #FF9F0A oklch(74% 0.18 70) → oklch(76% 0.18 72)
.systemYellow: #FFCC00 → #FFD60A oklch(86% 0.16 95) → oklch(88% 0.16 95)
.systemPurple: #AF52DE → #BF5AF2 oklch(58% 0.22 305) → oklch(62% 0.24 305)
.systemPink: #FF2D55 → #FF375F oklch(60% 0.24 10) → oklch(62% 0.24 12)
.systemTeal: #5AC8FA → #64D2FF oklch(78% 0.12 220) → oklch(82% 0.12 220)
Liquid Glass (iOS 26): Liquid Glass is not a color — it is a material. Colors behind the glass element show through with blur and luminance shift. Design for this:
Material You generates tonal palettes from a source (seed) color:
Tonal Palette Algorithm:
Light Mode:
Primary: Tone 40
On-Primary: Tone 100
Primary-Container: Tone 90
On-Primary-Cont: Tone 10
Surface: Tone 98
On-Surface: Tone 10
Surface-Variant: Tone 90 (Neutral-Variant palette)
Outline: Tone 50 (Neutral-Variant palette)
Dark Mode:
Primary: Tone 80
On-Primary: Tone 20
Primary-Container: Tone 30
On-Primary-Cont: Tone 90
Surface: Tone 6
On-Surface: Tone 90
Surface-Variant: Tone 30 (Neutral-Variant palette)
Outline: Tone 60 (Neutral-Variant palette)
M3 Expressive (2025+): Material 3 Expressive extends tonal palettes with:
When building for both iOS and Android:
.tintColor, .label, .systemBackground)primary, onPrimary, surface)Brand oklch(55% 0.25 265) maps to:
iOS: .tintColor override → adapts via system
Android: HCT seed → Material generates full tonal palette
Web: CSS custom properties (Section 15)
npx claudepluginhub phazurlabs/sumi --plugin sumiProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.