The single law every TopLine surface obeys.

Principles

The five rules.

Type

One ramp.

Eight steps. Picked once, used everywhere. Weight is 400 body, 500 medium for labels, 600 for titles. Never 700 in-app.

Symbols

One family.

One stroke weight (1.75 on a 24 grid). Round caps + joins. Our own — drawn at one weight so the whole product reads as one mind. Emoji are allowed only in user-authored content, never as chrome.

Space & radius

Four-px base.

One spacing unit (4px). p-5 (20px) is the standard card padding; p-6 (24px) is airy/hero. One card radius — 16px — everywhere. Drop the drift.

Color

Information, never decoration.

Near-monochrome surfaces. One brand accent for the one thing the eye should find. Four semantic tones for state. If you reach for color to make something pop, stop — hierarchy comes from type weight and spacing.

Field labels

The label is what the eye scans for.

A label that names a value is bold and the same strength as the value under it. Muted 12px is for the line that comes after the value: a date, a count, a source.

Imputed defaults

Never make someone type what we already know.

A prepopulated field shows its value in amber italic until it’s reviewed — by editing it, or with the one “Accept N suggestions” button at the lower left of the form. Try it below: edit a field, or accept, and watch the amber clear.

Toggle pill

Say the state. Click to flip it.

When a record has two states and the flip is rare, a small pill names the current one and a click switches it. It asks first only when the flip is risky, shows the new word while it saves, and puts the old word back if the save fails. Three or more choices stay a segmented control.

Menus

A glyph on every row.

A menu row is a small glyph and a few words, like a row in the sidebar. You never pick the glyph: it comes from the words, so “Edit” is a pencil and “Delete” is a bin. A screen can name one when its words are unusual. Glyphs stay one muted tone, and a destructive row turns red. A row whose words name no known action gets a quiet dot, never a blank. Open the three menus below.

Working mark

The bars are doing the thinking.

One mark for work of unknown length: the assistant thinking, a button in flight, a page on its way. It is the three bars of the TopLine mark, breathing. The two large sizes add a slow swell and a soft band of light. Under reduced motion it holds still. A list or card whose shape is known keeps its skeleton rows instead.

Crew faces

A small crew, each with a face.

The assistant and every bot wear a drawn character: a head in the brand colour, features in its ink. Each state reads without colour. Idle blinks now and then, working scans, needs you lifts its brows, done winks and smiles, paused and stopped close their eyes. Under reduced motion each face holds a still frame of its state. There are two sets side by side: twenty-five hand-drawn characters, and sixteen built from a small grammar.

Material

Floating, not flat.

Surfaces that overlay the page — popovers, modals, the cue rail’s settings popover — use a translucent layer: backdrop-blur, hairline border, soft shadow. The page below shows through faintly so the rep stays oriented.

Voice

Plain, direct, human.