Colorway

One named color variant of a design that is otherwise identical: same shoe, same layout, different colors.

color optionthe same design in different colorscolor waycolourwaycolor variantdifferent color versions of the same productthe sneaker color namesrecolor of the same design

See it

Live demo coming soon

What it is

A colorway is one named color variant of a design that is otherwise identical. Same pattern, same silhouette, same layout, different color assignments. The word comes from textiles, where a single print was sold in several color combinations, and it now runs through sneakers (the Jordan 1 'Bred' and 'Royal' are the same shoe), keycap sets, toys, and product photography.

The useful part of the word is that a colorway names the whole combination, not one color. 'Bred' is black plus red plus the exact places each one lands. In UI work, a colorway is what you get when you swap the values behind semantic roles (surface, ink, accent, muted) and touch nothing else, which is why themes and colorways are the same mechanism wearing different clothes.

Gotcha: colorways only stay cheap if the design never hardcodes a hex. One raw #3b82f6 buried in a component and every variant needs manual surgery. The other trap is value contrast drifting between variants: a light colorway and a dark one can use the same roles and still fail readability, so run each one through a grayscale check instead of approving the set from a single hero shot.

Ask AI for it

Produce four colorways of this component. Keep every shape, size, spacing, and type treatment identical and change only the color assignments. Define each colorway as a token map with the same four roles (surface, ink, accent, muted) so they are drop-in swappable, give each one a short evocative name, and hold value contrast constant across all four so they read the same way in grayscale.

You might have meant

semantic color rolescolor palette color schememonochromaticaccent colorhue rotation