Styleguide

Quiet interface. Clear actions.

Neutral surfaces, compact controls and purposeful colour. Every component below is interactive.

• Keep it compact. Short fields, consistent widths, no oversized actions.
• Use icons with intent. Leading icons on buttons. Plus, pencil and trash alone for CRUD.
• Say only what helps. No filler, redundant labels or decorative status badges.
• Show the outcome. Green means saved. Red means destructive. Errors stay next to the action.

Rounded corners, a 16px leading icon and only enough width for the label. Primary blue buttons use white text and icons in both appearances: --primary-fill for the background and --primary-ink for the foreground.

<button class="secondary">
  {% heroicon_outline 'adjustments-horizontal' %} SMTP settings
</button>

Fields & autosave

360px field width. 16px between fields. Changes save after a short pause; feedback belongs directly beneath the field.

Search & refresh

Enter searches immediately. Three characters start a two-second timer. Clearing the field resets the results.

Tabs

A visible tab shape. No hover underline competing with the selected state. Arrow keys move between tabs.

Destructive confirmation

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

Feedback

Colour communicates state, with text alongside it.

Foundations