Friendly is a set of dials

Text, radius, shadow, color and motion each add warmth. Turn them together.

Brian Lovin@brian_lovin
Making an interface feel “friendlier” — Increase text size Increase corner radius Soften drop shadows Add more color Micro animations on interactions What else?
Feb 23, 2022View on X ↗

Each checkbox below is one line of his list.

1 · Same card, five dials

Turn dials off one at a time, then send an invite.

TechnicalBad
Dials on0 of 5
FriendlierGood
Dials on5 of 5
.card[data-friendly] {
  --text: 14px;          /* 1. bigger text          (was 12.5px) */
  --radius: 14px;        /* 2. rounder corners      (was 4px)    */
  --shadow: 0 12px 32px -12px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .04);
  --brand: oklch(0.58 0.2 285); /* 4. more colour */
}
.card[data-friendly] button:active { transform: scale(0.97); } /* 5. micro motion */
.card[data-friendly] .check { transition: transform 180ms var(--ease-out), opacity 120ms ease; }

2 · One dial maxed feels off

Pick a dial to crank on the bad card.

Radius maxedBad
radius 28px, the rest flat
All five, a notchGood
each dial one step up

Why it matters, pros and cons

Why it matters

Warmth is a tone, and tone comes from several properties agreeing. One dial alone reads as a styling mistake.

Pros

  • A checklist you can apply to any screen that feels cold.
  • Each dial is a token, so tone changes in one place.
  • Small steps keep the product recognisable.

Cons

  • Dense pro tools pay for bigger text and padding in lost rows.
  • Too much motion turns friendly into slow.
  • Color needs a contrast check in both themes.