Design

imbox should feel calm, quick and quiet. This page says what that means in practice, so new screens look like old ones.

PrinciplesCopy Anchor Link

• Quiet. Show what matters now. Everything else waits behind a click or a shortcut.
• People first. Mail from people comes before newsletters and receipts. Say who something is from before saying what it is about.
• Keyboard first. Every common action has a shortcut, and a command palette (Cmd+K) finds the rest. The shortcuts overlay lists them.
• Honest. If something failed, say what failed and what you can do. If a feature needs a key or a setting, say so, and hide the feature when it cannot work.
• Two layouts. Desktop and phone are separate sets of screens (src/web/DesktopApp.tsx and src/web/MobileApp.tsx). The phone layout is made for thumbs: bottom tabs, sheets, large targets. It is not the desktop squeezed.

LookCopy Anchor Link

Color. Black, white and grays. There are no colored tokens, and the only color in the interface is the soft tint behind avatars and pictures that come from outside. The definitions are in src/web/index.css: background, foreground, card, muted, accent, border and the rest of the shadcn neutral set, in a light and a dark version.

Destructive actions are not red. --destructive is a dark gray. A destructive action is shown with a clear word (Delete, Trash) and a confirmation dialog.

Type. Geist for text and Geist Mono for codes and shortcuts, both loaded from the app itself, not from a font service. Sizes step through 11, 12, 13, 14 (the default), 16, 20 and 24. Use tabular numbers for times and counts so columns line up.

Shape. One border width (1 pixel), the shadcn radius, soft shadows without color. Motion is short and used to explain a change, not to decorate.

Avatars show a person's picture when there is one. Otherwise they show initials on a soft tint chosen from the address, so the same person always looks the same. These tints are the one place color appears in the interface. Keep them soft.

Icons come from lucide-react. Do not use emoji anywhere in the interface.

Accounts. When more than one mailbox is connected, each shows a small black-and-white mark (a circle, square, triangle, diamond and so on) on its rows, so you can tell which mailbox a thread is in.

Building screensCopy Anchor Link

• Use the components in src/web/components/ui (shadcn/ui). Do not make a new button, input or dialog when one exists. Add a new shadcn component with npx shadcn@latest add <name>.
• Lists use the ThreadRow pattern: avatar or checkbox, the sender and subject, and the time. A row can show a short line of context, such as where a search matched.
• Pages use a single centered column. Lists are wider than reading pages.
• Alerts appear at the top center, in dark, for any message the app has for you. They go away by themselves after a few seconds. Errors stay readable on a light background.
• Empty states say what the page is for and what to do next.
• Test every screen at 375 pixels wide, in light and dark, with the keyboard.

WordsCopy Anchor Link

• Short, plain sentences. Say "Mail you sent" not "Outbound correspondence".
• Name things the way the screen names them: Imbox, Feed, Screener, Reply Later, Set Aside, Bubble Up.
• No exclamation marks. No jokes in error messages.

NextCopy Anchor Link

• Development: the rules for code changes.