template @community/template-color-layer-semantic

Color Layer Semantic

@community/template-color-layer-semantic

Skill: @community
Domain: frontend-design
Version: 1.0.0
Quality: 4.0
Edges: 4 out · 1 in
Tokens: 16/586/586

$ prime install @community/template-color-layer-semantic

Projection

3 levels · agent picks one per query

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)

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)

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

Source

where the compiled artifact came from

prime-system/examples/frontend-design/primes/compiled/@community/template-color-layer-semantic/atom.yaml

Compiled at 2026-05-07