Design System Playbook
Component showcase for design review. All tokens, patterns, and components used across Astrelor.
Color Palette
Enrico's brand palette (Feb 2026). Clean, minimal — no shadows, subtle borders, gradual contrasts.
Brand Palette (7 colors)
Blackcurrant
--secondary-foreground
#462B55
Lilac Haze
--sidebar-foreground
#B5A1C1
Average Lavender
--accent
#BDA3F8
Pink-Red
--destructive
#EF8392
Rose-Gold
--chart-5
#FFE0D0
American Navy
brand fixed
#012C61
Intense Azure
--primary
#006EE1
Token Mapping
Primary (Azure)
--primary
#006EE1
Accent (Lavender)
--accent
#BDA3F8
Sidebar
--sidebar
adaptive
Foreground
--foreground
adaptive
Background
--background
adaptive
Chart Palette (5 colors)
Intense Azure
--chart-1
#006EE1
Avg Lavender
--chart-2
#BDA3F8
Pink-Red
--chart-3
#EF8392
Blackcurrant
--chart-4
#462B55
Rose-Gold
--chart-5
#FFE0D0
Semantic Colors
Success
--success
green
Warning
--warning
amber
Info
--info
azure
Destructive
--destructive
pink-red
Surface Colors
Card
--card
adaptive
Muted
--muted
adaptive
Secondary
--secondary
lilac tint
Border
--border
subtle lilac
Input
--input
adaptive
Typography
SF Pro (headings & body) + Geist Mono (code). Variable font, all weights.
text-4xl / font-bold
Data Intelligence Platform
text-3xl / font-semibold
Competitive Analysis Dashboard
text-2xl / font-semibold (Page Title)
Organization Insight
text-xl / font-semibold (Section Title)
Audience Segments
text-lg / font-semibold (Card Title)
Spend by Channel
text-base / font-medium (Subtitle)
Interview Analysis
text-sm (Body Text)
Astrelor centralizes marketing data from Vivvix, Semrush, SpyFu, and Resonate into a single intelligence platform with AI-powered analysis.
text-sm / text-muted-foreground (Description)
Upload interview transcripts for AI-powered theme identification and sentiment analysis.
text-xs (Caption / Label)
Last updated 2 hours ago
font-mono / text-sm (Code)
tenant_id: uuid NOT NULL
Animated Numbers (CountUp)
Integer
0
Currency
$0
Badges
Status indicators, labels, and the Tier 2 badge.
Variants
Semantic Badges
Trend Badges
Feature Badges
Data Source Badges
Form Inputs
Text inputs, selects, labels, and form patterns.
This field is required
Cards
Card component with all slot combinations — header, content, footer.
This is the content area of the card component.
$2.4M
+12% from last quarter
Avatars
User avatars with image, initials fallback, and size variants.
sm
md
lg
xl + image
Stacked
Tooltips & Dropdowns
Interactive overlay components.
Tabs
Tab navigation for sectioned content.
Overview tab content — audience summary, key metrics, and segment highlights would appear here.
Loading Skeletons
Placeholder patterns for content loading states.
Page Headers
Reusable page header patterns with title, description, and action slots.
Organization Insight
Interview transcripts, AI-powered analysis, and organizational insights
Clients
Manage client tenants and access
Creative Benchmarking
Empty States
Placeholder content for pages with no data.
No interviews yet
Upload interview transcripts to get AI-powered analysis with key themes, sentiment, and strategic summaries.
Upload TranscriptsNo competitive data
Connect data sources or upload CSV exports from Vivvix, Semrush, or SpyFu to start tracking competitor spend.
KPI Cards
Metric cards with animated counters and trend indicators.
vs last month
this month
new this quarter
vs last month
vs last month
% growth
new this quarter
vs last month
Charts
Recharts wrapped in shadcn ChartContainer — 4 chart types with the 5-color brand palette.
Data Table
Table pattern for lists — clients, interviews, competitors.
| Competitor | Source | Digital Spend | TV Spend | Trend | Actions |
|---|---|---|---|---|---|
| Nike | Vivvix | $4.2M | $8.1M | +15.3% | |
| Adidas | Semrush | $3.8M | $5.4M | +8.7% | |
| Puma | SpyFu | $1.9M | $2.1M | -2.1% | |
| Under Armour | Vivvix | $2.4M | $3.8M | +4.5% | |
| New Balance | Semrush | $1.2M | $1.6M | +22.1% |
Status & Alerts
Inline status messages and alert patterns.
Upload Complete
7 transcripts processed successfully. AI analysis started.
Supabase Not Configured
Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in your .env.local.
Processing Data
Resonate CSV import in progress. 2,340 of 4,280 rows processed.
AI Analysis Failed
Interview #42 could not be processed. Queued for manual review.
Auth Screens
Login, forgot password, and reset password flows. Clean forms on white background, split layout with brand panel.
Sign In
Log in
Supabase Not Configured
Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in your .env.local file.
Route: /login — Email/password. No sign-up (invitation-only). Links to forgot password.
Forgot Password
Enter Your E-mail
Route: /forgot-password — Enter email, receive reset link. Shows confirmation after submit.
Reset Password
Set Up Your New Password
Route: /reset-password — Set new password with confirmation. Shows success state after submit.
Auth Layout (Split Screen)
Log in
Forgot Password?
Full auth layout — split screen with brand logo on left (navy), clean form on white right panel. Mobile shows form only.