{
  "title": "Report table",
  "path": "/data/tables",
  "url": "https://design.werklist.com/data/tables",
  "text": "https://design.werklist.com/agent/data/tables",
  "summary": "The table of reports and documents: a blue head, alternating rows, figures that line up and a source underneath.",
  "version": "2.1.2",
  "kind": "data",
  "name": "Report table",
  "purpose": "The static table of reports and documents, for final figures that people read, compare and print.",
  "use": [
    "Country reports and other PDFs",
    "Report pages on werklist.com",
    "The exact values under a chart or a map"
  ],
  "avoid": [
    "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"
  ],
  "anatomy": [
    {
      "part": "Caption",
      "measure": "9.5 pt, weight 500, one line above the table, with the table number",
      "token": "--text"
    },
    {
      "part": "Head",
      "measure": "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",
      "token": "--grad-blue-to"
    },
    {
      "part": "Head text",
      "measure": "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",
      "token": "--on-brand"
    },
    {
      "part": "Body row",
      "measure": "one 13 pt line on paper, 36 px on screen"
    },
    {
      "part": "Body text",
      "measure": "8.5 pt on paper, 13 px on screen, weight 400. Figures on screen 13 px, weight 500, tabular",
      "token": "--text"
    },
    {
      "part": "Stripes",
      "measure": "every second body row filled across the full width, the others on the page",
      "token": "--surface-strong"
    },
    {
      "part": "Group label row",
      "measure": "8.5 pt on paper or 13 px on screen, weight 700, no fill. The stripes start again under it",
      "token": "--text"
    },
    {
      "part": "Totals row",
      "measure": "a full width fill, weight 700. Printed only when the total is the sum of its column or a stated calculation",
      "token": "--track-tint"
    },
    {
      "part": "Cell inset",
      "measure": "4 pt on paper, half the 8 pt column gap, 12 px on screen"
    },
    {
      "part": "Country cell",
      "measure": "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"
    },
    {
      "part": "Notes line",
      "measure": "7 pt on paper, 12 px on screen",
      "token": "--text-muted"
    },
    {
      "part": "Source line",
      "measure": "7 pt on paper, 12 px on screen, always present, starting with Source:",
      "token": "--text-muted"
    }
  ],
  "variants": [
    {
      "name": "Paper",
      "use": "PDF reports, white in both themes: the head from #1863dc to #0e3fa8, stripes #f1f1f4, totals #e8effc"
    },
    {
      "name": "Screen",
      "use": "Report pages on werklist.com and in WerkOS, following the theme"
    },
    {
      "name": "Stacked",
      "use": "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": [
    {
      "name": "Missing value",
      "change": "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",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Continued",
      "change": "past 44 rows the table continues on the next page and repeats the head, not the caption"
    },
    {
      "name": "Dark theme on screen",
      "change": "the head stays the same, the stripes and the totals take their dark values",
      "tokens": [
        "--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"
  ],
  "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"
  ]
}