# violet-chaton v2 — Palette Reference

> Mitsuri Kanroji inspired gradient magenta → green
> Created by Tetardtek — 2026

## Colors

### Backgrounds
| Name | Hex | Usage |
|------|-----|-------|
| crust | `#1a0e27` | Deepest background, panels heavy glass |
| base | `#261537` | Primary background, bar glass |
| mantle | `#341c4a` | Elevated surfaces |
| surface0 | `#3d2454` | Input backgrounds, troughs |
| surface1 | `#493161` | Hover states, subtle borders |
| surface2 | `#5a3875` | Active states, dividers |

### Accents
| Name | Hex | Usage |
|------|-----|-------|
| magenta | `#ff4da6` | Primary accent — clock, battery, volume, borders, heartbeat |
| lilac | `#c9a0ff` | Secondary accent — hover states, media, brain panel |
| mitsuri | `#9adba8` | Green pastel — charging state, success, health good |
| lavande | `#a4b4ff` | Blue-violet — date, CPU, network, info states |
| champagne | `#e8c87a` | Warm gold — warnings, session info |
| danger | `#f25c7a` | Red-pink — errors, low battery, disconnected |

### Text
| Name | Hex | Usage |
|------|-----|-------|
| text | `#f0eaf8` | Primary text |
| subtext1 | `#c4b8d4` | Secondary text, todo items |
| subtext0 | `#9a8fad` | Tertiary text |
| muted | `#716686` | Disabled, placeholders, empty states |

## Font
- **Primary**: Maple Mono NF (cursive italics)
- **Size**: 13px bold (bar), 14px 900 (clock, prompt)
- **Icons**: Nerd Font glyphs from Maple Mono NF

## Signature Visual Elements
- Glassmorphism: `rgba(38, 21, 55, 0.88)` (base @ 88%)
- Heavy glass: `rgba(26, 14, 39, 0.94)` (crust @ 94%)
- Border accent: `3px solid rgba(255, 77, 166, 0.60)` (magenta @ 60%)
- Hover glow: `box-shadow: 0 4px 28px rgba(201, 160, 255, 0.18)` (lilac @ 18%)
- Gradient progress: `linear-gradient(to right, magenta, lilac, lavande, mitsuri)`
- Heartbeat: gradient `magenta 0% → magenta 60% → lilac 80% → magenta 60% → magenta 0%`
- Border radius: 14px (pills), 8px (buttons)

## SCSS Variables
```scss
$crust:     #1a0e27;
$base:      #261537;
$mantle:    #341c4a;
$surface0:  #3d2454;
$surface1:  #493161;
$surface2:  #5a3875;
$magenta:   #ff4da6;
$lilac:     #c9a0ff;
$mitsuri:   #9adba8;
$lavande:   #a4b4ff;
$champagne: #e8c87a;
$danger:    #f25c7a;
$text:      #f0eaf8;
$subtext1:  #c4b8d4;
$subtext0:  #9a8fad;
$muted:     #716686;
```