# Sqrl Design System Single-file reference for product UI (humans and AI). Do not scrape the docs site. - Theme overlay: https://design.sqrl.nl/dist/sqrl-theme.min.css - Load **Bootstrap 5 CSS first**, then the overlay. Markup is Bootstrap 5; use Sqrl custom classes only where a page is tagged Sqrl custom. - **`sq-preview`** is a docs-only example frame. Copy the markup **inside** it (or the HTML fence below). Do not emit `sq-preview` in an app. - **`sq-source-tags`** are docs-only. **Bootstrap** = stock Bootstrap 5 classes (themed). **Sqrl custom** = extra classes (`sq-*`, `btn-ghost`, …). - **Rules** sections are constraints. Pages below follow the docs sidebar. --- # Introduction This design system is a warm-paper interface layer on **Bootstrap 5**: tokens, typography, and component patterns so product screens stay consistent. ## What you get - **Theme** — compiled overlay CSS (`sqrl-theme.min.css`) on top of Bootstrap 5; [Quick start](/getting-started/quick-start) has the `` tags. - **Docs** — Design foundations and component examples you can copy into an app. One-file copy for AI: [design.md](https://design.sqrl.nl/dist/design.md). - **Principles** — One clear primary action per view; follow-up and conversion first. ## Who this is for Designers and developers working on product UI. You should be comfortable with HTML and Bootstrap utility classes; the theme handles the rest. ## Source tags Component pages show small tags under the title (or under a section heading when only part of the page is custom):

Bootstrap Sqrl custom

- **Bootstrap** — standard Bootstrap 5 markup; `theme.scss` maps Sqrl tokens onto these classes. - **Sqrl custom** — extra classes or patterns Bootstrap does not ship (`sq-*`, `btn-ghost`, …). ## Next steps Read [Quick start](/getting-started/quick-start) to add the theme to a project, then explore [Colors](/design/colors), [Iconography](/design/iconography), and [Buttons](/components/buttons). --- # Quick start Put this in the document ``. **Bootstrap first**, then Sqrl. ```html ``` Use Bootstrap 5 classes. Add Sqrl custom classes only where a page shows the **Sqrl custom** tag. Patterns: [Buttons](/components/buttons). ## Design.md Whole design system in one Markdown file. Give this to a model instead of scraping the site. [Download here](https://design.sqrl.nl/dist/design.md) When a model reads that file: - **`sq-preview`** is a docs-only example frame. Copy the markup **inside** it (or the HTML fence below). Do not emit `sq-preview` in an app. - **`sq-source-tags`** are docs-only. **Bootstrap** = stock Bootstrap 5 classes (themed). **Sqrl custom** = extra classes (`sq-*`, `btn-ghost`, …) — use only those. - Load Bootstrap CSS, then `sqrl-theme.min.css`. Follow **Rules** on each page as constraints. --- # Colors

Bootstrap Sqrl custom

