GradientsJustifiedOnly [rule] v1.0.0

Gradients, shadows, and color palettes must not be generated ad hoc; every gradient must be sourced from documented tokens or a named pattern type (mesh atmosphere, linear accent wash, or accent glow), and must not appear on data surfaces, metric values, or repeated list items.

Applies To

• all CSS gradient declarations in component code
• background decorative layers
• shadow and overlay effects

Counter Examples

• background: linear-gradient(135deg, #f97316, #ec4899) hardcoded on a pricing card — undocumented, untokenised
• gradient text on metrics: background: linear-gradient(135deg, ...) -webkit-background-clip: text — decorative treatment on data
• Gradient at full opacity on every section background — visual noise, not atmosphere
• background: linear-gradient(135deg, purple, blue) generated by an AI agent as 'default brand styling'

Use Instead

documented design tokens for all decoration; @community/pattern-gradient-mesh-engine for atmospheric backgrounds; @community/template-color-layer-application tokens for surfaces

Severity

high

GradientsJustifiedOnly [rule] v1.0.0

Gradients, shadows, and color palettes must not be generated ad hoc; every gradient must be sourced from documented tokens or a named pattern type (mesh atmosphere, linear accent wash, or accent glow), and must not appear on data surfaces, metric values, or repeated list items.

Applies To

• all CSS gradient declarations in component code
• background decorative layers
• shadow and overlay effects

Counter Examples

• background: linear-gradient(135deg, #f97316, #ec4899) hardcoded on a pricing card — undocumented, untokenised
• gradient text on metrics: background: linear-gradient(135deg, ...) -webkit-background-clip: text — decorative treatment on data
• Gradient at full opacity on every section background — visual noise, not atmosphere
• background: linear-gradient(135deg, purple, blue) generated by an AI agent as 'default brand styling'

Use Instead

documented design tokens for all decoration; @community/pattern-gradient-mesh-engine for atmospheric backgrounds; @community/template-color-layer-application tokens for surfaces

Severity

high

Examples

• A gradient sourced from @community/pattern-gradient-mesh-engine — documented, token-parameterised, dark-mode-safe
• A linear accent wash gradient using CSS custom properties that change per theme

Rationale

Ad hoc CSS gradients fragment the design language and are untraceable — a developer creating a one-off gradient for 'a bit of polish' produces a visual element that cannot be systematically updated, dark-mode-adapted, or theme-switched. This is the primary vector for visual inconsistency in AI-generated UIs where the agent applies decoration opportunistically. The three defined gradient types (mesh, linear wash, glow) cover all legitimate atmospheric use cases; anything outside those types requires a documented design decision.

Applies To

• all CSS gradient declarations in component code
• background decorative layers
• shadow and overlay effects

Counter Examples

• background: linear-gradient(135deg, #f97316, #ec4899) hardcoded on a pricing card — undocumented, untokenised
• gradient text on metrics: background: linear-gradient(135deg, ...) -webkit-background-clip: text — decorative treatment on data
• Gradient at full opacity on every section background — visual noise, not atmosphere
• background: linear-gradient(135deg, purple, blue) generated by an AI agent as 'default brand styling'

Use Instead

documented design tokens for all decoration; @community/pattern-gradient-mesh-engine for atmospheric backgrounds; @community/template-color-layer-application tokens for surfaces

Severity

high