Radical Fanatics.
The visual rulebook.

Implementation notes - PDF generation (WeasyPrint)

Grid rendering. Do not use CSS repeating-linear-gradient for the blueprint grid - WeasyPrint renders it at the wrong scale (oversized squares). Use the pre-rendered tile:

.cover {
  background-color: #012452;
  background-image: url('/brand/grid-tile-30pt.png');
  background-size: 30pt 30pt;
  background-repeat: repeat;
}

The tile (/brand/grid-tile-30pt.png) is 120×120px: background #012452 with 3px lines #092b58 on the top and left edges, used at 30pt × 30pt.

Verification (required before sending). Rasterize page 1 of the output PDF at 72 dpi and confirm the grid lines sit exactly 30px apart. Wrong pitch = wrong implementation.

Cover layout. Flex column, padding 64pt: doc-type eyebrow (mono, uppercase, letterspaced, orange-500) → title (Helvetica Neue Bold ±42pt, pure white, max 3 lines) → subtitle hook (teal-400 #69c4c4, 13pt) → deliberate empty middle (flex: 1) → white logo /brand/logo-white-360.png at 170pt → metadata table (mono labels 8pt teal-400, white values, hairlines rgba(255,255,255,0.2)).

Inner pages. Background cream #f4f4ed; callouts as white cards with an orange left border and a hard offset shadow (#d8d6c5). No offset shadows on covers.

Body text - documents differ from the web on purpose. On the site body copy is navy-700 (--color-text-primary). In a document it is ink-500 #2a2a26, with meta and footers in ink-400 #6b6b65. Both are tokens from primitive.css; this is a medium rule, not a deviation. A web page carries short paragraphs surrounded by whitespace, so navy body reads as one calm voice. A dense A4 full of tables, callouts and bold navy lead-ins does not: set everything in navy and the page turns into one blue mass where headings stop reading as headings. Ink body against navy headings keeps the hierarchy scannable, which is what a document is for. Never use #6B7280 for muted text - that is a Tailwind grey that slipped into an early template, not a Fanatics token.

List bullets. Same orange chevron-right as the .chevron-list utility in global.css, but WeasyPrint does not support mask-image. Inline the Lucide path as a background SVG with the colour baked in - never substitute a square, a dot or an arrow:

ul li { padding-left: 1.5em; position: relative; }
ul li::before {
  content: ''; position: absolute; left: 0; top: 0.35em;
  width: 1em; height: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
    viewBox='0 0 24 24' fill='none' stroke='%23ff6e1d' stroke-width='3'
    stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  background-repeat: no-repeat; background-size: contain;
}

Page footers. Give the page box a fixed height and position the footer absolutely (bottom: 13mm). Left in the text flow it rides up and sticks to the last paragraph on short pages.

Living example: living-example-samenvatting.pdf - generated, not designed. The HTML source next to it is the reference implementation.