Avalon Brand Identity
Design System
Avalon's visual language. Warm plum precision anchored by warm gold - credible enough for stylists, warm enough for consumers. Built on IBM Plex Sans and three theme tiers. Every token, ramp, component, and usage rule is documented here.
01Core Brand Colors
Five foundational anchors
These five colors define Avalon's identity. Every other color is derived from or calibrated against these anchors. Plum is the primary interactive color. Gold is the warmth signal and secondary accent. Warm espresso and warm cream replace the cold slates of generic tech platforms.
Avalon Plum
#7C3AED (medium)
#6D28D9 (light)
Warm Gold
#C8913A
Warm Espresso
#150F0A
Warm Cream
#F9F4EE
Obsidian
#1A1410
Why Plum + Gold
The Black hair care market speaks gold and earth. Avalon uses plum as its precision anchor - a violet that reads luxury and tech credibility without the cold synthetic feel of generic SaaS software - and gold as a warmth signal. The warm espresso and cream backgrounds reinforce this: no icy blue-slate. Together they read as both technically serious and culturally resonant. Gold appears in highlights, callouts, and premium feature contexts, never as a primary action color.
Gold - use for
Warm highlights, premium badges, callout accents, secondary CTAs
Plum - use for
All interactive elements, links, focus rings, primary buttons, status indicators
Never mix
Gold and plum on the same interactive element. One or the other per context, never both as competing CTAs.
02Extended Color Ramps
Four full-range scales
Each hue runs from 50 (near-white tint) through 900 (near-black shade) in 10 steps. Use step numbers consistently: 50-200 for backgrounds, 400-600 for fills, 700-900 for text.
Plum
Gold
Espresso
Neutral
03Semantic Tokens
Role-based CSS variables
All production code references semantic tokens, never raw hex values. Tokens are defined in
assets/theme.css and update automatically when the user switches themes.Background layers
| Token | Medium | Dark | Light | Role |
|---|---|---|---|---|
| --sunken | #261C15 | #150F0A | #F9F4EE | Page body background |
| --base | #2E221A | #1C1410 | #FFFFFF | Primary card surface |
| --raised | #362A20 | #231910 | #FBF8F4 | Elevated surfaces, inputs |
| --overlay | #3D2F25 | #2A1F15 | #F2EDE5 | Hover states, inline chips |
Text
| Token | Medium | Dark | Light | Role |
|---|---|---|---|---|
| --text-primary | #F2EDE8 | #E8E2DC | #1A1410 | Headings, body, primary |
| --text-secondary | #B8AD9E | #8A7E74 | #4E4238 | Supporting copy |
| --text-tertiary | #826B5A | #5C5047 | #857062 | Labels, placeholders, metadata |
Accent and Feedback
| Token | Value (medium) | Role |
|---|---|---|
| --accent | #7C3AED | Primary interactive, buttons, links, focus rings |
| --accent-dim | #2A1A45 | Plum backgrounds behind plum text |
| --green / --green-dim | #57F287 | Success, MVP tags, live status pips |
| --yellow / --yellow-dim | #FAA61A | Warning, in-progress states |
| --red / --red-dim | #ED4245 | Error, destructive actions |
04Theme System
Three-tier light / medium / dark
Avalon supports three themes toggled by the portal's built-in theme switcher. Medium is the default. All three share warm-toned backgrounds - no cold blue-slate. Only the values change between themes; token names stay the same.
Medium
Default - warm professional
Dark
Deep espresso - studio mode
Light
Warm cream - presentation
/* Read/set theme */
const theme = localStorage.getItem('avalon-theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('avalon-theme', theme);
05Accessibility
WCAG 2.1 contrast reference
AA requires 4.5:1 for body text, 3:1 for large text and UI. AAA requires 7:1. Never hardcode #7C3AED as text on light backgrounds - use var(--accent) which resolves to #6D28D9 on light themes for better contrast.
Aa
Plum on warm espresso
#7C3AED on #261C15
AA PassAa
Deep Plum on white (light theme)
#6D28D9 on #FFFFFF
AA Pass - 7.2:1Aa
Obsidian on Warm Cream
#1A1410 on #F9F4EE
AAA Pass - 18.4:1Aa
Gold on dark espresso
#C8913A on #150F0A
AA Pass - 5.4:1Aa
Plum (dark) on cream - avoid
#9B72F8 on #F9F4EE
Fail - 2.9:1Aa
Primary text on cream surface
#1A1410 on #FFFFFF
AAA Pass06Typography
IBM Plex Sans + IBM Plex Mono
IBM Plex Sans handles all UI and body copy. IBM Plex Mono handles all data, IDs, values, and code. Both are open source and load from Google Fonts.
Display | FontIBM Plex Sans 700 Size3.2rem / 48px UseHero headlines only |
Heading 1 | Size2rem / 30px - 700 UsePage and doc titles |
Heading 2 | Size1.5rem / 22px - 700 UseSection titles |
Heading 3 | Size1.1rem / 16px - 600 UseCard titles, subsections |
Body copy at 0.95rem with 1.65 leading. Primary reading size for all portal prose. | Size0.95rem / 14px - 400 Leading1.65 |
Uppercase Label | Size0.72rem - 700 Tracking0.10em uppercase |
E-01 - #7C3AED - 22.5 hrs - Phase 2 | FontIBM Plex Mono UseIDs, values, code, data |
07Spacing and Layout
4px base unit system
All spacing uses multiples of 4px. Container is 960px for doc pages and 1140px for dashboard layouts.
Spacing scale
1 / 4px
2 / 8px
3 / 12px
4 / 16px
6 / 24px
8 / 32px
12 / 48px
16 / 64px
24 / 96px
Border radius
sm / 4px
badges
badges
--radius / 8px
cards
cards
lg / 12px
modals
modals
--pill / 999px
pills
pills
08Components
Live component library
All components use semantic tokens and update automatically across all three themes.
Buttons
Status badges and pips
MVPNot MVP
Phase 0Phase 1Phase 2Phase 3Phase 4Phase 5
SMLXL
ReadyPending
Meta pills
Rev B
September 2026
Swift Innovation
Stat cards
97
Total features
57
MVP features
515
Agent-directed hours
6.6x
Compression ratio
Doc cards
Form inputs
Mono / code block
// Agentic multiplier
const SIZING = {
S: { human: [4, 16], mid: 10, compression: 6, allin: 2.2 },
M: { human: [16, 40], mid: 28, compression: 5, allin: 7.1 },
L: { human: [40, 100], mid: 70, compression: 4, allin: 22.5 },
XL: { human: [100,200], mid: 150, compression: 3, allin: 70 },
};
09Competitive Context
Why this palette, specifically
Design decisions made in a vacuum drift. These choices were made against a specific landscape. Understanding the competitive rationale protects the system from scope creep.
| Brand | Primary Color | Design Language | Avalon Distinction |
|---|---|---|---|
| Myavana | Purple / Violet | Tech-heavy, data-forward, subscription SaaS | Myavana's purple runs cold and clinical. Avalon's plum is warmer in tone, anchored by gold and espresso backgrounds that read culturally resonant rather than enterprise-generic. |
| Swivel Beauty | Warm earth / tan | Marketplace-first, consumer soft, directory navigation | Plum signals a precision tool, not a marketplace. More technical authority, less browse-and-scroll. |
| Parfait | App-pastel / pink | Consumer-soft, playful, app-store aesthetic | Darker, more professional. Builds stylist trust before consumer delight. Plum with warm gold is grown-up where Parfait is playful. |
| HairHunt | Minimal dark / neutral | Dev-aesthetic, directory feel, sparse | Richer brand story. Plum creates presence and warmth that HairHunt's neutral palette entirely lacks. |
| Avalon | Avalon Plum | Precision visualization tool. Technically credible, culturally warm. | Warm plum on warm espresso - no cold tech-grey in the palette. Gold secondary adds heritage warmth no pure-tech competitor has. |
Gold as secondary - the rationale
The Black hair care market speaks gold and earth. Wealth, heritage, and premium-tier signals in this space are gold-adjacent - from product packaging to salon environments. Avalon uses plum as its precision anchor and gold as a warmth signal. The warm espresso and cream backgrounds reinforce the cultural warmth throughout - the entire palette breathes differently from competitors. Gold appears in highlights, premium badges, secondary CTAs, and pricing callouts - never as a competing primary action color.