Colors
The Adside brand palette (claude/brand.md) and the semantic Tailwind tokens it maps to in @repo/tailwind-config/themes.css. Always use the semantic tokens in app code — never raw colors like text-blue-500.
Primary colors
The entire expressive palette is four colors (brand deck P.10): Blue 1, Blue 2, Pink, Bordeau. Every chip, button, and chart series pairs them — blue/sky, sky/blue, pink/bordeaux, bordeaux/pink. Flat fills, never gradients.
Blue 1#0144F5Electric blue — the brand
Blue 2#A8E1F8Pale sky
Pink#FFD5F3Brand pink
Bordeau#390507Bordeaux ground
Neutrals & functional
Ink over a warm-gray ramp, plus the functional hover blue and delta green/red. These are ours — defined for app legibility, not part of the brand's expressive palette.
ink#0C0C0CHeadings, dark grounds
blue-1-700#013BD1Hover/pressed blue
gray-800#3A3C40Body text
gray-600#65676BSecondary text
gray-500#858686Muted text
gray-300#DDDDDFStandard borders
gray-200#E6E7EBHairline borders
gray-100#F3F4F6Input fills
gray-50#FAFAFAPage tint
success#14B562Positive deltas
danger#EA4242Negative deltas
Surfaces
White cards on a near-white page. Structure comes from hairline borders and soft blue-violet shadows.
--bg-default—White — cards, active surfaces
bg-bg-default--bg-muted—Gray-50 — page base
bg-bg-muted--bg-subtle—Gray-100 — fills, secondary surfaces
bg-bg-subtle--bg-emphasis—Gray-200 — section backgrounds
bg-bg-emphasis--bg-inverted—Ink — inverted surfaces
bg-bg-invertedBrand
Electric blue for primary CTAs, links, and brand accents.
--bg-brand—Electric blue — primary CTAs
bg-bg-brand--content-on-brand—Text on brand surfaces
text-content-on-brand--content-brand—Blue as text — links, accents
text-content-brandAccents
The brand pairings as tokens: sky/blue, pink/bordeaux, bordeaux/pink. Not for primary CTAs.
--bg-accent-secondary—Pale sky — chips, chart fills, highlights
bg-bg-accent-secondary--content-accent-secondary—Blue-1 text on the sky surface
text-content-accent-secondary--bg-accent-pink—Brand pink — secondary buttons
bg-bg-accent-pink--content-accent-pink—Bordeaux ink on pink
text-content-accent-pink--bg-accent-bordeaux—Bordeaux ground — dark buttons/pills
bg-bg-accent-bordeaux--content-accent-bordeaux—Pink type on bordeaux
text-content-accent-bordeauxStatus backgrounds
Subtle tinted surfaces for info, success, warning, error — matching the brand status-chip system.
--bg-info—Informational surfaces — blue tint
bg-bg-info--bg-success—Success states — green tint
bg-bg-success--bg-attention—Warning / learning states
bg-bg-attention--bg-error—Error states — red tint
bg-bg-errorStatus content
Pair with the matching status background.
--content-info—Info text — blue-1-700
text-content-info--content-success—Success text
text-content-success--content-attention—Warning text
text-content-attention--content-error—Error text
text-content-errorBorders
Hairline gray-200 on cards; gray-300 for standard borders and outline buttons.
--border-muted—Faintest divider
border-border-muted--border-subtle—Gray-200 — card hairlines
border-border-subtle--border-default—Gray-300 — standard borders
border-border-default--border-emphasis—Stronger borders
border-border-emphasisText
Ink headings over a warm-gray hierarchy. Body text is content-default.
--content-muted—Very light text
text-content-muted--content-subtle—Secondary text
text-content-subtle--content-default—Body text
text-content-default--content-emphasis—Ink — headings
text-content-emphasis--content-inverted—Text on inverted surfaces
text-content-inverted