Palette — a complete, accessible
design system from one brand idea.
Give Palette a name, a seed color and a vibe. It builds full color scales, semantic roles, a real WCAG contrast audit, type and spacing, and a live component preview — then exports the tokens. The same engine runs in production; here it runs entirely offline, client-side.
Color system
Scales 50 → 900 · HSL-anchored · monotonic luminanceSemantic colors
Role tokens
applied in the component preview belowAccessibility audit real WCAG 2.1 relative-luminance ratios
| Role pair | Foreground | Background | Ratio | Verdict |
|---|
Type scale
Spacing
Radii
Shadows
Live component preview
rendered with the generated tokens — exactly what your users would seeNorthwind
A design system generated from your brand, applied live to real components.
Upgrade your plan
Unlock advanced analytics, unlimited seats and priority support for your whole team.
Export tokens
Copied!Contrast checker
Pick any two colors and get the live WCAG ratio, AA/AAA pass-fail for normal and large text, and a suggested accessible text color — same math as the audit above.
One engine. Client-side here — server-side in production.
Palette converts your seed to HSL, then builds each family — primary, a rotated secondary, an accent, and a desaturated neutral tinted by your hue — as a 50→900 scale at fixed target lightnesses, so luminance steps down monotonically. Semantic colors (success, warning, danger, info) are tuned at readable lightness. It then derives role tokens (bg, surface, text, muted, border, primary, onPrimary, accent), auto-picking text and muted colors that meet WCAG AA against both bg and surface, and choosing the on-primary color by maximum contrast. The contrast audit uses real WCAG 2.1 relative luminance — L = 0.2126·R + 0.7152·G + 0.0722·B on linearized channels — and the exact ratio (L₁+0.05)/(L₂+0.05).
This booth runs that engine in vanilla JavaScript, fully offline — no data leaves the page. In production the identical logic lives in @artai/services-api and runs server-side over the same @artai/design math (colorScale, buildDesignSystem, contrastRatio, reviewBrand), so the tokens you generate here match what the API returns at scale.
/design/systemFull DesignSystem from a brand brief — scales, roles, type, spacing, tokens.
/design/contrastWCAG ratio + AA/AAA verdicts for any foreground/background pair.
/brand/reviewAccessibility audit and score across a set of brand color pairs.
One company, a full stack of engines.
Palette designs the brand, Forge plans the build, ARTAI reads markets, and Pulse & Helpdesk handle customers. Explore the rest of the Smritixs stack — or get the pricing and investor story.