An interface works because of hundreds of small decisions. These 64 are the ones Sphere Kit makes for you, and the ones it expects from what you build with it.
These are written for people. To give the same rules to a coding agent, use the prompt on the Skill page: it installs the kit and keeps the agent to its tokens.
–Keyboard first. Every flow works without a pointer, and focus lands where a person expects it after a dialog closes or a row is removed.
–Focus you can see. One ring on every control, two pixels, at 3:1 or better against whatever it sits on. A sticky bar never covers the thing that has focus.
–A press is felt. A button pulls in by a pixel on every side while it is held. Hover changes colour and nothing else.
–The target is what you see. Anything drawn smaller than 24px gets a larger hit area, and 44px on a phone. If part of a control looks pressable, it is.
–16px in fields on a phone. iOS zooms into anything smaller and stays zoomed. Never disable zoom to work around it.
–Paste always works. No field blocks paste, and no field loses what was typed while the page finishes loading.
–A busy button keeps its place. The label swaps to a spinner and a word like Saving… at the same width, so nothing around it moves.
–Short waits show nothing. A spinner holds back for a moment before it appears, so a fast answer never flashes a loader. See it
–State lives in the address. The open tab, the filter, the page of a table: a link brings them back, and Back does what it says.
–Ask before destroying. Deleting asks first or offers Undo. The final confirm is the only red button on the screen. See it
–Links are links. Navigation is an anchor, so opening in a new tab works. A button does something on this page.
–More to come ends in an ellipsis. A menu entry that opens another step reads Rename…, and so does anything still working: Loading…, Saving…
–Nothing lives on hover alone. Whatever a pointer reveals is also reachable by keyboard and by touch.
–A disabled option says why. Greyed out with no reason is a dead end. Give the reason next to it or in its tooltip. See it
–Group with space first. The gap between groups is at least twice the gap inside one. A line is for where space cannot carry it.
–One primary action. A view has one filled button, the real next step, or none. Everything else is quieter.
–Corners are concentric. An inner radius is the outer one less the gap between them, on one scale that steps down from dialogs to cards to controls. See it
–Align on purpose. Every edge lines up with another edge. When the eye and the ruler disagree, move it a pixel for the eye.
–Controls in a row share a height. A button next to a field next to a select: one height, one baseline. See it
–Holds at 320 pixels and at 200% zoom. Nothing clips, overlaps or needs a sideways scroll. Text boxes grow; they have no fixed height.
–The content sets the breakpoint. A component adapts to the room it is given, not to the size of the screen.
–A scroll edge says there is more. The next row peeks in or the edge fades. A scrollbar stays quiet but never disappears. See it
–A soft ground, white surfaces. In light a surface rises with a fine ring and a crisp one-pixel drop. In dark it rises by being lighter, with one thin solid edge. See it
–Shadows are crisp. A ring, a short drop, and at most one more. A wide soft blur makes a control look like it floats away from the page.
–Fields are wells. A field is sunk into its surface, with no outline until it has focus. Buttons are raised. The two never look alike.
–Colour means something. Neutral carries structure. A hue marks a status or an identity, never importance. See it
–Never colour alone. A status has a word or an icon next to its colour.
–Contrast is measured. 4.5:1 for text you read, 3:1 for the edge of a control and for the focus ring. The Colors page shows each pair's number. See it
–Light and dark are both designed. Sizes, spacing and shapes never change between them. Only fills, edges and shadows do.