Design System

Color System

The Bud palette is built on a violet-to-neutral axis. Purple signals innovation and sovereignty. Slate neutrals ground content in seriousness. Semantic colours are reserved strictly for functional meaning.

2.1 Primary Palette

Midnight Violet anchors dark surfaces. Electric Violet is the primary accent for borders, links, stat highlights, and interactive elements.

Midnight Violet #120E1C
Electric Violet #8C33EF
Deep Purple #4C1D95
Royal Violet #6D28D9

2.2 Extended & Neutral Scales

Medium Violet #7C3AED
Soft Violet #A78BFA
Light Violet #EDE9FE
Pale Lavender #F5F3FF
Ink Black #0F172A
Dark Slate #1E293B
Med Slate #475569
Cool Gray #64748B
Silver Gray #94A3B8
Border Gray #E2E8F0
Snow Gray #F1F5F9
Page White #F8FAFC

2.3 Semantic Colors

Reserved exclusively for functional callouts. Never use semantic colours decoratively.

Emerald (Success) #059669
Amber (Warning) #D97706
Coral (Critical) #DC2626
Sky (Info) #0284C7

2.4 Chart & Visualization Palette

A six-colour sequence optimised for data visualisation contrast and accessibility. Use in this order for multi-series charts.

Violet #8C33EF
Indigo #4C1D95
Teal #0D9488
Amber #F59E0B
Rose #F43F5E
Slate #64748B
Snow Gray (bg) #F1F5F9
Border Gray (grid) #E2E8F0

CSS Variables Reference

Copy these CSS custom properties to use the color system in your stylesheets.

:root {
  /* Primary Palette */
  --color-midnight-violet: #120E1C;
  --color-electric-violet: #8C33EF;
  --color-deep-purple: #4C1D95;
  --color-royal-violet: #6D28D9;

  /* Extended Violet Scale */
  --color-medium-violet: #7C3AED;
  --color-soft-violet: #A78BFA;
  --color-light-violet: #EDE9FE;
  --color-pale-lavender: #F5F3FF;

  /* Neutral Scale */
  --color-ink-black: #0F172A;
  --color-dark-slate: #1E293B;
  --color-med-slate: #475569;
  --color-cool-gray: #64748B;
  --color-silver-gray: #94A3B8;
  --color-border-gray: #E2E8F0;
  --color-snow-gray: #F1F5F9;
  --color-page-white: #F8FAFC;

  /* Semantic Colors */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-critical: #DC2626;
  --color-info: #0284C7;

  /* Chart Colors */
  --chart-violet: #8C33EF;
  --chart-indigo: #4C1D95;
  --chart-teal: #0D9488;
  --chart-amber: #F59E0B;
  --chart-rose: #F43F5E;
  --chart-slate: #64748B;
}