# LogicTrade — Design System & Style Guide > **v2 — juli 2026.** Audited against the running prototype (`shared/styles.css`). Changes in this revision: > new `--accent-blue-ring` (focus rings are now always 10% via token; `--accent-blue-glow` is hover-shadow only) · > `--assist-gradient` documented as AI-only · KPI-purple removed · search-input radius normalized to `--radius-md` > (the `10px` exception is gone — the no-off-scale rule is now absolute) · gradient-bar stop percentages specified · > **new § 3.0 with concrete sizing values.** > > Values in this document are verified against the prototype. Where the design-system showcase page disagrees, this document wins. This file is the canonical reference for matching the **Offerte** module's look, behavior, and feel in any new module of the LogicTrade ERP. It captures the full system: tokens, components, motion, UX rules, and the small conventions that make the product feel cohesive. > **TL;DR for the next module**: stay quiet, use the ink scale (not the brand blue) for most text, make money values strong, keep animation subtle, and only use the accent magenta where the existing module does — sparingly. --- ## How to read this doc — rules vs guidelines Two kinds of statements live below: - **🔒 RULE** — must match exactly. Visual tokens, component specs, motion timing, click semantics, the four-surface pattern, modal-safe animation, currency / percentage / pill formatting, drag-drop feedback, toast position, pagination, page-header pattern. If something here is a rule and your module diverges, the modules will visibly drift apart. - **🌿 GUIDELINE** — adapt to your module's content. _What_ a KPI shows, _which_ accordions sit in the side panel, _what_ fields the "paper" contains, _which_ filter chips the overview supports, _what_ the empty-state copy says. These vary because **Offerte ≠ Aftersales ≠ Inkoop**. Same shape, different contents. By default, anything in §1–§5 is a 🔒 RULE — even when an individual heading or paragraph isn't tagged. §6 mixes both (interaction patterns are rules; defaults/copy are guidelines). §7–§12 are rules. **§13 is the consolidated per-module content guideline list — start there when planning a new module.** When in doubt, treat it as a rule. **For future AI agents and contributors**: the absence of 🌿 GUIDELINE on a heading means it's a rule. Don't introduce new tokens, new colors, new radii, new font weights, new motion durations, or new component variants without a deliberate, documented decision. The system has been deliberately constrained — that's the whole point. --- ## 1 · Brand foundations ### 1.1 Colors 🔒 RULE #### Brand | Token | Hex | Role | | ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | `--accent-blue` | `#0d35a0` | Primary brand. Links, focus rings, active nav, drop targets, "Totaal" grand total, KPI blue card. | | `--accent-blue-soft` | `#e2eaff` | Brand fill at 100% opacity for hover/active backgrounds, focus rings, drop-target highlight. | | `--accent-blue-glow` | `rgba(13, 53, 160, 0.22)` | Soft blue shadow under **hover** states only (`0 4px 14px`). Never a focus ring. | | `--accent-blue-ring` | `rgba(13, 53, 160, 0.1)` | **The** focus ring. Used everywhere as `0 0 0 2px` (3px in modal context). Never hardcode this rgba — always the token. | | `--accent-magenta` | `#E6007E` | Secondary brand. Used very sparingly: KPI trend chips, "Niet definitief" pill, locked-state hint. **Never used as body text.** | | `--accent-magenta-soft` | `#FDE5F0` | Magenta tint for soft backgrounds and pill fills. | | `--accent-green` | `#009a82` | Success, primary CTA ("Versturen", "Klant aanmaken"), "Definitief" pill, eerstvolgend dot. **Not used for the order-made indicator** — see § 4.18.1. | | `--accent-green-soft` | `#e5f5f3` | Green fill (rare). | #### AI / Assist | Token | Value | Role | | ------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | | `--assist-gradient` | `linear-gradient(135deg, #eef2ff 0%, #ede9fe 50%, #fce7f3 100%)` | 🔒 **AI features only.** The Assist button and AI affordances. Purple/pink appears nowhere else in the system. | > This is deliberately *not* a brand color. It marks "this is AI" and loses that meaning the moment it's reused decoratively. #### Ink scale (text) A flat 5-step scale. The middle is `--ink-700` (body); above is heavier emphasis, below is quieter. | Token | Hex | Role | | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------- | | `--ink-900` | `#071b55` | Strongest — page titles, big numbers (KPI values), section headers (KLANT, DOCUMENT, OPMERKINGEN), grand total label. | | `--ink-700` | `#252525` | **Default body text.** Item names, totals values, button labels, line totals. | | `--ink-500` | `#6b7a94` | Secondary — labels, metadata, table column headers, captions. | | `--ink-400` | `#9aa5b8` | Tertiary — placeholders, footnotes ("30 dagen"), idle icons. | | `--ink-300` | `#cccccc` | Disabled, dashed-button borders, very faint dividers. | > The scale is intentionally short. Don't introduce 600/800/200/100 — we tried, they merged. #### Surfaces | Token | Hex | Role | | ----------------- | --------- | --------------------------------------------------------------- | | `--bg` | `#edf0f5` | Page background (the "table" the cards sit on). | | `--surface` | `#ffffff` | Cards, modals, panels, primary "page object" surface. | | `--surface-alt` | `#f4f6f9` | Subtle nested surface (KPI internals, hover bands, totals box). | | `--surface-muted` | `#fafafd` | Near-white — group headers, item-row hover. | #### Borders / strokes | Token | Hex | Role | | --------------- | --------- | ----------------------------------------------------------------------- | | `--border` | `#e1e5f0` | **Default visible border** — inputs, chips, cards, container outlines. | | `--border-soft` | `#eef0f4` | Quieter borders — KPI cards, group cards, between-section dividers. | | `--border-line` | `#f1f2f3` | Hairline — between table rows, between item rows, accordion separators. | #### Status / semantic | Token | Hex | Role | | ---------- | --------- | ------------------------------------------------------------- | | `--danger` | `#ec5555` | Destructive actions (remove on hover, deselect klant button). | #### Color usage rules 1. **Brand blue is reserved for "interactive / brand" things**: links, primary CTAs, focus, the grand total. It is _not_ a default text color. Default text is ink-700 / ink-900. 2. **Magenta is never body text**. Use it for backgrounds, badges, soft borders, and the "Niet definitief" status pill. It can also subtly mark a locked/read-only state. 3. **Green is for confirmed-positive actions** (Send, order created) and **the "Eerstvolgend" indicator** (next upcoming appointment dot). 4. **Section headers** (KLANT, DOCUMENT, OPMERKINGEN, VOORWAARDEN, OMSCHRIJVING column header treatment) use `--ink-900` navy. The matching uppercase + `letter-spacing: 0.6px` is part of the look. 5. **Money values** that are line totals or summary rows use `--ink-700`. Only the **grand "Totaal"** uses `--accent-blue` (signal: this is THE final number). ### 1.2 Typography 🔒 RULE - **Single font**: `'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif` (`--font-sans`). DM Sans dekt de hele app — body, titels, knoppen, tabellen, KPI's én de sidebar-navigatie. Geen tweede font, ook niet voor nav-labels. - Imported via Google Fonts: `family=DM+Sans:wght@400;500;600;700`. #### Sizes & weights | Use | Size | Weight | Color | | ---------------------------------------- | --------------------------------------------- | ------- | --------------------------------------------------------------------- | | Page title (`Offertes`, `Offerte O260…`) | 22–24px | 700 | `--ink-900` | | Section header (KLANT, DOCUMENT, …) | 12px uppercase, 0.6px tracking | 700 | `--ink-900` | | Body text default | 13px | 400–500 | `--ink-700` | | Item name in items list | 12px | 700 | `--ink-700` | | Labels (Datum, Verkoper, dt) | 12px | 400 | `--ink-500` | | Captions, footnotes | 11px | 500 | `--ink-400` | | Big number (KPI value) | 30px | 700 | `--ink-900` | | Grand total | 17px | 700 | `--accent-blue` | | Column headers (table & items) | 11px uppercase, 0.5–0.6px tracking | 500–700 | `--ink-500` | | Status pill | 13px | 500 | `--accent-magenta` (Niet definitief) or `--accent-green` (Definitief) | | Number cells | 12–13px, `font-variant-numeric: tabular-nums` | — | — | > **Always `tabular-nums` for money columns.** It keeps decimals aligned across rows. ### 1.3 Radius 🔒 RULE Three radius tokens plus pill / circle. **Every `border-radius` must use one of these — no hard-coded pixel values, no off-scale values, no exceptions. This is a hard rule, not a guideline.** | Token | Value | Use | | ------------- | ------ | ------------------------------------------------------------------------------------------- | | `--radius` | `4px` | Cell-edit inputs, chip closes, small interactive elements, tab indicator backgrounds. | | `--radius-md` | `8px` | Buttons (all), input fields, item-group cards, modal-close, KPI hover-hint, dropdown menus. | | `--radius-lg` | `12px` | Detail card, KPI cards, insights cards, totals box, **modal cards**. | | `999px` | — | Pills (filter chips, KPI trend chips, status pills, switches). | | `50%` | — | Circles (pagination buttons, dots, avatars). | > Off-scale values (`3px`, `6px`, `10px`, `18px`, etc.) are not allowed. Snap to the nearest token. ### 1.4 Shadows 🔒 RULE | Token / value | Use | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `4px 4px 15px rgba(14,34,85,.05)` + `1px solid #eef0f4` | **Main card shadow** — de canonieke schaduw onder alle "hoofd"-cards: overview-tabel-card, detail-A4, side panel. Radius 12px. Geen aparte hover-state. | | `--shadow-card` | Legacy multi-layer stack (`0 7px 16px rgba(199,202,220,.10), 0 30px 30px rgba(199,202,220,.09), 0 67px 40px rgba(199,202,220,.05)`) — nog in gebruik, migreren naar boven. | | `--shadow-panel` = `4px 4px 15px rgba(14,34,85,.05)` | Alias voor de main-card shadow op de side panel. | | `0 4px 14px rgba(19,80,234,.06), 0 1px 3px rgba(19,80,234,.04)` (idle) → `0 10px 24px rgba(19,80,234,.10), 0 3px 8px rgba(19,80,234,.06)` (hover) + `translateY(-2px)` | **KPI-card blauw** — subtiele kleurgebonden shadow die op hover intensiveert en licht opheft. | | `0 4px 14px rgba(230,0,126,.09), 0 1px 3px rgba(230,0,126,.05)` → `0 10px 24px rgba(230,0,126,.15), 0 3px 8px rgba(230,0,126,.07)` | **KPI-card roze** — zelfde patroon, magenta tint. | | `0 12px 32px rgba(15,22,42,.12), 0 4px 12px rgba(15,22,42,.06)` + `1px solid var(--border-soft)` | **Floating menu / context menu** — dropdown menus, quick-actions menus, popovers. Altijd op een witte card-achtergrond, dus met stroke tegen border-soft. | | `0 24px 70px rgba(13,30,80,.18), 0 4px 16px rgba(13,30,80,.06)` | Modal cards. | | `0 8px 28px rgba(15,22,42,.08), 0 1px 3px rgba(15,22,42,.04)` | Insights hero / secondaire content-cards buiten de hoofdvlakken. | > Don't introduce new shadow tokens unless a new surface tier emerges. Shadows are intentionally varied per surface importance. KPI-cards zijn het enige geval met kleurgebonden shadows én hover-intensivering — main cards blijven bewust rustig. ### 1.5 Spacing 🔒 RULE No spacing token system — values are picked contextually but consistently: - `4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 28 / 32 / 36 / 40` are the common picks. - Card padding: `28px 32px` to `32px 36px`. - Page padding: `32px 40px 64px` (24px each side under 1280px breakpoint). - Row padding: `12px–16px` vertical, `15px` horizontal (matches the offerte-paper inset). --- ## 2 · Module structure — the four surfaces Every CRUD module in LogicTrade follows the same four-surface pattern. This is the most important thing for a new module to mirror — surface choices below (typography, color, motion) only land if the underlying structure matches. ``` ┌─────────────────────────────────────────────┐ │ │ ┌─── Overview ───┤ KPI cards (4-up, summary + filter shortcut) │ │ │ Filter bar (config-driven chips) │ │ │ Sortable table │ │ │ │ │ single-click │ │ │ ↓ │ │ │ ┌─ Drawer ────┤ Slide-in paper preview from the right │ │ │ │ Read-only · quick-actions menu in corner │ │ │ │ Same content/layout as the detail │ │ │ │ │ │ │ double-click│ │ │ │ ↓ │ │ │ │ ┌── Detail ┤ Full-bleed editable "paper" surface │ │ │ │ + Side │ Right rail: accordions (Afspraken, Historie,│ │ │ │ panel │ Notities, Documenten) │ │ │ │ │ │ │ │ │ ↑ │ │ │ │ │ Modals │ Open over everything for confirms / pickers │ └──┴──┴──────────┴─────────────────────────────────────────────┘ ``` ### 2.1 Overview (list) Where the user lives between tasks. The pattern: 1. **(Optional) KPI cards row** — each card is _both_ a summary stat _and_ a filter shortcut: - Most cards open an inzichten / details view on click (small "Inzichten" icon hint reveals on hover, top-right). - One card represents the most actionable cohort and **toggles a filter** when clicked (e.g. "Openstaande offertes" sets `status = ["Niet definitief"]`). Active state shown by a magenta outline ring. 2. **Toolbar card** — a single `.card` containing the `.toolbar.toolbar--with-filters`. The toolbar order is fixed: `search → filterbar → .toolbar__pipe → .toolbar__actions`. The actions cluster on the right holds (in order) the optional view toggle (§ 4.5.1), the primary `+ Nieuw` button, and the `⋯` More menu. 3. **Sortable table** — the list itself, inside the same card as the toolbar so the toolbar and table share one chrome boundary. Row hover, stagger entrance, and the **single/double/right-click** semantic apply. The overview is intentionally _flat_: no nesting, no tabs. Filters and KPIs are the only navigation. #### 🔒 RULE — No separate page-header on list pages List pages have **no page-header strip** above the toolbar — no `.page__header`, no `

