One press, one spring

Lock Card is a wallpaper studio: a block of colour for the clock to sit on, a card of paper with your words, a band underneath. It's a small app. What made it feel good wasn't a colour or a font. It was a handful of rules applied with no exceptions.

These are those rules. I now start every app by writing them down before a single screen exists.

Name the hero

Every app has one thing the person came for. In Lock Card it's the wallpaper. In a recipe app it's the dish; in a finance app it's the number; in a journal it's their words.

Once the hero has a name, every other decision gets easier, because the question is always the same: does this make the hero louder or quieter?

A quiet room, one loud thing

The interface is the gallery wall; the content is the art. Chrome is near-black, greys follow the system materials instead of invented ones, and the only saturated colour on screen is the user's own design.

There's one accent, taken from the app icon. It marks focus, a badge, a slider tint. Never a large fill.

Selection is inversion, not colour. A selected chip turns white with dark text, like iOS control chips. That works on top of any wallpaper someone makes.

One press, one spring

Consistency is most of what people call "premium". So there is exactly one press behaviour in the app:

// squeeze fast and firm, release with a little overshoot
export const press = {
  scale: 0.94,
  in: { duration: 90, easing: "cubic-bezier(0.2, 0, 0, 1)" },
  out: { duration: 340, easing: "cubic-bezier(0.34, 1.5, 0.64, 1)" },
};

And exactly two springs: one for things that move a little, one for things that travel.

export const SPRING = { damping: 20, mass: 0.7, stiffness: 210 };
export const SOFT_SPRING = { damping: 22, mass: 0.9, stiffness: 150 };

Nothing is hand-tuned per screen. If something feels wrong, the fix goes into the token, and every screen gets better at once.

The stage never resizes

The editor is a stage (the wallpaper at true proportions), a tray of tools, and a dock. Every tool's tray is the same height. Switching from colour to text to shape never moves the wallpaper by a pixel. The thing you're editing stays still while the tools change around it.

When the tray closes, the stage scales up with a transform. It doesn't re-lay out. Your eye stays on the same spot.

Every choice is a shelf

Templates, colours, typefaces, edge cuts: all of them are a labelled horizontal row of chips, ordered from plainest to boldest. The selected item scrolls itself into view. A shelf with nothing lit reads as nothing chosen.

Show the real product

The intro isn't illustrations. It's one scrubbable scene rendered by the same engine as the editor: a fan of real designs, the tools, a scripted finger making real edits, the lock screen, and a shelf of templates to start from. Drag to scrub, tap to jump ahead.

If the first thing someone sees is the actual product doing the actual thing, the paywall that follows has already been earned.

Delight is earned, once

There's a beam of light that runs once around a sheet's edge when you deliberately pick a room colour. A sticker draws itself on when you choose it. Neither loops. Neither happens unless you did something.

Decoration that repeats becomes noise by the third time. A reward that answers a choice stays a reward.

This portfolio runs on the same rules: one press, two springs, one accent, and the work as the only colour on the page. If you want an app built this way, let's talk.