Signature details

Shadows, borders and cursors add character when they share one tone.

From frontend-design, Backgrounds & Visual Details.

Default details vs chosen ones

Pick a tone, toggle each detail, hover the right card.

Default detailsBad
border: 1px solid; box-shadow: soft; cursor: auto
Details from the toneGood

Mix details, then match

Shuffle the details, then match them to the tone.

One card, 3 detailsCoherent
.tone-print {
  --detail-border: 2px solid var(--ink);
  --detail-shadow: 8px 8px 0 var(--ink);
  --detail-cursor: url("block-arrow.svg") 3 3, default;
}
.card { border: var(--detail-border); box-shadow: var(--detail-shadow); cursor: var(--detail-cursor); }

JS cursor vs CSS cursor

With a mouse, click the ringed point on each chart.

cursor: none + JS divBad
misses 0
CSS cursor: url()Good
misses 0
.plot { cursor: url("crosshair.svg") 16 16, crosshair; }
.plot input { cursor: text; }

Why it matters, pros and cons

Why it matters

Library defaults say nothing; details from one tone say what place this is.

Pros

  • Character with no new layout or copy
  • A crosshair makes chart targeting easier
  • CSS cursors are drawn by the OS

Cons

  • One off-tone detail undoes the other two
  • Dense data UIs need calm, not heavy shadows
  • Cursors do nothing on touch devices