Sqrl palette: warm paper, one brand green, stone neutrals, and named status/accent hues. Swatches below; **when to use which** → [Rules](#rules). ## Green Brand scale. **`green-600`** is Bootstrap **primary**; **`green-700`** maps to **success** / default links.

Pressed

green-900

#1F3F28

Pressed success button (`btn-success` active).

Active

green-800

#2C5A38

Link hover, primary/success pressed, active accordion and list text.

Success

green-700

#356C44

Links, success text, solid success badges.

Primary

green-600

#418252

Primary buttons, checks, progress.

Border subtle

green-300

#A9CBB2

Borders on tinted primary/success badges and alerts.

Subtle

green-100

#DCEADF

Tinted success badge fill and alert backgrounds.

Selected

green-50

#EDF4EE

Selected rows, accordion open, dropdown hover/active, tinted primary badges.

## Stone Warm neutrals — all text and borders tint from **`stone-900`**. **`stone-100`** is Bootstrap **secondary** (subtle fills), not terracotta.

Body & headings

stone-900

#3B342F

Body, headings, scope bar, active pagination and pill nav.

Nav emphasis

stone-800

#4E463F

Sidebar nav links, breadcrumb hover, `btn-dark` hover.

Muted & neutral

stone-700

#6B625B

Secondary copy, neutral badges, helper text.

Subtle text

stone-600

#8A807A

Tertiary text and micro-caps (`text-body-tertiary`).

Placeholder

stone-500

#A79D95

Placeholders, disabled controls, chevrons, close icon.

Focus ring

stone-400

#C6BCB2

Focused inputs and secondary button hover border.

Control border

stone-300

#DED5CB

Default input and select borders.

Default border

stone-200

#E9E2DA

Dividers, preview outlines, bordered cards.

Secondary surface

stone-100

#F1EBE5

Secondary fills, disabled inputs, neutral subtle backgrounds.

Light badge fill

stone-50

#F6F2EE

Light badges and chips; same as **`surface-paper`** (`bg-surface-paper`).

Inverse text

stone-white

#FDFBF8

Text and icons on dark fills — not a card background.

## Status Semantic fills for badges, alerts, and banners (`text-bg-*`). Each tone has matching **`-subtle`** / border tokens in the theme. **`text-bg-neutral`** / **`alert-neutral`** are Sqrl custom — Bootstrap has no `neutral` color.

Success

green-700

#356C44

Solid success badges and status — pair with a label.

Warning

ochre-600

#B07B1E

Caution, due-soon, and attention states.

Danger

crimson-600

#B23A34

Errors and destructive actions.

Info

azure-600

#2F6BA8

Informational badges and labels.

Neutral status

stone-700

#6B625B

Open or draft tags when no status tone fits.

## Accents

Sqrl custom

Named hues for charts and highlights — **not** status. Utilities: `text-accent-*`, `bg-accent-*`, `text-bg-accent-*`, `border-accent-*`. **Azure is info**, not an accent.

Teal accent

teal-600

#2E7D77

Charts and accent badges only.

Terracotta accent

terracotta-600

#C0623C

Charts and accent badges — not secondary actions.

Slate accent

slate-600

#5C6B72

Charts and accent badges only.

Taupe accent

taupe-600

#8A7256

Charts and accent badges only.

Violet accent

violet-600

#6B5B95

Charts and accent badges only.

## Surfaces Layout backgrounds and elevation. Use **`bg-surface-*`** utilities (`bg-surface-app`, `bg-surface-page`, `bg-surface-card`, …) or **`var(--sq-surface-*)`**. **Inputs** use **`surface-card`** (same family as cards). Cards use shadow, not border, unless the surface matches — then **`card-bordered`**.

App background

surface-app

#E8E0D7

Full app shell; sidebar shares this. Work panel floats lighter on top.

Page canvas

surface-page

#F4F0EA

Raised work panel (`bg-surface-page` / `bg-body`), not the outer shell.

Card & modal

surface-card

#FCFAF7

Cards, modals, menus, and form field background.

Code background

surface-code

#F8F5F1

Docs and in-app code block background.

Sunken well

surface-sunken

#F1EBE5

Inset wells, placeholders, doc preview backdrops.

Soft paper fill

surface-paper

#F6F2EE

Warm neutral bands and chrome; token **`stone-50`**.

Selected highlight

surface-selected

#EDF4EE

Table, list, and accordion selection (green-50).

## Rules ### Palette - Warm, low-chroma **paper** UI with one saturated **brand green**. **Stone** is the secondary action colour — not terracotta. - **Colour never carries meaning alone** — pair with a dot, icon, or word ([Iconography](/design/iconography), [badges](/components/badge), alerts). ### Bootstrap mapping - **Primary** → `green-600` (`btn-primary`, `bg-primary`, focus rings, selection). - **Success / link hover** → `green-700` (`text-success`, `text-bg-success`, links). - **Secondary** → `stone-100` (`bg-secondary`, subtle chips) — not terracotta. - **Dark / strong UI** → `stone-900` (`bg-dark`, body text, scope bar, active pagination/pills). - **Neutral** → `stone-700` — Sqrl custom utilities: `text-neutral`, `bg-neutral`, `text-bg-neutral`, `bg-neutral-subtle` (Bootstrap has no `neutral`). - **Info** → `azure-600` (`text-bg-info`) — not an accent. - **Warning / danger** → `ochre-600` / `crimson-600`. - **Accents** → `teal`, `terracotta`, `slate`, `taupe`, `violet` — highlights and charts only; never primary actions or `btn-secondary`. ### Surfaces & text - **Surface utilities** — `bg-surface-app`, `bg-surface-page`, `bg-surface-card`, `bg-surface-raised`, `bg-surface-code`, `bg-surface-sunken`, `bg-surface-paper`, `bg-surface-hover`, `bg-surface-active`, `bg-surface-selected`, `bg-surface-overlay` (also `--sq-surface-*` on `:root`). **`surface-paper`** = **`stone-50`**. - **App background** (`surface-app`) wraps the UI; **work panel** (`surface-page`) sits raised inside it — see [Layout](/design/layout). - **Cards** on `surface-card` with shadow; **`card-bordered`** when adjacent surfaces match. - **Inputs** use **`surface-card`** (`$input-bg`). **`stone-white`** is inverse text on dark UI only. - **Body** `stone-900`, **muted** `stone-700`, **tertiary** `stone-600` (`text-body-tertiary`). --- # Typography

Bootstrap

Three families on a fixed scale (largest → smallest below). **Copy tone** → [Content](/design/content). **When to use which** → [Rules](#rules). | Family | Role | | --------------------------- | ------------------------------------------------------ | | **Newsreader** (600) | Display and headings — names things | | **Manrope** (400–700) | Body, UI, labels, **dates** | | **IBM Plex Mono** (tabular) | Counts, money, IDs in tables and summaries — not dates | ## Type scale Largest to smallest. Samples use **Bootstrap markup** (`h1`, `display-1`, …); **`theme.scss` replaces CDN Bootstrap** heading styles.

44px

Sqrl CRM

Display / hero · Newsreader · 600 · marketing and empty-state heroes only

36px

Sqrl CRM

H1 / page title · Newsreader · 600 · one per screen in the page header

30px

Sqrl CRM

H2 / card title · Newsreader · 600 · cards and primary section titles

25px

H3 / panel title · Newsreader · 600 · modals, drawers, nested panels

21px

Sqrl CRM

H4 / subheading · Newsreader · 600 · groups inside a panel or long form

18px

Sqrl CRM

Large body / metric · Manrope · 500 · KPIs and emphasized single lines

16px

Sqrl CRM

Body / UI base · Manrope · 400 · dense toolbars and compact UI blocks

14px

Sqrl CRM

Body default · Manrope · 400 · paragraphs, buttons, fields, nav links

13px

Sqrl CRM

Label · Manrope · 600 · field labels, compact inputs, dropdown rows

12px

Sqrl CRM

Caption · Manrope · 500 · helper text and pagination chrome

11px

Sqrl CRM

Micro-caps (min size) · Manrope · 700 · badges, table headers, uppercase metadata

**Mono** (IBM Plex Mono, 13px typical): `font-monospace`, `sq-cell--num` — not on this scale; see [Tables and summaries](#tables-and-summaries). ## Tables and summaries - **Money and counts:** `sq-cell--num` — [Table](/components/table). - **Dates and times:** Manrope — `sq-cell--date` ([Content](/design/content#numbers-and-dates)). - **Pagination numerals:** `font-monospace fw-bold` on the range/total only — [Pagination](/components/pagination). ## Rules ### Families 1. **Serif** for display + `h1`–`h4` — [Layout](/design/layout#page-header) page title uses `h1`. Count in metric cards. 2. **Sans** for UI and dates; **mono** for numeric data only. ### Weights and case 1. Serif headings **600**; body **400**; labels / caption **500**; micro-caps **700** + `text-uppercase`. 2. Sentence case in UI; uppercase only for micro-caps and table column headers — [Content](/design/content#voice). ### Data 1. `sq-cell--num` vs `sq-cell--date` — never swap. 2. Dutch grouping (`18.400`); spaced euro (`€ 482K`) — [Content](/design/content#numbers-and-dates). --- # Iconography Three layers — pick by **role**, not by size alone: | Layer | Source | Where | | ----------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | **Flat icons** | [Bootstrap Icons 1.11.3](https://icons.getbootstrap.com/) (CDN — [Quick start](/getting-started/quick-start)) | System UI: nav, settings, toolbars, row actions, toasts, alerts, **empty states** (may be larger, still flat) | | **Textured icons** | PNG (transparent) from [Sqrl Icon Generator](https://design.sqrl.nl/icons/) | Tasks, flow nodes, and other **entity** icons at list or node scale | | **Paper illustrations** | Supplied collage art (hero, dashboard) | Large marketing / welcome surfaces only | Do not mix icon sets, use emoji as icons, or rely on colour without a word ([Content](/design/content), [Colors](/design/colors)). ## Flat icons (system UI)

Bootstrap

**Default: filled** — prefer Bootstrap’s **`-fill`** glyphs where they exist (`bi-house-fill`, `bi-people-fill`, `bi-check-circle-fill`, …). These are **flat**, monochrome, and inherit text colour (`text-muted` at rest, `text-body` on hover). **13–16px** in chrome. **One icon** per sidebar item, table row action, and toolbar control. Icon-only controls need **`aria-label`**; labelled buttons put the icon **before** the text ([Buttons](/components/buttons)). Toast and alert lead icons: [Feedback](/components/feedback). **Empty states** use the same flat set inside a neutral tile (for example `bi-inbox-fill` at `fs-3`) — not textured PNGs ([Feedback](/components/feedback#empty-state)). ### Semantic vocabulary (flat)

Home

Accounts

Contacts

Tasks

Activities

Flows

Settings

Notifications

Key step

Needs attention

Use **outline** Bootstrap icons only where no filled variant fits a control (chevrons, three-dots, pencil). Do not mix filled and outline nav sets in one rail — [Navigation](/components/navigation). ```html Contacts ``` Sortable table headers: `bi-chevron-expand` — [Table](/components/table). ### Flat icon tiles (fallback) When no textured PNG exists yet: **34×34px** tile, **10px** radius, light **`bg-*-subtle`** + darker flat glyph. Same palette mapping as below. **Modal/offcanvas** headers use theme **`modal-icon`** with flat glyphs — [Modals](/components/modals). ## Textured icons

Sqrl custom

Export from [Sqrl Icon Generator](https://design.sqrl.nl/icons/): Bootstrap icon shape + relief texture, **PNG with transparent background**. Use for **task types**, **flow nodes**, and similar **named entities** — not for settings, nav, or empty states. - **Do not recolour** or re-tint the PNG. - **Flow canvas / nodes:** use at **24px or larger** on the node surface (no flat glyph substitute at that scale).

Call

Meeting

Chase signature – Delta Staal

Van den Berg Logistics · Marieke de Groot
Draft onboarding plan – Havenstad Groep

TechBuild · Pieter Janssens

```html

``` ## Paper illustrations Large **paper-collage** art (dashboard welcome, campaign hero) sits **behind** or **beside** functional content — never as chrome. When building an app, reserve a **placeholder region** (fixed aspect ratio, `bg-body-secondary` or neutral panel); drop in supplied artwork later. **Do not** ask implementation tools to generate these illustrations in place of real assets. ## Rules - **Flat / filled Bootstrap Icons** for all **system UI**, including **large empty-state** icons. - **Textured PNGs** from [design.sqrl.nl/icons](https://design.sqrl.nl/icons/) for **tasks**, **flow nodes**, and entity lists — **not** recoloured. - **Illustrations** for hero-scale only; use a **placeholder container** until art is supplied. - **Never:** emoji, mixed sets, colour-only meaning, hand-drawn SVG substitutes for generator icons. - **Icon-only:** `aria-label`. **Labelled buttons:** icon before text. - **Related:** [Navigation](/components/navigation), [Buttons](/components/buttons), [Feedback](/components/feedback) --- # Spacing

Bootstrap

4px base grid, corner radius, elevation, and motion. Page shell and control sizes → [Layout](/design/layout) and [Buttons](/components/buttons). **When to use which** → [Rules](#rules). ## Scale Use **`p-*`**, **`m-*`**, **`g-*`**, **`gap-*`** — utility index **`n`** = **`n` × 4px** for steps **1–4**. Bar **width = token in px** (1:1) — compare steps side by side; in markup use utilities (`gap-4`, `px-4`, …), not inline widths.

4px

8px

16px

24px

32px

Utility index **`1`–`4`** matches the preview (`gap-1` … `gap-4`). **Page gutters** (16px vs 32px) → [Layout](/design/layout#page-content). ## Shape Soft corners — nothing sharp. Use Bootstrap **`rounded-*`** utilities (theme tokens in `theme.scss`).

rounded-0

rounded-1

8px

rounded-2

10px

rounded-3

14px

rounded-4

18px

rounded-5

20px

rounded-pill

pill

`rounded` (no suffix) equals **`rounded-2`** (10px). **`rounded-circle`** = 50% — avatars only, not a fixed px radius. | Class / token | Radius | Theme variable | | ---------------------- | ------ | ------------------------------------------------------------------- | | `rounded-0` | 0 | — | | `rounded-1` | 8px | `$border-radius-sm` | | `rounded-2`, `rounded` | 10px | `$border-radius` | | `rounded-3` | 14px | `$border-radius-lg` (cards, dropdowns) | | `rounded-4` | 18px | `$border-radius-xl` ([page panel](/design/layout#app-shell), `sq-panel`) | | `rounded-5` | 20px | `$border-radius-xxl` (modals) | | `rounded-pill` | pill | `$border-radius-pill` (badges, nav-pills) | | `rounded-circle` | 50% | circular avatars | | — (4px affordances) | 4px | `$border-radius-xs` — checkboxes, tooltips; no `rounded-*` class | ## Elevation Warm, subtle shadows. Cards default **borderless** with **`shadow-md`**; **`card-bordered`** + lighter shadow when the background is close to the card. Inputs use **inset** shadow so fields read recessed.

shadow-sm

Bordered / low lift

shadow / md

Default card, menus

shadow-lg

Page panel, toasts

CSS variables: **`--sq-shadow-sm`**, **`--sq-shadow-md`**, **`--sq-shadow-lg`**, **`--sq-shadow-inset`** — see [Colors](/design/colors) surfaces. ## Motion Fast, functional timing — no decorative motion. | Token / use | Duration | | -------------- | -------- | | Press | 80ms | | Hover | 120ms | | Shadow, switch | 180ms | | Modal rise | 260ms | Easing: **`cubic-bezier(.2, 0, .2, 1)`** — no overshoot or bounce. No looping or pulsing. Rows and buttons do not shift on hover. ## Rules ### Grid and utilities 1. Prefer Bootstrap **`gap-*`** / **`g-*`** on flex and grid before one-off margins. 2. Stack vertical rhythm with **`mb-*`** or **`gap-*`**, not empty spacer divs. 3. Page-level insets and shell measures — [Layout](/design/layout); control heights — [Forms](/components/forms), [Buttons](/components/buttons). ### Shape, shadow, motion 1. Pick **`rounded-*`** from the table — cards **`rounded-3`**, page panel **`rounded-4`**, modals **`rounded-5`**; smaller controls via component styles (`rounded-1` / `rounded-2`). 2. Default cards: raised **`shadow-md`**, no border; **`card-bordered`** when contrast is low. 3. Motion stays short and ease-out; never animate layout shift on hover for rows or buttons. --- # Layout

Bootstrap Sqrl custom

Application **shell**: sidebar rail and floating work panel. Tokens: [Colors](/design/colors) (`surface-app`, `surface-page`), [Spacing](/design/spacing). **Responsive rules** for narrow viewports are documented separately when added. This page is **layout guidance**. **Strongly recommended** on every app screen: **sidebar** → **page panel** → **page header** → scrollable **page content**. That shell is fixed; only the optional [scope bar](#scope-bar) sits above the header when scoped. **Inside** page content, patterns (filter row, list card, split columns, etc.) are optional — pick per page. Copy, entities, and controls are not prescribed here. ## App shell One outer **horizontal flex** row, full viewport (`100vw` × `100vh`), background **`surface-app`** (`#E8E0D7`) — the desk the rail and work panel sit on. | Region | Role | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Sidebar** | Fixed **248px**, full height, flush on the rail (same `surface-app`). Does not scroll with page content. | | **Page panel** | **`flex: 1`**, background **`surface-page`** (`#F4F0EA`), **`rounded-4`** (18px), **`box-shadow: var(--sq-shadow-lg)`**, margin **`10px 10px 10px 0`** — floats above the desk on the top, right, and bottom; the rail stays visible on the left. | Inside the page panel: optional [scope bar](#scope-bar), then **page header** (fixed), then **page content** (scrolls). Only page content uses `flex-grow-1 overflow-auto` + **`min-height: 0`**. **Recommended stack** (top → bottom): | Layer | Required? | | ----------------------------- | --------------------------------------- | | [Scope bar](#scope-bar) | Optional — scoped context only | | [Page header](#page-header) | **Yes** — title/actions; density varies | | [Page content](#content-area) | **Yes** — everything else scrolls here | Within page content, the [filter row](#filter-row) and other patterns are optional. ```html

``` Use **`sq-panel`** (**Sqrl custom** — same as `overflow-hidden border rounded-4`; tag on [Scope bar](#scope-bar) below) when the scope bar caps the panel ([Navigation](/components/navigation#scope-bar)); otherwise the raised **`surface-page`** shell alone is enough. ## Sidebar rail

Sqrl custom

Top to bottom ([Navigation](/components/navigation)): 1. **Scope control** — only selector in the rail ([Scope switch](/components/scope-switch); workspace, tenant, or account). 2. **Divider** 3. **Primary nav** — flat list; icon + label + optional mono count; one **`active`** + **`aria-current="page"`**. Labels and order: [Navigation](/components/navigation). 4. **Footer** (`margin-top: auto`) — search (⌘K), then user row (avatar, name, profile link, sign-out control). ## Scope bar

Sqrl custom

When the UI is **scoped** to one context (one record, project, tenant slice, etc.), show [`sq-scope-bar`](/components/navigation#scope-bar) at the **top of the work panel** — above the [page header](#page-header). It names the scope (title + optional meta) and one **exit** control back to the wider app; it is not a second primary nav. - Rail: [scope control](/design/layout#sidebar-rail) enters/exits scope; nav items may reorder ([Navigation](/components/navigation#account-context)). - Panel: bar flush to the panel top inside **`sq-panel`**; header and content sit below. - Same markup/tokens for any scope type — only labels and icon change. ## Page header Top of the page panel after an optional [scope bar](#scope-bar). **Fixed** above [page content](#content-area) (recommended on every screen). The filter row is **not** part of the header — it lives inside page content. The **`

` spans the full width** of the panel. Put **`border-bottom`** on that outer element so the rule runs edge to edge; **padding** lives on an **inner wrapper** only (`px-4`, `pt-3`, `pb-3` — match list content inset, usually **16px** horizontal). [breadcrumb](/components/navigation#breadcrumb) (optional), **Newsreader** `h1`, optional **subtitle** (`text-muted`), **primary action** on the right with **`align-items-start`**.

Accounts

24 companies in this view

```html

Accounts

24 companies in this view

``` ## Page content {#content-area} Everything below the [page header](#page-header): [tables](/components/table), [cards](/components/card), search, filters, forms, empty states, section grids, optional [filter row](#filter-row), etc. Fills the **rest of the page panel** and **scrolls as one block** (unless a nested region scrolls on its own, e.g. [`overflow-auto` + `sq-table-sticky-head`](/components/table#sticky-header)). There is **no single mandatory layout** inside this region. The subsections below are **optional patterns** (list shell, overview grid, split columns, form stacks) — use, merge, or skip them per page. ### Loading content While data or a view is still fetching, keep fixed chrome ([page header](#page-header); optional [filter row](#filter-row) when tab labels are already known) and fill **page content** with [skeleton placeholders](/components/feedback#skeleton) shaped like the loaded layout — same inset, card shell, or table band you will show when ready. Do not leave the scroll region blank or use a full-page spinner; swap skeletons for real markup when the response arrives. ### Filter row **Optional.** Part of **page content**, not the page header — when used, it usually sits **at the top** of the scroll region (first band below the header). It **scrolls with** the body unless you make it sticky. Many pages omit it entirely. Full width within the content inset; **same horizontal padding** as the header (`px-4`). Typical layout: **property filters / other page content** on the left ([pill tabs](/components/navigation#pill-tabs) — All / Mine / Active); **presentation of the same data** on the right (table ↔ cards via [segmented](/components/segmented#icons); sort [dropdown](/components/dropdown#sort-menu)) — **`align-items-start`**, `justify-content-between`. Exact controls depend on the page. **Tabs vs segmented vs pill radio** → [Navigation — Choose a control](/components/navigation#choose-a-control).

```html

``` ### Padding | Context | Horizontal / vertical inset | | ----------------------------------- | ------------------------------------------------------------------------------------------------------- | | **Dense list / table pages** | **`16px`** (`px-4`, `pb-4`) — align with header/filter [`px-4`](/design/spacing) | | **Looser overview / section grids** | **`32px`** page gutter (`p-4` on the scroll container or section wrappers) — [Spacing](/design/spacing) | ### List and table pages (optional pattern) When the main body is a **data table**, an optional [filter row](#filter-row) can sit above a **raised container** on `surface-page` — often **[`card-bordered`](/components/card#bordered)** so the toolbar and grid read as one object; **[pagination](/components/pagination)** sits **below** the card on `surface-page`, not in **`card-footer`**. Typical vertical stack ([Table](/components/table#toolbar)): 1. **Toolbar** — search, facet [`form-select`](/components/forms) filters, secondary actions as needed; often **`border-bottom`** before the grid. 2. **`table.table`** ([Table](/components/table) — optional **`overflow-hidden`** when not inside a card). Tables and `thead` are square (no `rounded`). Inside a **card**, wrap the table in **`mx-3`** so it does not flush to the card edges. 3. **[Pagination](/components/pagination)** — summary + pages **outside** the card (same horizontal inset as the list — e.g. **`px-4`** on the scroll area). **Guideline:** **property filters and other page content** as [pill tabs](/components/navigation#pill-tabs) in the filter row; **search and field filters** in the toolbar; **table ↔ cards** as [segmented](/components/segmented) — [Choose a control](/components/navigation#choose-a-control).

Name	City	Status	Quote potential
Van Dijk Logistics	Rotterdam	Active	€ 132.000
North Sea Marine	Den Helder	Inactive	€ 78.000

Showing 1–10 of 24

### Overview-style pages (optional pattern) Hub or summary pages: often **`32px`** gutter ([Spacing](/design/spacing)), **no filter row**; body is [cards](/components/card) and/or sections in the scroll area (intro block may live in the header or content — either is fine). **Preferred (optional):** **`row`** / **`g-4`** with **mixed column widths** and **at least one row that breaks the rhythm** — avoid a single column of identical boxes. ### Split content (optional pattern) When one full-width column is not enough, **page content** may use a **horizontal split** (this is not the 248px app sidebar): | Column | Role | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | **Secondary column** (fixed width) | Optional local nav, outline, progress, or meta — **whatever the page needs**; scrolls with the page or sticky within the split. | | **Primary column** | Main body — detail, forms, [cards](/components/card), etc. | Often paired with a [scope bar](#scope-bar) and/or a compact [page header](#page-header), but the split is a **layout option**, not a requirement for scoped or multi-step flows. Default list pages stay **single column**. ### Forms and detail blocks (optional pattern) Full-width **field rows** on `surface-page` or inside a card: **`border-subtle`** between rows; **no border on the last row**. Destructive or save actions belong in the [page header](#page-header) when they apply to the whole page, not repeated on every row. ## Rules 1. **Default shell (strongly recommended):** **sidebar** (248px) + **page panel** (`surface-page`, **`rounded-4`**, `--sq-shadow-lg`, 10px margin top/right/bottom) + **page header** + scrollable **page content**. Do not drop parts of this shell without a clear reason. 2. **`surface-app`** = outer desk behind the sidebar; **only page content scrolls** (unless a deliberate inner scroll on table wrap or split layout). 3. Primary nav structure and labels: [Navigation](/components/navigation). 4. **Scope:** rail scope control + optional [`sq-scope-bar`](/components/navigation#scope-bar) on scoped screens — [Scope bar](#scope-bar). 5. **One `btn-primary`** in the page header title row when that row has a primary action; **Newsreader** `h1`. **Full-width** `

` with **`border-bottom`** on the outer element; padding on an inner wrapper. Optional breadcrumb or micro-caps eyebrow — not both unless the hierarchy needs it. 6. Fixed chrome = scope bar (if any) + page header; **page content** = **`overflow-auto`** + **`min-height: 0`**, with optional [filter row](#filter-row) as the first block when needed. 7. **List pattern (optional):** filter row → bordered shell → toolbar → table wrap → pagination; property filters vs presentation vs search as in [List and table pages](#list-and-table-pages-optional-pattern). 8. Prefer the **simplest** stack — omit filter row, card shell, or [split content](#split-content-optional-pattern) when a single column suffices. 9. **Loading:** skeleton placeholders in [page content](#content-area) only — [Loading content](#loading-content); empty lists use [empty state](/components/feedback#empty-state), not skeletons. --- # Content Tone: formal, business-like, tight, unambiguous. The UI states facts and next steps; it does not chat, apologise or cheer. Vibe: an instrument, not a companion. ## Voice - Address the user as _you_ only where an action is theirs ("Assign owners"). The system never says I. - Data lines are impersonal and name the source when it is known: "Imported from Sqrl ABM", "Imported from CSV". - Sentence case everywhere. The only uppercase is [micro-caps](/design/typography) for section headers and table columns. - Emoji: never. Meaning is carried by Bootstrap Icons and colour — never colour alone ([Iconography](/design/iconography), [Colors](/design/colors), [badges](/components/badge)). ## Buttons Verb + object: "Assign owners", "Save changes", "Import prospects", "Delete contact". **Create** actions may use **New** or **Add** + entity: "New contact", "Add contact". Not "Submit", "OK", or "Click here". Destructive buttons name the object. Add a **Bootstrap Icon** when it makes the action obvious at a glance — for example **plus** on create/add and **trash** on delete. Icon before the label; keep the text unless the control is icon-only ([Iconography](/design/iconography), [Buttons](/components/buttons)).

## Labels Field and control labels are **nouns**, sentence case, **no colon**: "Company name", "Due date", "Owner". Placeholder and helper text follow the same tone — impersonal where it is system data, not instructions disguised as labels.

Company name Due date

Form layout and validation copy: [Forms](/components/forms). ## Errors and confirmations **Inline alerts** ([Feedback](/components/feedback#alert)) use three copy shapes: - **Success** — past-tense outcome, often impersonal: what happened and from where ("18 prospects imported from CSV."). - **Warning** — **fact** in the semibold line, **impact or next step** in smaller body text; when the user can fix it in place, one **`btn-secondary`** on the alert ("Assign owners"). - **Danger** — what blocks progress and what to do next, in one or two short sentences ("Assign an owner before activating this step."). Transient save/create confirmations use **toasts** instead: past tense, no full stop — "Contact created", "Changes saved".

18 prospects imported from CSV.

12 prospects are missing an owner

Unassigned prospects are not included in flow automation.

Assign an owner before activating this step.

Never "Something went wrong". Validation and forms: [Forms](/components/forms), [Feedback](/components/feedback). ## Numbers and dates Counts and money are always numerals with tabular figures: `412 contacts`, `€ 482K`, `31%`. Dutch thousand separators (`18.400`) since the data is Dutch; the € sign is spaced from the number. Dates use **Manrope** (same as body), not monospace. Format `12 Mar 2026`; append time for activities: `12 Mar 2026, 14:20`. Relative words only for the near horizon: "Today", "Tomorrow". In tables, right-align with **`sq-cell--date`** ([Table](/components/table)). Abbreviations are allowed for people in dense tables ("M. de Groot") and expanded in headers and panels ("Marieke de Groot"). ## Rules - UI copy is **English**; numeric formatting follows **Dutch** conventions where data is Dutch. - **Sentence case**; micro-caps only for section headers and table columns. - **Buttons:** verb + object; **New** / **Add** + entity for create; destructive buttons name the object; icons when they clarify (plus, trash, …) with label kept. - **Labels:** nouns, no colon. - **Errors:** specific and actionable; **confirmations:** short past tense. - **No** emoji, "Submit", "OK", "Click here", or generic "Something went wrong". - **Icons + colour** carry meaning together — see [Iconography](/design/iconography) and [Colors](/design/colors). --- # Accordion

Bootstrap

Bootstrap **`accordion`**: expandable FAQ-style sections with one panel open per group (**`data-bs-parent`**). Markup below; **default vs flush** and **when to use** → [Rules](#rules). ## Default Bordered card (**`accordion`** on **`--bs-accordion-border-radius`**). Rows divided by **`border-subtle`**. Chevron on the button rotates when open (Bootstrap **`accordion-button::after`**).

Admins and account owners. Members can view but not edit billing or ownership.

Email and in-app alerts use the same tone rules as [toasts](/components/feedback). You can dismiss each item from the drawer.

Yes — use Export on any table view; CSV includes visible columns for the current filter.

```html

…

``` ## Flush **`accordion accordion-flush`**: no outer border or radius — full-bleed dividers only. Use inside a [card](/components/card) or panel that already defines the surface.

Admins and account owners. Members can view but not edit billing or ownership.

Email and in-app alerts use the same tone rules as [toasts](/components/feedback). You can dismiss each item from the drawer.

Yes — use Export on any table view; CSV includes visible columns for the current filter.

```html

…

``` ## Rules ### Default accordion - Standalone FAQ or help blocks on page background — bordered **`accordion`**, subtle row dividers. - One open section per group: set the same **`data-bs-parent`** on each **`accordion-collapse`** (value = root **`accordion`** `id`). - Open panel: **`accordion-button`** (no **`collapsed`**) + **`accordion-collapse collapse show`**. Closed: **`accordion-button collapsed`** + **`collapse`** only. - Active/open header uses theme selected surface + green title; chevron rotates — colour transition only, no motion tricks. ### Flush accordion - **`accordion accordion-flush`** when the parent [card](/components/card) or panel already provides border and radius. - Same header/collapse markup as default; often **`card-body p-0`** so dividers run edge to edge. --- # Avatar

Sqrl custom

Initials or image in **`avatar`** + **`text-bg-*`**. Sizes and patterns below; **usage** → [Rules](#rules). ## Sizes **`avatar-xs`**, **`avatar-sm`**, default **`avatar`**, **`avatar-lg`**, **`avatar-xl`** (16 / 24 / 32 / 44 / 56px). **`avatar-xs`** in compact lists and meta rows; **`avatar-xl`** on profile headers and empty states.

MD MD MD MD MD

```html MD MD MD MD MD ``` ## Tones Status: same **`text-bg-*`** tokens as [badges — Tones](/components/badge#tones).

WN DT LS MD OP

```html WN DT LS MD OP ``` ## Accents

Sqrl custom

Decorative only: **`text-bg-accent-*`** — see [Colors — Accents](/design/colors#accents).

TL TC SL TP VL

```html TL TC SL TP VL ``` ## Shape Circle (default): people. **`avatar-square`**: organisations (default **10px** corners; **`avatar-sm`** **8px**, **`avatar-xs`** **4px**).

DT SK

```html DT SK ``` ## Group **`avatar-group`**: overlapping stack; show at most two faces + **`+N`** on **`text-bg-light`**.

ML DT +4

```html

ML DT +4

``` ## Rules ### Shape and tone - Do not mix circle and square in one row without a label explaining the difference. - Initials without **`src`**: always a **`text-bg-*`** tint (hash or semantic). ### Group **`avatar-group`** summarizes assignees — not a full roster; link out for detail. ### Popover Avatar may trigger a [popover](/components/popover) for a person summary. --- # Badge

Bootstrap

Bootstrap `badge` + **`text-bg-*`**. Modifiers and examples below; **usage** → [Rules](#rules). ## Tones - Status: **`text-bg-success`**, **`warning`**, **`danger`**, **`info`**. **`text-bg-neutral`** is Sqrl custom ([Colors](/design/colors#status)). - UI chips: **`text-bg-secondary`**, **`light`**, **`dark`** (strong fill). - Class order: **`badge`**, then **`badge-*`** modifiers, then **`text-bg-*`**.

Done Today Overdue Scheduled Open Light Dark Secondary

```html Done Today Overdue Scheduled Open Light Dark Secondary ``` ## Accents

Sqrl custom

Decorative only: **`text-bg-accent-*`** — see [Colors — Accents](/design/colors#accents).

Teal Terracotta Slate Taupe Violet

```html Teal Terracotta Slate Taupe Violet ``` ## Dotted

Sqrl custom

**`badge-dotted`**: dot in **`currentColor`** — pair with any tone.

Done Today Overdue Scheduled Open

```html Done Today Overdue Scheduled Open ``` ## Borderless

Sqrl custom

**`badge-borderless`**: no border; pair with **`badge-dotted`** in dense layouts.

Draft Scheduled In review Due soon Done Cancelled

```html Draft Scheduled In review Due soon Done Cancelled ``` ## With icon One Bootstrap Icon before the label (inherits colour) — [Iconography](/design/iconography).

Overdue Completed Needs attention

```html Overdue Completed Needs attention ``` ## Square

Sqrl custom

**`badge-square`**: 4px radius for dense [table](/components/table) cells.

Done Overdue Open

```html Done Overdue Open ``` ## Rules ### Meaning - Never **colour alone** — always a word, **`badge-dotted`**, or icon ([Iconography](/design/iconography)). - Status → **`text-bg-success`** / **`warning`** / **`danger`** / **`info`** / **`neutral`** (Sqrl custom). Accents → decorative only, not semantic status. ### Tables Status columns: **`badge-borderless badge-dotted`** + tone — see [table](/components/table). ### Naming New modifiers: **`badge-{name}`** (`badge-dotted`, `badge-square`, `badge-borderless`). --- # Buttons

Bootstrap

Bootstrap `btn` classes. Variants, sizes, and examples below; **usage** → [Rules](#rules). Icons: [Iconography](/design/iconography). ## Variants **`btn-primary`**, **`btn-secondary`**, **`btn-danger`**, **`btn-link`**, **`btn-dark`** (selected/chosen, not dark theme).

```html ``` ## Ghost

Sqrl custom

**`btn-ghost`** — borderless icon/text for row actions and toolbars (not **`btn-link`**).

```html ``` ## Other variants **`btn-success`**, **`btn-warning`**, **`btn-info`** — contextual status, not page CTAs. Prefer **`btn-secondary`** over **`btn-light`**.

```html ``` ## Sizes

Sqrl custom Bootstrap

**`btn-xxs`**, **`btn-xs`**, **`btn-sm`**, default, **`btn-lg`** (22 / 26 / 32 / 36 / 42px control heights; **`btn-xxs`** and **`btn-xs`** use 11px type and the same horizontal padding). Use **`btn-xxs`** / **`btn-xs`** for dense toolbars and inline actions; not for primary page CTAs or form fields (**`form-control-sm`** stays 32px).

```html ``` ## Icon buttons One Bootstrap Icon; icon **before** label. Icon-only: **`btn-sm`** + **`aria-label`**.

```html ``` ## States **`disabled`** attribute for inactive actions (theme matches Bootstrap opacity/cursor). No scale or layout shift on interaction.

```html ``` ## Rules ### Hierarchy **One `btn-primary` per view** — other actions secondary, ghost, link, or dark (selected). ### Labels - **Verb + object**, sentence case (“New contact”, “Assign owners”). Not “Submit”, “OK”, or “Click here”. - Destructive: name the effect (“Delete contact”). ### Icon-only Always **`aria-label`**. Pair with [tooltip](/components/tooltip) only for extra hint, not essential copy. Flat icons: [Iconography](/design/iconography). --- # Card

Bootstrap

Bootstrap `card`. Layout patterns below; **usage** → [Rules](#rules). ## Default Borderless **`card`** on page surface (**`bg-body`** in previews). Metric / summary tiles.

Open tasks

-3 vs. last week

View details

€ 482K

+12% vs. last month

```html

Open tasks

-3 vs. last week

View details

€ 482K

+12% vs. last month

``` ## Bordered

Sqrl custom

**`card-bordered`** when the card sits on paper/white or another card.

Van den Berg Logistics

Account · 12 contacts

Active

```html

Van den Berg Logistics

Account · 12 contacts

Active

``` ## Header **`card-header`**: identity (avatar, title). Facts grid in **`card-body`**.

Anouk Peters

Sales Director, Sqrl B.V.

anouk@sqrl.nl

Phone

+31 6 1234 5678

Deals

Value

€ 84K

```html

Anouk Peters

Sales Director, Sqrl B.V.

anouk@sqrl.nl

Phone

+31 6 1234 5678

Deals

Value

€ 84K

``` ## Footer **`card-footer`**: actions ( **`btn-sm`** ).

Van den Berg Logistics

12 contacts

```html

Van den Berg Logistics

12 contacts

``` ## Rules ### When to use Group related content: metrics, record summary, [flow step nodes](/design/iconography#textured-icons), optional shell for dense lists (not required for [empty state](/components/feedback)). ### Structure **`card-header`** / **`card-body`** / **`card-footer`** are **siblings** — never nest header/footer inside body. ### Surface Default borderless on **`bg-body`**. **`card-bordered`** on low-contrast backgrounds. --- # Close button

Bootstrap

Bootstrap [`btn-close`](https://getbootstrap.com/docs/5.3/components/close-button/), restyled. Sizes and examples below; **usage** → [Rules](#rules). ## Sizes

Sqrl custom

| Class | Use | | --- | --- | | `btn-close btn-close-sm` | [Toasts](/components/feedback), dense UI | | `btn-close` (medium; `btn-close-md` alias) | [Modals](/components/modals), offcanvas headers | | `btn-close btn-close-lg` | Larger surfaces when needed | Always set **`aria-label="Close"`** (or a specific label).

```html ``` ## Rules ### Where to use - Dismissible [toasts](/components/feedback), [modals](/components/modals), alerts, and offcanvas headers. - Not as a generic icon control — use **`btn-ghost`** + Bootstrap Icon instead ([Iconography](/design/iconography)). ### Dark surfaces Do not use **`btn-close-white`**. On a dark surface, set **`data-bs-theme="dark"`** on the button or parent. ### Disabled Bootstrap disabled behaviour (reduced opacity, no pointer events) applies as usual. --- # Dropdown

Bootstrap

Bootstrap **`dropdown`**: compact menus for sort, filters, and actions. Markup below; **when to use which trigger** → [Rules](#rules). ## Sort menu

Sqrl custom

- Trigger: current label + **`bi-arrow-down-up`**; **`btn-ghost`** (Sqrl custom — or link-style), **`data-bs-toggle="dropdown"`**, **no** **`dropdown-toggle`**. - Menu: **`dropdown-menu`** → **`button.dropdown-item`**; selection = **`active`** + **`aria-current="true"`**.

Sort menu

```html ``` Docs static block: **`dropdown-menu show position-static d-block`** (omit in product). ## Button trigger - Trigger: contextual **`btn-*`** + **`dropdown-toggle`** + **`data-bs-toggle="dropdown"`**. - Same **`dropdown-menu`** / **`dropdown-item`** pattern; labels in the menu are plain text rows, not nested **`btn-*`** buttons.

Primary button trigger

```html ``` ## Rules ### When to use - **Dropdown:** user picks one option from a short list (sort, filter, status, overflow actions). - **Not** a [popover](/components/popover) (explanation/tooltip-style content) or a [modal](/components/modals) (multi-step or blocking task). - Look and spacing live in **`theme.scss`** — implement with Bootstrap classes only; do not re-specify colours or sizes in app CSS. ### Behaviour - **Close on selection** (Bootstrap default). For sort-style triggers, **update the trigger label** to match the new **`active`** item. - One **`active`** row at a time for single-select menus. ### Sort-style trigger - Toolbar/table **sort**, **view**, or **filter** — shows **current value** + sort icon. - **No** **`dropdown-toggle`** on the trigger (no caret); icon is **`bi-arrow-down-up`** only — [Iconography](/design/iconography). ### Button trigger - Primary/secondary [button](/components/buttons) that opens a menu — add **`dropdown-toggle`**. - Menu copy describes the action or state (e.g. “Warning”, “Delete”); use **`btn-danger`** on a **footer/header button**, not as a **`dropdown-item`** styled like a full button. --- # Feedback

Bootstrap

Toast, alert, empty state, and loading placeholders. Markup and examples below; **when to use which** → [Rules](#rules). Icons (flat only): [Iconography](/design/iconography). ## Toast - Markup: `toast` → `toast-header` (optional tone icon, `strong.me-auto` title, [`btn-close btn-close-sm`](/components/close-button)) + `toast-body`. - Show/hide: `bootstrap.Toast.getOrCreateInstance(el, { autohide: true, delay: 3000 }).show()`; close button needs `data-bs-dismiss="toast"`. - Tone icons: `check-circle-fill` + `text-success`, `exclamation-triangle-fill` + `text-warning`, `x-circle-fill` + `text-danger`, `info-circle-fill` + `text-info`.

Contact details were updated.

Assign an owner before activating this step.

```html

Contact details were updated.

``` ## Live toast stack

Sqrl custom

Append to **`toast-container sq-toast-stack`** on `document.body` (fixed bottom-right). Docs demo buttons (`data-sq-show-toast`) are **docs-only** — do not copy into an app; call `bootstrap.Toast` yourself. ## Alert - Bootstrap `alert` + variant: `alert-success`, `alert-warning`, `alert-danger`, `alert-info`. **`alert-neutral`** is Sqrl custom (same family as **`text-bg-neutral`**). - Simple row: `d-flex align-items-start gap-2` + icon + text. - Warning with action: `align-items-center`, title `fw-semibold`, detail `small text-body`, **`btn btn-sm btn-secondary`** on the right (not primary).

18 prospects imported from CSV.

12 prospects are missing an owner

Unassigned prospects are not included in flow automation.

Assign an owner before activating this step.

```html

12 prospects are missing an owner

Unassigned prospects are not included in flow automation.

``` ### Neutral

Sqrl custom

**`alert-neutral`** — extra tone (not Bootstrap). Same family as **`text-bg-neutral`**. ### Accents

Sqrl custom

**`alert-accent-*`** — same suffixes as [Colors — Accents](/design/colors#accents) (`text-bg-accent-*`). ## Empty state State the fact, then the next step. No exclamation marks. One primary action (optional); secondary actions (optional) use **`btn-secondary`**. Centered block in the content area (no **`card`** required): icon tile (`rounded bg-body-secondary`, 3×3rem) + `.h2` title + `text-muted` line + actions.

No tasks yet

Create a task or import follow-ups from a CSV file.

```html

No tasks yet

Create a task or import follow-ups from a CSV file.

``` ## Skeleton - Bootstrap [placeholders](https://getbootstrap.com/docs/5.3/components/placeholders/): **`placeholder`** (+ `col-*` / fixed sizes). **Default: `placeholder-glow` on the loading shell** (parent wrapper — Bootstrap animation, no custom CSS). - Loading shell: **`aria-hidden="true"`** until real content replaces it. - Table-shaped: **`border overflow-hidden placeholder-glow`** + flex rows (`min-height: 44px`); then **`overflow-hidden`** + **`table.table`** when data arrives — [Table](/components/table). - Card-shaped: **`card shadow-sm`** with **`card-body placeholder-glow`**.

```html ``` ## Rules ### Toast - Use after a **completed or failed user action** (save, import, create, delete) — feedback that can disappear without blocking the page. - Do **not** use for ongoing data problems the user must fix while working (use **alert**). Do **not** use for an empty list (use **empty state**). - Mount in **`toast-container sq-toast-stack`** (fixed bottom-right); stack multiple toasts there. - Default **3s auto-hide** via Bootstrap `Toast` (`autohide: true`); user can dismiss earlier with **`btn-close-sm`**. - Title **past tense**; success `role="status"` / `aria-live="polite"`, error `role="alert"` / `aria-live="assertive"`. ### Alert - Use for **persistent inline** messages: import summaries, bulk data warnings, blocking validation on a page region. - Place **above** the related content (toolbar, table, form section) — not floating like a toast. - Do **not** use for transient “saved” confirmations (use **toast**). - Actionable warnings: **`btn-secondary`** on the alert (the alert is already the signal; not **`btn-primary`**). ### Empty state - Use when a **list or panel has zero items** and filters are not hiding results — the main content area is otherwise empty. - Center in that content area; a **`card`** wrapper is optional. - Copy: state the fact, then the next step. No exclamation marks. One primary action; secondary actions use **`btn-secondary`**. Tone: [Content](/design/content). Header icon: flat Bootstrap only — [Iconography](/design/iconography). - Do **not** use for load errors or permission failures (use **alert** or **toast** as appropriate). ### Skeleton - Use **while the real layout is loading** (table rows, cards, list) — same shape as the content that replaces it. - Replace placeholders with real data when ready; remove `aria-hidden` from the live region. - **Default animation:** **`placeholder-glow`** on the shell (`border` panel, **`card-body`**, etc.) — [Bootstrap markup](https://getbootstrap.com/docs/5.3/components/placeholders/#animation), not on each `placeholder`. Do not use **`placeholder-wave`**. - Table data: glow panel → then **`table.table`** (often in **`overflow-hidden`**) when loaded. --- # Forms

Bootstrap

Bootstrap form controls. Patterns below; **usage** → [Rules](#rules). ## Input `form-label` + `form-control`. Optional `form-text` for hints.

```html Company name Due date

Display as 12 Mar 2026

``` ## Input group Prefix with `input-group-text`.

Amount

€

```html Amount

€

``` ### Search

Sqrl custom

**`input-group-merge`** (not a Bootstrap class): `type="text"` + `role="searchbox"` (not `type="search"`), and `bi-x-circle-fill` to clear.

```html Search

``` ## Shortcut

Sqrl custom

Command or global search: trailing **`input-group-shortcut`** inside **`input-group-merge`**. Same action as the shortcut; `aria-label` on the control.

```html

``` ## Sizes `form-control-sm` is 32px / 13px (the floor). Default is 36px / 14px. `-lg` is 42px / 14px. Same for `form-select`.

```html ``` ## Textarea `form-control` with `rows`. Same label pattern as input.

Note

```html Note ``` ## Select `form-select` for a single owner or category choice.

Owner

```html Owner ``` ## Checkbox `form-check` with `type="checkbox"`. Label-less in table rows (`aria-label` on the input). Optional `.desc` inside the label for a sub-line.

Email opt-in Include in campaign sends.

```html

Email opt-in Include in campaign sends.

``` ## Radio Same `form-check` pattern with `type="radio"` and a shared `name`.

Normal

Urgent

```html

Normal

Urgent

``` ### Pill radio group

Sqrl custom

Two to four short labels in a form. Same `form-check` markup inside `sq-pill-radio`. Icons are CSS on the label.

Yes

Not sure

```html

Yes

Not sure

``` ## Switch `form-check form-switch` — same checkbox input, toggle styling.

Notify me on status changes

```html

Notify me on status changes

``` ## Range Bootstrap **`form-range`**. Label row: **`d-flex justify-content-between align-items-baseline`**, **`output.font-monospace.small.text-secondary`** (`for` matches the input `id`).

Deal probability 35%

```html

Deal probability 35%

``` ## Validation `is-valid` / `is-invalid` with `valid-feedback` or `invalid-feedback`.

Company name

Looks good.

Owner

Assign an owner before activating this step.

```html Company name

Looks good.

Owner

Assign an owner before activating this step.

``` ## Disabled 45% opacity, `not-allowed` cursor, no colour change.

Company name

```html Company name ``` ## Rules ### Labels and validation - Labels are **nouns**, no colon (“Company name”, “Owner”). - Validation: name the missing field and next step — not “Something went wrong”. ### Control choice - **Switch**: takes effect immediately. **Checkbox**: saved with the form submit. - Short exclusive pair: stacked radios. Two–four options: **`sq-pill-radio`**. More: **select**. Not [segmented](/components/segmented) (presentation) or `nav-pills` (page content / property filter) — [Choose a control](/components/navigation#choose-a-control). ### Input groups Search: **`input-group-merge`** (Sqrl custom), **`role="searchbox"`**, clear with **`bi-x-circle-fill`**. Command palette: **`input-group-shortcut`**. Chrome icons: [Iconography](/design/iconography). ### Sizes **`form-control-sm`** is the floor (32px); default and **`-lg`** for larger fields. --- # Modals

Bootstrap

Bootstrap **modal** and **offcanvas** (side panel). Markup below; **when to use which** → [Rules](#rules). ## Modal

Sqrl custom

Standard task modal: Bootstrap **`modal-content`** (20px radius, overlay shadow via theme) with padded **`modal-header`**, **`modal-body`**, **`modal-footer`**. Header icon tile **`modal-icon`** is Sqrl custom (contextual **`bg-*-subtle`** + **`text-*`**, flat glyph — [Iconography](/design/iconography)) + serif **`modal-title`** (21px) + [`btn-close`](/components/close-button). Body = [form](/components/forms) (`row g-3` or stacked fields). Footer = actions **right-aligned** — Cancel **`btn-secondary`**, primary **`btn-primary`**.

```html ``` Padding comes from Bootstrap **`modal-header`** / **`modal-body`** / **`modal-footer`** (theme: 1.5rem). No header/footer divider lines. ## Confirmation Short copy-only modal: **`modal-dialog modal-dialog-centered modal-sm`** (centered on the viewport). **Centered** title and body copy; **no header close** — dismiss via **Cancel** (and the primary action). Footer actions share the row at **full width** (theme: **`flex-grow-1`** on each **`.btn`**). No icon tile. Destructive primary **`btn-danger`**.

## Side panel

Sqrl custom

Bootstrap **`offcanvas-end`**: square edges (no border radius), **`offcanvas-header`** (**`modal-icon`** tile — Sqrl custom — + **`offcanvas-title`** + close, **border-bottom** via theme), and **`offcanvas-body`**. Example: a notifications drawer with stacked [toast](/components/feedback) cards.

Contact details were updated.

Follow up with Van den Berg Logistics before Friday.

```html

Contact details were updated.

``` ## Rules ### Modal - Focused create/edit or confirmation — blocks the page until dismissed (backdrop + **`--shadow-overlay`**). - **Standard task modal:** **`modal-icon`** (Sqrl custom) + contextual Bootstrap subtle/text utilities + **`modal-title`** in header; **form in body**; **Cancel** + one primary action in footer (right-aligned). - **Confirmation:** **`modal-sm`** + **`modal-dialog-centered`**; **centered** title and body; **no `btn-close`** in the header — **Cancel** dismisses; footer **`.btn`** actions equal full width; name the object; destructive → **`btn-danger`** with explicit label. - Cancel is always **`btn-secondary`**. Primary verb matches the task (“Create”, “Save changes”). ### Side panel - Secondary content **beside the main view** (notifications, filters, record detail) — use **`offcanvas-end`**, not a centered modal. - **No border radius** on the panel (theme); **`offcanvas-header`** with **`modal-icon`** (Sqrl custom) + **`offcanvas-title`** + **`btn-close`**; header **border-bottom** (theme). - Stack related items in **`offcanvas-body`** (e.g. full-width **`toast`** cards with **`gap-3`**). --- # Navigation

Bootstrap

Sidebar, tabs, breadcrumb, scope bar. Patterns below; **usage** → [Rules](#rules). ## Choose a control Pick by **what changes**, not by look. Segmented and tabs can both look like a pill row. | What changes | Use this | Not that | | --- | --- | --- | | **Presentation only** — same records, different chrome (table ↔ cards) | [Segmented](/components/segmented) (`sq-segmented`) | Tabs, [pill radio](/components/forms#pill-radio-group) | | **Page content or a property filter** — another slice of the page (All / Mine / Active), or a different panel | [Pill tabs](#pill-tabs) in the [filter row](/design/layout#filter-row); [underline tabs](#underline-tabs) on a section edge | Segmented | | **Form field** — two to four exclusive options the user saves with the form | [Pill radio](/components/forms#pill-radio-group) (`sq-pill-radio`) | Segmented, `nav-pills` | App chrome (rail, scope, breadcrumb) is not interchangeable with these — see sections below. ## Sidenav

Sqrl custom

Rail anatomy (see [Layout](/design/layout#sidebar-rail)): [Scope switch](/components/scope-switch) → divider → nav list → footer (search, user). Nav lives in **`sq-sidenav`** (tag below). - **`sq-sidenav`** → Bootstrap **`list-group list-group-flush`** → **`list-group-item-action`** + filled **`bi-*-fill`** icons ([Iconography](/design/iconography)). - Labels in order: Home, Accounts, Contacts, Tasks, Activities, Flows. - Optional count: **`span.font-monospace`**. Active: **`active`** + **`aria-current="page"`** (paper chip — not primary green).

```html ``` ## Pill tabs - **`ul.nav.nav-pills`** → **`nav-link`**; optional **`font-monospace`** count on the link. - Different **page content** or a **property filter** (All / Mine / Active) in the [filter row](/design/layout#filter-row) — not presentation (table ↔ cards). [Choose a control](#choose-a-control).

```html

``` ## Underline tabs **`ul.nav.nav-tabs`** on a content edge for **another panel of content** (not table ↔ cards). Same optional count pattern as pills.

```html

``` ## Scope bar

Sqrl custom

**`sq-panel`** → **`sq-scope-bar`** (`role="region"`) at top: icon + **`sq-scope-bar__title`** + optional **`sq-scope-bar__meta`**; exit **`btn btn-sm btn-outline-light rounded-pill sq-scope-bar__exit`**.

Van den Berg Logistics 30 contacts

```html

Van den Berg Logistics 30 contacts

``` ## Breadcrumb **`nav`** → **`ol.breadcrumb`** → **`breadcrumb-item`**; current page **`active`** + **`aria-current="page"`**.

```html ``` ## Rules ### App shell - Primary nav is a **sidebar** (248px, flush on `surface-app`), not a topbar — [Layout](/design/layout#app-shell). - Top-level labels: Home, Accounts, Contacts, Tasks, Activities, Flows. - Rail footer: search + user block pinned with **`margin-top: auto`** on the nav column. ### Account context Inside an account: first item = that account’s overview; Accounts drops out, Quotes appears. ### Tabs and filters - **`nav-pills`** vs **`sq-segmented`**: [Choose a control](#choose-a-control) — tabs change **content or a property filter**; segmented changes **presentation of the same data**. - **`nav-pills`**: filter row. **`nav-tabs`**: underline on a content edge for another panel. Not **`btn-group`**. - Optional mono counts on nav items. ### Scope bar - **`sq-scope-bar`** inside **`sq-panel`**: flat bar, pill exit with icon — not **`btn-primary`**. - On **record/detail** views scoped to an account, place the scope bar **above** the page header ([Layout](/design/layout#scope-bar)). --- # Pagination

Bootstrap

Bootstrap `pagination` + optional **Showing … of …** summary. Markup below; **usage** → [Rules](#rules). - Summary: **`p.small.text-secondary.mb-0`** with **`font-monospace fw-bold`** on range and total only. - Controls: **`nav`** → **`ul.pagination`** → **`page-item`** / **`page-link`**. Active page: **`page-item active`** + **`span.page-link`**.

Showing 26–50 of 412

```html

Showing 26–50 of 412

``` ## Rules ### Placement Pair with [table](/components/table) list pages: summary left, controls right, **`mt-3`** (or equivalent) **below** the table **`card-bordered`** — not inside the card or **`card-footer`**. Align with the list page inset ([Layout — List and table pages](/design/layout#list-and-table-pages-optional-pattern)). ### Controls - Prev/next: chevron icons inside **`page-link`**; **`aria-label`** on the link (“Previous page”, “Next page”) — [Iconography](/design/iconography). - Ellipsis: disabled **`page-item`** with **`span.page-link`** (not a link). - Active page uses filled stone treatment (theme); inactive links are stone text, not link green. ### Copy Summary pattern: **Showing** {range} **of** {total} — mono bold on numerals only. --- # Popover

Bootstrap

Bootstrap popover — context or explanation, not a menu. Markup below; **usage** → [Rules](#rules). Docs init popovers in `bootstrap-overlays.js`. Default **`data-bs-trigger="hover focus"`**, **`data-bs-placement="bottom"`**. ## Info Field help: **`btn-ghost btn-sm`** + **`bi-info-circle`**, **`data-bs-title`** + **`data-bs-content`**.

```html ``` ## Contact Person summary: trigger can be an [**avatar**](/components/avatar) with **`role="button"`**, **`tabindex="0"`**, and **`aria-label`**.

```html MD ``` ## Rules ### When to use - Explanatory copy on hover/focus — closes without choosing an item. - Not a selectable list (dropdown) or task flow ([modal](/components/modals)). ### Content - One title line + short body — longer than a tooltip, shorter than a side panel. - No primary or destructive actions inside the popover. ### Triggers Info fields: icon button. People: avatar trigger as above. Flat icons: [Iconography](/design/iconography). --- # Progress

Bootstrap

Determinate progress only. Markup and sizes below; **usage** → [Rules](#rules). - Label row: **`small fw-semibold`** + **`small font-monospace`** percent above the track. - Track: **`progress`** + size modifier; fill **`progress-bar`**; set **`role="progressbar"`**, **`aria-valuenow`**, **`aria-valuemin`**, **`aria-valuemax`**, **`aria-label`** (or visible label). - Default height: **`progress-sm`** (plain **`progress`** matches sm).

Import prospects 75%

```html

Import prospects 75%

``` ## Sizes

Sqrl custom

Modifier on the **track** (`progress`): **`progress-sm`** (default), **`progress-md`**, **`progress-lg`**.

Small (4px) 40%

Medium (6px) 60%

Large (8px) 85%

```html

``` ## Rules ### When to use Known completion (import, export, multi-step job) — always show a **percentage**, never indeterminate animation. ### Accessibility **`aria-valuenow`** and label on the track; keep the visible percent in sync. ### Size One size per bar; **`progress-md`** / **`progress-lg`** when the bar needs more weight (e.g. import panel header). --- # Segmented control

Sqrl custom

**`sq-segmented`** wrapper + Bootstrap **`btn-check`** / **`btn`** segments. Switches **presentation of the same data** (table ↔ cards) — not another page slice or a property filter ([Choose a control](/components/navigation#choose-a-control)). Patterns below; **usage** → [Rules](#rules). - Wrapper: **`sq-segmented`** (+ optional **`sq-segmented-sm`** / **`sq-segmented-lg`**, **`rounded-pill`**). - One **`role="group"`** + shared **`name`** on radios; labels are **`label.btn`** for each **`input.btn-check`**. ## Labels Text segments: presentation names (List, Cards) — not filters (All / Mine) and not button-style verb + object.

List Cards

```html

List Cards

``` ## Icons Icon-only: **`aria-label`** on each **`input.btn-check`**.

```html

``` ## Sizes **`sq-segmented-sm`**, default, **`sq-segmented-lg`** (aligns with [button](/components/buttons) heights). ```html

…

``` ## Radius Default track radius matches buttons; add **`rounded-pill`** on **`sq-segmented`** for a pill track.

List Cards

```html

…

``` ## More than two options Two to four segments per group; same **`name`** on all radios in the group. Still presentation of the same set — not All / Mine filters.

List Cards Board

```html

List Cards Board

``` ## Disabled **`disabled`** on **`input.btn-check`** (single option or whole group).

List Cards

```html List ``` ## Rules ### When to use - **Exactly one** presentation of the **same records** (list ↔ cards, list ↔ board) — not independent actions (use [buttons](/components/buttons)), not property filters or another page of content (use [tabs](/components/navigation#choose-a-control)). - Usually in a [toolbar](/components/table#toolbar) or list header, not a [form field](/components/forms). ### Implementation - Mutually exclusive **`btn-check`** radios only — not **`btn-group`**, not mixed **`btn-primary`** inside the track. - Two to four options; larger sets → **select** or **tabs**. ### Labels Short nouns; icon-only inputs need **`aria-label`** on the **`input`** — [Iconography](/design/iconography). --- # Table

Bootstrap

List/data tables. Markup and helpers below; **usage** → [Rules](#rules). Sort/action icons: [Iconography](/design/iconography). ## Helper classes

Sqrl custom

Bootstrap **`table.table`** alone gives base layout (header, zebra, borders, hover — do not add **`table-striped`** / **`table-hover`**). Optional helpers (see **Sqrl custom** tag above). **`sortable`** is theme-only, not a Bootstrap table modifier. | Class | On | Purpose | | ---------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `sortable` | `th` | Sortable column: pointer, darker label on hover, `bi-chevron-expand` after the label (before the label when **`text-end`**, **`sq-cell--num`**, or **`sq-cell--date`**). | | `sq-checkcell` | `th`, `td` | First column: fixed width for row/select checkboxes and left edge padding. | | `sq-cell--num` | `th`, `td` | Right-aligned column; monospace tabular nums on **body cells** only (header stays Manrope). Or Bootstrap `text-end` when you only need alignment. | | `sq-cell--date` | `th`, `td` | Right-aligned **dates and times** in Manrope (`tabular-nums` on body cells). Not monospace — see [Content](/design/content#numbers-and-dates). | | `sq-cell--muted` | `td` | Muted copy (e.g. em dash when owner is empty). | | `sq-col-actions` | `th`, `td` | Narrow trailing column for row actions; right edge padding. | | `sq-rowactions` | `div` in actions cell | Wraps icon buttons; hidden until row hover or focus-within. | | `sq-row--clickable` | `tr` | Row opens record / navigates (`cursor: pointer`). | | `sq-row--selected` | `tr` | Bulk selection or current row — green-50 background. | | `sq-cell--wrap` | `td` | Opt out of default single-line truncation (e.g. long notes). | | `sq-table-sticky-head` | scroll container (`overflow-auto` + `max-height`) | Header row sticks to the **top of the scroll area** while the body scrolls. | Status cells use [badges](/components/badge) (`badge-borderless badge-dotted`), not table helpers. ## Data table - **Required:** **`table.table`** (Sqrl styles in `theme.scss`). Optional [helpers](#helper-classes) in the example below. - **Clip overflow:** wrap in Bootstrap **`overflow-hidden`** when needed (sticky head, horizontal scroll). Tables and headers are **square** — no `rounded` on the table, `thead`, or wrap. - List pages: optional toolbar + [pagination](/components/pagination) footer.

Account	Owner	Status	Value	Last activity
Van den Berg Logistics	Marieke de Groot	Open	€ 18K	28 Feb 2026
TechBuild	Pieter Janssens	In review	€ 124K	19 Feb 2026
Delta IT	Koen Vermeer	Done	€ 45K	10 Feb 2026
Hoofstad Finance	Sara Jansen	Active	€ 92K	5 Feb 2026
Bakker & Zn	—	In review	€ 9K	1 Feb 2026
Noordzee Retail	Marieke de Groot	Open	€ 64K	28 Jan 2026

```html

	Account	Value	Actions
	Van den Berg Logistics	€ 18K

``` ## Sticky header

Sqrl custom

Use Bootstrap **`overflow-auto`** on the scroll container, add Sqrl **`sq-table-sticky-head`**, and set **`max-height`** (inline or in layout CSS) so the body scrolls while the header stays visible. The preview uses a wide table so you can scroll horizontally as well.

Account	Owner	Status	Value	Last activity	Region	Industry	Notes
Van den Berg Logistics	Marieke de Groot	Open	€ 18K	28 Feb 2026	West	Logistics	Renewal discussion in Q2
TechBuild	Pieter Janssens	In review	€ 124K	19 Feb 2026	North	Construction	Multi-site rollout pending sign-off
Delta IT	Koen Vermeer	Done	€ 45K	10 Feb 2026	East	Software	Onboarding complete
Hoofstad Finance	Sara Jansen	Active	€ 92K	5 Feb 2026	Central	Finance	Security review scheduled
Bakker & Zn	—	In review	€ 9K	1 Feb 2026	South	Retail	Waiting on owner assignment
Noordzee Retail	Marieke de Groot	Open	€ 64K	28 Jan 2026	West	Retail	Seasonal campaign follow-up
Greenfield Energy	Lars de Vries	Open	€ 210K	22 Jan 2026	North	Energy	Enterprise tier evaluation
Studio Oranje	Emma Bakker	In review	€ 31K	15 Jan 2026	Central	Creative	Design partner intro call done
Haven Services	Tom van Dijk	Done	€ 78K	8 Jan 2026	West	Maritime	Annual contract signed
Polder Agri	Pieter Janssens	Open	€ 52K	3 Jan 2026	East	Agriculture	Demo requested for field teams

```html

…	Account
…	Van den Berg Logistics

``` ## Toolbar Optional row above the wrap: search, filters, primary action — often same panel with **`border-bottom`** before the table. **Table ↔ cards** (same records) uses [segmented](/components/segmented); All / Mine / Active uses [pill tabs](/components/navigation#pill-tabs) — [Choose a control](/components/navigation#choose-a-control). ## Rules ### When to use - Tabular **list screens** (contacts, tasks, etc.) with sortable columns and row actions. - Empty list → [empty state](/components/feedback); loading → [skeleton placeholders](/components/feedback#skeleton). ### Structure - List page stack (inside the scrolling content area — [Layout](/design/layout#content-area)): **`card-bordered`** with **toolbar** + **`table.table`** → **[pagination](/components/pagination)** on **`surface-page` below the card** (not **`card-footer`**). - Always **`table.table`**. Do not add Bootstrap **`table-striped`** / **`table-hover`** (built into theme). ### Cells and columns - Default text cells ellipsis; badges, checkbox, actions excluded. **`sq-cell--wrap`** when wrapping is required. - Sortable **`th`**: include **`bi-chevron-expand`** (see Sticky header / examples). - Row edit: **`btn-ghost btn-sm`** + pencil in **`sq-rowactions`**. Status: [badges](/components/badge), not table helper classes. --- # Tooltip

Bootstrap

Bootstrap tooltip via **`data-bs-toggle="tooltip"`** and **`data-bs-title`**. Examples below; **usage** → [Rules](#rules). Docs init tooltips in `bootstrap-overlays.js` after navigation.

```html ``` ## Rules ### When to use - Short label for **icon-only** controls ( **`aria-label`** on the control + matching tooltip is fine) — [Iconography](/design/iconography). - Do not hide essential copy in a tooltip. ### Content A few words only. Longer than one line → [Popover](/components/popover).