Hard shadows never lie

Every so often a piece of design grabs me and won't let go. This time it was a leaderboard page — a community benchmark tracker built in three static HTML files — where every single element sat on the page like a sticker peeled off a sheet: thick ink outline, a shadow that refused to blur, and one loud accent color doing all the shouting. I spent an evening reverse-engineering it. Then I rebuilt my own blog with it, which is what you are reading right now.

This post is the write-up: what the system actually consists of, why the naive version of it looks cheap, and the handful of rules that make it hold together.

Rule one: shadows are statements

A conventional drop shadow whispers "I am slightly above this surface." A hard offset shadow announces it. The difference is not subtlety — it is honesty. With box-shadow: 4px 4px 0 #232323 there is nowhere to hide: the viewer can measure the lift exactly, and it is the same lift on every card on the page.

The system uses a small ladder of offsets, and the ladder means something:

• 2px — the smallest interactive bits: chips, readouts, slider thumbs.
• 3–4px — buttons, tiles, tooltips. The default weight.
• 5–6px — cards and big panels. Things you could "pick up."
• 8px — dialogs, which float above everything.

Hover nudges the element up-left by one or two pixels and grows the shadow by the same amount, so it looks like the sticker peels slightly off the page. Press-and-hold does the reverse: it slams down to translate(2px,2px) with a 2px shadow, like a physical key. That symmetry — up is more shadow, down is less — is what sells the metaphor.

Rule two: one accent color, spent carefully

The palette is almost monochrome: warm cream background, off-white cards, charcoal for everything structural. Into that restraint comes a single saturated accent, and it is allowed to mean exactly one thing — the thing that is currently on. The active nav pill, the selected filter chip, the highlighted word in a headline, the table header. Never decoration, always state.

Contrast does the rest. Because everything else is so quiet, a single accent-colored rectangle draws the eye with an efficiency that no amount of gradients can buy. And when a design has only one accent, accessibility becomes tractable: text on accent, ink on cream, cream on ink — three pairs to check, not thirty.

Rule three: pills everywhere

Nearly every control is a pill or a rounded rectangle with a 2px ink outline: the section switch, the category chips, the buttons, the sort dropdown, the badges, the tags at the bottom of this post. The pill is the system's default noun for "small thing you can poke." It reads as friendly, and — usefully — it survives being flooded with a category color without looking broken.

A drop shadow with blur is a mumble. 4px 4px 0 is a statement.

— the note I wrote in my design journal and then quoted in this post

Rule four: three typefaces, three jobs

The typography is ruthlessly functional. A chunky rounded display face for headlines and numbers; a clean humanist sans for body; a monospace for anything that is data — timestamps, labels, table headers, buttons. That last one is the trick most people miss: setting every small label in mono and uppercase, with generous letter-spacing, instantly makes a page feel like it was built by someone who cares about detail.

Note the trap: the display face has exactly one weight. You cannot bold it to create hierarchy, so hierarchy has to come from size. Once you accept that, headlines get bolder by getting bigger, and the whole system stays coherent. (How I ended up with these three faces — and no others — is its own confession.)

Wiring it up

Nothing here needs a framework. The shadow ladder and the pill shapes are a handful of CSS variables; the only interactive piece worth showing is the hover/press feel, which is three properties:

/* the whole interaction model */
.sticker {
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);   /* no blur. ever. */
  transition: transform .08s, box-shadow .08s;
}
.sticker:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}
.sticker:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

That is it. No shadow blur, no gradients, no glassmorphism. Eleven lines of CSS produce the entire tactile feel of the site.

What breaks the spell

Three failure modes I hit while rebuilding:

1. Mixing in one soft shadow. A single blurred element makes every hard shadow next to it look like a mistake. The system tolerates plain flat borders, but not blurred shadows.
2. Two accents. The moment a second color starts meaning "on," the first one stops meaning anything. Park the extra colors in charts and category dots where they are data, not state.
3. Too much lift. If everything floats 6px off the page, nothing does. Reserve the big offsets for the few elements that genuinely sit above the rest.

Get those right and the style is remarkably forgiving. It works for a data-dense leaderboard, and — as this blog hopes to prove — it works just as well for a quiet personal site with a couple of stickers and a lot of words.