Color
Download Color SwatchesProduct.ai is fundamentally monochromatic. We use restraint as strategy — letting Zinc neutrals do the heavy lifting while Axi Violet delivers precision emphasis.
Intelligent Restraint
Product.ai is fundamentally monochromatic. We use Zinc as our neutral foundation — true neutral grays with zero color bias. This neutrality makes Axi Violet vibrate when we use it. The restraint is the strategy.
The Three-Layer Architecture: Layer 1 is the Zinc neutral field — the monochrome canvas that dominates every surface (90%+ of all pixels). Layer 2 is Axi Violet — the singular signal for intelligence, verification, and action (≤5% of visible screen area). Layer 3 is the UI signal palette — functional status colors (Green, Amber, Red, Blue, Pink) that are even more restricted than violet and governed by a 5-tier token system. No signal color may ever appear brighter than violet. If everything is purple, nothing is. Violet becomes powerful through scarcity.
Meet Axi Violet
Our electric signal for intelligence. High-voltage and razor-precise. Use it surgically and strategically — never overwhelming.
Axi Violet
#8B5CF6
RGB 139, 92, 246
The primary brand color. Reserved for moments of intelligence, verification, and action. It should feel like a precise signal, not ambient decoration.
Where to Use
Hero labels, section diamonds, live indicators, interactive states, key CTAs, status confirmations, AI-powered features
How Much
Artful and intentional. Should feel like strategic emphasis, not decoration. When violet appears, it should mean something.
Violet Token Tiers
Reading the tiers: Vivid is the workhorse — the brand color at full chroma, used for text, labels, and feature callouts on dark surfaces. Base steps down for borders and secondary indicators. Muted handles illustration fills and de-emphasized states. Dim is for container backgrounds and section tints — never for text. Surface is nearly invisible — a near-black canvas that whispers violet without declaring it. Click any swatch to copy its hex value.
Source: All values pulled directly from JP's violet ramp. Vivid = violet-500 (#8B5CF6), Base = violet-700 (#7441DA), Muted = violet-800 (#5A17B7), Dim = violet-900 (#2A016E), Surface = violet-950 (#130134). No off-ramp or hand-mixed values — every tier comes directly from JP's ramps.
The Neutral Foundation
True neutral grays with zero color bias. Unlike blue-tinted grays, Zinc provides better contrast and allows Axi Violet to appear more vibrant. This is where most of your UI lives.
Adaptive Palette
We primarily use dark mode, but light mode follows the same restraint principles. Axi Violet remains consistent across both — it's our constant signal.
Dark Mode
Zinc-950, Zinc-900 backgrounds
Zinc-100, Zinc-200 text
Axi Violet for emphasis
Light Mode
Zinc-50, Zinc-100 backgrounds
Zinc-900, Black text
Axi Violet for emphasis
Surfaces
Brand cards and panels use a glass treatment — a faint tint with a thin translucent lit-edge, never a heavy saturated fill. The values are pre-baked, so they stay crisp on any background.
A whisper of violet on a near-black card with a soft lit edge — for brand and AI-flavored panels.
A plain zinc card with a translucent lit edge (white at ~6%) — the default for most surfaces.
Success / warning / error colors are product-UI only — they live in the product design system, not the brand kit. Brand surfaces stay Zinc + Axi Violet. The one exception is a small functional status dot (e.g. "API: Live"), always paired with a text label.
Contrast & Legibility
All text must meet WCAG AA minimum: 4.5:1 for body text, 3:1 for large text. These combinations have been tested.
✓ Passing Combinations
✗ Failing Combinations
Do's and Don'ts
Color should clarify, not decorate. Every color decision must map to a semantic function — if it doesn't mean something, it shouldn't be there.
✓ Do
Use Axi Violet as the singular chromatic accent — action fills, AI-verified indicators, interactive focus rings
Keep violet to ≤5% of visible screen area — it's a scalpel, not a paintbrush
Build surfaces entirely from the Zinc neutral palette — Zinc is the canvas, not the accent
Use signal colors only for functional status — badge text, severity indicators, delta values
Apply signal backgrounds as 6–8% tints via color-mix(), never solid fills
Always pair a signal color with a text label — color alone is not accessible
Reference the 5-tier token system (Vivid → Base → Muted → Dim → Surface) for every signal color use
✗ Don't
Let any status color appear brighter or more prominent than Axi Violet — the brand accent must always dominate the chromatic hierarchy
Use violet as a surface or background fill — it is reserved for signals, not canvases
Apply signal colors to card backgrounds, sidebar accents, nav/footer elements, or section headers
Stack multiple status colors on the same element or card — one signal per component
Use signal colors on marketing pages unless depicting an actual UI element with functional necessity
Use raw hex values — always reference the token system (signal-success-vivid, signal-error-base, etc.)
Introduce any color outside the defined spectrums (Green, Amber, Red, Blue, Pink, Purple, Zinc) — there are no other colors in this system