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
1---2name: correax-brand3description: CorreaX visual design system — color tokens, typography, banner patterns, and component architecture4---56# CorreaX Brand & Design Language78**Domain**: Visual design system, color tokens, typography, component patterns, WCAG compliance9**Trigger**: design system, brand colors, CorreaX palette, typography, banner pattern, design tokens, color system, accent colors, CSS variables, brand identity, visual identity1011## Quick Reference1213The CorreaX design language defines the visual identity for all CorreaX products — LearnAlex website, Alex VS Code extension, AIRS platform, books, and marketing materials.1415**Authoritative reference**: `alex_docs/DK-correax-brand.md` — the full design language with CSS implementations.1617### Core Palette (from memory)1819| Token | Hex | Role |20| ----------------- | --------- | -------------------------------------------- |21| `--bg` | `#0f172a` | Deep navy page background |22| `--bg-card` | `#1e293b` | Card/panel backgrounds |23| `--accent-indigo` | `#6366f1` | **Primary** — CTAs, buttons, default accent |24| `--accent-teal` | `#0d9488` | **Secondary** — study guides, AIRS, learning |25| `--accent-rose` | `#f43f5e` | **Tertiary** — warnings, destructive, energy |26| `--accent-coral` | `#f97316` | **Quaternary** — highlights, warm contexts |27| `--text` | `#f1f5f9` | Primary text (near white) |28| `--text-muted` | `#94a3b8` | Secondary text (slate) |29| `--border` | `#334155` | Default borders |3031### Light Variants (for text on dark backgrounds)3233| Token | Hex | Contrast on `--bg-card` |34| ----------------------- | --------- | ----------------------- |35| `--accent-indigo-light` | `#818cf8` | 4.5:1 ✅ AA |36| `--accent-teal-light` | `#2dd4bf` | 7.0:1 ✅ AAA |37| `--accent-rose-light` | `#fb7185` | — |38| `--accent-coral-light` | `#fb923c` | — |3940### Key Decisions41421. **Never use `#6366f1` as text on dark backgrounds** — fails WCAG AA. Use `#818cf8` (light variant) instead.432. **Page titles are always light weight** — `font-weight: 300`, not bold.443. **Series labels** — 10px / 600 weight / 5px letter-spacing / uppercase.454. **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).465. **Prose max-width** — `820px` centered, with `h2` top-border separators.4748### VS Code Extension Token Mapping4950| CorreaX | VS Code Fallback |51| ----------------- | ----------------------------------- |52| `--bg` | `--vscode-sideBar-background` |53| `--bg-card` | `--vscode-editor-widget-background` |54| `--text` | `--vscode-foreground` |55| `--text-muted` | `--vscode-descriptionForeground` |56| `--border` | `--vscode-panel-border` |57| `--accent-indigo` | `--vscode-button-background` |5859### Brand Family6061| Product | Color Context |62| -------------------- | -------------------------------------- |63| **CorreaX** (parent) | Sky Blue `#87CEEB` ← brand.correax.com |64| **LearnAlex** | Indigo `#6366f1` ← primary |65| **AIRS** | Azure Blue `#0078D4` ← enterprise |66| **Alex Extension** | Persona-driven (indigo default) |6768### Persona → CorreaX Accent Alignment (27 personas, fully aligned as of v5.9.13)6970All 27 Alex personas use CorreaX tokens. Three intentional exceptions preserve platform/domain identity.7172**Semantic groupings:**7374| Token | Hex | Role | Personas |75| ------------ | --------- | ------------------------------------ | ----------------------------------------------------------------- |76| rose | `#f43f5e` | Risk · Security · Urgency | DevOps Engineer, Security Engineer, SRE / On-Call, Marketer |77| rose-light | `#fb7185` | Creative · Narrative | Content Creator, Copywriter |78| teal | `#0d9488` | Analysis · Research · Quality | Researcher, Business Analyst, QA Engineer |79| teal-light | `#2dd4bf` | Process · Coordination · Growth | Project Manager, Job Seeker, OSS Contributor, BI Analyst |80| indigo | `#6366f1` | Strategy · Leadership · Architecture | Enterprise Architect, Consultant, Product Manager, Game Developer |81| indigo-light | `#818cf8` | Knowledge · Education · Cognition | Fiction Writer, Student, Cognitive Scientist |82| coral | `#f97316` | Communication · Persuasion · Impact | Technical Writer, Speaker / Presenter, Grant Writer |83| coral-light | `#fb923c` | Building · Hands-on Craft | Power User / Builder |8485**Intentional non-CorreaX exceptions (by design):**8687| Persona | Hex | Reason |88| ----------------------- | --------- | ------------------------------------- |89| Developer | `#0078D4` | Microsoft blue — platform identity |90| Academic / Grad Student | `#8B5CF6` | Purple — academic/scholarly tradition |91| Data Engineer | `#06B6D4` | Cyan — data pipeline aesthetic |9293**Fallback** (no persona detected): `#6366f1` (CorreaX indigo primary — never `var(--vscode-charts-blue)`)9495Full table with line references: `platforms/vscode-extension/src/chat/personaDetection.ts` · DK §13.9697## Resources9899For full CSS implementations, component anatomy, and the complete design checklist:100→ Read `alex_docs/DK-correax-brand.md`101102For brand asset deployment, marketplace descriptions, and store listing patterns:103→ Use the `brand-asset-management` skill104105For generating visual assets (banners, logos) using AI models:106→ Use the `ai-generated-readme-banners` skill
fabioc-aloha