UI kit

The website is designed like a set of technical drawings: flat ink or paper fills, 1.5px ink rules for structure, 1px hairlines to divide, 2px corners, uppercase mono labels and numbered markers. Colour appears as solid fills and hover states, never as gradients or shadows.

Lines

Rules give structure, hairlines divide, dashed lines mark something provisional or in progress. Lines are never coloured; weight sets the hierarchy.

Spacing

Spacing uses nine steps on a 4px base. Pages use a 12-column grid with 24px gutters and 40px margins.

Backgrounds

Each section sits on its own sheet, and sheets stack as you scroll. Ten backgrounds are approved, named as on the Colour page: Linen is the default sheet, with dots and grid versions for heroes and diagrams; alternate it with Ink. Nothing else goes behind a section. Paper is for cards only: one step lighter than the sheet, so a card lifts without a shadow.

Symbols

Type these inline in mono labels and captions. ⬩ is the only separator; never a middot.

Motion

Motion is straight, short and without bounce, like parts on a track. Colour changes are fast, movement slightly slower, and only scrolling moves the sheets. Press Play to compare all timings.

Labels

Mono caps for eyebrows, tags and meta. One line at most; never for body copy.

Numbered markers

Mark steps, callouts and list order. Keep numbering sequential within a sheet.

Buttons

One primary action per view in clay. Outline for secondary, text with arrow for tertiary links.

Every button hugs its label: 17 × 24 padding (15 × 22 outlined), the arrow 14px after the text. Never stretch a button to fill a card, column, form or menu; set it at the start of the content it follows.

Focus

Keyboard focus is a dashed outline 4px outside the element, the same on every control. Links in text are underlined and turn Clay on hover; ↗ marks links to other sites.

Form fields

Each field is numbered like a drawing callout: label above, hint on the right, message below. Focus adds an ink border and a Clay glow; disabled fields switch to dashed lines.

Selection

Checkboxes for several choices, radios for one, switches for settings that apply immediately. A switch turns Sage when on.

Tooltip

Tooltips work like drawing callouts: a line from a dot on the target to a small ink label. Dropdowns open a bordered list of numbered options, with a tick on the selected one.

Alerts

Banners sit above the content they refer to; the colour block shows the type. Toasts confirm an action at the bottom of the sheet and disappear on their own.

Loading

Progress runs along a track, the spinner turns like a turntable, and loading placeholders are crossed dashed boxes. Never a pulsing grey block.

Empty state

An empty view looks like an unfinished drawing: dashed border, a crosshair, one line saying what goes here, and one action to start.

Tab strip

Tabs switch views inside a section; the link list sends users to other pages.

Breadcrumbs

Breadcrumbs read like stations on a line: filled stops behind you, an open ring where you are. Pagination counts sheets, not pages.

Stepper list

For processes of three to six steps. Only one row open at a time.

Sidebar

Opens from Menu in the header and slides in from the right. Groups show only their names until opened, and one group is open at a time. The current page is highlighted in Clay. Click outside or ✕ to close.

Accordion

Any number of rows can be open. The square marker fills Clay when open. Questions use the display font; answers use body text.

Logo wall

Client logos sit in a grid, one per cell, in ink only. Avatars show initials in a circle and overlap when grouped.

Cards

One idea per card: a quote, a case or a feature. The card lifts on hover to show it opens.

Blog card

Image on top, drawn from the C2 shapes. Tag and details in mono, title in the display font. The whole card is the link and lifts on hover.

Table

Tables follow engineering schedules: ink rule on top, mono headers, hairline rows, a reference code in the first column. Rows highlight on hover.

Code block

For configs and commands in posts and docs. Ink background, file name in the header, numbered lines, prompt in Clay, values in peach, comments in Sage.

01>_ railblocks deploy02workflow: admissions-screening03source: warehouse.applications04steps:05  - score: rubric-v306  - route: partner-review07review: human# every decision signed off

Sheets

Use sheets for pages made of short, separate sections: the homepage, the UI kit, landing pages. Long pages (blog, articles, guidelines) use standard full-width sections that scroll normally, each opened by a 1.5px ink rule. Each sheet stops under the header and is exactly one screen tall; longer content scrolls inside it. The next sheet then slides over it, and the covered sheet steps back and darkens. One idea per sheet. Use the slider to see it.

Mobile sheets

Below 600px, sheets keep the same rules at a smaller scale: smaller header and corners, less padding, a lighter step back. They still stop under the header and scroll inside when content is long.

Header

Sticky on every page. Logo on the left, links on the right; each link takes its section colour on hover.

Mobile nav

Below 900px, the header shows only the logo and Menu. Menu opens a full sheet of numbered links, each in its own colour, with the main action at the bottom.

Modal

A dialog is one sheet over a dimmed page: a header with sheet number and close button, one decision, two actions, and a footer.

Info strip

The thin strip at the bottom of every page: who made it, the number of sheets, the year and the legal links. It is based on the title block of an engineering drawing. It always comes last, inside the footer.

Footer

Ends every page. Option A: an ink sheet with a newsletter signup and three link columns. Option B: the homepage footer, on paper, with a track pattern on the left, a closing line with the main action and one numbered link list. Both end with the info strip.

Blog article

The pieces inside a long read: the divider between parts, the pull quote and the takeaway callout. Both carry no text of their own and never sit between rules.

One third of the working population, roughly a billion people, spend their days shaping that virtual matter. And to shape it, they use virtual tools: software.

First, it’s neither bought nor owned. It’s rented. Mainly for good reasons.

Today, there is a rare opening to reclaim our agency, to once again build and own our tools.