Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Name design tokens by semantic role, not by literal value
Name shared variables after what they mean (disabled-text, brand-primary), not their raw value (beige-13), so changing one usage does not silently affect unrelated ones.
Bad example
| 1 | $beige-13: #716d62; |
| 2 | .button-disabled { color: $beige-13; } |
| 3 | .footer-note { color: $beige-13; } |
Explanation (EN)
Coupling unrelated roles to one incidental color name can change them together unintentionally.
Objašnjenje (HR)
Good example
| 1 | $text-disabled: #716d62; |
| 2 | .button-disabled { color: $text-disabled; } |
| 3 | // footer-note keeps its own semantic token if its meaning differs |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
For a semantic token consumed by components, name the role so independent roles can evolve separately even when they currently share one primitive color.
Exceptions / Tradeoffs (EN)
Primitive palette scales may intentionally use color/value names. Keep semantic aliases layered over those primitives rather than renaming the entire palette by one consumer.