Colours
Two-sided palette — pink anchors the designer-facing surfaces, cyan anchors the code-facing inspection link, violet bridges the schema in the middle. Violation tiers carry calibrated severity (high → low) plus a resolved state.
Brand
Surface
Text
Structural
Violation tiers
Colour tokens, semantic roles
| CSS Variable | Role | Hex | |
|---|---|---|---|
| --aligna-brand-design | brand.design-side | #EC4899 | |
| --aligna-brand-code | brand.code-side | #06B6D4 | |
| --aligna-brand-bridge | brand.bridge | #8B5CF6 | |
| --aligna-surface-bg | surface.background | #FAFAFA | |
| --aligna-surface-accent | surface.accent | #F4F4F5 | |
| --aligna-surface-inverse | surface.inverse | #0F0F12 | |
| --aligna-text-fg | text.foreground | #09090B | |
| --aligna-text-alt | text.alt | #52525B | |
| --aligna-text-muted | text.muted | #A1A1AA | |
| --aligna-border | structural.border | #E4E4E7 | |
| --aligna-divider | structural.divider | #D4D4D8 | |
| --aligna-tier-high | violation.high · −3.5 pts | #EF4444 | |
| --aligna-tier-med | violation.medium · −1.5 to −2.0 | #F59E0B | |
| --aligna-tier-low | violation.low · −1.0 pts | #3B82F6 | |
| --aligna-tier-ok | violation.resolved | #22C55E |
Typography
Inter handles every surface a designer or engineer reads. JetBrains Mono carries code, tokens, JSON payloads, and the violation node IDs that link the two sides of the schema.
Font families
| CSS Variable | Stack | Weights | Role |
|---|---|---|---|
| --font-sans | 'Inter', system-ui, sans-serif | 400 · 500 · 600 · 700 | All UI text, both sides |
| --font-mono | 'JetBrains Mono', monospace | 400 · 500 · 600 | Code, tokens, violation node IDs |
Type scale
| CSS Variable | Size | Weight | Tracking | Line height |
|---|---|---|---|---|
| --text-display | 48px | 700 | −2px | 1 |
| --text-h1 | 32px | 600 | −1.5px | 1.05 |
| --text-h3 | 22px | 600 | −0.5px | 1.2 |
| --text-body | 16px | 400 | 0 | 24px |
| --text-mono | 14px | 500 | 0 | 20px |
| --text-sm | 14px | 400 | 0 | 20px |
| --text-xs | 12px | 600 | 0.08em | 16px |
Spacing
Tailwind-compatible 4px base scale. All padding, margin, and gap values must reference a token — no magic numbers in component code.
Spacing tokens
| CSS Variable | Value | rem | Usage |
|---|---|---|---|
| --space-2xs | 4px | 0.25rem | Icon gaps, tight padding |
| --space-xs | 8px | 0.5rem | Inner gaps, list rows |
| --space-md | 16px | 1rem | Default component padding |
| --space-xl | 24px | 1.5rem | Section gaps, modal padding |
| --space-2xl | 32px | 2rem | Between content blocks |
| --space-page | 48px | 3rem | Page horizontal gutter |
| --space-5xl | 64px | 4rem | Section vertical rhythm |
States
All interactive components share a consistent state vocabulary. State is never communicated by colour alone — shape, elevation, or label changes accompany every shift.
Button
Input
State treatments
| State | Property | Treatment |
|---|---|---|
| default | background / border | --primary / --aligna-border |
| hover | transform / box-shadow | translateY(−1px) · 0 4px 10px |
| active | transform | scale(0.97) |
| focus | outline | 2px solid #60A5FA · offset 2px |
| error | border / color | --aligna-tier-high (#EF4444) |
| disabled | opacity / pointer-events | 0.4 · none |