---
version: alpha
name: Grid Bureau
description: Near-white and near-black with a baseline grid you can actually see, and exactly one chromatic colour.
meta:
  id: "theme-grid-bureau"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Everything sits on the line.
  bestFor: Design system documentation, portfolios, agency sites, specification writing, typography-led products
  avoidFor: Data-dense dashboards, playful consumer brands, anything needing warmth
  defaultMode: light
  surfaceStyle: ruled
  accentUse: underline
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: none
  motion:
    intensity: 1
    duration: 150ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "The baseline grid fades in behind the content on focus, then fades back out."
  displayFont: Schibsted Grotesk
  displayKind: sans
  bodyFont: Schibsted Grotesk
  monoFont: PT Mono
colors:
  background: "#F8F7EF"
  foreground: "#2C2214"
  card: "#EAE9E3"
  card-foreground: "#2C2214"
  popover: "#EAE9E3"
  popover-foreground: "#2C2214"
  primary: "#302F50"
  primary-foreground: "#FBFAF5"
  secondary: "#DBD9D3"
  secondary-foreground: "#2C2214"
  muted: "#DBD9D3"
  muted-foreground: "#6A5C46"
  accent: "#007FCE"
  accent-foreground: "#0E0D08"
  destructive: "#660005"
  destructive-foreground: "#FBFAF5"
  border: "#CECDC7"
  input: "#CECDC7"
  ring: "#302F50"
  chart-1: "#6C6B9F"
  chart-2: "#8181AF"
  chart-3: "#56567B"
  chart-4: "#9A9BBC"
  chart-5: "#45455C"
colorsDark:
  background: "#171406"
  foreground: "#E3DCD3"
  card: "#1E1D16"
  card-foreground: "#E3DCD3"
  popover: "#1E1D16"
  popover-foreground: "#E3DCD3"
  primary: "#D4D5FF"
  primary-foreground: "#100D05"
  secondary: "#29271E"
  secondary-foreground: "#E3DCD3"
  muted: "#29271E"
  muted-foreground: "#958E82"
  accent: "#62B6FF"
  accent-foreground: "#100D05"
  destructive: "#FFCBC4"
  destructive-foreground: "#100D05"
  border: "#36342B"
  input: "#36342B"
  ring: "#D4D5FF"
  chart-1: "#9E9ED6"
  chart-2: "#8484B2"
  chart-3: "#B8B9E3"
  chart-4: "#6E6E8E"
  chart-5: "#CDCEEA"
typography:
  display-lg:
    fontFamily: Schibsted Grotesk
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Schibsted Grotesk
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.015em
  headline-md:
    fontFamily: Schibsted Grotesk
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Schibsted Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
  body-md:
    fontFamily: Schibsted Grotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7143
  body-sm:
    fontFamily: Schibsted Grotesk
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6667
  label-caps:
    fontFamily: Schibsted Grotesk
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.16em
  label-mono:
    fontFamily: PT Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3333
  numeral-xl:
    fontFamily: PT Mono
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  base: 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 24px
  margin: 32px
  measure: 68ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 12px
  rule-baseline:
    backgroundColor: "{colors.border}"
    textColor: "{colors.foreground}"
  spec-row:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.label-mono}"
  badge-label:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Grid Bureau

## Overview

Grid Bureau is the most literal system in this library: it has an 8px baseline
grid and it shows you. Every line-height in the type scale is chosen so that its
product with the font size is a multiple of 8 — 14px at 1.7143 is exactly 24px,
16px at 1.75 is exactly 28px — which means text genuinely sits on the grid
rather than approximately near it.

Its second commitment is chromatic restraint. The primary is near-black, the
ground is near-white, and there is exactly one coloured value in the entire
system: a blue used as an underline. Nothing is filled with colour, ever.

It suits documentation, specifications and portfolios — work where the type is
the product. It is a poor fit for dense data, because a strict baseline grid and
a 30px table row are not compatible.

## Colors

Two greys and one blue.

- **Ground:** near-white with the faintest warm cast, so it does not glare.
- **Primary (near-black):** all type, all rules, the fill on the one button
  shape that exists. It is a colour token, but nobody would call it a colour.
- **Accent (blue):** links and the current item, expressed as a 2px underline
  offset 4px from the baseline. It is the only chromatic value in the system and
  it never fills anything.
- **Neutrals** are almost achromatic; the greys are genuinely grey.
- Charts are monochrome at five lightnesses of the near-black. A chart here is a
  diagram.

## Typography

Schibsted Grotesk at every size, PT Mono for specimens.

- **One family, one axis.** Display, headings and body are all Schibsted Grotesk
  at weight 400 or 500. There is no bold in this system; emphasis is size and
  position.
- **The scale is the grid.** 12/20, 14/24, 16/28, 20/28, 32/40, 64/64 — every
  step lands on 8.
- **Specimens and values:** PT Mono at 12px with a 16px line height. Token
  names, hex values, measurements.
- **Labels:** uppercase at 0.16em with a 16px line height, so even labels sit on
  the grid.

## Layout

A 12-column grid at 1280px with 24px gutters and a 32px margin, on an 8px
baseline. The signature structure is the **specimen row**: a mono token name in
columns 1–3, a rendered example in columns 4–9, and its computed value in
columns 10–12, separated by hairline rules that fall exactly on baselines.

The baseline itself can be toggled visible, and every page must survive that
inspection.

## Elevation & Depth

Rules and nothing else. No shadows, no fills, no tonal cards. Hierarchy is
carried by rule weight and by space measured in baseline units.

The one motion is the grid itself fading in behind the content when a container
takes focus — a way of showing the work rather than decorating it.

## Shapes

Zero radius everywhere without exception, including buttons, inputs, badges and
image frames. This system has no curves at all.

Photography is untreated and always sized to a whole number of baselines.

## Components

- **Specimen row:** the signature component. Token, example, computed value,
  three columns, hairline rules on baselines.
- **Baseline overlay:** a toggleable 8px repeating rule behind the content.
  Every layout in this system is expected to pass it.
- **Links:** 2px accent underline at 4px offset. There are no coloured link
  texts anywhere.
- **Buttons:** near-black fill, zero radius, 12px padding. There is one button
  shape.
- **Tables:** hairline rules, 32px rows — four baselines.

## Do's and Don'ts

- Do choose line heights that multiply to whole multiples of 8.
- Do keep the accent as an underline and never as a fill.
- Do use size and position for emphasis, not weight.
- Do check every layout against the visible baseline.
- Don't add a second chromatic colour.
- Don't round any corner.
- Don't use this system for dense tabular data.