AkurAI-Mail / DESIGN.md

Latest change 66e3647948f2e277afdd6ecd16939de8b6ad525f - Initial commit: AkurAI Mail UI (SvelteKit+Bun) by Ólafur Búi Ólafsson

# Design

## Visual System

AkurAI Mail uses a restrained product UI register. The surface is light, neutral, and task-focused, with a dark navigation rail and a single green primary/action color.

## Color

- Background: `#f4f6f5`
- Surface: `#ffffff`
- Ink: `#151d1b`
- Muted text: `#61716c`
- Border: `#dce4e1`
- Primary: `#126b5a`
- Primary hover: `#0e594b`
- Accent: `#c8f05a`
- Success tint: `#e9f6f2`
- Error tint: `#fff0ed`

## Typography

Use the system sans stack already in the app. Product headings are fixed-size, not fluid. Body text remains at browser default scale with compact labels at 13px.

## Layout

- Desktop app shell: sticky 248px rail and a single scrollable workspace.
- Admin workspace: topbar, service strip, VM status charts, mailbox/alias split, DNS table.
- Webmail workspace: same rail, folder list, message list, reading pane.
- Mobile: rail becomes a compact top navigation, forms collapse to one column, tables stack cells.

## Components

- Buttons: 6px radius, 44px minimum height, green primary action.
- Panels: white surface, 1px border, 8px radius.
- Forms: visible labels, full-width inputs on mobile, focus ring in primary tint.
- Status pills: semantic text plus tint; do not rely on color alone.
- Charts: inline SVG sparklines using the primary color and baseline grid.

## Motion

Keep motion minimal. Hover and focus states may transition quickly, but dashboards should not use staged page-load animation.