Skip to content
Jacquelyn Meyer

One site,built four ways.

Same business. Same words. Four completely different first impressions. Each one changes the type, color, motion, interaction and layout — not the substance underneath.

Pick one and the whole site changes with it.

  1. 01

    Frost

    Cold shoulder, warm reception.

    Geometric headlines over terminal text. Falling characters light where your pointer passes and flare where you tap.

    Type
    Space GroteskIBM Plex SansIBM Plex Mono
    Palette
    #08090A#F2F4F3#8FD9FF
    Motion
    Quick and mechanical. Nothing lingers.
    Cursor
    A blinking block caret with tick marks and a hex readout, like a terminal.
    Open Instrument · Frost
  2. 02

    Blueprint

    Blue in the plan, not in the mood.

    Cream paper, a warm serif, entries in ruled rows with folio numbers. Registration marks turn to follow the pointer, and one blue does the work an underline would.

    Type
    FrauncesSchibsted GroteskMartian Mono
    Palette
    #F8F8F6#16181A#2E8FBF
    Motion
    Crisp and immediate, like a page turning.
    Cursor
    No pointer at all — a brush stroke that thins and runs out behind you.
    Open Blueprint · Ink
  3. 03

    Isotope

    Unstable, but I decay on my own schedule.

    Brown-black instead of true black, italics where the others reach for color. A field of points drifts behind the headline and bends around your pointer. Rounder, slower, heavier.

    Type
    Instrument SerifBricolage GrotesqueSometype Mono
    Palette
    #141110#EDE6DC#C6F06E
    Motion
    Slow and weighted, like it has mass.
    Cursor
    A soft ring that lags behind your pointer, turning slowly through its own colors, and grows over links.
    Open Isotope · Lime
  4. 04

    Sonar

    I already know where this is going.

    The front door's system, in the lab. Near-black, a lilac accent with sky underneath, a dot lattice that ripples where you move and settles after you stop. The slab is Bricolage at 800; the small text is Anek, narrowed. Motion is a hundred milliseconds and done.

    Type
    Bricolage GrotesqueAnekJetBrains Mono
    Palette
    #020204#FFFFFF#D8B4FE
    Motion
    Near-instant. A hundred milliseconds and done.
    Cursor
    A thin ring, tight to the pointer, with three fainter copies fanning out behind it.
    Open Sonar · Lilac