Skill Wiki
Color Layer Application
@community/template-color-layer-application
$ prime install @community/template-color-layer-applicationProjection
Always in _index.xml · the agent never has to ask for this.
ColorLayerApplication [template] v1.0.0
Loaded when retrieval picks the atom as adjacent / supporting.
ColorLayerApplication [template] v1.0.0
Label
Color Architecture Layer 3 — Application Token Layer (Tailwind / CSS Custom Properties)
Body
/* Layer 3: Application Token Layer — design tokens consumed by components */
/* Components reference tokens, never raw scale numbers or OKLCH values */
/* Tailwind v4 @theme block */
@theme {
--color-surface: var(--gray-1);
--color-surface-raised: var(--gray-2);
--color-border-subtle: var(--gray-5);
--color-border: var(--gray-6);
--color-solid: var(--brand-9);
--color-text-secondary: var(--gray-11);
--color-text-primary: var(--gray-12);
}
/* Dark mode override — re-palette, not inversion */
@media (prefers-color-scheme: dark) {
@theme {
--color-surface: var(--gray-dark-1);
--color-surface-raised: var(--gray-dark-2);
--color-border-subtle: var(--gray-dark-5);
--color-border: var(--gray-dark-6);
--color-solid: var(--brand-dark-9);
--color-text-secondary: var(--gray-dark-11);
--color-text-primary: var(--gray-dark-12);
}
}
/* Component usage (Tailwind utility classes map to these tokens): */
/* bg-surface → background of page/layout containers */
/* bg-surface-raised → cards, popovers, elevated surfaces */
/* border-border-subtle → subtle dividers */
/* border-border → standard borders */
/* bg-solid → buttons, badges, fills */
/* text-text-secondary → labels, metadata, muted text */
/* text-text-primary → body copy, headings */
Usage
Populate the @theme block by mapping your Layer 2 semantic scale variables to semantic role tokens. Maintain a dark-mode @theme override block that re-maps every token to dark-mode scale values. Components should only reference these tokens — never the raw scale numbers.
Loaded when retrieval picks the atom as a focal / direct hit.
ColorLayerApplication [template] v1.0.0
Label
Color Architecture Layer 3 — Application Token Layer (Tailwind / CSS Custom Properties)
Body
/* Layer 3: Application Token Layer — design tokens consumed by components */
/* Components reference tokens, never raw scale numbers or OKLCH values */
/* Tailwind v4 @theme block */
@theme {
--color-surface: var(--gray-1);
--color-surface-raised: var(--gray-2);
--color-border-subtle: var(--gray-5);
--color-border: var(--gray-6);
--color-solid: var(--brand-9);
--color-text-secondary: var(--gray-11);
--color-text-primary: var(--gray-12);
}
/* Dark mode override — re-palette, not inversion */
@media (prefers-color-scheme: dark) {
@theme {
--color-surface: var(--gray-dark-1);
--color-surface-raised: var(--gray-dark-2);
--color-border-subtle: var(--gray-dark-5);
--color-border: var(--gray-dark-6);
--color-solid: var(--brand-dark-9);
--color-text-secondary: var(--gray-dark-11);
--color-text-primary: var(--gray-dark-12);
}
}
/* Component usage (Tailwind utility classes map to these tokens): */
/* bg-surface → background of page/layout containers */
/* bg-surface-raised → cards, popovers, elevated surfaces */
/* border-border-subtle → subtle dividers */
/* border-border → standard borders */
/* bg-solid → buttons, badges, fills */
/* text-text-secondary → labels, metadata, muted text */
/* text-text-primary → body copy, headings */
Usage
Populate the @theme block by mapping your Layer 2 semantic scale variables to semantic role tokens. Maintain a dark-mode @theme override block that re-maps every token to dark-mode scale values. Components should only reference these tokens — never the raw scale numbers.
Source
prime-system/examples/frontend-design/primes/compiled/@community/template-color-layer-application/atom.yaml