Skill LibraryPrompt Skill1 DesignsTop Views

OKLCH Theme Color System

Turn brand seed colors into perceptual OKLCH scales, light/dark semantic tokens, CSS variables, sRGB fallbacks, and component-state mappings.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines7

Reusable instruction lines for generation.

Author@Interface Lab

Implementation

Skill Directive

Description

Turn brand seed colors into perceptual OKLCH scales, light/dark semantic tokens, CSS variables, sRGB fallbacks, and component-state mappings.

TagsImplementation

Skill Prompt

- Inputs must include brand seed color, product tone, light/dark surfaces, body/muted/border/primary/focus/status roles, minimum contrast targets, and browser-support range.
- Convert seed colors into OKLCH first, then build 9-12 candidate steps around lightness, chroma, and hue; do not treat linear HSL tint/shade output as the final theme.
- Control chroma: high-chroma colors on light surfaces belong to accent/solid use, not large text areas; in dark mode reduce saturation and glow to avoid neon noise.
- Run gamut checks: every OKLCH/P3 output needs an sRGB or hex fallback, and document whether `@supports (color: oklch(0% 0 0))` layering is required.
- Compress scales into semantic tokens: bg, surface, surface-raised, border, text, muted, accent-bg, accent-text, focus-ring, danger, success, warning, and selected.
- Output a component pair matrix: contrast or risk for each text/icon/border/focus token on surface, solid button, outline button, tag, input, and alert contexts.
- Deliver a token table, CSS variable snippet, dark-mode overrides, fallback strategy, component mapping, forbidden combinations, and items needing brand review.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

OKLCH Theme Color System

More pages using OKLCH Theme Color System