Color Layer Semantic
/* Layer 2: Semantic Scale Layer — 12-step functional scale (inspired by Radix …
$ aoe install @community/template-color-layer-semanticProjection
Always in _index.xml · the agent never has to ask for this.
ColorLayerSemantic [template] v1.0.0
Loaded when retrieval picks the atom as adjacent / supporting.
ColorLayerSemantic [template] v1.0.0
Label
Color Architecture Layer 2 — Semantic Scale Layer (12-Step Functional Scale)
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Body
/* Layer 2: Semantic Scale Layer — 12-step functional scale (inspired by Radix Colors) */
/*
Steps | Function | Typical L range (light mode)
------+---------------------------------------+------------------------------
1–2 | App background, subtle background | 0.97–0.99
3–4 | Component background, hover | 0.92–0.96
5–6 | Border, separator | 0.85–0.90
7–8 | Solid background (buttons, badges) | 0.55–0.70
9–10 | High-contrast solid, indicator | 0.45–0.60
11–12 | Low-contrast text, high-contrast text | 0.20–0.40
*/
/* Option A: Use Radix Colors (recommended for most production projects) */
/* @import '@radix-ui/colors/blue.css'; */
/* @import '@radix-ui/colors/blue-dark.css'; */
/* Option B: Use Open Color (for prototypes and teaching) */
/* @import 'open-color/open-color.css'; */
/* Option C: Custom OKLCH ramp (for unique brand requirements) */
:root {
--brand-1: oklch(99% 0.005 {HUE}); /* app background */
--brand-2: oklch(97% 0.010 {HUE}); /* subtle background */
--brand-3: oklch(95% 0.020 {HUE}); /* component background */
--brand-4: oklch(92% 0.030 {HUE}); /* hover background */
--brand-5: oklch(88% 0.040 {HUE}); /* border */
--brand-6: oklch(84% 0.050 {HUE}); /* separator */
--brand-7: oklch(70% {CHROMA * 0.8} {HUE}); /* solid background */
--brand-8: oklch(60% {CHROMA} {HUE}); /* solid hover */
--brand-9: oklch(52% {CHROMA} {HUE}); /* high-contrast solid */
--brand-10: oklch(46% {CHROMA} {HUE}); /* high-contrast hover */
--brand-11: oklch(35% {CHROMA * 0.8} {HUE}); /* low-contrast text */
--brand-12: oklch(22% {CHROMA * 0.6} {HUE}); /* high-contrast text */
}
Usage
Choose one of the three implementation options. Radix Colors is recommended for most production projects — it provides pre-built, production-tested scales with dark mode variants. Open Color for prototypes. Custom OKLCH ramp only when neither library covers the brand's exact requirements.
Loaded when retrieval picks the atom as a focal / direct hit.
ColorLayerSemantic [template] v1.0.0
Label
Color Architecture Layer 2 — Semantic Scale Layer (12-Step Functional Scale)
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Body
/* Layer 2: Semantic Scale Layer — 12-step functional scale (inspired by Radix Colors) */
/*
Steps | Function | Typical L range (light mode)
------+---------------------------------------+------------------------------
1–2 | App background, subtle background | 0.97–0.99
3–4 | Component background, hover | 0.92–0.96
5–6 | Border, separator | 0.85–0.90
7–8 | Solid background (buttons, badges) | 0.55–0.70
9–10 | High-contrast solid, indicator | 0.45–0.60
11–12 | Low-contrast text, high-contrast text | 0.20–0.40
*/
/* Option A: Use Radix Colors (recommended for most production projects) */
/* @import '@radix-ui/colors/blue.css'; */
/* @import '@radix-ui/colors/blue-dark.css'; */
/* Option B: Use Open Color (for prototypes and teaching) */
/* @import 'open-color/open-color.css'; */
/* Option C: Custom OKLCH ramp (for unique brand requirements) */
:root {
--brand-1: oklch(99% 0.005 {HUE}); /* app background */
--brand-2: oklch(97% 0.010 {HUE}); /* subtle background */
--brand-3: oklch(95% 0.020 {HUE}); /* component background */
--brand-4: oklch(92% 0.030 {HUE}); /* hover background */
--brand-5: oklch(88% 0.040 {HUE}); /* border */
--brand-6: oklch(84% 0.050 {HUE}); /* separator */
--brand-7: oklch(70% {CHROMA * 0.8} {HUE}); /* solid background */
--brand-8: oklch(60% {CHROMA} {HUE}); /* solid hover */
--brand-9: oklch(52% {CHROMA} {HUE}); /* high-contrast solid */
--brand-10: oklch(46% {CHROMA} {HUE}); /* high-contrast hover */
--brand-11: oklch(35% {CHROMA * 0.8} {HUE}); /* low-contrast text */
--brand-12: oklch(22% {CHROMA * 0.6} {HUE}); /* high-contrast text */
}
Usage
Choose one of the three implementation options. Radix Colors is recommended for most production projects — it provides pre-built, production-tested scales with dark mode variants. Open Color for prototypes. Custom OKLCH ramp only when neither library covers the brand's exact requirements.
Relations
related: [@impeccable/template-oklch-palette, @community/check-color-oklch-required, @community/anti-pattern-generic-saas-blue, @community/check-focus-visible]
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/template-color-layer-semantic/atom.yaml