v3 UI style

First: check that this design was adopted

Apply this skill only when one of these is true:

• a user instruction in this conversation asks for this design: v3-ui-style, the mailcow Logs Viewer v3 style, or the v3 style or look;
• the AGENTS.md or CLAUDE.md that applies to the files you change says the UI follows one of those.

Before you announce that you use this skill or read anything under references/, name the user instruction or quote the project line that adopts the design. If there is none, stop here and build the UI in the project's own design, or as the request asks. These are not adoption: the skill being installed or listed, a README or screen that looks like an admin or mail UI, a product version that happens to be called v3, and a mention made only to describe, review or exclude this skill.

About the style

The design system of the mailcow Logs Viewer v3 frontend: a dense, flat admin UI where the text colour is the accent and colour means status. The look is half of the style; the other half is how things behave. This skill holds both as rules, plus the v3 code they were taken from.

When it applies

• A project adopts the style with one line in its AGENTS.md or CLAUDE.md, for example "UI follows the v3-ui-style skill." In such a project every UI task uses this skill.
• Precedence, highest first:
  1. The target project's own design system, domain and decisions: its names, endpoints, statuses, languages and wording.
  2. "Do not copy" in the principles file.
  3. The principles file.
  4. The area rules.
• The rules describe v3, an admin UI for a mail server. Adopt the behavior and its values; adapt the names, endpoints, fields and domain values to the target project.
• Decisions that are part of the style, even where a common default differs:
  • Animations stay when the system asks for reduced motion; add no reduced-motion override (AX-8).
  • The copy icon shows on hover only, on pointer devices; copying works by click or tap without it (FB-12).
  • A click outside closes only windows without typed input, and only when the press started outside. A window with typed input asks "Discard your changes?" before it drops a change (DS-9).
  • An action the server can take back by a receipt (dismissing alerts) acts at once and offers Undo instead of asking first; DS-20 lists what still asks first and what acts on one click without Undo (FB-16, DS-20).
  • Every hover style is gated by @media (hover: hover); focus styles are not, and a tooltip that is the only way to read a value stays reachable by tap (MO-4).
  • There is no Refresh button: every page updates by itself at a pace that fits its data, and a refresh never redraws what the user works in and keeps their place when it does redraw (SV-10, SV-6, SV-13).
  • Every layer over the page is built by its shared builder (dialog, sheet, picker, menu, toast) or kept in the same frame when it lives in the HTML; exceptions are listed with a reason, and a guard test fails on any other. Where a layer has an X, it is the one shared X (DS-24).
  • Dates and times follow the Date Format and Time Format the user picks (by default the browser's date order and the 24-hour clock), always as numbers without month names, and go through one set of format helpers that a test keeps every page on (FW-9).
• Two items are still open in v3 itself: results shown only in colour on some buttons, and a visual order that differs from the DOM order; and the Copy button on a selected log line, reached with a mouse only (LD-14). Build both right from the start.

How to read

1. Read references/v3-design-principles.agents.md fully: core rules, tokens with CSS, type scale, layout, components, copy, behavior principles, signature behaviors, the interaction rules, "Do not copy", the pitfall index and the checklist.
2. Choose area files from the table below by what the screen contains, not only by its page type. Read each chosen file fully. Do not load all sixteen at once.
3. When a rule names a rule of another area by ID (for example "AX-7") and your screen uses that part, read that rule too. The prefix gives the file.
4. Some rules end with a part marked "Before the interaction fixes (history ...)". Where it differs from the first part, the first part is the rule; details the first part does not cover still hold. A sentence that starts "Before the auto-refresh layer" or "Before #509" is history in the same way.
5. Open the bundled code only when a rule is not enough. references/v3-code/README.md says how its file:line references resolve and what is not included.

All area files are in references/behaviors/.

Common starting sets, before adding what the screen contains:

• Any new page: AX, RT, FB, FW, NL and SV (every page updates by itself, SV-10); MO when phones are in scope.
• Settings page: add FS, DS and MP.
• Data table page: add TB, SR and MP; LD for live logs and the "N new messages" offer; DS when a row opens a dialog.

Done

• Work through the checklist at the end of the principles file. It is the done gate.
• Give the project the guard tests v3 uses, adapted to its files: one that fails on a popup built outside the shared builders, and one that fails on a page without a refresh of its own. references/v3-code/README.md says how to adapt them.
• Check the result in the running app: light and dark, desktop, the rail range up to 1100px and a phone up to 760px, and right to left when the project supports it.
• Report which checklist items you did not verify and which rules of the areas you read you dropped on purpose, with the reason.