A mix of best practices and personal preferences that help build better interfaces.

• When nesting elements, make their border radius concentric. The outer radius equals the inner radius plus the padding between the elements.

• A button with text and an icon gets slightly smaller padding on the side of the icon.

• Use a layered box-shadow to give elements depth instead of using borders.

• Give images a 1px outline, offset by -1px: black at 8% opacity in light mode, white at 8% in dark mode.

• Use font-variant-numeric: tabular-nums in timers, counters, prices and tables.

• Keep long words, links and IDs inside their container with overflow-wrap: break-word. Use white-space: nowrap to prevent labels and badges from wrapping.

• Keep underlines from crossing the tails of letters like g and y. Use text-underline-position: from-font with text-decoration-skip-ink: auto.

• Start button labels with a verb: “Save draft” or “Delete project”, never “OK!” or a bare “Yes”.

• Make confirmation buttons say what will happen: “Delete project” next to “Cancel”.

• Label toggles with what happens when they’re on: “Send read receipts”, not “Disable read receipts”.