` with the module name, no "N items" subtitle. The module is already named in the sidebar; repeating it as a page title eats vertical space without adding signal. All controls that would otherwise live in a header (view toggle · + Nieuw · ⋯ menu) live inside the toolbar's `.toolbar__actions` cluster. This applies to offerte, service, and planning lists; new modules follow the same rule. The item count belongs in the data itself (table footer / pagination), not in a heading. ### 2.2 Drawer — the "view" option A right-sliding overlay panel triggered by **single-clicking a row** (or `Space` on a keyboard-active row — see § 6.1). It shows a **read-only paper preview** of the item — same layout as the detail's main canvas, but: - No editing affordances (no inputs, no remove buttons, no add CTAs). - **No header strip, no footer.** The paper sits directly in the drawer body. All record-level actions live in the quick-actions menu in the paper's top-right corner (§ 4.15). - Slide-in from `translateX(100%)` over 280ms; overlay fades 180ms. - Header (on the paper itself) shows a "Definitief / Niet definitief" pill but it's not interactive in the drawer. The drawer is **the answer to "I just want to peek"**. Users review most quotes this way and only escalate to the editor when they need to make changes. This pattern is critical to the speed of the module — don't replace it with a full route navigation. ### 2.3 Detail — the "paper" canvas The main editing surface. Triggered by: - **Double-clicking a row** in the overview (or `Enter` on a keyboard-active row). - Clicking **Bewerken** in the quick-actions menu inside the drawer (the primary item, also reachable via `Enter` directly on the drawer). - Clicking the icon-open button on a row. Layout: ``` .detail-grid (grid: minmax(0,1fr) auto) ├─ .detail-card ← the "paper": white, soft border, large radius │ ├─ Page header in-card (title + status pill + actions) │ ├─ Klant + Document blocks (2-col info-grid) │ ├─ Items list (column header + rows + groups + add-split) │ ├─ Totals box (right-aligned, soft surface-alt fill) │ └─ Voorwaarden + Bestanden (2-col) └─ .side-panel--accordion (the right rail; see § 2.4) ``` The "paper feel" is real: white surface, generous padding (32×36), soft outer border, large radius. Inputs are **invisible until hovered** — the page reads like a printable document, and editing is opt-in. This is what we mean by "paper canvas": the content _is_ the document, not a form _about_ the document. The page-header buttons live **above** the paper, not inside it (Download, Link, Order, Versturen, More). The paper itself contains the document content. #### 🔒 RULE — Title hierarchy on the paper The paper has **exactly one H-style heading**: the **detail-header\_\_title** at the top (e.g. `Offerte O2600512`, `Servicemelding S26000021`). Every section below it uses **`.info-block__label`** — the small ALL-CAPS label (12px / 700 / `--ink-900` / 0.6px tracking) with content directly underneath. **Never** use a second `

