Typography

Headings are set in Inter Tight with tight tracking, everything else in Inter at a 14px body size, code in JetBrains Mono. Text is ink by default, dimmed for secondary information, and coloured only at the AA-safe 700 stop. See Foundations for the raw type tokens.

Headings

Six heading levels; the page title is the only h1.

34px

Operations overview

26px

Purchase orders

22px

Atlas Packaging

18px

Approval history

16px

Line items

14px

Attachments

TitleTitle order={1–6} — Inter Tight (--ds-font-display), weight 600, tracking --ds-letter-spacing-tight (-tighter on h1). Use one h1 per page (the page title); h3/h4 for card and section titles.

Text sizes & weights

Five sizes on the Mantine scale, four weights.

12px

Captions, table headers, badges

--ds-font-size-xs

13px

Labels, secondary text, dense tables

theme

14px

Body text — the default

--ds-body-font-size

16px

Lead paragraphs, modal titles

--ds-font-size-base

20px

KPI values, emphasis

--ds-font-size-xl

Text sizesText size="xs" … "xl" — Inter. md (14px) is the body size and the default; sm is the theme's 13px step for labels.

400

Approve purchase order

500

Approve purchase order

600

Approve purchase order

700

Approve purchase order

Weightsfw={400 | 500 | 600 | 700} — 500 for labels and nav, 600 for emphasis and titles, 700 sparingly (section labels).

Recent activity

Priya Raman approved PO-2040 · 12 min ago

Daniel Osei submitted PO-2041 · 1 hour ago

Amelia Hart invited Marco Silva to Procurement · 3 hours ago

Section labelsize="xs" fw={700} c="dimmed" tt="uppercase" — the sidebar and card group heading.

Text styles

Colour, transform, truncation, clamping and inheritance on Text.

Default text — ink

Dimmed — secondary information

Accent — primary.7

Danger — red.7 → danger-700

Success — green.7 → success-700

ColourDefault ink (--ds-ink), c="dimmed" (--ds-ink-secondary), c="primary.7" accent (AA ember text) and the 700 stop of the status hues.

Uppercase label

Italic — drafts and placeholders

$12,840

PO-2041 · ord_8f2k1x

Transform & decorationtt, fs, td and ff="monospace" (JetBrains Mono).

Keystone Logistics — freight consolidation for the Q4 peak, including weekend dock slots, customs pre-clearance, temperature-controlled trailers for the catering lines and a weekly exception report to Fulfilment.

files/suppliers/atlas-packaging/contracts/2026/master-services-agreement-v4-signed.pdf

Truncatetruncate="end" (default) and truncate="start" — single line with an ellipsis; needs a width-bounded parent.

Line clamplineClamp={2} — multi-line truncation for card descriptions.

Spend is 4.1% over last month

Approved by Priya Raman on 27 Oct.

Inheritinherit and span — nested Text takes the parent's size and family, so you can emphasise words inside a Title or paragraph.

Highlight & Mark

Draw the eye to matches and changes inside a sentence.

Atlas Packaging — corrugated cartons

Packaging consumables, Q4

Atlas freight surcharge

HighlightHighlight highlight={['atlas', 'packaging']} — marks search matches in results; case-insensitive.

Delivery moved to 04 Nov after the carrier delay.

PO-2040 approved by Finance; PO-2037 approved by Platform.

The ember accent marks interactive state.

Mark & colourMark defaults to yellow (→ warning tint); color on Mark / Highlight takes any theme hue.

Blockquote

Quoted comments, decisions and policy excerpts.

Approved on condition that the Q4 rebate is credited against the next invoice. Please attach the signed rate card before dispatch.— Priya Raman, Finance

Orders over $25,000 need a second approver from a different team.— Fulfilment playbook

BlockquoteBlockquote cite icon — defaults to the primary colour (ember rule, soft wash). Pass color="blue" (→ info) for neutral callouts in comments and notes.

Lists

Bulleted, numbered, nested and icon lists.

Two scheduled drops per week
Urgent orders ship next day
Rebate above 40,000 units

UnorderedList

Create the purchase order
Request budget approval
Send to supplier

OrderedList type="ordered"

Packaging
Freight
- Road
- Sea
Facilities

NestedwithPadding on the inner list indents it.

Supplier verified
Budget available
Rate card missing

With iconsicon={<ThemeIcon />} per list or per item, spacing="xs" — checklists and plan features.

Code & Kbd

Field names, values, snippets and keyboard shortcuts in running text.

Set status to approved to release the order, or press ⌘ + Enter in the form. Open search anywhere with ⌘ + K.

await daas.items('purchase_orders').updateOne('o1', {
  status: 'approved',
  approved_by: 'u3',
});

EscTabShift

Kbd sizes xs · sm · md

Code & Kbd in proseCode inline and Code block (JetBrains Mono); Kbd for keyboard shortcuts.

Rich text

HTML from a rich-text field or markdown, styled by Mantine’s Typography.

Supplier onboarding

Every new supplier goes through a three-step review before their first order. The checklist lives in the supplier handbook; this page summarises it.

What we check

Company registration and tax number
Insurance certificate, valid for at least 12 months
Bank details, confirmed by a call-back

Approval limits

Role	Limit	Second approver
Editor	$5,000	Not required
Approver	$25,000	Above limit
Administrator	Unlimited	Above $100,000

Never change bank details from an email request alone.

Suppliers are created through the API with POST /items/suppliers:

{ "name": "Atlas Packaging", "category": "Packaging", "status": "review" }

TypographyTypography (formerly TypographyStylesProvider) styles raw HTML — headings, lists, tables, code, quotes — for content from a rich-text field or markdown.

Long-form sample

The whole type system in a reading context: a product changelog.

Changelog

What's new in Northwind Ops

Product updates for the operations workspace. Subscribe to updates

Version 2.4.0

Latest

28 Oct 2026

Bulk approvals and a faster orders list. Approvers can now act on up to 50 purchase orders at once, and the list loads in under 300 ms for workspaces with 100k orders.

New

Bulk approve and reject from the orders list, with a single comment for every order.
Saved filters — pin Status: Pending approval and Owner: me to the sidebar.

Fixed

Totals no longer round to the nearest dollar on multi-currency orders.
Pressing Esc inside a date field closed the whole drawer.

Version 2.3.2

Patch

14 Oct 2026

Security and reliability fixes. No action needed.

Fixed

File uploads over 25 MB resume after a dropped connection.
Session timeout now warns two minutes ahead.

Release notesA changelog page composed from Title, Text, Badge, List, Code, Kbd, Divider and Anchor on a Card.