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.
Midnight Violet anchors dark surfaces. Electric Violet is the primary accent for borders, links, stat highlights, and interactive elements.
Reserved exclusively for functional callouts. Never use semantic colours decoratively.
A six-colour sequence optimised for data visualisation contrast and accessibility. Use in this order for multi-series charts.
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;
}