Site system
A lightweight reference for the typography, layout, and reusable components behind this portfolio. Built for one author, one portfolio, and seven case studies — enough structure to keep the work consistent, but not a universal design system.
- Role
- Designer + author
- Year
- 2026
- Scope
- Self-initiated · one portfolio
- Surface
- Web · Next.js + Tailwind
Overview
This site is built to reduce friction, not to display range. The visual language is restrained so readers can scan and compare seven very different projects quickly. Colour, motion and interaction appear only when they clarify hierarchy, state or evidence.
Seven case studies — healthcare research, urban mobility, enterprise banking, AI assistants — needed to read as one body of work. So typography, spacing and paragraph widths were decided once and used everywhere. Otherwise each new case re-invents its layout, writing one becomes a layout problem instead of a content problem, and the work stops feeling connected.
The four tabs hold the actual decisions: colours, the type ramp, layout measures, components. The system stays secondary to the case content.
- Reading first — nothing is added just to look impressive.
- Colour and motion with a purpose — they appear only where they carry information, not as decoration.
- Built to be scanned — one consistent structure across cases, so comparing them is as easy as reading one.
At a glance
The four tabs above carry the system. Each card below previews what that tab contains — open the corresponding tab to read the live values.
How to read this
Each tab focuses on one part of the system. Read top-to-bottom in any tab — every page leads with the canonical values and then explains the role and any exemptions.
- Color — the palette plus a usage table that fixes what each role does and when a new colour can be added.
- Typography — the four-heading type scale and which prose width each level pairs with.
- Layout — the four text-width measures, plus the four patterns that sit deliberately outside the prose scale.
- Components — the reusable components that compose every case-study page on the site, grouped as frame, controls, surfaces, blocks, and case-specific interactives.
Used in cases
The same system runs underneath every case on this portfolio. Each row below pairs a case with the components it leans on most — a quick map of where the reference is actually doing work.
Older Huawei and CMB cases lean on the structural components (multi-tab body, steps grid, detail block). The RCA cases lean on prose-led components (bridge tables, split, quotes). AI Xiaozhao concentrates the case-specific interactives.
| Case | Year | Signature components |
|---|---|---|
| Human–AI Disagreement in Breast Screening | 2026 | Context map · split · steps · bridge tables · quotes |
| From Underground Heat to Civic Infrastructure | 2026 | Full · pair · quoteSplit · points |
| Passenger Reassurance at Euston | 2025 | Steps grid · split · bridge · survey card |
| AI Xiaozhao — China Merchants Bank | 2025 | Multi-tab body · three flow canvases · conversation explorer · context map |
| Flow — Huawei Cloud | 2023 | Multi-tab body · steps grid · detail · bridge |
| CodeArts — Huawei Cloud | 2021–2022 | Three-tab body · bridge table · stats · steps grid |
| Site system | 2026 | Multi-tab body · the four reference visualisations on this page |
Scope
This is a content and layout system for one author writing for one portfolio website. It is not a universal design system, and not a token library shipped to other teams. The discipline comes from systems like Material 3 — roles, exemptions, canonical values — because that discipline works at any scale. That reference earned its place in September 2026: when the greys inherited from Apple failed a contrast audit, M3's role definitions were what I checked them against.
The pages that follow are the reference: a colour palette, a type ramp, four layout measures, and a small set of reusable components. Open any tab to see the actual values that govern every case on the site.
One rule was added in September 2026, after I audited the site with Lighthouse: every colour used for text meets WCAG AA. The old grey token sat at 3.3:1 and failed across 64 elements, so it was darkened, `ink/65` became the floor for readable text, and a separate `disabled` grey now carries the cases WCAG exempts. Colour hierarchy here is built from size, weight and case as much as from lightness.