` / `

` inside the paper for sections like "Beschrijving", "Artikelen", "Oplossing", "Bestanden". This was a real regression we caught in service-detail; the paper started reading like a CMS form instead of a document. Two corollaries: - **Items tables get no heading at all.** Offerte's items table is preceded only by its column-header strip (`OMSCHRIJVING · AANTAL · …`); service's artikelen table follows the same rule (`ARTIKEL · LOCATIE`). The column strip _is_ the section affordance. - **The user-facing complaint, subject, or description is content, not a title.** In service it's labelled `MELDING` with the onderwerp as `info-block__line--strong` and the omschrijving as body text. Same pattern applies anywhere a free-text "what's going on" field exists — wrap it in an info-block, don't promote it to an H-heading just because it reads like one. ### 2.4 Side panel — contextual/related info A right rail next to the detail-card. Holds **everything about this thing that isn't part of the document itself**: - Afspraken (appointments related to this offerte) - Historie (audit trail of changes / status / order events) - Notities (internal notes) - Documenten (related files) Rules: - The side panel is **always present** when there's a detail surface. Never make it a dialog or a tab. - It uses **accordions** (`.acc`), one per category. Multiple can be open at once. - The whole panel **collapses to a 48px icon strip**. Both expanded and collapsed states must always be in the DOM (transitions via opacity/width — `display: none` defeats the smooth collapse). - Items inside accordions can have **state markers** (e.g. green dot for "next upcoming" appointment, dashed-blue link for an order id in history) — see § 4.7. - The side panel **never** contains primary actions related to the document (those live on the paper). It's read + lightweight-write (add an appointment, add a note). ### 2.5 Modals — over everything Used sparingly, for: - **Confirmations** that need a second question (status change → "Order maken?"). - **Modal-style pickers** when an inline picker would be too constrained (Catalogus, Klantkaart, Nieuwe klant). - **Detail editing of a configurable item** (Product detail modal). Modals overlay the entire viewport (`position: fixed; inset: 0`) with a soft backdrop blur. They never trap the user — Esc + overlay-click both close. The canonical foot has up to three buttons with **three different weights** (`btn--ghost` cancel left + optional `btn--text` secondary action + `btn--primary` commit right) — see § 4.9 for the full rule. > **Constraint**: any animated ancestor of a modal (`.page`, `.detail-card`, `.detail-grid`) must use opacity-only animations. Transform-keyframe animations turn the ancestor into a containing block for `position: fixed` and the modal will clip to that ancestor instead of the viewport. We hit this bug. Don't do it again. ### 2.6 The relationship rules - **Overview → Drawer → Detail** is a _progressive escalation_ of commitment. Overview is browse, drawer is peek, detail is edit. A new module should preserve this 3-step gesture path. - **Detail ↔ Side panel** is a _split of responsibility_: the document on the left, related context on the right. Don't mix them — putting "appointments" inside the document or putting "line items" inside an accordion both feel wrong. - **Modals are episodic**: they appear, ask one question, and leave. Don't put long workflows inside a modal — that's what the detail page is for. - **The status pill is the single source of truth for record state**. It's visible from overview (table cell), drawer, and detail. Always editable from the detail (and read-only from drawer). Status change drives: - Read-only mode in the editor (Definitief locks editing). - History entries (auto-logged). - Confirmation modals (e.g. "Order maken?" on Definitief). ### 2.7 Quote-on-yourself when starting a new module Before designing screens, draw the four boxes: 1. What goes on the **overview**? What's the KPI row? What 1 KPI is also a filter? 2. What's the **drawer** showing — i.e., what's the read-only summary the user wants to glance at? 3. What does the **paper** contain? What's the "document" here? (Order = order lines + customer + delivery; Inkooporder = supplier + lines + receipt.) 4. What contextual info goes in the **side panel**? Appointments? Audit trail? Linked records? If you can't answer all four, the module isn't shaped correctly yet. Stop and rethink before opening Figma. When you sketch the paper, **mentally draw it as a single A4**: one big title at the top, then small uppercase labels for every block underneath. If you find yourself reaching for a second large heading, reread §2.3 — that almost certainly means the block belongs as an `info-block__label` instead. --- ## 3 · Layout ### 3.0 Sizing — concrete values 🔒 RULE **These are the numbers. A new module copies them exactly — not "roughly".** Every value below is verified against the running prototype. If a size isn't listed here, it isn't yours to invent: find the existing component that already solves it. | Surface | Value | | ------------------------------ | ------------------------------------------------------------ | | App grid columns | `var(--sidebar-w, 230px) 1fr` | | App grid rows | `56px 1fr` (topbar is 56px) | | Sidebar collapsed | `56px` | | Gradient bar | `3px` high, `position: fixed`, `z-index: 100` | | **Page padding (default)** | `32px 40px 64px` | | **Page padding (≤1280px)** | `24px 24px 48px` | | Detail grid | `grid-template-columns: minmax(0,1fr) auto; gap: 24px` | | Detail grid collapse | `≤1200px` → single column (`1fr`) | | **Detail card padding** | `32px 48px` | | Detail card radius | `--radius-lg` (12px) | | Detail card border | `1px solid var(--border-soft)` | | Detail card shadow | main-card shadow (§ 1.4) | | Side panel collapsed | `48px` icon strip | | Items row inset | `14–16px 15px` (headers, rows and totals share this edge) | | Modal card (wide) | `width: min(880px, 100%)` | | Button height | `36px`, padding `0 16px` | | Input radius | `--radius-md` (8px) — all inputs, including search | | Focus ring | `0 0 0 2px var(--accent-blue-ring)` (3px in modal context) | > Off-scale values are not allowed (§ 1.3). Snap to the nearest token. > > ⚠️ The design-system showcase page (`ds-ui-paper__zone--*`) currently displays different paddings than the real `.detail-card`. **The table above is authoritative; the showcase is not.** ### 3.1 App grid ``` ┌────────────────────────────────────────────────────────┐ │ ▓▓▓▓ 3px gradient bar (always on top, position: fixed) │ ├────────┬───────────────────────────────────────────────┤ │ │ Topbar (56px, sticky, z-index: 30) │ │ Side- ├───────────────────────────────────────────────┤ │ bar │ │ │ 230px │ Main content (.page padding 32 40 64) │ │ (56 if │ │ │ collapsed) │ └────────┴───────────────────────────────────────────────┘ ``` `grid-template-columns: var(--sidebar-w, 230px) 1fr` and `grid-template-rows: 56px 1fr` with named areas. The 3px **gradient bar** at the top is a brand accent. It runs across every page. ```css .app::before { linear-gradient(90deg, #1bc7ad 0%, #0d8c9e 28%, #0d35a0 64%, #ec4899 100%); height: 3px; position: fixed; z-index: 100; pointer-events: none; } ``` > 🔒 **The stop percentages (`0 / 28 / 64 / 100`) are part of the spec.** Without them an agent guesses the distribution and the bar comes out wrong. > > ⚠️ `#0d8c9e` and `#ec4899` are **deliberate one-off gradient colors — not tokens, not brand colors.** They exist only in this bar. Never reuse `#ec4899` as "the pink": the brand magenta is `--accent-magenta` (`#E6007E`). Never reuse `#0d8c9e` at all. ### 3.2 Detail page grid ``` .page └─ .page__header (back link · header actions) └─ .detail-grid grid: minmax(0, 1fr) auto, gap: 24px ├─ .detail-card ← the offerte "paper" └─ .side-panel--accordion ← collapsible right rail ``` The right side panel can collapse to a 48px icon strip. Both states must always be in the DOM (transitions via opacity/width, not conditional rendering — see Animation rules). ### 3.3 The offerte "paper" `.detail-card` is conceptually a printable A4 — the working surface. White background, soft border (`--border-soft`), `--radius-lg`, main-card shadow (§ 1.4). Internal layout is grid-driven. **Items rows align horizontally to the offerte-paper inset, not to its container.** That means `.items-head` and `.items-row` use `padding: 14–16px 15px` so column headers, totals, and group subtotals share the same right edge. #### 3.3.1 A4 opbouw — vier universele zones 🔒 RULE Elke A4-paper canvas in het systeem (offerte-detail, service-detail, planning-detail, en toekomstige modules) volgt dezelfde vier-zone-opbouw. De **invulling** verschilt per module; de **structuur** niet. ```text ┌─────────────────────────────────────────────┐ │ Topbar Titel (links) Status (rechts) │ ├─────────────────────────────────────────────┤ │ Zone 1 — Hoofd-info │ ← klant, datum, verkoper, referentie ├─────────────────────────────────────────────┤ │ Zone 2 — Main content │ ← items-tabel, melding + oplossing, afspraak-meta │ │ ├─────────────────────────────────────────────┤ │ Zone 3 — Ondersteunende content │ ← opmerkingen, bijlagen, voorwaarden └─────────────────────────────────────────────┘ ``` - **Topbar** — record-titel (bv. "Offerte O-2024-0123") links, status-pill rechts. Deelt de status-toggle-regel uit § 6.2. - **Zone 1 — Hoofd-info** — identiteit van het record. Klant, adres, datum(s), verkoper/hulpbron, referenties naar andere records. Grid-layout, alle waardes zijn `EditableText` / `InlineSelect` (§ 4.2 borderless). - **Zone 2 — Main content** — waar het record écht over gaat: items-tabel (offerte), melding + oplossing (service), afspraak-meta + verrichtte werkzaamheden (planning). Meestal het hoogst en het meest interactieve blok. - **Zone 3 — Ondersteunende content** — opmerkingen, bijlagen, voorwaarden, betalingsinformatie. Alles wat "erbij hoort" maar niet nodig is om het record te begrijpen. Regels: - 🔒 Zone-volgorde is vast: 1 → 2 → 3. Nooit "opmerkingen bovenaan" of "status onderin". - 🔒 Achtergrond binnen een zone-block: `var(--surface-alt)`, border `1px solid var(--border-soft)`, radius `--radius-md`. Alleen zone 2 mag optioneel op de paper-witte bg staan als de content zelf al genoeg structuur heeft (items-tabel). - 🔒 Meta-labels binnen een zone: uppercase 11px `--ink-500` met 0.6px letter-spacing (§ 1.2). - 🌿 Modules kiezen zelf welke velden er in zone 1 komen en of zone 3 überhaupt zichtbaar is (bij een "leeg" planning-blok bv. niet). --- ## 4 · Components ### 4.1 Buttons | Class | Use | Style | | --------------------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | `.btn.btn--primary` | Primary CTA ("Opslaan", "Versturen") | Filled green, height 36, padding `0 16px`, font 13px/500, radius `--radius-md`, no icon by default. | | `.btn.btn--ghost` | Secondary action ("Annuleren") | Outlined, transparent. | | `.btn.btn--text` 🔒 | Tertiary action — text-only, no chrome ("Andere klant", "Verwijderen" inside modals, "Terug" links) | Transparent border + bg, `--ink-500` text, neutral hover (`--surface-alt` bg, `--ink-900` text). | | `.btn--icon` | Square icon-only button | 36×36, neutral. | | `.btn--icon-ghost` | Floating icon button (header actions: Download, Link, Order maken) | Same square, but truly transparent until hover. | | `.btn--icon-ghost--made` | The order-maken button after an order exists | Green text + small green dot in top-right corner. | | `.add-row` (canonical dashed CTA) | Full-width "Regel toevoegen", "Afspraak inplannen" | 1.5px dashed `--ink-300`, `--ink-500` text, weight 600, white bg, `padding: 12px`, `margin-top: 12px`, gap 8. **All three must use this exact spec** — no inline overrides. | | `.add-row-split` | Split button: "Regel toevoegen | ⌄" | Composed of two `.add-row` halves with a divider; the right half opens a small menu (Tekstregel / Groep). | | `.items-toolbar__btn` | Pill-shaped secondary buttons (used inside the split menu / minor actions) | 999px radius, white bg, 1px border, 12px text, weight 500. Hover: blue accent. | 🔒 RULE — **Three button weights, three roles.** When a surface needs more than two actions, use the full hierarchy: `btn--text` for the dismiss/back action (lightest), `btn--ghost` for a secondary action with structure (e.g. "Bestand toevoegen"), `btn--primary` for the commit. Never use two `btn--ghost`s side-by-side — they read as the same weight and force the user to read labels to find the primary. Common rules: - Height 36px for all primary/ghost/icon buttons. - `--radius-md` (8px) on rectangular buttons. - `:active { transform: scale(0.97); }` for tactile feedback (added at the cross-cutting CSS layer). - Icons: 14–16px usually; the `+` icon **rotates 90° on hover** for `.add-row` (a small delight detail — keep). #### `.btn--danger` / `.btn--danger-outline` 🔒 Voor destructieve commits (Verwijderen) en het afbreken van een lopende bewerking (Afbreken). **Nooit** gebruiken voor "Annuleren" — dat is `btn--text` of `btn--back`. - `.btn--danger` — gevuld rood (`--danger`), witte tekst. Hover donkerder rood (`--danger-hover`). Voor de bevestig-actie in een verwijder-modal. - `.btn--danger-outline` — witte bg, `--danger` border en tekst. Hover vult naar `--danger-soft`. Voor "Afbreken" op formulieren met onbewaarde wijzigingen. - **Danger in menu** (`.menu__item--danger`): geen border, geen card, geen shadow — het item leeft in de bestaande `.menu` popover. Rode ink, hover `--danger-soft` bg. Staat achter een divider onderin het menu, nooit als eerste item. - **Copy**: werkwoord + object (`Verwijderen`, `Afbreken`, `Loskoppelen`). Nooit "Definitief verwijderen" of "Wijziging terugdraaien" — kort blijft duidelijker. #### `.btn--pill` / `.btn--pill-icon` 🔒 vorm-uitzondering De **enige** ronde button in het systeem. Signaal: rechthoekig = doen (data-actie), pill = **openen** (systeemkaart / dialog). - `.btn--pill` — als `btn--ghost`, maar volledig ronde radius (`999px`). Label = werkwoord + object, bv. "Klant bekijken", "Open klant". - `.btn--pill-icon` — icon-only, rond, iets kleiner (28–32px). `aria-label` verplicht. - Regels: - 🔒 Alleen voor systeemkaart/dialog openen. Nooit opslaan/versturen/verwijderen. - 🔒 Max. één pill per kaartblok. - 🔒 Staat in het contextblok van de kaart, niet in de header of toolbar. - 🔒 Binnen de geopende dialog gelden weer de gewone `btn--primary` / `btn--ghost` / `btn--text` varianten. #### `.btn--split` — "meer" / context-menu trigger 🔒 De `⋯`-knop naast de primaire actie in een detail-header (Order maken · Versturen · ⋯). Zelfde hoogte en radius als de andere knoppen, opent een floating menu (§ 1.4 shadow: floating menu). Menu-items volgen dezelfde interactie-regels als de drawer quick-actions (§ 4.15). ### 4.2 Inputs #### Search input (`.ds-input--search`) 🔒 De zoekinput in de toolbar en boven lijstjes is een aparte variant met een iets zachtere rand-radius dan gewone form inputs: - Radius `--radius-md` (8px) — gelijk aan alle andere inputs. Er is **geen** afwijkende search-radius. - 36px hoog, `--surface` bg, `--border` border. Leading `Search`-icoon in `--ink-400`. - Placeholder-tekst: **`--ink-400` (`#9aa5b8`)** — nooit lichter, nooit `--ink-500`. Placeholder = "wat kan ik hier zoeken?", niet decoratie. - Focus: `--accent-blue` border + `0 0 0 2px var(--accent-blue-ring)`, geen andere bg-change. #### Filterbar (`.filterbar`) 🔒 pattern Config-driven filter-rij, altijd direct onder de search input in een toolbar. Twee element-typen: - **Filter-chip** (`.filter-chip`) — pill, 999px radius, witte bg, `--ink-300` border. Toont label + gekozen waarde. Icon wordt magenta zodra de filter een waarde heeft; `×` verwijdert alleen de waarde, niet de chip. Klik opent een popover met opties (single- of multi-select). - **`+ Filter`-knop** (`.filter-add`) — dashed border, `--ink-500` tekst, zelfde 999px pill-vorm. Opent een menu met alle nog niet actieve filter-definities; klik op een item promoveert het naar een actieve chip. De filter-definities staan centraal in `shared/filters.jsx` (`applyFilters` helper). Modules definiëren alleen hun eigen definitie-lijst; nooit de chip-styling per module overschrijven. #### Toggle switch — groen 🔒 De `.switch`-toggle gebruikt `--accent-green` als actieve kleur, niet blauw. Reden: toggles zijn commits ("aan / uit"), geen navigatie of selectie, en delen daarmee de kleur van primaire CTA's. #### Text inputs (`.cell-edit`) — bordered (offerte / list contexts) - Transparent border + bg by default. - On hover: white bg, soft grey border (`var(--border)`). - On focus: white bg, accent-blue border, soft 2px blue ring (`box-shadow: 0 0 0 2px var(--accent-blue-ring)`). - 4px radius, 4–6px vertical padding. > **This is the original input look.** Still used for `.cell-edit` in offerte's items table (qty / stuksprijs / korting) and other dense edit-in-grid contexts where the border helps the user see the cell boundaries. #### Inline editors on the paper canvas (`.lt-detail-page`) — borderless 🔒 On the detail "paper" surfaces (service-detail, planning-detail, …) the canonical hover/focus is **softer**: no border, fill on hover, ring on focus. Reason: a paper canvas easily has 6–10 inline editors close together (klant-card + meta-grid + soort + vestiging + betreft + …); the bordered version was visually loud and broke the "this reads like a printed document" feel. - Idle: `border: 1px solid transparent`. - On hover: `background: var(--surface-alt)`, no border, no shadow. - On focus / open: `background: var(--surface)` (white), no border, `box-shadow: 0 0 0 2px var(--accent-blue-soft)` ring. Apply by adding `lt-detail-page` to the root `
`. The shared rule lives in `shared/styles.css` and targets `.inline-select`, `.inline-combo`, `.svc-order-search__field` (and any cross-module record search built on the same shape). Every editable field on a paper canvas should adopt it — don't mix the two models on one page. #### Alignment trick — invisible-until-hover editors The visible value of an inline editor must align flush with the dd's left edge (matching the value position of plain-text rows). Achieve this with `padding + negative-margin` so the click target is wider than the visible glyphs without indenting them: | Class | Pattern | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | | `.editable-text` | `padding: 2px 6px; margin: -2px -6px;` | | `.inline-select` | `padding: 4px 8px; margin: -4px -8px;` | | Custom (e.g. planning's `TimeInput`) | Use the same padding+negative-margin pair. Don't fix `width` or `text-align: center` — the value will appear visibly indented. | #### Money input A specialized text input that: - Shows `€ 1.234,56` (formatted) when blurred. - Switches to raw `1234,56` when focused (auto-selects). - Parses Dutch format on blur (`parseEUR` accepts `€ 1.234,56`, `1234,56`, `1234.56`). - In the items table, **editing a line's stuksprijs back-computes the discount** instead of changing the catalog price. (Catalog stays the reference; discount % captures any reduction.) #### Percent input - Shows `5%` when blurred, raw integer when focused. - Clamped 0–100. #### Inline editors - `EditableText` — contentEditable span; `Enter` commits, `Esc` cancels. Used for inline-editable fields like the reference and group names. - `InlineSelect` — dropdown styled like editable text (no native ``) for use **inside modals** where the OS option list breaks the visual language. The trigger is a 38px-tall input-style button with an optional leading icon; click opens a popover with hover-able options, an `accent-blue-soft` highlight on the active row, and an optional `sub` line per option (used by the layout selector to show a one-liner under each label). - Idle: `--surface` bg, `--border`, `--ink-900` text. - Hover: border lifts to `--ink-300`. - Open / focus: `--accent-blue` border + `0 0 0 3px var(--accent-blue-ring)` (modal context → 3px). Caret rotates 180°. - Options list: `--radius-md`, soft shadow, `--surface-alt` row hover, `--accent-blue-soft` active row with a checkmark. - Closes on outside-click and `Escape`. > Use `FormSelect` for selects inside `.modal-card`. Keep `InlineSelect` for selects on the paper canvas. Never drop a native `