Design System
Colors
Complete color system for the YaVendio Design System
The YaVendio color palette provides consistency, accessibility, and visual appeal across all components.
Primary Colors
Plum (Brand Color)
The primary brand color used for main actions and key UI elements.
100#e5dcef
200#ab84c8
300#8d3f87
400#6a2f65
500#31162f
| Token | HEX | Usage |
|---|---|---|
--ya-plum-100 | #e5dcef | Light backgrounds, hover states |
--ya-plum-200 | #ab84c8 | Secondary accents |
--ya-plum-300 | #8d3f87 | Primary brand color |
--ya-plum-400 | #6a2f65 | Pressed states, dark accents |
--ya-plum-500 | #31162f | Darkest variant, shadows |
Indigo (Yago)
Complementary accent for Yago-related elements.
100#edf1f8
200#b6c0e2
300#6d81c5
400#3a4e92
500#2a396b
| Token | HEX | Usage |
|---|---|---|
--ya-indigo-100 | #edf1f8 | Light backgrounds |
--ya-indigo-200 | #b6c0e2 | Secondary backgrounds |
--ya-indigo-300 | #6d81c5 | Accent elements |
--ya-indigo-400 | #3a4e92 | Primary Indigo |
--ya-indigo-500 | #2a396b | Dark Indigo |
Secondary Colors
Yellow
Used for highlights, accents, and primary button borders.
100#fbf8d2
200#f7f2a1
300#f4ec7a
| Token | HEX | Usage |
|---|---|---|
--ya-yellow-100 | #fbf8d2 | Light backgrounds |
--ya-yellow-200 | #f7f2a1 | Medium accents |
--ya-yellow-300 | #f4ec7a | Primary accent, button borders |
Semantic Colors
Colors that communicate meaning and status.
| Group | Dark | Medium | Light |
|---|---|---|---|
| Purple | #5955a7 | #e2e7fc | #f0f3fe |
| Teal | #37626d | #d9f8fd | #ecfcfe |
| Violet | #7e22ce | #f3e8ff | #faf5ff |
| Sienna | #8e422b | #fdeed9 | #fff6e8 |
| Forest | #396244 | #e2fbe8 | #f2fff5 |
| Olive | #596b34 | #effcd1 | #f8ffe8 |
| Caramel | #7d5224 | #fdf9ca | #fff9d8 |
| Red Clay | #8a4b46 | #f8e3e2 | #fceeee |
Pill Badge Colors
Soft#d4a5d1
Light#b67db2
Default#8d3f87
| Token | HEX | Usage |
|---|---|---|
--ya-pill-soft-plum | #d4a5d1 | Soft badges, subtle states |
--ya-pill-light-plum | #b67db2 | Light badges |
--ya-pill-plum | var(--ya-plum-300) | Primary badges |
| Token | Value | Description |
|---|---|---|
--ya-pill-soft-plum | var(--ya-plum-400) | #6a2f65 for subtle dark pills |
--ya-pill-light-plum | var(--ya-plum-300) | #8d3f87 for light dark pills |
--ya-pill-plum | var(--ya-plum-200) | #ab84c8 for max contrast |
Neutral Scale (Stone)
50
100
200
300
400
500
600
700
800
900
950
| Token | HEX | Usage |
|---|---|---|
--ya-stone-50 | #fafaf9 | Lightest background |
--ya-stone-100 | #f5f5f4 | Light background |
--ya-stone-200 | #e7e5e4 | Borders, dividers |
--ya-stone-300 | #d6d3d1 | Disabled states |
--ya-stone-400 | #a8a29e | Placeholder text |
--ya-stone-500 | #78716c | Secondary text |
--ya-stone-600 | #57534e | Neutral dark 100 |
--ya-stone-700 | #44403c | Neutral dark 200 |
--ya-stone-800 | #292524 | Secondary button bg |
--ya-stone-900 | #1c1917 | Text |
--ya-stone-950 | #0c0a09 | Darkest background |
Usage
Use shadcn standard classes for automatic theming:
// Automatically uses --primary
<button className="bg-primary text-primary-foreground">
Primary Action
</button>
// Automatically uses --secondary
<div className="bg-secondary text-secondary-foreground">
Secondary Background
</div>
// Automatically uses --destructive
<span className="text-destructive">
Error Message
</span>Benefits: Works with any shadcn theme, easy to rebrand.
Use YA brand colors directly for specific design needs:
// Use specific plum shade
<div className="bg-[var(--ya-plum-300)] text-white">
Brand Plum Background
</div>
// Use stone for custom neutrals
<div className="border-[var(--ya-stone-300)] bg-[var(--ya-stone-50)]">
Custom Neutral Card
</div>
// Use yellow accent
<div className="ring-2 ring-[var(--ya-yellow-300)]">
Yellow Ring
</div>Use case: When you need exact brand colors regardless of theme.
Use semantic colors for status and categorization:
// Success state
<div className="bg-[var(--ya-forest-light)] text-[var(--ya-forest-dark)]">
Success Message
</div>
// Warning state
<div className="bg-[var(--ya-caramel-light)] text-[var(--ya-caramel-dark)]">
Warning Alert
</div>
// Info state
<div className="bg-[var(--ya-teal-light)] text-[var(--ya-teal-dark)]">
Information Banner
</div>Use case: Status messages, badges, alerts.
Color Architecture
flowchart TD
Primitives["Brand Primitives<br/>--ya-plum-300<br/>--ya-stone-100"] --> Shadcn["Shadcn Variables<br/>--primary<br/>--secondary"]
Shadcn --> Components["Components<br/>bg-primary<br/>text-secondary"]
Primitives -.->|"Direct usage"| Custom["Custom Elements<br/>bg-[var(--ya-plum-300)]"]Two ways to use colors:
- Via shadcn variables (recommended) —
bg-primary,text-secondary - Direct primitives (advanced) —
bg-[var(--ya-plum-300)]