# Correax Brand

> CorreaX visual design system — color tokens, typography, banner patterns, and component architecture

- Skill: `fabioc-aloha/correax-brand` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add fabioc-aloha/correax-brand`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fabioc-aloha/correax-brand/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: fabioc-aloha (https://skillmd.com/u/fabioc-aloha)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fabioc-aloha/correax-brand

---


# 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

1. **Never use `#6366f1` as text on dark backgrounds** — fails WCAG AA. Use `#818cf8` (light variant) instead.
2. **Page titles are always light weight** — `font-weight: 300`, not bold.
3. **Series labels** — 10px / 600 weight / 5px letter-spacing / uppercase.
4. **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).
5. **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