Brand identity

How this site looks, and why: a pixel turnip, a soft palette, one typeface and a handful of components everything is built from.

Why a turnip?

Honestly, I don't remember. I picked the name years ago and the reason got lost somewhere along the way. But it has grown on me, and now I know what it stands for.

Most of a turnip is underground. Most of a good website is too: the structure, the accessibility, the performance nobody sees. The leaves are just the part that shows.

The turnip

The mascot and logo: a 16 × 21 pixel turnip, drawn in the palette and nothing else. It is the header logo, the favicon, the 404 page and a few of the particles drifting in the background.

  • Scale it by whole pixels (2×, 3×, 4×…) so the edges stay crisp.
  • Keep it upright when it stands still. Only the particles spin.
  • Don't smooth, outline or recolour it.
  • 16 × 21pxFavicon, browser tab
  • 32 × 42pxHeader logo
  • 64 × 84px404 page, app icons

Colours

Soft and slightly muted, so the turnip and the content stand out. Every colour is a CSS custom property; the contrast shown is against white, by WCAG AA.

  • #018C99

    Teal

    var(--teal)

    The main accent: borders, focus rings, active states and offset shadows. On white, only for icons and large text.

    4.0:1 on white · Large text and icons

  • #2B6F78

    Dark teal

    var(--dark-teal)

    Teal for text: inline links and subtitles. Also a fill behind white text.

    5.8:1 on white · Any text

  • #7B5E8F

    Purple

    var(--purple)

    The second accent: hover states, chips, card headers and the turnip's skin.

    5.5:1 on white · Any text

  • #D2BFDA

    Light purple

    var(--light-purple)

    Soft details: dashed borders and the shine on the turnip. Never text.

    1.7:1 on white · Not for text

  • #2F5753

    Green

    var(--green)

    The deep accent: card headers, small print and the veins of the turnip's leaves.

    8.0:1 on white · Any text

  • #F8C210

    Yellow

    var(--yellow)

    The sunny highlight: offset shadows, badges and particles. Always with ink on top.

    1.7:1 on white · Not for text

  • #6189B7

    Blue

    var(--blue)

    In the palette, not in use yet.

    3.6:1 on white · Large text and icons

  • #1F1F1F

    Ink

    var(--gray)

    Text, outlines and the turnip's outline.

    16.5:1 on white · Any text

  • #FFFFFF

    Paper

    #fff

    Backgrounds, cards and the turnip's root.

Type

One typeface for everything: VT323, a monospaced pixel font that matches the turnip. It is self-hosted, so pages make no request to Google Fonts. Hierarchy comes from size and weight, never from a second family.

  • 60px · Page titlesTurnips, tea & code
  • 32px · HighlightsTurnips, tea & code
  • 22px · IntrosTurnips, tea & code
  • 18px · Body textTurnips, tea & code

Components

Flat and a little retro: white cards with a 2px ink border, rounded corners and a hard offset shadow instead of a blur. Things lift on hover and press in on click.

Links

Links in a sentence get a pixel dashed underline.

See my workSay hi

Chips

ReactTypeScriptNew

Card shadows

  • teal
  • purple
  • yellow
  • green

Motion

  • Calm by default: a few dots and turnips drift in the background, and nothing moves fast or flashes.
  • Visitors are in control: the buttons in the bottom-right corner pause or hide the background on every page.
  • Reduced motion is respected everywhere: the background starts still and transitions are switched off.

Voice

First person, short and a little silly, the way I'd say it out loud. Clear first, funny second: the joke never hides what a button does.

  • Where to find me (if you must!)Header menu
  • This page has gone to seed404 page
  • I write code. I read books. I drink tea. I do stuff.Home