Color Palette Alignment
Purpose
Keep template colors aligned with the approved violet/purple and neutral palette using Tailwind built-in utilities.
Scope
In scope: - Template utility class choices for accent, text, border, and surface colors. - Mapping design tokens to Tailwind built-ins.
Out of scope: - New Tailwind plugins. - Custom hex color system in CSS.
Palette rules
- Prefer Tailwind built-in utilities over custom color definitions.
- Keep accent usage consistent (
purple-*andviolet-*families). - Use neutral/zinc families for text hierarchy and surfaces.
- Use existing shared typography tokens (
br-*) for text sizing.
Reference mapping
| Design intent | Tailwind utility |
|---|---|
| Accent links | text-purple-700 |
| Accent chips | text-purple-500, bg-violet-200 |
| Accent border | border-violet-200 |
| Primary text | text-zinc-900 / text-zinc-800 |
| Secondary text | text-neutral-600 |
| Muted text | text-zinc-500 |
| Default surface | bg-zinc-50 |
| Elevated surface | bg-zinc-200 |
Code locations
- Main templates:
backend/backend/templates/,backend/blog/templates/ - Frontend style source:
frontend/src/main.css
How to verify
- Spot-check key pages (blog index, blog detail, footer).
- Confirm accent utilities are purple/violet and not legacy sky/blue variants.