Colors
Siza's color system is built on a purple-dominant analogous palette. All color combinations have been validated for WCAG accessibility.
Brand Colors
Primary
Primary brand color
#7c3aed
HSL(262, 83%, 58%)
Secondary
Secondary brand color
#5c6ee6
HSL(232, 73%, 63%)
Accent
Accent and highlight color
#e12bfd
HSL(292, 98%, 58%)
Neutral Scale
100
#f2f2f3
200
#e5e4e7
300
#cbc9cf
400
#98949e
500
#65616b
600
#323036
700
#19181b
800
#0d0c0d
Neutrals are brand-tinted with a subtle purple undertone (hue 262).
Semantic Colors
Success
#22c35d Warning
#f59f0a Error
#ef4343 Info
#368fe7 WCAG Contrast
| Pair | Ratio | AA | AA Large | AAA |
|---|---|---|---|---|
| primary-on-white | 5.67 | ✓ | ✓ | ✕ |
| primary-on-dark | 3.07 | ✕ | ✓ | ✕ |
| secondary-on-white | 4.35 | ✕ | ✓ | ✕ |
| accent-on-white | 3.52 | ✕ | ✓ | ✕ |
Usage
/* CSS Custom Properties */
color: var(--color-primary); /* #7c3aed */
color: var(--color-secondary); /* #5c6ee6 */
color: var(--color-accent); /* #e12bfd */
color: var(--color-neutral-400); /* #98949e */
color: var(--color-success); /* #22c35d */
color: var(--color-error); /* #ef4343 */