The system

Designed by me. Coded by Claude.

The story

This is the site’s own case study: the rules it keeps, its color, type and space, the pieces it’s built from, and how they move. Everything on this page is live. The words in quotes are mine, from the log we kept as it was made.

The Rules

  • Every word is slate, at 17.2 to 1 on the off-white. Nothing is washed out to look secondary.

    “I’d like to get rid of all grey text. None exists on the portfolio and it screams AI design.”
    Jamien, Sep 30, 2026

  • No dot grids, no tiled textures, no gradient text, no label on everything.

  • A list opens one row at a time, the way this one does.

  • A piece carries its name, not a note explaining itself.

  • Every case wears the same frame: the label, the title, the facts, the contents, the story.

  • Space Mono is for labels. Names and reading stay in the reading face.

    “no mono type on the cards”
    Jamien, Oct 5, 2026

  • Effects are few, and each one is finished.

    “Expensive and polished are the goals here.”
    Jamien, Oct 6, 2026

Color

Off-white, or Ink grey.

  • Ground
  • Slate
  • Pop
  • Pop, for words
  • Pop, deep
“Okay, let’s go with these settings and ship. I’d like the option for the viewer to switch between the off white and the ink grey background on the home page.”
Jamien, Oct 2, 2026

Pearl

The colors of the blob at the top of every page. They also fill the eye on About and the trading card it opens, and half of the confetti.

  • Peach
  • Pink
  • Lilac
  • Periwinkle
  • Sky
  • Aqua
  • Mint

Foil

Made for the Go buttons, to catch the light while pressed. It’s switched off there now, and lives on as the brighter half of the confetti, the same colors the ink drops turn as they spread.

  • Cyan
  • Blue
  • Violet
  • Pink
  • Butter
  • Mint
“Okay, let’s make the soft pink text just a liiiitttttle darker.”
Jamien, Oct 6, 2026

Type

DisplayInstrument Sans 500, −6%

Hi, I’m Jamien.

ReadingInstrument Sans 350, −5%, 1.6

If you ask ten Creative Technologists what they do, you’ll get ten different answers.

LabelsSpace Mono 400, capitals

/ The facts

Scale

  • 12Aa
  • 14Aa
  • 16Aa
  • 18Aa
  • 22Aa
  • 28Aa
  • 36Aa
  • 48Aa
  • 62Aa
  • 80Aa
  • 120Aa
  • 160Aa

Space

The measures are where every page puts things: the same edge, the same rail of facts, the same distance from the top to a title. The steps are the gaps the pieces are built with.

Page edge
24
Page seat
1440
Facts rail
330
Rail to story
64
Title from the top
176
Between sections
112
Under a label
44
Corners
10

Steps

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 64
  • 96
  • 128

Pieces

  • Summary:
    A run-of-show app for teams putting on live events.
    What I did:
    Concept, design, build
    Kind:
    Internal app
    Go
A row of work, with its Go
Year:
2026
Kind:
Design system
Facts

The Outcome

A section’s head
Contact

Materials

Ink
Pearl
“upon entering the site, let’s have the initial ink drop first then the text show up as if it’s being typed.”
Jamien, Oct 5, 2026
“No, I don’t like it. I think the blob is a mistake. I’m thinking an actual house icon - slate black. That would be clean.”
Jamien, Oct 3, 2026
“Oh! What if the Home blob looked like a J?”
Jamien, Oct 3, 2026
“yes, bring in the fluid blob”
Jamien, Oct 5, 2026

Motion

  • Standard0.4, 0, 0.2, 1
  • Decelerate0, 0, 0.2, 1
  • Accelerate0.4, 0, 1, 1
  • The squish0.37, 0, 0.63, 1
Micro
120 ms
Standard
240 ms
Large
400 ms
The squish
560 ms
The press
“something more squishy vs something expansive … the movement should come from the click”
Jamien, Oct 7, 2026

The blob at the top of every page holds a storm. Press it, and keep pressing.

“swirling around where all the characters letters, lines, everything started to get spun by this blob … like it was caught in a cyclone”
Jamien, Oct 7, 2026

The Making

  • 55Days
  • 632Versions
  • 342Decisions logged
  • 3Independent reviews
  • 58Page changes tested
Versions saved, day by day632 in 55 days
  1. The first version.
  2. The typefaces and the first rules.
  3. The work sorted three ways: Media, Technology, Art.
  4. One accent: periwinkle.
  5. jamienpride.io, and the share card.
  6. The pivot: quiet, not frozen.
  7. The sketchpad redesign.
  8. Every case in one frame.
  9. The ink, and the switch between two grounds.
  10. The way home: a house, a J, then the pearl blob.
  11. The trading card.
  12. The squish, the confetti, the cyclone.
  13. Three reviews, and launch.
“keep the context we have so far, keep what works, and pivot away from what doesn’t towards something more straightforward and useful. I can add bells and whistles later. The point was to get this up to effectively show what I’ve done and what I can do with a site.”
Jamien, Sep 24, 2026