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
UI Color Palette
Product.ai's product interfaces use a strictly governed set of semantic signal colors for status, alerts, and system feedback. These colors exist within a 5-tier token system and are bound by a hard luminance ceiling — no signal color may ever appear more prominent than Axi Violet.
⚠ The Luminance Ceiling — Hard Constraint
No UI status color may be perceptually brighter than Axi Violet (#8B5CF6). If a status color appears more prominent than the brand accent, it steals the visual hierarchy. The brand color must always be the brightest chromatic element on screen. This is not a guideline — it is a hard constraint.
The 5-Tier Token System
Each functional color spectrum (Green, Amber, Red, Blue, Pink) is divided into five applied tiers — all values pulled directly from JP's ramps. Every use of a signal color must reference a specific tier — never a raw hex value.
Badge text, chip labels, data values, status indicators (300–400 ramp step). The strongest applied expression — carries the primary signal on dark surfaces.
Borders, secondary indicators, condition box accents (600–700 ramp step). Clearly dimmer than Vivid, still chromatic.
Illustration fills, chart areas, de-emphasized data, disabled states (800 ramp step). Readable but restrained.
Container backgrounds, section tints, visual separators (900 ramp step). Not for text — solid hex only, no alpha.
Near-black tinted background (950 ramp step). The deepest tier — a whisper of hue for status containers.
Signal Color Spectrums
Each signal color has a documented Origin (peak-chroma ancestor, not applied directly) and five applied tiers — all values pulled directly from JP's color ramps. No hand-mixed or off-ramp values. Click any swatch to copy its hex value.
Reading the grid: Origin ⊘ is the peak-chroma ancestor — the identity source for each ramp. Never applied in design. Vivid (strongest) carries the primary signal — badge text, data values, chip labels. Base is for borders and secondary indicators. Muted (800) handles illustration fills and de-emphasized states. Dim (900) is for container backgrounds — solid hex only, no alpha. Surface (rightmost) is near-black with a whisper of hue. All values come directly from JP's ramps.
Application Pattern
Signal colors follow strict rules about where and how they may appear. Text carries the color signal; surfaces stay neutral.
Text: Vivid tier — badge labels, data values, chip text
Borders / indicators: Base tier — borders, line indicators, subtle accents
Fills / illustrations: Muted tier (800) — chart areas, de-emphasized fills
Containers: Dim tier (900) — solid hex, no alpha or color-mix()
Card surfaces: Always stay neutral zinc — never tinted with status color
Full card backgrounds or surface fills
Sidebar accents or navigation elements
Body paragraph text or section headers
Nav, footer, or structural UI chrome
Multiple status colors on the same element
Signal Color Examples
Applying the 5-tier system correctly — what each tier is for and what to avoid.
Usage Context — Brand vs. Product
These signal colors apply within product UI and in brand illustrations that depict UI mockups. When creating marketing materials, presentations, or brand collateral that show Product.ai interfaces, use these colors to ensure accuracy. On marketing pages, signal colors are not used by default — the only accent is Axi Violet + Zinc. Narrow exceptions require functional necessity, a real UI element being depicted, and pairing 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