# Report table

The static table of reports and documents, for final figures that people read, compare and print.

* Kind: data
* Page: https://design.werklist.com/data/tables
* Version: 2.1.2

## When to use it

* Country reports and other PDFs
* Report pages on werklist.com
* The exact values under a chart or a map

## When not to use it

* Values people edit: use the board grid
* A trend or a ranking without its chart
* A yearly series as one column per year: turn the table so each year is a row, or use a chart

## Rules

* No rules, frames or vertical lines
* No rounded corners on paper, no icon or tag columns, no row numbers, no merged cells, no rotated headers
* Figures are right aligned, never centered, and the header is aligned the same way
* Units live in the header and cells hold digits only
* Negative values take the minus sign U+2212, never a hyphen or parentheses
* Zero prints 0 and no cell is left blank
* At most 8 value columns, and at most 24 characters in a cell outside the first column
* 44 rows fill a page
* A country name is never shortened. Where there is no flag, the two letter code takes its place
* The totals band runs the full width
* On screen a table wider than its space scrolls sideways, and a country name keeps at least 8 em

## Anatomy

* Caption: 9.5 pt, weight 500, one line above the table, with the table number (--text)
* Head: a fill from --grad-blue-to (#1863dc) to --grad-ocean-ink (#0e3fa8), left to right, full width. 26 pt on paper for one or two lines, 40 px on screen. Top outer corners 8 px on screen, square on paper (--grad-blue-to)
* Head text: on paper 7.5 pt, weight 700, on 10 pt leading. On screen 13 px, weight 500. White, sentence case, never rotated, aligned like its column (--on-brand)
* Body row: one 13 pt line on paper, 36 px on screen
* Body text: 8.5 pt on paper, 13 px on screen, weight 400. Figures on screen 13 px, weight 500, tabular (--text)
* Stripes: every second body row filled across the full width, the others on the page (--surface-strong)
* Group label row: 8.5 pt on paper or 13 px on screen, weight 700, no fill. The stripes start again under it (--text)
* Totals row: a full width fill, weight 700. Printed only when the total is the sum of its column or a stated calculation (--track-tint)
* Cell inset: 4 pt on paper, half the 8 pt column gap, 12 px on screen
* Country cell: a round flag of 10 pt on paper or 20 px on screen with a 1 px inset ring in --border, a 4 pt or 6 px gap, then the full name, which wraps. Where there is no flag, the two letter code on --surface-control
* Notes line: 7 pt on paper, 12 px on screen (--text-muted)
* Source line: 7 pt on paper, 12 px on screen, always present, starting with Source: (--text-muted)

## Variants

* Paper: PDF reports, white in both themes: the head from #1863dc to #0e3fa8, stripes #f1f1f4, totals #e8effc
* Screen: Report pages on werklist.com and in WerkOS, following the theme
* Stacked: On screens below 768 px, one block per row with the column names as labels, blocks 8 px apart on --surface-2 at --radius-lg. A figure keeps its line and its label wraps

## States

* Missing value: n/a in muted ink, aligned like its column, with a short reason (closed, unpublished, out of scope, not collected, pending) when the column is at least 60 pt wide (--text-muted)
* Continued: past 44 rows the table continues on the next page and repeats the head, not the caption
* Dark theme on screen: the head stays the same, the stripes and the totals take their dark values (--surface-strong, --track-tint)

## Accessibility

* On screen, a table element with a caption, th scope col for the column headers and th scope row for the first column
* Flags are hidden from assistive technology, since the name follows them
* n/a shows its reason as text
* The stripes carry no meaning

## Content

* The header names the document and its unit after a comma: Work permits issued, thousands, 2025
* A count is of documents, never of workers, persons or people
* A change in a percentage is in points and the header says so
* Ranges are written with to

## Tokens

* --grad-blue-to
* --grad-ocean-ink
* --on-brand
* --surface-strong
* --track-tint
* --surface-2
* --surface-control
* --text
* --text-muted
* --radius-lg