Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: CSS
cssdesign-systemcolor
Define palette colors as opaque hex, not rgba
Store design-system/theme colors as solid hex values, not `rgba()` with baked-in alpha. A translucent token renders differently over every background, so it can't be a reliable single source of truth; apply opacity only where a specific overlay effect is actually intended.
PR: profico-org-corpus batch2 (all stacks/products)Created: Jul 26, 2026
Bad example
Old codescss
| 1 | $border: rgba(0, 0, 0, 0.12); |
Explanation (EN)
The visible color depends on whatever is behind it, so the token isn't stable.
Objašnjenje (HR)
Good example
New codescss
| 1 | $border: #e0e0e0; |
Explanation (EN)
An opaque hex token looks the same everywhere; use rgba only for deliberate overlays.
Objašnjenje (HR)