The visual direction is serious, direct and global without flattening people, places or evidence.
The Polis Project / Design Systems Design
Evidence, care and public memory in one working system.
A design system for public-interest work: foundations, tokens, components and trust patterns that help a small team publish difficult material with clarity and discipline.
06values into rules
03token layers
08component families
Trust is a component category
Sources, citations, review states and corrections are treated as required product patterns.
Evidence
Every claim should remain connected to inspectable support.
01Primitive values become semantic roles.Tokens
02Core UI patterns meet editorial trust needs.Components
03Governance turns artifacts into adoption.Release
Overview
A design system for public-interest work.
The work is strongest when it is read as a system architecture, not a style tile. It translates brand values, accessibility, editorial voice and assisted-review governance into reusable product decisions.
Color, spacing, type and state tokens are assigned roles for surfaces, warnings, citations and focus.
Source cards, citations, confidence indicators and correction flows are part of the core system.
Visual walkthrough
Three moments carry the story.
The fast version focuses on the clearest product and system decisions before the full narrative begins.
Token specimen
Color, type and spacing become reusable editorial rules.
The system needs tokens that carry meaning: evidence, warning, surface, focus, reading rhythm and dense product layout. This specimen makes the design contract visible before the full library appears.
Color roles
Polis Yellowaccent.research / public signal
Inksurface.inverse / editorial depth
Layersurface.subtle / dense workspace
Evidence Bluefocus / link / cited state
Typography specimen
Anek LatinPublic interest reportingBrand voice / loaded font
IBM Plex SansEvidence remains inspectableInterface text / loaded font
IBM Plex MonoSOURCE / 0042Metadata / loaded font
Noto SerifLongform reading textureEditorial accent / loaded font
Spacing system
8
2xs
16
sm
24
md
32
lg
48
xl
64
2xl
Moment 01
Translate values into rules.
Six core values become visual and interaction guidance across brand, accessibility, content, motion and layout.
Research
Deep inquiry and defensible source practice.
Reportage
Editorial clarity for stories and public records.
Trust
Transparent authorship, review and correction.
Moment 02
Build the token contract.
Primitive, semantic and component tokens make the system implementable across CSS, Tailwind, React, Figma and documentation.
Primitive
Raw color, type, spacing and motion values.
Semantic
Role-based surfaces, evidence and warning states.
Component
Mappings for buttons, tables, citations and drawers.
Moment 03
Make trust visible in use.
The system shows how public-interest products should handle citations, source quality, assisted review, uncertainty and governance.
Source
Show origin, date, author and credibility notes.
Review
Flag weak support before publication.
Correction
Preserve what changed and why.
What is differentiated
The system earns trust by keeping provenance visible.
Polis is not just a visual language. It is an operating model for evidence-heavy publishing, where every reusable pattern has to support reading, checking, review and correction.
Foundation
Values become rules for tone, layout, accessibility and interaction.
Token
Reusable roles keep evidence, warning, citation and focus states consistent.
Component
Inputs, navigation, feedback and editorial components show required states.
Governance
Documentation, QA and release contracts make the system adoptable.
10
hrs/week
hrs/week
Estimated weekly time saved by reducing web design time by 6 hours and digital asset design time by 4 hours through reusable system decisions.
Full case study
Continue into the complete Polis Design System case study.
The full narrative is attached below, with the original process, implementation details and project context in one continuous read.
Full case study
The complete Polis Design System case study.
The original long-form case study is embedded here so the fast overview can stay concise while the full narrative remains available in one place.