| name | finishing-touches |
| description | Use when a UI is functionally complete but feels generic or unfinished — needs polish before shipping. Covers superchargeable defaults, accent borders, decorated backgrounds, empty-state-as-onboarding, fewer borders, and breaking out of conventional component shapes. |
Finishing Touches
When to use this skill
- The UI works but feels unfinished, generic, or "templated."
- Something is missing but the user can't articulate what.
- A page looks structurally fine but visually flat.
- Empty states are showing literal "No items found." messages.
- Borders are everywhere and the design feels boxy or busy.
- A component (dropdown, table, radio group) is functional but boring.
Core stance
Polish doesn't usually require new elements — it comes from amplifying what's already there. Replace defaults with deliberate alternatives, add small chromatic accents, and don't accept the standard shape of a component as the only option.
Principles
1. Supercharge defaults. Most "default" UI elements have boring built-in styling that you can replace with something more deliberate:
- Bullet lists → swap dots for relevant icons (checkmarks for features, padlocks for security points, arrows for steps).
- Testimonials → make the quotation marks part of the design — large, accent color, top-left of the quote.
- Inline links → custom underlines (thicker, colored, partially overlapping the text).
- Form controls → style selected radio/checkbox states in a brand color instead of accepting the OS default.
These are tiny investments that signal craft.
2. Add color with accent borders. A short colored stripe is the cheapest way to make a layout look "designed." Places it works:
- Top edge of a card.
- Underline beneath active nav tab.
- Left edge of an alert or callout.
- Short underline accent below a section heading.
- Across the top of the entire layout.
The accent doesn't need to be a full border or a complex graphic — a 2–4px stripe in a brand color is enough.
3. Decorate backgrounds, not just elements. Even a polished UI can feel monotonous if every section has the same flat background. Break up sections by:
- Switching the background color of a panel or section to a brand or neutral tint.
- Subtle gradients — keep the two hues within ~30° of each other or it gets garish.
- Repeating patterns at low contrast (small dots, lines, hero patterns).
- Geometric shapes / dot grids in a corner of a section.
- Simplified illustrations as backdrops (a stylized world map behind a "Join our newsletter" form).
The rule: keep contrast low so the decoration doesn't fight the content.
4. Treat empty states as onboarding, not error messages. When a user opens a feature for the first time, the empty state is the first thing they see. Don't waste it on "No contacts found." Use the space to:
- Show an illustration or icon explaining what the feature is for.
- Emphasize the call-to-action that creates the first item.
- Hide irrelevant chrome (filters, sort controls, secondary tabs) — they're useless until content exists, and they make the page feel broken when empty.
A great empty state turns "I have nothing to do here" into "Here's how to get started."
5. Use fewer borders. Borders are the default way to separate things, but they make designs busy fast. Better alternatives:
- Box shadows — outline an element more subtly than a border, with the same separation effect.
- Two background colors — adjacent sections in slightly different tones distinguish themselves without any line.
- Extra spacing — increase the gap between sections; the eye reads them as distinct without help.
If you already have two of these (e.g. a background change and a border), drop the border.
6. Think outside the component shape. Every component has a default mental model. Push past it:
- Dropdowns don't have to be vertical lists. Multiple columns, sectioned with headers, icons next to items, descriptions under each option — use the floating box however you want.
- Tables don't have to be one-piece-of-data-per-cell. Combine related columns (name + role; price + currency) and use type styling for in-cell hierarchy.
- Radio groups can be selectable cards instead of small circles — bigger hit targets and more room for descriptions.
- Tabs, accordions, steppers can be much more visually distinctive than the framework defaults.
Constraints help most of the time. Sometimes a component just needs freedom.
Quick reference
- Accent stripe: 2–4px, brand color, top-of-card or left-of-alert.
- Section break without borders: change background, add space, or both.
- Empty states: illustration + action verb + zero filter chrome.
- Subtle gradient: hues within 30°, low saturation.
- Pattern background: keep contrast low.
- Custom-style every interactive default at least once (radios, checkboxes, links, list bullets).
Attribution
Heuristics distilled from Refactoring UI by Adam Wathan & Steve Schoger (https://refactoringui.com). Independent skill package; not affiliated with or endorsed by the authors.
