Skip to content

Claimdesk · Design system

The system behind the screens

Claimdesk runs on the same component kit as the other designs. Only the tokens below change, and they carry the whole product: colour, type, shape and the components built from them.

Colour

Primary

--primary

Accent

--highlight

Ink

--foreground

Muted

--muted-foreground

Surface

--card

Canvas

--background

Status

Data

Type

Aa

IBM Plex Sans

Display and figures

IBM Plex Sans

Interface text

Claims that need you now

Section title · 14 / 600

Body text for tables and forms · 14 / 400

Caption and data · 12, tabular numbers

Components

ApprovedIn reviewFlaggedNew

Open claims

1,284

Up 4.2 percent, favourablevs last period

Helper text sits under the field.

Progress

Complete82%
Halfway54%
Starting23%

Shape and spacing

radius-sm

radius-md

radius-lg

radius-xl

4

8

12

16

24

32

Every colour is a token, so light and dark mode come from one source. Spacing runs on a 4px grid.

Component library

Every component the product designs are built from, documented with live examples.

StatusBadge

Workflow state as icon, label and tone. Tone tracks urgency, so meaning never rests on colour alone.

zaytun/app/StatusBadge.tsx

Subtle (default)

ApprovedPendingUnder reviewRejectedFlaggedDraftSubmitted

Outline

ApprovedUnder reviewFlagged

Dot, for dense tables

ApprovedPendingFlagged

ToneBadge, for any label that needs a tone

SettledDue in 2dOverdue 3d

StatCard

One KPI with its trend. The arrow shows direction and the colour shows whether that direction is good.

zaytun/app/StatCard.tsx

Gross written premium

€12.4M

Up 6.2 percent, favourablevs last quarter

Avg. processing time

6.8 days

Down 11.4 percent, favourablevs last month

Loss ratio

61.3%

Up 3.1 percent, unfavourablevs last quarter

Policies in force

DataTable

Sortable, paginated, selectable rows with bulk actions, column visibility, density and every non-happy state.

zaytun/app/DataTable.tsx
Preview state
Sample claims
CLM-2026-00501Valentina Mayer€26,620Under review
CLM-2026-00428Lucas Maes€4,740Approved
CLM-2026-00597Fleur de Boer€2,650Pending
CLM-2026-00776Léa Fontaine€79,480Rejected
CLM-2026-00760Paula Martínez€62,830Pending

Showing 1–5 of 18

Page 1 of 4

Charts

Line, bar and donut, drawn from the theme's categorical palette. Each carries its data as a screen-reader table.

zaytun/app/Charts.tsx

LineChart

Trend against a benchmark

  • Portfolio
  • Benchmark
Portfolio index against benchmark
Portfolio index against benchmark
datePortfolioBenchmark
24 Jun108.4103.6
25 Jun108.9104.3
26 Jun108.1103.6
29 Jun108.7104.4
30 Jun109.5105.2
01 Jul110.2105.8
02 Jul110.0105.4
03 Jul110.1105.3
06 Jul110.0105.2
07 Jul110.5105.5
08 Jul110.3105.0
09 Jul110.1104.9
10 Jul110.5105.5
13 Jul110.4105.1
14 Jul111.6106.0
15 Jul111.2105.7
16 Jul111.0105.7
17 Jul110.8105.5
20 Jul111.4105.8
21 Jul111.0105.1
22 Jul111.8105.5
23 Jul112.7106.0
24 Jul112.2105.8
27 Jul111.0105.1
28 Jul110.0104.4
29 Jul109.9104.0
30 Jul110.1103.8
31 Jul109.7103.5
03 Aug110.9104.3
04 Aug112.0105.0
05 Aug111.1104.2
06 Aug110.8104.2
07 Aug111.3104.8
10 Aug111.7105.0
11 Aug112.9105.7
12 Aug111.6104.9
13 Aug112.8105.7
14 Aug113.1105.8
17 Aug112.6105.6
18 Aug111.7105.1
19 Aug111.5105.3
20 Aug112.6106.1
21 Aug113.5106.8
24 Aug114.3107.5
25 Aug113.8107.3
26 Aug112.8106.8
27 Aug112.6106.4
28 Aug110.8104.7
31 Aug109.7104.0
01 Sept109.1103.7
02 Sept109.2103.9
03 Sept108.8103.7
04 Sept108.7103.5
07 Sept109.3103.8
08 Sept109.2103.5
09 Sept110.0103.8
10 Sept110.2104.1
11 Sept110.1103.7
14 Sept110.3103.9
15 Sept110.0103.7
16 Sept110.9104.5
17 Sept110.8104.3
18 Sept110.4103.8
21 Sept110.7104.0
22 Sept110.9104.4

BarChart

Grouped comparison per period

  • Received
  • Closed
Claims received and closed per week
Claims received and closed per week
weekReceivedClosed
04 Aug4548
11 Aug6964
18 Aug5952
25 Aug5964
01 Sept5257
08 Sept6259
15 Sept7883
22 Sept6062

DonutChart

Parts of a whole, with a legend that doubles as the data table

Allocation by asset class
Allocation by asset class
CategoryValueShare
Equities€2.3M48.1%
Fixed income€1.3M27.0%
Real estate€531.2K11.0%
Alternatives€385.6K8.0%
Cash€286.3K5.9%

FilterBar

Search, single and multi-select, and date range, with every active filter echoed as a removable chip.

zaytun/app/FilterBar.tsx
27 of 64 claims
  • Status: Pending
  • Status: Flagged

Stepper

Where a user is in a multi-step task. Finished steps can be revisited; steps with problems are marked.

zaytun/app/Stepper.tsx

Step three of four, with an error on step one

Form fields

Labelled controls with hints and errors wired for assistive tech, plus an error summary that links to each field.

zaytun/app/Field.tsx

1 field needs attention

As it appears on their ID.

Enter an IBAN, like DE89 3704 0044 0532 0130 00

Investment profile

Drawer

Inspect or act on a record without leaving the page. Traps focus, closes on Escape and returns focus to its opener.

zaytun/app/Drawer.tsx

The claims demo uses it for claim details, with previous and next navigation.

Timeline

An activity log: who did what, when. Relative times for scanning, exact timestamps on hover.

zaytun/app/Timeline.tsx

  1. Claim approved

    Miriam Kessler ·

    Settlement authorised

  2. Referred to fraud investigation

    Special Investigations ·

  3. Assigned to Miriam Kessler

    Routing ·

  4. Claim submitted via customer portal

    Jonas Weber ·

Empty, error and loading

The states every data view needs, designed once so they read the same everywhere.

zaytun/app/states.tsx

No transactions yet

Trades appear here once they settle.

Calculating premium

Supporting pieces

Smaller parts the dashboards are built from: Meter, SegmentedControl, DescriptionList, Toast and Panel.

zaytun/app/*

Meter: bounded scores with shared thresholds

18
52
86

Toast: confirms an action, announced politely

DescriptionList: record details

Policy
POL-NL-771204
Holder
Daan de Vries
Product
Landlord Cover
Premium
€2,148.90
Deductible
€500
Renews
14 Feb 2027