The Field Kit

The Decisions

Things to decide before you draw

Five decisions before any component

(was the body of the old "Before the First Pixel")

1. Emotional register. Three words for how it should feel; emotional, not visual. And what it must never feel like. Every later decision is tested against them. 2. Entity vocabulary. The first-class objects of the domain (customers, deals, contacts; projects, tasks, members). Each gets its own page, its own address, its own actions. 3. Action vocabulary. The kinds of action that exist and, for each, its contract (below). 4. Spatial system. How many tiers of separation, and the ratio between them. Three is usually enough (The Gap Is Saying Something). 5. Treatment semantics. What categories of element exist, how many elevation levels, and what each one means. Every treatment finishes the sentence this style means: ___.

Builder · Configuration · Submission

(What Happens When They Finish?)

| Kind | Shape | The person is… | The interface wants to be… | |---|---|---|---| | Builder | input → entity | creating something | the thing itself, forming | | Configuration | input → state | changing something | the consequence, made editable | | Submission | input → event | sending something | as simple as the act |

Ask what happens when they finish? before asking what fields do we need?

Action kinds and their five decisions

(The Second Time You Delete Something)

Kinds: destructive · constructive · mutative · navigational · background · confirmatory; and across all of them, reversible / irreversible.

For each kind, decide once: 1. Gate — does the system pause and ask first? 2. Sequence — the complete path from click to resolution. 3. Weight — how loud the answer is. 4. Reversibility window — how long, through what. 5. Error contract — what happens when it fails, shown where.

Write it down in plain words. A new person should know how the product behaves without opening a screen.

The feedback-weight ladder

(Silence Is a Message)

| Act | Answer | |---|---| | Destructive, irreversible | impossible to miss | | Constructive (save, create, add) | clear, not interrupting; a toast | | Background (sync, autosave) | glance-sized, fades | | Routine (hover, select) | acknowledgement only |

Weight calibrates. Shout at routine things and the important answer stops registering.

Three gaps

(The Gap Is Saying Something)

Large between major sections. Medium between elements inside a group. Small inside a component. Clearly different from each other; assign every gap to one of the three on purpose.

Top layers

See Codex: Top Layers: the modal, the side panel and the route change side by side, and the seven questions your system answers for itself.

Choosing an input

See Codex: Inputs for the four questions and the catalog.

The 12-cell login matrix

(The Login Is a Gate)

Mode (open · request · invite) × action (sign up · sign in) × method (email + password · Google) = 12 cells. Design the cells, not the screen; each earns its own posture. Density matches commitment: the invited person gets everything on one screen; the stranger gets one small, abandonable step at a time.

The navigation scopes

(Codex: Navigation)

| Scope | True… | Lives in | |---|---|---| | Global | everywhere | the top bar | | Local | inside this section | the sidebar, which changes per section | | Contextual | for this record | the page itself |