Components

compact · 32px controls

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

Buttons & icons

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.

A visible tab shape. No hover underline competing with the selected state. Arrow keys move between 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.