Brand System¶
The Zenzic visual language is token-first.
All UI colors must be consumed through semantic CSS variables defined in
src/css/custom.css.
No raw color literals are allowed in component-level styles.
Canonical Sources¶
- Runtime tokens and theme behavior:
src/css/custom.css - Visual board (full static artifact):
/assets/brand/zenzic-brand-system.html
Open the full board directly:
Zenzic Brand System Visual Board
Badge States¶
Zenzic ships two badge types. Each has distinct color states driven by ZenzicPalette.
Audit badge — binary gate¶
| State | Color | Condition |
|---|---|---|
passing |
BRAND indigo #4f46e5 |
exit 0 — no blocking findings |
failing |
ERROR rose #e11d48 |
exit 1 / 2 / 3 — blocking findings present |
Score badge — quality metric 0–100¶
| State | Color | Condition |
|---|---|---|
score = 100 |
BRAND indigo #4f46e5 |
Perfect score |
fail_under < score < 100 |
WARNING amber #b45309 |
Advisory — not blocking |
score < fail_under |
ERROR rose #e11d48 |
Gate fails — exit 1 |
Static SVG sources live in static/assets/brand/svg/. The visual board shows all states rendered.