Border System
Give borders defined jobs so structure, focus, and selection never look the same.
What it adds
A set of border tokens covering structural dividers, interactive outlines, focus rings, selection, and error emphasis.
What your agent is told to do
5
What your agent is told to do
5-
1
Audit every border in the app and sort it into one of a few jobs: separating content, outlining a control, marking focus, marking selection, or signalling an error. Anything that does not fit a job is decoration that should be removed rather than tokenised.
-
2
Keep structural borders and interactive borders visually distinct. A divider between table rows and the outline of a text input should not share a colour, or users will read inert content as clickable.
-
3
Define focus separately from selection and from hover. Focus follows the keyboard, selection follows intent, and a control that is both focused and selected must show both without one hiding the other.
-
4
Give the dark theme its own border values. A border that reads as a subtle grey on white becomes invisible on a near-black surface, and raising its opacity is not the same as picking the right colour.
-
5
Do not use a border token to imply elevation or stacking order. Boundaries are this feature's job, elevation belongs to Shadow Scale, and paint order belongs to Elevation Layer Map.
Edge cases it handles
7
Edge cases it handles
7- Decorative dividers and interactive outlines must remain separable at a glance, otherwise a non-clickable panel edge is mistaken for a control and a real control loses its affordance.
- Subtle borders that work on a light background disappear on dark surfaces, so each token needs a dark-theme value chosen against the actual surface it will sit on, not derived by inverting the light one.
- Nesting a bordered component inside a bordered container produces a doubled two-pixel line at the shared edge. Decide which layer owns the boundary and have the inner element drop its border or collapse into the outer one.
- Hairline borders at high device pixel ratios round unpredictably and can render at zero width on some rows and full width on others, producing a striped table. Use a technique that survives fractional scaling rather than a fixed sub-pixel value.
- Focus rings must not be clipped by an ancestor that hides overflow, and must retain contrast against both the component and the page behind it.
- A border used to signal an error must not be the only signal, because colour alone fails for users who cannot distinguish it and for forced-colours mode.
- Rounded corners share the border radius scale, so a token change that alters width without accounting for radius will leave visible gaps at the corners of nested elements.
Definition of done
8
Definition of done
8- Every border in the app resolves to a token with a named job.
- Structural, interactive, focus, selection, and error borders are visually distinct from one another.
- Each token has a dark-theme value verified against the surface it appears on.
- No nested component renders a doubled border at a shared edge.
- Hairline borders render at consistent width across device pixel ratios.
- Focus rings are visible on every interactive element and are never clipped by an ancestor.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Semantic Color Tokens
Semantic Color Tokens
Name colours by the job they do, so changing a theme is one edit rather than a sweep.
What it does
A vocabulary of role-named colour tokens — surface, text, border, accent, danger, success — that components reference instead of literal values.
How it works
- 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.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/semantic-color-tokens
Container Width System
Container Width System
Give pages a few defined widths instead of a different max-width on every screen.
What it does
A small set of named page widths — narrow, standard, wide, and full-bleed — applied consistently across the app.
How it works
- 1 Measure the max-width used on every top-level page and group them. Settings forms, prose, dashboards, and data tables usually want three or four distinct widths between them, not the eleven the codebase currently has.
- 2 Pick each width from the content it holds. A reading column is bounded by comfortable line length, a settings form by field width, and a table by the number of columns that must stay visible.
- 3 Make horizontal page padding part of the container rather than something each page adds, so content never touches the viewport edge on a narrow screen even at the widest setting.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/container-width-system
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
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.