Components

compact · 32px controls

Every component is interactive. Icons are Heroicons outline, 16px inside controls, stroke-width:1.5, aria-hidden.

Buttons & icons

Primary blue buttons use white text and icons in both appearances: --primary-fill for the background and --primary-ink for the foreground.

Plus, pencil and trash appear alone for CRUD. Rounded corners, a 16px leading icon and only enough width for the label.

Fields & autosave

Changes save after a short pause.

360px field width · 34px height · 13px text · 16px between fields. Feedback belongs directly beneath the field.

Tabs

General

Project name and description belong here.

Two levels, two idioms. Group tabs are underline tabs; sub-tabs are a segmented track. Hover is a wash, selection keeps the indicator. Arrow keys move between sub-tabs.

Destructive confirmation

This permanently removes every captured email and attachment in this inbox.

One compact control. The switch arms the action; a separate click performs it. Switching on never deletes anything.

Feedback

Saved
Saving…
Could not save. Try again.

Colour communicates state, with text alongside it. Green means saved. Red means destructive. Errors stay next to the action.