One color. A whole design system.
Pick a color and watch it become every shade, token, and pattern on this page, live.
A grid that assembles itself
Twenty tile types laid out on a 12×10 unit grid with variable spans. Neighbouring panels negotiate color and pattern so nothing clusters. Select a panel to reroll it, or regenerate the whole composition.
One hex value in. An entire system out.
- 20Tile types
- 3Perceptual ramps
- 59Mapped variables
- 2Themes, auto-paired
- AAWCAG floor
- 1Input
The system
Everything downstream of one decision
Pick a color. Graphite UI derives the ramps, the tokens, the contrast pairings, and the patterns, then keeps them in sync every time you change your mind. Color is the first foundation; the same model extends to layout and components as they ship.
Perceptual ramps
Your source color is resolved in OKLab and sampled at fixed tone stops. Steps read as evenly spaced at any hue: no muddy midtones, no blown-out highs.
Semantic tokens
Ramps resolve into named roles: surface, on-surface, primary, outline. You design against meaning, not hex values, so a color change never means a find-and-replace.
Contrast auto-fix
Every pairing is measured against WCAG 2.1 and walked along its ramp until it passes. Accessibility is a property of the system, not a review step.
Drop-in variables
59 CSS custom properties map onto your existing component library. Point your build at the output and existing UI repaints untouched.
Generative patterns
Twenty tile types on a variable-span grid with neighbour-aware color and layout. Brand imagery that composes itself, exportable at print resolution.
Paired themes
Light and dark are generated together from the same source, so they stay in lockstep. Ship both from day one without maintaining two palettes.
Why it matters
What a generative system buys you
A design system earns its keep when it removes decisions. Graphite UI removes the ones nobody enjoys making twice.
Minutes
From brand color to shipped theme
Skip the week of swatch spreadsheets and contrast spot-checks. Paste a hex, review the output, hand engineering a token file.
100%
Of pairings meet their target
Contrast is enforced when tokens are generated, so accessibility bugs never reach a design review or an audit.
Zero
Rework when the brand changes
Rebranding is one input away. Every ramp, token, theme, and pattern regenerates from the new color in a single pass.
Rules
A machine can actually follow
The system is defined as constraints, not opinions, which is precisely what makes it legible to the agents now assembling interfaces.
FAQ
Questions, answered
How the engine works, what it exports, and where it fits in an existing stack. Anything missing? Ask us.
Three perceptual ramps (accent, neutral, neutral variant), a set of semantic tokens for light and dark, a WCAG contrast report for every pairing, and a generative pattern library, all derived from the single hex you provide.
Each foreground/background pairing is measured against WCAG 2.1. If a pair falls short of its target (4.5:1 for text, 3:1 for UI elements), the foreground is walked along its own ramp until it passes, so the fix stays on-brand.
Yes. Graphite UI exports 59 CSS custom properties, plus raw CSS and JSON for everything else. This entire site is themed through that mapping; try the color control in the header.
Both. Defaults are opinionated so you can ship immediately, and the tone stops, ramp rules, and contrast targets are all exposed when you need the system to match an existing brand exactly.
Brand imagery that scales without a photoshoot: campaign art, empty states, social cards, section dividers. Compositions are generated from your palette and export at 1600 × 900, so no two are alike.
Yes. The color engine and pattern library are MIT licensed, including commercial use. Nothing about the core is gated.
Pick a color. Take the system.
Tell us your email and what you’re building, and we’ll reply with the kit, the token exports.