The chosen identity: Broadcast · Soft red. A non-partisan public record of parliament, made readable and verifiable — built from the broadcast mark (the record, opened and transmitted to every citizen) in a restrained soft red on ink and beige.
This is the v2 bible. Every element below is now a true-vector production asset — real SVG geometry, real self-hosted fonts, a real token contract — generated from a parametric source of truth, not an AI render. The earlier ideation bible (logo / board / assets / applied-home were gpt-image-2 studies) is kept for the record.
The mark
The logo system
The Broadcast mark is a lowercase “i” — the i of
Politick — whose tittle is a soft-red dot and whose signal radiates as five
concentric semicircular arcs. It reads at once as a letter and as a radio / broadcast icon.
All ink is currentColor; the one dot is var(--pk-accent) — so the
mark inverts onto ink with no edits. True semicircle A-arcs, butt caps, no
rounded corners.
Favicon — a redrawn small-size build
Not a shrunk mark: fewer, heavier arcs and a bigger dot so it survives down to 16 px. Shown here at true 48 / 32 / 16 px next to the paper & ink tile.
Lockups — mark + outlined wordmark
The wordmark is “Politick” outlined to true vector paths in Playfair Display SemiBold (HarfBuzz shaping → fontTools outlines) — font-independent, identical everywhere. Letters stay all-ink; the only colour is the mark’s tittle dot and, in the tagline, the phrase ON RECORD.
Minimum size: full mark ≥ 32 px tall; favicon build legible to 16 px;
horizontal lockup ≥ 22 px mark height. Generated by
design/system/logo/mark.py + wordmark.py + favicon.py.
Colour
The palette
Ink + warm paper as primary; a single soft-red accent used sparingly.
Red is muted from vermilion #C5482F so it carries no party charge — and there is
no green. A brighter red is reserved only for alert states. Greys are
warm (they carry the paper’s beige cast), so the whole surface reads as one printed material.
Exact values from tokens.css.
Core — FIXED, never altered
Neutral ramp — warm greys
Accent companions
Dark / inverted surface — data-theme="ink" · same token names, remapped
Party dots — DATA, not brand · PENDING the real Sri Lankan register
Typography
Three families, self-hosted
An engraved newspaper-of-record serif for display, a clean humanist sans for UI/body, and a tabular monospace for dates, counts and citations. All SIL OFL, self-hosted woff2 (no CDN). This specimen is set in the actual fonts.
Display — Playfair Display
Body / UI — IBM Plex Sans
Tabular data — IBM Plex Mono (tnum · lnum)
| MP | Speeches | Words | Citation (date · page · column) |
|---|---|---|---|
| Member A | 1,248 | 84,019 | 2024-11-21 · p.412 · col.3 |
| Member B | 225 | 9,330 | 2024-11-08 · p.097 · col.1 |
| Member C | 78 | 1,004 | 2024-10-30 · p.311 · col.2 |
| Member D | 18 | 211 | 2024-10-02 · p.058 · col.4 |
Figures are tabular — digits align in columns. 0123456789 over 1111111111 / 0000000000.
The broadcast vocabulary
Motif kit
The mark’s language — an origin dot + concentric
arcs — becomes working UI: status/activity dots, the broadcast fan (pulse / tick /
cite), list bullets, dividers and dotted leaders. True vector from one parametric source
(design/system/motifs.py), mirrored 1:1 as Svelte 5 components. Strokes are
currentColor; accents are var(--pk-accent).
design/system/motifs/
Wayfinding
Icon set
A single-stroke line family on a 24px grid — utility icons (search,
navigation, mail, calendar, document, feed…) plus one per policy area (18 topics). True
vector, currentColor, butt caps, tuned to the mark’s weight; the
feed glyph echoes the broadcast arcs. From design/system/icons/icons.py.
Working parts
UI atoms
The tokenised interface kit the site is built from: buttons (soft-red
primary / outline secondary), search & filter fields, topic chips, the
AI summary label, provenance & status pills, stat figures, list
rows, tables and surfaces. All square, flat, hairline-ruled — built on
tokens.css, no rounded corners. From design/system/ui/ui.css.
In context
The key visual
The hero — mark + outlined wordmark, the tagline PARLIAMENT. ON RECORD. FOR EVERY CITIZEN., a short descriptive paragraph and the meta line read · search · verify · made public. Everything is outlined to true paths (real HarfBuzz shaping → fontTools outlines): zero font dependency, pixel-identical in browser and print. Where the AI render set the meta line in green, here those words are ink with soft-red motif-dot separators.
Patterns
Seamless tilings
The mark made contiguous — true vector <pattern> tiles
(reusable as CSS backgrounds, any scale, recolourable). The production set is parameter-tuned to
the mark and built on named wallpaper-symmetry lattices (pg / pmm / p4m) so seamlessness is
provable. Decorative only — the pattern never competes with the record.
In context — the tiling behind the home page
From a bold header band to a barely-there full-page watermark.
Method comparison & build notes: politick-tilings.lukastk.dev.
The identity, applied
The home page — tiling studies
The full home page, built entirely from this system — logo, icons, UI atoms, motif kit and tokens. Each seamless tiling is shown behind it at two strengths: soft (a barely-there watermark) and bold (clearly present). The pattern always sits behind the record and never competes with it. Open each live (desktop):
Built by one generator
(design/bible-v2/home/build.py) over {waves, scales, interlock} × {soft, bold};
opacity tuned per motif by stroke weight (waves 0.05/0.10 · scales 0.06/0.15 · interlock
0.06/0.14).
It’s real code now
The system in code
Every asset above is generated from a parametric source of truth and encoded in a stable token contract. The bundled sources (for reference / download):
- DESIGN.mdThe spec — colour, type, space, shape, elevation, motion. Source of truth (prose + rationale).
- tokens.cssThe runtime contract — all
--pk-*custom properties + thedata-theme="ink"remap. - tokens.tsThe same values as a typed module for JS / Svelte.
- mark.pyGenerates the mark / favicon SVGs — dot at the origin, every dimension a ratio of the dot radius.
- wordmark.pyOutlines “Politick” (HarfBuzz → fontTools) and composes the lockups + tagline.
- motifs.pyGenerates the motif kit SVGs from one
Paramsdataclass. - keyvisual.pyComposes the hero from the real vector assets — body size auto-fits the wordmark width.
- Logo.svelteSvelte 5 logo component — geometry ported 1:1 from
mark.py(byte-identical paths). - geometry.jsShared motif geometry helpers for the Svelte components.
Live in the repo under
design/system/ (logo / motifs / keyvisual / tokens) and design/DESIGN.md.
How to use it
Principles
- Non-partisan, always. No flags, no party colours/symbols, no politician likenesses. The soft red is an index/record red, not a political one.
- One accent. Soft red
#B84A38, used sparingly — the origin dot, a link, the primary action, one key word. A brighter alert red#D7372Ais reserved only for errors and alerts. - No rounded corners. No cards-with-shadows. Separation is by rules + surface tint (
--pk-paper-raised), never by elevation. A printed document, not a SaaS dashboard. - Label the AI. Summaries and topic tags always carry a visible “AI summary” label; AI does disambiguation, segmentation, tagging and summaries — nothing else.
- Show provenance. Every record links to its Hansard source (date · page · column); the dotted leader and cite mark tie the motif to traceability.
- Calm motion. The broadcast pulse is rare and gentle; always honour
prefers-reduced-motion.