@yourbrand/systemv2.4.0Shared brand rules
We design tokens, components, templates and rules for product, marketing and communications teams. Agents check every asset; a named person approves releases.
Illustration: when a design token such as the primary colour or corner radius changes, the components, templates and channels built on it update in turn.
02/signature/token-editor
Pick a colour, corner radius, type scale and density. Six components update, the tokens export in three formats and an agent reports what changed and what now fails contrast.
Agent · impact report0 changes
Contrast · WCAG 2.2
People decideThe agent flags issues; the system owner approves the release or sends it back.
03/what-we-build/manifest
Product, marketing and communications build from the same tokens, so an app button and an email call to action follow the same rules. The system comes as six versioned packages, each listing what it depends on, so you can see what a change will affect.
system install @yourbrand/system
Colour, type, spacing, radius and motion as named values, exported to design tools and code.
Buttons, forms, cards and other parts, designed once with every state and shared by product, marketing and communications.
Templates for landing pages, decks, email, social and print that stay on brand without a designer.
How far a campaign, market or sub-brand can stretch the brand, written as clear ranges.
Who can change what, how changes are released and how every team knows which version it is on.
A searchable site showing the system in use, with design and code side by side, updated with each release.
6 packages · one source of truthSelect a package to trace what it depends onVersions illustrative
04/flex-rules/ranges
Each element gets a floor and a ceiling. Within them, a campaign, market or sub-brand can adapt without asking. Drag a marker or load a brief to test the rule.
4 of 4 in rangeNo exception needed
01 · Blue coverage of the surface
Blue leads, paper carries. Accents may grow for campaigns.
In rangeInside the band. No exception needed.
02 · Display size against body
Outfit display, Montserrat reading. Scale may grow, never flatten.
In rangeInside the band. No exception needed.
03 · Crop and treatment
People at work, natural light. Crops may tighten, subjects stay.
In rangeInside the band. No exception needed.
04 · Departure from the 12-column grid
Twelve columns. Campaigns may break the grid on one element per view.
In rangeInside the band. No exception needed.
Bands illustrativeAn agent measures each asset against the ranges before release. Exceptions go to the system owner.
05/audit/component-inventory
The audit collects components from every file, agency and market, then groups the near-duplicates. You keep one approved version of each, plus the variants you need.
Showing the audit: 92 component variants found.
23 found23 → 3
14 found14 → 2
19 found19 → 4
11 found11 → 2
9 found9 → 1
16 found16 → 3
AgentGroups near-duplicates by appearance, settings and where they are used, and proposes one canonical version for each group.
PeopleDesigners and engineers choose and name the canonical version and decide which differences become variants.
Counts illustrative
06/templates/channels
Write the content once. Each format lays it out, drops what it cannot carry and warns when a line will not fit. Type a headline and switch formats.
content.json
Rules this template enforces
Rules this template enforces
Rules this template enforces
Rules this template enforces
07/governance/releases
Changes are proposed, reviewed and released with a version number that shows whether they fix, add or break something. Each team chooses which releases it hears about.
Watching minor and major releases · 4 of 6 shown would notify you.
In review
color.primary.bright, campaign templates onlybutton.primary label weight 500 → 600Illustrative · Q3
space.density compact, default and comfortablespacing.sm, use space.2 · removed in 3.0.0Illustrative · Q3
Focus ring visible on ink surfacesSocial tile safe area 64 → 72 pxIllustrative · Q1
color-blue is now color.primaryCard drops the legacy shadow propCodemod and a six-week overlap for migrationIllustrative · Q4
Email header template with three slotsMarket 03 locale packIllustrative · Q3
Token set, core components and the first templatesNo notes of that type in these releases.
08/documentation/system-site
The documentation site shows the system in use, with design and code side by side and a named owner on every page. It updates with each release. Search it below.
Your brand system
Components / Button
The main action on a surface. One primary per view; secondary and text buttons for everything else.
<Button variant="primary">Book a demo</Button>09/how-it-runs/pipeline
Tokens come first because they fix most inconsistencies. Components and templates follow where they are used most. A stage closes only when its deliverables pass review, the way code is released only when its tests pass.
stage 1/4
passedWk 01–02
We review every touchpoint for where the brand varies, what gets rebuilt by hand and what costs most to keep consistent.
Gate · sign-off before stage 2
stage 2/4
passedWk 03–05
We define and export the tokens, then design the core components with every state and build them in your code.
Gate · sign-off before stage 3
stage 3/4
passedWk 06–09
We build templates for the channels you publish to most and test the flex rules on a live campaign or market.
Gate · sign-off before stage 4
stage 4/4
passedWk 10–12
We write the documentation and governance, set a release schedule, train your team and release version 1.0.
Gate · system owner tags the release
10/deliverables/release-bundle
Tokens, components, templates, rules, governance, documentation and release notes carry one version number, so design, code and guidelines always agree on what is current.
@yourbrand/systemv1.0.0bundle
| Artefact | Formats | Version | Hash | Owner |
|---|---|---|---|---|
| Design tokens | JSONFigma variablesCSS | 1.0.0 | f0ec682 | Design systems lead |
| Component library | Figmacode | 1.0.0 | b35a006 | Design systems lead |
| Template set | FigmaOfficeCMS | 1.0.0 | e2825b6 | Content lead |
| Flex rules & ranges | Guidelines | 1.0.0 | 2325d9b | Brand lead |
| Governance model | Document | 1.0.0 | 7e87f11 | System owner |
| System documentation site | Web | 1.0.0 | d818e00 | Design systems lead |
| Release notes & versioning | Changelog | 1.0.0 | d9f825f | System owner |
7 of 7 artefacts match v1.0.0Hashes illustrative
11/outcomes/adoption
We track the share of assets built from system parts in each team and channel, and treat the gaps as the next piece of work.
Assets built from system parts Illustrative
| Team | App | Web | Social | Slides | ||
|---|---|---|---|---|---|---|
| Product | 96 | 92 | 70 | 40 | 62 | 20 |
| Marketing | 60 | 90 | 94 | 88 | 80 | 72 |
| Communications | 30 | 76 | 86 | 82 | 90 | 66 |
| Market 01 | 58 | 84 | 88 | 90 | 74 | 70 |
| Market 02 | 44 | 72 | 80 | 84 | 66 | 62 |
| Market 03 | 40 | 70 | 78 | 86 | 60 | 58 |
| Agency A | 18 | 66 | 74 | 80 | 52 | 44 |
Services & packages
Commission the whole system or start with the part you need most: tokens, components, templates or governance. Each part is built in the tools your teams already use.
How to buy
How we work with you
Ask a quick question, send a project brief or issue a formal RFQ. The lead for the work reads each one in full, and any services already in your brief go with it.
Or book a thirty-minute call01
For a first conversation, a press request or anything that does not need a scope yet.
You get A reply from a named lead
02Recommended
Goals, audiences, a budget band and timing, so our first reply can outline the work.
You get Options and a first scope after one call
03
Your documents, deadlines and the procurement and security rules the work must meet.
You get Receipt confirmed and a named bid lead
How it is priced
Each package shows its pricing model. Work starts once a written scope and quote are agreed.
Opens a project brief with this package chosen.
In your brief
In your brief
In your brief
In your brief
In your brief
In your brief
| Package | Every engagement includes | Best for |
|---|---|---|
| SprintA short, fixed-scope engagement that answers one defined question. |
|
Discovery, a diagnostic, a prototype or a decision you need to make soon |
| ProjectA defined scope, delivered for a fixed price. |
|
Work you can describe up front: an identity, a platform or a set of tools |
| MilestoneA larger build in phases you approve and pay for one at a time. |
|
Programmes too large for one contract, where you want control at each step |
| RetainerReserved monthly capacity to run, improve and extend what we built. |
|
Live brands and products that need a steady team without hiring one |
| EnterpriseA multi-workstream programme with a dedicated team, governance and agreed service levels. |
|
Large organisations running change across markets, portfolios or business units |
| SquadA dedicated team that works inside your stack and sprint schedule. |
|
Teams with a clear roadmap that need more senior people quickly |
12/reference/questions
Filter by topic or search. If your question is not here, bring it to the first call.
A brand system includes one and extends it to marketing and communications. One set of tokens serves the app, website, email, social, slides and print.
Yes. We build in the tools your teams already use, with tokens exported as Figma variables and as code.
Your team runs it, with the governance and release schedule we set up together. What we make for you is yours once it is paid for. Tools we already had stay ours, and you get a free, permanent licence to use them. We can also stay on as the system’s editor.
Yes. Design tokens can be bought on their own, and components and templates added when you are ready.
One source file exports to CSS variables, JSON and design-tool variables on every release. Nobody copies values by hand.
It works within the flex ranges first. If the need falls outside them, the market proposes a change and the system owner decides whether it joins the system or stays local.
Agents check assets against tokens, ranges and contrast, group duplicates in audits and draft release notes. People review what agents flag and decide what goes live.
No questions match. Clear the search or pick another topic.
13/brand-design/dependencies
Strategy, foundation, identity and architecture work comes first; Brand AI Tools builds on the system. The two capabilities most often paired with it are marked.
workspace@yourbrand/brand-design
Brand Systems
You are here · 04You will speak to a lead who would run the work, and get a straight answer on fit.
Three ways to start
Every engagement starts with a written scope and a quote agreed before work begins.
Choose one of the three ways above
