Free tool
Build a design system from three colors
This is the method we used for our own site: three colors measured from the logo, each grown into an eleven-step ramp, with fixed roles and checked contrast. Pick your three and take the result as a Tailwind theme and an instruction file for your coding agent.
Bands, highlights and links.
The primary button, and nothing else.
Text and the dark band. Tints the neutrals.
Optional. Written into the files you download.
Your three ramps
Each color you picked is kept exactly, on the step closest to it in lightness. The other ten steps are drawn around it on the same hue.
Brand
The brand color. Hero and closing bands, numerals, highlights. Links and small colored text use 700.
- 50#f1faf3
- 100#dff4e3
- 200#c2e9ca
- 300#9bdbaa
- 400#6ccb86
- 500yours#46ba6c
- 600#1d9c50
- 700#007d3b
- 800#03622d
- 900#064b23
- 950#002d11
Call to action
The primary call to action, and nothing else. One per view.
- 50#fff5f1
- 100#ffe8e0
- 200#ffd2c2
- 300#ffb59a
- 400#ff9067
- 500yours#f57340
- 600#d5561e
- 700#ad3e07
- 800#893106
- 900#6a2507
- 950#411301
Neutral
Text, dark bands and quiet surfaces, tinted toward your ink color.
- 50#fcf9f9
- 100#f5f3f3
- 200#e9e5e5
- 300#d7d3d3
- 400#a9a3a3
- 500#7d7575
- 600#5d5656
- 700#464141
- 800#2e2a2a
- 900yours#201d1d
- 950#110f0f
Contrast check
These are the text and background pairs the sample page below uses, with the contrast measured for your colors.
All 9 pairs pass WCAG AA.
| Pair | Where it is used | Contrast | Result |
|---|---|---|---|
| Sample | Headlines and body on paper | 16.73:1 | Passes AA (4.5:1) |
| Sample | Secondary text on paper | 7.16:1 | Passes AA (4.5:1) |
| Sample | Secondary text on soft bands and cards | 6.48:1 | Passes AA (4.5:1) |
| Sample | Links and eyebrows on paper | 5.25:1 | Passes AA (4.5:1) |
| Sample | Text on the brand band | 6.77:1 | Passes AA (4.5:1) |
| Sample | Label on the call to action button | 5.90:1 | Passes AA (4.5:1) |
| Sample | Text on the ink band | 16.73:1 | Passes AA (4.5:1) |
| Sample | Numerals and eyebrows on the ink band | 8.39:1 | Passes AA (4.5:1) |
| Sample | Card numerals (large only) | 3.21:1 | Passes AA (3:1) |
A page in your colors
Four real sections from our own site library, redrawn with your ramps. This is how the roles look together.
Brand band
Your brand color carries the opening band.
Text on it is your ink color. The one call to action button is the only place its color appears.
Paper
Most of a page is ink on white
Eyebrows and links use a darker step of the brand color, so small colored text stays readable.
Headlines
Set in the darkest neutral, which takes its hue from your ink color.
Secondary text
A mid neutral that still meets the contrast needed for body copy.
Cards
A quiet tint of the neutral ramp, with no border and no shadow.
- Steps in each ramp
- 11
- Colors you pick
- 3
- Contrast for body text
- 4.5:1
- Dark band per page
- 1
The closing band repeats the brand color.
One primary action, in the call to action color, and one quiet alternative.
Take it with you
A Tailwind v4 theme, the same values as JSON, and an instruction file that teaches your coding agent the roles and the pairs that pass.
# My project design system Instructions for an AI coding agent working in this project. Follow them whenever you write or change UI. ## Setup 1. Add the `@theme` block from `theme.css` to the global stylesheet, after `@import 'tailwindcss';` (Tailwind v4). 2. Use the generated utilities (`bg-brand-500`, `text-neutral-900`, `bg-cta-500`). Never write a hex value in a component. 3. If the project does not use Tailwind, define the same names as CSS custom properties and reference those. ## Colors ### Brand (`brand`) The brand color. Hero and closing bands, numerals, highlights. Links and small colored text use 700. - `brand-50`: `#f1faf3` - `brand-100`: `#dff4e3` - `brand-200`: `#c2e9ca` - `brand-300`: `#9bdbaa` - `brand-400`: `#6ccb86` - `brand-500`: `#46ba6c` (the picked color) - `brand-600`: `#1d9c50` - `brand-700`: `#007d3b` - `brand-800`: `#03622d` - `brand-900`: `#064b23` - `brand-950`: `#002d11` ### Call to action (`cta`) The primary call to action, and nothing else. One per view. - `cta-50`: `#fff5f1` - `cta-100`: `#ffe8e0` - `cta-200`: `#ffd2c2` - `cta-300`: `#ffb59a` - `cta-400`: `#ff9067` - `cta-500`: `#f57340` (the picked color) - `cta-600`: `#d5561e` - `cta-700`: `#ad3e07` - `cta-800`: `#893106` - `cta-900`: `#6a2507` - `cta-950`: `#411301` ### Neutral (`neutral`) Text, dark bands and quiet surfaces, tinted toward your ink color. - `neutral-50`: `#fcf9f9` - `neutral-100`: `#f5f3f3` - `neutral-200`: `#e9e5e5` - `neutral-300`: `#d7d3d3` - `neutral-400`: `#a9a3a3` - `neutral-500`: `#7d7575` - `neutral-600`: `#5d5656` - `neutral-700`: `#464141` - `neutral-800`: `#2e2a2a` - `neutral-900`: `#201d1d` (the picked color) - `neutral-950`: `#110f0f` ## Rules - One brand color, one call to action color, one neutral. Do not add a fourth hue. - The call to action color is for the primary action only: one per view. Secondary actions are neutral. - Body text is `neutral-900`. Secondary text is `neutral-600`. Links and small colored text are `brand-700`. - A section sits on one of four backgrounds: white, `neutral-100`, `brand-500`, or `neutral-900`. Use the dark one at most once per page. - Use only the color pairs listed under "Pairs that pass". Before using any other text and background combination, compute its WCAG contrast ratio: normal text needs 4.5:1, large text (24px, or 18.66px bold) and shapes need 3:1. - Do not rely on color alone to carry meaning. ## Pairs that pass | Use | Colors | Contrast | Needs | | --- | --- | --- | --- | | Headlines and body on paper | `#201d1d` on `#ffffff` | 16.73:1 | 4.5:1 | | Secondary text on paper | `#5d5656` on `#ffffff` | 7.16:1 | 4.5:1 | | Secondary text on soft bands and cards | `#5d5656` on `#f5f3f3` | 6.48:1 | 4.5:1 | | Links and eyebrows on paper | `#007d3b` on `#ffffff` | 5.25:1 | 4.5:1 | | Text on the brand band | `#201d1d` on `#46ba6c` | 6.77:1 | 4.5:1 | | Label on the call to action button | `#201d1d` on `#f57340` | 5.90:1 | 4.5:1 | | Text on the ink band | `#ffffff` on `#201d1d` | 16.73:1 | 4.5:1 | | Numerals and eyebrows on the ink band | `#6ccb86` on `#201d1d` | 8.39:1 | 4.5:1 | | Card numerals (large only) | `#1d9c50` on `#f5f3f3` | 3.21:1 | 3:1 | ## Pairs to avoid These fall below WCAG AA with this palette. Do not use them for text. | Use | Colors | Contrast | Needs | | --- | --- | --- | --- | | White text on the brand band | `#ffffff` on `#46ba6c` | 2.47:1 | 4.5:1 | | White text on the call to action button | `#ffffff` on `#f57340` | 2.83:1 | 4.5:1 | Generated at https://www.startupquickstart.com/tools/design-system
How the ramps are made
Each ramp is drawn in the OKLCH color space defined in CSS Color Module Level 4, where equal steps in lightness look equal to the eye whatever the hue. The lightness of every step is fixed, and so is the share of color each step carries. Those two curves were measured from the green, orange and warm black ramps this site runs on.
Your color is never altered. It is placed on the step whose lightness it is closest to, and the other steps take its hue. A dark navy lands near 800 and a pale yellow near 200, so step 500 is always a mid-tone that dark text can sit on.
That is why the roles hold for almost any input. Contrast is measured the way WCAG 2.2 success criterion 1.4.3, Contrast (Minimum) defines it: 4.5:1 for normal text and 3:1 for large text. The table above shows the number for each pair, so you can see it instead of trusting us.
The theme file uses Tailwind CSS theme variables, so the ramps become utilities such as bg-brand-500. The agent file states the roles, the pairs that pass and the pairs to avoid, in a form a coding agent can follow without seeing this page. Everything runs in your browser. The colors you enter are not sent to us.