David Gérouville-Farrell's personal collection of design systems, each in its own subfolder.
| System | Folder | Description |
|---|---|---|
| Broadsheet | Broadsheet/ |
The Alasdair Gray broadsheet system. A blog set as a Glaswegian broadsheet of the imagination - engraved frames, sepia plates, fell-letter display, a single oxblood accent. Used for thingsithinkithink. |
| EditorialMono | EditorialMono/ |
A Swiss editorial system. Three families (Source Serif 4 / Inter / JetBrains Mono), one accent (vermilion), sharp corners. Reads like a working notebook - hierarchy through space and weight, mono carries structure. Alternative cut for thingsithinkithink. |
| OpenSwim | OpenSwim/ |
The Workbench design system for an offline-first podcast app paired with Shokz OpenSwim bone-conduction headphones. Dark coffee on pale tea, amber for "happening right now", flat rectangles, Space Grotesk + JetBrains Mono. Includes a living style guide, tokens, .ct-* components, and a decisions log. |
| GOSH | GOSH/ |
The Great Ormond Street Hospital Charity system, reverse-engineered from gosh.org. Warm paper anchored in deep purple, vivid cyan/lime/pink accents, ink-on-lime "Donate now" rectangle and pill CTAs. One family - GOSH Brave - across the whole system. Used for client-facing GOSH artefacts. |
| pd | pd/ |
The Public Digital house style, reverse-engineered from public.digital. Warm off-white paper, near-black ink, one signature red accent, nine categorical plate hues for client-story cards. One family - Brown - across the whole system. Oversized sentence-case headlines, no shadows, two radii (square + pill). |
| zre | zre/ |
The ZINC Real Estate house style, reverse-engineered from zincre.com. Forest green on cream, classical Plantin serif paired with a tightly-set Reservation Wide display, no second brand colour, square corners, hairline rules, grayscale portraits. Used for the ZINC RE engagement. |
Each design system folder is self-contained and includes:
README.md- the canonical write-up (voice, palette, type, components, do/don't)SKILL.md- an agent-invocable skill manifest for use with Claude Codeindex.html- a top-level navigator into the system's reference, UI kits, and preview cardsfonts.css+fonts/- locally-bundled.woff2files (no CDN)src/tokens.css+src/components.css- canonical tokens and componentscolors_and_type.css- semantic CSS-variable aliases over the tokensreference/- the original hand-set styleguidepreview/- one-concept-per-file design system cardsui_kits/- working prototypes built from the system
Drop a new folder at the root, follow the structure above, and add a row to the table.