Semantic Color Tokens
Name colours by the job they do, so changing a theme is one edit rather than a sweep.
What it adds
A vocabulary of role-named colour tokens — surface, text, border, accent, danger, success — that components reference instead of literal values.
What your agent is told to do
5
What your agent is told to do
5-
1
Inventory every literal colour value in the codebase and group them by the job they are doing rather than by the shade they happen to be. Two different greys used as card backgrounds are one role; the same grey used as a background and as a border is two.
-
2
Define the role names once and map each role to a value per theme. A role may resolve to a light grey in one theme and a near-black in another; what must not change is which components reference it.
-
3
Stop shared components accepting raw colour values. A primitive that takes a hex string as a prop guarantees that some product screen will hardcode a colour the themes never learn about.
-
4
Separate decorative colour from semantic colour explicitly — a chart series, an avatar fallback, and a category tag are decorative and may cycle freely, while danger and success carry meaning and must never be reassigned for visual variety.
-
5
Migrate the legacy palette names through an alias layer that maps each old name to its new role, mark the aliases deprecated, and remove them once usage reaches zero. Do not rename in place across the codebase in one commit; anything you miss fails silently as an unresolved variable.
Edge cases it handles
7
Edge cases it handles
7- A role must map to a different value in each theme, and the mapping must be complete — a role defined only for light mode leaves components with an unresolved value in dark mode, which usually renders as fully transparent or as the inherited parent colour.
- Shared components must reject raw hex values outright rather than passing them through, because a single accepted literal is invisible to every theme that follows.
- Decorative colour and semantic colour must stay separate. Reusing the danger token as the sixth chart series means a routine chart makes users read failure into ordinary data.
- Legacy palette names have to be migrated through an alias layer with a deprecation window, since a direct rename breaks any reference the search missed and does so without an error.
- Roles proliferate quietly. Without a rule for when a new role is justified, the set drifts into forty near-identical names and the abstraction stops paying for itself.
- Third-party and embedded UI will not honour the tokens; decide whether to theme it through its own configuration or accept that it looks foreign, but do not fork it.
- The underlying colour space and ramp generation belong to OKLCH Theme Tokens — this brief owns only the names and the per-theme mapping, and must not restate the maths.
Definition of done
8
Definition of done
8- No shared component contains a literal colour value.
- Every role resolves to a defined value in every theme, with no unresolved references.
- Decorative and semantic colours are separately named and separately governed.
- Legacy palette names resolve through documented aliases marked as deprecated.
- A theme change requires editing the role mapping only, not any component.
- The rule for introducing a new role is written down.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Text Measure Guardrails
Text Measure Guardrails
Hold long-form text to a readable line length instead of letting it run the full width.
What it does
A maximum measure applied to the app's prose containers, with named exceptions for content that needs the whole width.
How it works
- 1 Find every surface that renders more than a couple of sentences — help articles, changelog entries, terms pages, long empty-state explanations, in-app announcements — and cap the measure on the text container itself rather than on the page shell.
- 2 Express the cap in units that scale with the type, so a larger heading or a user who has raised their base font size gets a proportionally wider column instead of a cramped four-word line.
- 3 Declare which elements are allowed to break out of the measured column — tables, code blocks, images, video, diagrams, full-bleed callouts — and let them span the container while the paragraphs around them stay narrow.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/text-measure-guardrails
Motion Token System
Motion Token System
Give the app one shared vocabulary of durations and easing curves instead of ad hoc numbers.
What it does
A named set of durations and easing curves, each tied to a category of motion, replacing the timing values scattered through the app's components.
How it works
- 1 Inventory every duration and easing value currently written into the app and group them by what they do: something entering, something leaving, something being emphasised, and something changing size or position.
- 2 Name a small set of durations — roughly instant, quick, standard, and deliberate — and a small set of curves, then map each motion category to a pairing. Four or five of each is enough for an entire product.
- 3 Give entrances and exits different treatment. Something arriving should decelerate into place; something leaving should accelerate away and take less time, because nobody wants to wait for a dismissal.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/motion-token-system
Responsive Grid Tokens
Responsive Grid Tokens
Express columns, gaps, and spans as shared tokens rather than per-component guesses.
What it does
A token set describing column counts, gutters, and span behaviour at each breakpoint, used by every grid in the app.
How it works
- 1 Find the grids already in the app — card lists, dashboards, form layouts, media galleries — and record how many columns each uses at each size. The reconciled set is normally three or four column counts, not one per screen.
- 2 Define gutters from the spacing scale rather than inventing grid-specific values, so the gap between cards matches the rhythm of everything around them.
- 3 Express spans in tokens tied to the column count, so a component asking for half a row keeps working when the row drops from four columns to two instead of overflowing.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/responsive-grid-tokens
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.