ForEveryone
Design System
Design tokens, components, and patterns for the ForEveryone digital experience.
Photos via Unsplash. Full credits on the Credits page.
This page showcases the design system. Use the sections below to inspect tokens and components.
What’s in this system
Colours, typography, spacing, radius, and shadows are defined as design tokens.
Buttons, cards, forms, and layout patterns use those tokens so the main site and this prototype stay consistent.
80+
Colour tokens
19
Spacing scale
15+
Components
3
Breakpoints
Explore the system
Foundations
Colour, typography, spacing, radius, and shadows: the visual foundation, as design tokens.
View foundations →Visual Elements
Workshop icons, line illustrations, accent marks, and graphic shapes.
View visual elements →Components
Buttons, inputs, cards, tags, accordion, and other interactive elements.
View components →Patterns
Header, footer, workshop cards, events, and composite layouts that combine tokens and components.
View patterns →Agent skills
Guides for AI agents: core conventions for new UI, and a workflow for restyling an existing app.
View agent skills →About & Brand
Who we are, mission and vision, values, personality, and voice and tone.
View about & brand →Logo
Logo variants, clear space, background combinations, and incorrect usage.
View logo →Print & Media
The digital to print boundary: Young Serif, CMYK values, document greys, and cafe signs.
View print →Guidelines
Voice, content, and usage rules: how to combine colour, type, and illustration on-brand.
View guidelines →Accessibility
Our commitment, conformance target, what is built in, and how we test for an inclusive experience.
View accessibility →Governance
Versioning, contribution, and the changelog: how the system evolves and stays consistent.
View governance →Credits
The people, tools, and licences behind the ForEveryone design system.
View credits →