| name | correax-brand |
| description | CorreaX visual design system — color tokens, typography, banner patterns, and component architecture |
| triggerPhrases | ["design system","brand colors","CorreaX palette","typography","banner pattern","design tokens","color system","accent colors","CSS variables","brand identity","visual identity"] |
| heirs | ["vscode","m365","web"] |
CorreaX Brand & Design Language
Domain: Visual design system, color tokens, typography, component patterns, WCAG compliance
Trigger: design system, brand colors, CorreaX palette, typography, banner pattern, design tokens, color system, accent colors, CSS variables, brand identity, visual identity
Quick Reference
The CorreaX design language defines the visual identity for all CorreaX products — LearnAlex website, Alex VS Code extension, AIRS platform, books, and marketing materials.
Authoritative reference: alex_docs/DK-correax-brand.md — the full design language with CSS implementations.
Core Palette (from memory)
| Token | Hex | Role |
|---|
--bg | #0f172a | Deep navy page background |
--bg-card | #1e293b | Card/panel backgrounds |
--accent-indigo | #6366f1 | Primary — CTAs, buttons, default accent |
--accent-teal | #0d9488 | Secondary — study guides, AIRS, learning |
--accent-rose | #f43f5e | Tertiary — warnings, destructive, energy |
--accent-coral | #f97316 | Quaternary — highlights, warm contexts |
--text | #f1f5f9 | Primary text (near white) |
--text-muted | #94a3b8 | Secondary text (slate) |
--border | #334155 | Default borders |
Light Variants (for text on dark backgrounds)
| Token | Hex | Contrast on --bg-card |
|---|
--accent-indigo-light | #818cf8 | 4.5:1 ✅ AA |
--accent-teal-light | #2dd4bf | 7.0:1 ✅ AAA |
--accent-rose-light | #fb7185 | — |
--accent-coral-light | #fb923c | — |
Key Decisions
- Never use
#6366f1 as text on dark backgrounds — fails WCAG AA. Use #818cf8 (light variant) instead.
- Page titles are always light weight —
font-weight: 300, not bold.
- Series labels — 10px / 600 weight / 5px letter-spacing / uppercase.
- The banner pattern (accent bar + ghost watermark + series label) is the signature CorreaX component — use on every content page header. Ghost watermark opacity =
0.15 (rgba(255,255,255,0.15)) — subtle but visible. 0.03 was too faint (corrected v6.0.1).
- Prose max-width —
820px centered, with h2 top-border separators.
VS Code Extension Token Mapping
| CorreaX | VS Code Fallback |
|---|
--bg | --vscode-sideBar-background |
--bg-card | --vscode-editor-widget-background |
--text | --vscode-foreground |
--text-muted | --vscode-descriptionForeground |
--border | --vscode-panel-border |
--accent-indigo | --vscode-button-background |
Brand Family
| Product | Color Context |
|---|
| CorreaX (parent) | Sky Blue #87CEEB ← brand.correax.com |
| LearnAlex | Indigo #6366f1 ← primary |
| AIRS | Azure Blue #0078D4 ← enterprise |
| Alex Extension | Persona-driven (indigo default) |
Persona → CorreaX Accent Alignment (27 personas, fully aligned as of v5.9.13)
All 27 Alex personas use CorreaX tokens. Three intentional exceptions preserve platform/domain identity.
Semantic groupings:
| Token | Hex | Role | Personas |
|---|
| rose | #f43f5e | Risk · Security · Urgency | DevOps Engineer, Security Engineer, SRE / On-Call, Marketer |
| rose-light | #fb7185 | Creative · Narrative | Content Creator, Copywriter |
| teal | #0d9488 | Analysis · Research · Quality | Researcher, Business Analyst, QA Engineer |
| teal-light | #2dd4bf | Process · Coordination · Growth | Project Manager, Job Seeker, OSS Contributor, BI Analyst |
| indigo | #6366f1 | Strategy · Leadership · Architecture | Enterprise Architect, Consultant, Product Manager, Game Developer |
| indigo-light | #818cf8 | Knowledge · Education · Cognition | Fiction Writer, Student, Cognitive Scientist |
| coral | #f97316 | Communication · Persuasion · Impact | Technical Writer, Speaker / Presenter, Grant Writer |
| coral-light | #fb923c | Building · Hands-on Craft | Power User / Builder |
Intentional non-CorreaX exceptions (by design):
| Persona | Hex | Reason |
|---|
| Developer | #0078D4 | Microsoft blue — platform identity |
| Academic / Grad Student | #8B5CF6 | Purple — academic/scholarly tradition |
| Data Engineer | #06B6D4 | Cyan — data pipeline aesthetic |
Fallback (no persona detected): #6366f1 (CorreaX indigo primary — never var(--vscode-charts-blue))
Full table with line references: platforms/vscode-extension/src/chat/personaDetection.ts · DK §13.
Resources
For full CSS implementations, component anatomy, and the complete design checklist:
→ Read alex_docs/DK-correax-brand.md
For brand asset deployment, marketplace descriptions, and store listing patterns:
→ Use the brand-asset-management skill
For generating visual assets (banners, logos) using AI models:
→ Use the ai-generated-readme-banners skill
