Component design: the Rule of 3

The problem

When a component is first built, the design system team cannot see every situation it will need to handle. Usually, one feature starts the work. Deadlines are short, so translation, browser zoom, and future needs are often left for later.

When ‘later’ finally comes, the component might need a new action, a menu, code changes, a longer label, or more images. These changes can break the code or the Figma design. Other teams must fix these problems, even if they did not cause them.

The Rule of 3

The Rule of 3 is a quick exercise that helps you find these problems before you ship a component. Triple three things:

1. Three times the copy: Replace every text layer with capital W’s—three for each original character, plus two more. W is the widest letter. This helps test for long translations, larger text, and long labels.
2. Three times the functions: Add three times more actions, buttons, and links. This is to decide how the component will handle these extra items and ensure it will be accessible for reflow size increases (WCAG 1.4.10).
3. Three times the content: Make three times more of every content type, like images, tags, paragraphs, and icons. Decide what should wrap to a new line, what should have a limit, and what should show a “view more” option.

What you get when you’ve done it:

• It works across different screen sizes and devices, and with browser zoom.
• It has space for translations, where text can be longer or shorter.
• Flexibility for additional use cases, with more functions and controls over time

The rest of this guide walks through the Rule of 3 using two real components from this site, step by step, starting with CaseStudyCard and then DisplayControls.

---

Worked example A — CaseStudyCard

CaseStudyCard is the card you see on the homepage and the case studies index. It comes in featured and secondary versions and includes a cover plate or image, title, description, tag list, year, and an optional stats row.

Rule 1 — Three times the copy

The steps:

1. Count the characters in the original string, including spaces.
2. Replace the string with capital W’s: one per character.
3. Triple the count.
4. Add two more W’s.
5. Redesign anything that now breaks.

Step	Layer	Working
1. Count	Title "Sample featured case study"	26 characters incl. spaces
2. W’s	Title	one W per character
3. Triple	Title	78 W’s
4. +2	Title	(3 × 26) + 2 = 80 W’s
1. Count	Description	86 characters incl. spaces
4. +2	Description	(3 × 86) + 2 = 260 W’s
1. Count	Tag "Design systems"	14 characters
4. +2	Tag	44 W’s
1. Count	Tag "Strategy"	8 characters
4. +2	Tag	26 W’s

Step 5 — drop the W-strings back into the same component:

You’ll see the decisions right away. Does the title stop at two lines with an ellipsis, or does the card get taller? The tag list might wrap onto more rows — should it have a maximum and show +N more? If the description pushes the cover plate out of alignment, is that okay, or should it be limited?

Rule 2 — Three times the functions

The steps:

1. Count every action, button and link inside the component.
2. Triple the count.
3. Decide how the component handles the overflow.

The card currently uses a single <a> to wrap the whole block.

Step	Action	Working
1. Count	Whole-card link	1 action
2. Triple	—	3 actions
3. Redesign	”Open”, “Save”, “Share”	Adding a button inside <a> creates a nested interactive — invalid HTML and broken keyboard/AT semantics

Step 3 helps you make a structural decision before you’re under deadline pressure. The card can either be a link or have inline actions, but not both. Usually, the title is a link, and there’s an action row below.

Rule 3 — Three times the content

The steps:

1. Count every content slot — images, tags, paragraphs, icons, stats, repeating children.
2. Triple each count.
3. Redesign using wrap rules, limits, or “view more” options. Some slots can easily handle tripling, but others should have a cap.

Step	Slot	Working
1. Count	Cover plate / image	1
2. Triple	Cover plate / image	3 — but the card has one hero slot; cap at 1
1. Count	Description	1
2. Triple	Description	3 — clamp at 3 lines or accept the height
1. Count	Tags	2
2. Triple	Tags	6 — wrap, or +N more chip
1. Count	Stats	4
2. Triple	Stats	12 — wrap to multiple rows, or cap at 4

Step 3 — push the multiplied content back into the same component:

The image slot shows why limits matter: adding a second main image would make the card harder to scan, so the rule is simple — one image only. The tag list and stats grid each need a clear overflow plan. Tripling the description breaks the vertical rhythm.

---

Worked example B — DisplayControls

DisplayControls is the segmented control used in the homepage Display Settings panel and the theme drawer. Two fieldsets: Contrast (4 options) and Colour mode (3 options), plus an aria-live line reporting the active state.

Rule 1 — Three times the copy

The component’s options are hardcoded, so the demos below use the same markup with tripled labels rather than changing the component itself. The CSS stays the same, so any layout problems you see are real.

Step	Layer	Working
1. Count	"Low"	3
4. +2	"Low"	11 W’s
1. Count	"High -beta"	10
4. +2	"High -beta"	32 W’s
1. Count	"Decorative - beta"	17
4. +2	"Decorative - beta"	53 W’s
1. Count	"System"	6
4. +2	"System"	20 W’s
1. Count	Live region "Currently: low"	14
4. +2	Live region	44 W’s

Step 5 — push the W-strings into the markup:

You’ll notice the questions before you even touch the code. Does the chip row scroll, wrap, or move extra items into a “More” menu? Does the live-region line get cut off, wrap, or sit next to the legend instead of below it? Define the overflow decision for each part.

Rule 2 — Three times the functions

Each option in a segmented group is one action. Contrast has 4; Colour mode has 3 — 7 actions in total.

Step	Group	Working
1. Count	Contrast	4 options
1. Count	Colour mode	3 options
1. Count	Total	7 options
2. Triple	Contrast	12 options
2. Triple	Colour mode	9 options
3. Redesign	Threshold	At what option count does the row stop being segmented and become a dropdown or a “More” menu?

Step 3 — render the same markup with tripled option counts and watch the segmented row break:

Now you have to decide: should the limit be different for each variant, or should there be one rule for the whole component? Tripling makes you answer this early, so if someone wants to add a fifth contrast mode, the component is ready.

Rule 3 — Three times the content

The “content” for DisplayControls is the fieldset count. Two today; tripling implies six.

Step	Slot	Working
1. Count	Fieldsets	2 (Contrast, Colour mode)
2. Triple	Fieldsets	6 — plausible additions: Motion, Density, Text size, Language
3. Redesign	panel	Horizontal row has nowhere to put four more groups — cap at 2 + “More settings…” link, or stop being a panel above the threshold
3. Redesign	drawer	Add scroll, or section dividers with headings

Step 3 — render the same markup with six fieldsets:

In the drawer, the column just gets longer, which you can handle with a scroll area or section headings. In the panel, six fieldsets don’t fit, so you need a structural change: limit the panel and link to a more complete settings page.

---

When to set limits

Not every slot can handle tripling well. Some have a usability limit — a card with five main images is harder to scan than one with just one. Sometimes, the result of the content rule is a limit: a clear “this slot accepts at most N” rule in the component’s documentation. Set the overflow decision as a cap when needed. Setting a cap is a valid outcome, not a failure.

What you get

A component designed with the Rule of 3 supports:

• Responsiveness across viewport sizes, devices and browser zoom
• Multiple languages, where copy lengths vary
• Flexibility for additional use cases, supporting more functions and controls over time

When I first used this approach, components lasted much longer before needing major changes, and teams no longer had to wait for translated copy to spot layout problems. It takes about an afternoon per component up front, but saves months of refactoring and keeps the system stable as teams add new use cases.

Get the skill

The Rule of 3 is also available as a Claude skill that runs the exercise live in Figma. It checks the connection, guides you through which variants to test, and creates three sections in the file (Copy, Functions, Content) filled with stressed examples.

Get the skill on GitHub