Every screen, every state, drawn before anything is built

Three pretty screens are not a design

Design here means the empty state, the error, the loading and the too-long name, every width, and the spacing rules between them. A developer who receives that has nothing left to invent, which is why the estimate survives contact with the build.

Design kit

Not three pretty screens. Every state, every width.

This is the part of a design that decides whether the build lands on the date: the states a component has to answer for, how the layout behaves at each width, and the spacing tokens behind both. All three are live, so try them.

States

One file list, five states. Pick one to see what it looks like and what the design has to say about it before a line is written.

Ready

The state everyone designs. It is the cheapest one to get right and the least likely to be the one your client sees first.

Trigger
The request resolved and there is something to show
Copy
Name, size and when it landed, in that order
Action
Open, rename or remove, per row
Focus
First row holds the tab order

Five states for one list. A build quoted from the first of them is the reason projects run over.

Widths

The same page at 360, 768 and 1280. Not one layout squeezed three ways, but three decisions about columns, measure and navigation.

Tablet, 768 pixels

The width where a phone layout starts to look stretched. Cards pair up, the navigation comes out from behind the button, and the measure stays readable.

Columns
Two, equal
Gutter
24px
Body
16px on 27px
Tap target
44px
Navigation
Inline, no menus

Same content, three decisions. A design that only exists at one width is half a design.

Layout

Alignment, distribution, gap and radius, the four things a handover argues about. Move them and read the classes a developer receives.

flex flex-col items-center justify-between gap-4 rounded-nonegrid grid-cols-12 gap-6
Axis
Vertical
Cross axis
align-items: center
Main axis
justify-content: space-between
Gap
16px · 1rem
Radius
0px
Grid
12 columns, stretch
Gutter
24px
Column
Too narrow for this count
Blocks
6, 4 and 8 columns
Baseline
8px rows

Direction

Align

Distribute

Layout grid

Every value here is a token, not a nudge. That is what makes a design implementable without a second conversation.

Starts at

euros1.500

A floor for one template bought on its own, for when you have a developer already. Each further template is from €1.150. Design and build together in a package costs less than the two hired separately.

Start a project

What the work is

  • Structure and page hierarchy agreed before any pixel is drawn
  • Each template designed, at every breakpoint from 360 pixels up
  • Every state: empty, loading, error, and the content that is too long
  • A Figma library with real components, not a flat file of screenshots
  • Palette with its contrast figures, a type scale, and spacing rules a developer can implement
  • Two rounds of revisions

What it is not

  • The build itself, which is its own line and its own price
  • Stock photography, which we do not supply
  • Copywriting beyond structure and direction, unless it is agreed as part of the scope

The other three

  • Web development

    Front end, server and database, written from scratch rather than assembled.

  • Branding and graphic design

    The mark, its system, and everything it has to sit on in print and online.

  • Video

    Cut from footage you supply, or a promo built from your own website.