Polish · 2026-10-06

rough

1 fix first7 to fix8 radii3 shadows17 off-grid spacings

What to fix most important first

Looks like a button, isn't oneFix first
div.send looks like a button but is a div with a text cursor: it can't be focused, ignores Enter and screen readers don't announce it.
How to fixUse <button type="submit"> (or <a href> if it navigates) with the same style.
7 different corner radiiFix
In use: 4px ×3, 6px ×1, 8px ×1, 10px ×1, 12px ×4, 16px ×1, 20px ×1. Close values (10, 12, 16) read as mistakes, not choices.
How to fixA scale of 3 or 4 tokens (--r-sm, --r-md, --r-lg, --r-pill), and each component picks one.
Inner corner doesn't follow the outer oneFix
An element with a 12px radius inside a 16px one, 10px from its edge. The corners aren't parallel and the inner one looks swollen.
How to fixInner radius = outer radius − the gap: 16 − 10 = 6px, or calc(var(--r-lg) - var(--pad)).
A hard, black shadowFix
rgba(0, 0, 0, 0.5) 0px 2px 4px 0px: black at high opacity with little blur reads as a dirty edge, not depth.
How to fixMore blur, low opacity (6 to 15%) and the brand's dark color instead of black.
15 spacings off the 4px gridFix
Values like 11px ×7, 5px ×6, 26px ×5, 13px ×4, 22px ×4, 23px ×4, 14px ×3, 18px ×3. Almost equal to their neighbors on the scale, they create 1 to 3px misalignments.
How to fixA spacing scale in multiples of 4 (4 8 12 16 24 32 48 64) and tokens for it.
3 kinds of button that don't matchFix
Height, radius and font size: 46px · 6px · 15.5px, 46px · pill · 14px, 46px · 8px · 15px.
How to fixOne button component with color variants (primary, secondary) and at most two sizes, same height and radius.
2 buttons with no hover stateFix
Nothing changes when the pointer is over them: they feel dead.
How to fixA subtle :hover (background 6 to 10% darker), :active 1px down, and a 150ms transition on the properties that change.
Icon off the text's centerFix
The icon sits 3.2px below the center of the text line.
How to fixRemove manual margins on the icon and align with display:inline-flex; align-items:center on the button.