IA Collaborative Design System
IA's colours, type, logo, photography and layout rules, packaged for Claude. Once it is set up, the decks, pages and documents people make with Claude come out looking like IA.
- For Ross Gehm Set it up
- For everyone at IA Use it well
See the Showcase
The whole system on one page: every colour, type style, component and brand file, the same as IA's Design System page in Claude.
Download the Kit
One folder with everything: the design system, the setup for Claude, the owner's guide, and this guide.
Four Steps to Bring It Into IA
Ross Gehm sets it up once, in about fifteen minutes. After that, nobody else installs anything.
-
01.
Get the Kit
Ross Gehm · About a minute
Download the zip above and unzip it. If you would rather not download a zip on a work computer, copy it from GitHub instead:
>git clone https://github.com/datadrifer/ia-collaborative-kit ia-collaborative-kitEither way, you get the same kit folder.
-
02.
Ross Gehm Runs the Setup
Ross Gehm · About ten minutes
First, in Terminal, once. Go to the kit folder: type cd and a space, drag the kit folder onto the window, and press Return. Keep the folder where it is afterwards. Then paste each line on its own:
>claude plugin marketplace add ./>claude plugin install ia-design@ia-collaborativeIf Terminal says command not found: claude, install Claude Code with this line, open a new Terminal window, and run the two lines again:
>curl -fsSL https://claude.ai/install.sh | bashThen, in the Claude desktop app, signed in to IA's Claude account: open the Code tab, start a new session in the kit folder, and paste:
>/ia-design:create-pageIf it does not come up when you type /, quit and reopen the app, then start a new session.
Claude creates the IA Collaborative Design System page in IA's Claude account and gives you its link. Open it and check that it shows IA's logo, colours and components. Keep the link: the owner uses it for every update.
-
03.
IA's Claude Admin Makes It the Default
IA's Claude admin · About a minute
Set IA Collaborative as the default design system for IA's organisation. From then on, Claude Slides and Claude Design use it without being asked.
Until it is the default, people name it in their request.
-
04.
Share It With Everyone at IA
Ross Gehm · About two minutes
On the Design System page, open the Share menu and share it with everyone in IA's organisation, so they can see it and comment. Keep edit access for the owner and a backup.
Then send everyone the link to this guide. That is all they need.
Ross Gehm Owns the System
Read the full owner's guideA design system stays right only when one person looks after it. The Design System page in IA's Claude account is the master copy. Everyone else asks; the owner decides, changes it in Claude, and publishes each new version.
Who Does WhatThe owner, a backup, IA's Claude admin, and everyone else.
- Owner: Ross Gehm.Decides what changes, makes the change in Claude, publishes each version.
- Backup owner: name one.Can do everything the owner does, so the system never waits on one person.
- IA's Claude admin.Keeps IA Collaborative as the organisation's default design system.
- Everyone at IA.Uses the system, and asks for changes with a comment on the page.
Access. Share the page with everyone at IA so they can see it and comment. Give edit access only to the owner and the backup owner.
Managing RequestsComments come in; the owner decides once a week.
- Collect.People comment on the Design System page: what should change, and why. Code teams can also open an issue in the kit's repository.
- Decide, once a week.Accept a fix, or something many people need. Decline one person's taste, one project's need, or anything that pulls away from IA's look. Reply with the reason either way.
- Batch.Make the accepted changes together, as one new version, so nobody chases a new version every day.
- Close the loop.Reply to each comment with the version that answers it.
Updating the System in ClaudeSeven prompts. Each makes one change and records a new version.
Open Claude, signed in to IA's account, and start a new chat. Paste one of these prompts, replacing the parts in [brackets]. For [page link], use the link to IA's Design System page. Claude gives you that link when it first creates the page during setup; keep it where the owner and the backup can find it. Claude reads the page, makes the change everywhere it appears, records the new version, and publishes. Then open the page and check the change.
Change a value
Changes one token, rewrites the notes that mention it, and records the version. Slides and Design use the new value from the next piece on.
Update the IA Collaborative design system [page link]: change [token, for example ink-eyebrow] from [old value] to [new value], because [reason]. Keep every other value. Update the token's usage note and every place the brand book mentions the old value. Record this as version [1.0.1] in tokens.json and in the Lock and versions section, with the reason. Show me the before and after, then publish.
Add a brand file
Attach the file first: a logo, a mark, or a photograph IA owns. Claude uploads it, lists it with its rule, and records the version.
Add the attached file to the IA Collaborative design system [page link] as [file name], in the [Logos / Brand elements / Photography] group, with this rule: [when and how to use it]. Add it to the brand book. Record this as version [1.1.0], then publish.
Add a colour or a pattern
Adds it with a usage note, checks the contrast, and records the version.
Add [a new colour / a new pattern] to the IA Collaborative design system [page link]: [name], [value or description], used for [purpose]. Check that any text on it reads at 4.5:1 or better. Add it with a usage note, record this as version [1.1.0], then publish.
Change a rule
Rewrites one rule in the brand book. Claude reads the brand book every time it makes something.
In the IA Collaborative design system [page link], change the brand book's rule about [topic] to: [the new rule]. Change nothing else. Record this as version [1.0.1], then publish.
Work through comments
Turns the week's comments into one list to decide on, then makes the approved ones as one version. If Claude cannot read the comments, paste them in.
Read the open comments on the IA Collaborative design system [page link]. List each one with what it asks for and whether it fits IA's look. Wait for my decisions. Then make the ones I approve as one version, and reply to each comment with that version.
Check a change
Shows the change in a real piece before you tell everyone.
Using the IA Collaborative design system, make a two-slide test deck that uses [the thing that changed], so I can see it in use.
Undo a change
A change is never erased. Undoing it is a new version, so the history stays true.
Undo the last change to the IA Collaborative design system [page link]: put [token or rule] back to [the old value]. Record this as version [1.0.2], with the reason, then publish.
Two rules. Make every change through a prompt that records a version, so the history stays complete. Never paste values from another brand or an old file into the page.
Publishing a New VersionLive in Claude at once; code projects follow with one sync.
In Claude
Nothing more to do.
The page is live the moment Claude publishes it. New decks, designs and documents use the new version; pieces made before keep the version they were made with.
In code projects
The kit catches up with the page, then developers update.
In Claude Code, signed in to IA's account, open the kit folder and run:
>/ia-design:sync
Claude reads the page, brings the kit up to the same version (values, brand files, brand book and version number), shows what changed, and offers to commit, push and tag it. Developers then paste each line on its own in Terminal:
>claude plugin marketplace update ia-collaborative
>claude plugin update ia-design@ia-collaborative
Then they start a new Claude Code session in each project and run:
>/ia-design:setup
Tell people
One line, where IA shares news.
IA Collaborative [1.0.1] is live: [what changed]. Nothing to do in Claude. Code projects: update the plugin and run setup.
Version Numbers1.0.1 for a correction, 1.1.0 for an addition.
- 1.0.1: a correction.A value or a rule was wrong.
- 1.1.0: an addition.A new colour, brand file, pattern or rule.
- 2.0.0: a new look.IA's brand itself changed. Plan it as a project, not an update.
Every version gets one line in the page's Lock and versions section: the number, what changed, and why.
If Something Goes WrongFixes for the page, Claude and code projects.
- A change looks wrong on the page.Use the undo prompt.
- The page is broken or lost.In Claude Code, in the kit folder, run /ia-design:create-page. It rebuilds the page from the kit's last synced version.
- Claude Slides does not use IA's look.Check that IA Collaborative is still the default design system, or name it in the request.
- The gate refuses something in a code project.Fix the code. If the system lacks a value the project needs, add it with an update, never to the project.
- Sync refuses.Usually the page changed without a new version number. Ask Claude to record one on the page, then sync again.
- The owner leaves.The backup owner takes over and names a new backup.
The system makes work look like IA. Making it good is still your job.
It takes care of
- IA's colours, type, spacing and corners.Every value comes from IA's own work.
- IA's logo, marks and photography.The real files, placed the way IA places them.
- IA's patterns.The framework table, the Let's talk panel, the asterisk and more.
- Consistency.Every tool and every person gets the same look.
It leaves to you
- The story.What the piece says, and in what order.
- The hierarchy.What matters most, and what can go.
- The layout and composition.How each page or slide is put together.
- The right components.The charts, tables and diagrams the content needs.
Think of it as IA's house style, not a designer. Bring the thinking; the system makes it look like IA.
Getting the Most Out of It
Name the system, give Claude the content, and let the system handle the look. Most drift comes from a request or a project that quietly overrides it.
Ask like this
A six-slide deck for [client]'s leadership team that introduces our IDEALS model. Use the IA Collaborative design system. Here are my notes: [paste or attach].
Before you start
Nothing, once IA has made IA Collaborative the default design system. Until then, name it.
Why it works
It names the system and hands Claude the content and the audience. The system supplies the look; the story comes from your notes.
Ask like this
A letter-size one-pager for clients that sums up our IDEALS article. Use the IA Collaborative design system. The article: [paste].
Before you start
The same as Slides: nothing, once it is the default.
Why it works
It says what the piece is and who it is for, and leaves the look to the system.
Ask like this
Using the IA Collaborative design system, write a two-page project proposal for [client] as a Word document. The brief: [paste].
Before you start
Nothing. In IA's Claude account, name the system in the request.
Why it works
It names the system and the file type, so a document gets the same look as a deck.
Ask like this
Build a capabilities page at /capabilities from content/capabilities.md. Follow the IA Collaborative design system skill, use its tokens only, and run the gate check on every file before you finish.
Before you start
In Terminal, once: claude plugin marketplace add datadrifer/ia-collaborative-kit, then claude plugin install ia-design@ia-collaborative. Then start a new Claude Code session in the project and run /ia-design:setup once. Added from GitHub, new versions reach you with the two update lines under Publishing a New Version.
Why it works
The skill gives Claude the system, and the gate refuses anything off-system, so the page cannot drift.
ChatGPT, Figma Make and other AI tools are coming soon. Until then, use Claude.
Asking Claude
For everyone
Do
- Name the system in every request.Until IA makes it the default, Claude uses it only when asked.
- Give Claude the content and the audience.Your notes, who reads it, and what they need from it.
- Describe changes by what you want, not by values.“Make the title quieter” lets Claude pick the right step from the system.
- Start a new chat when a piece drifts.Name the system again and bring only the content.
- Ask the owner when something is missing.A new colour or pattern belongs in the system, so everyone gets it.
Don't
- Paste colour codes, pixel sizes or font names.They override the system, and the piece drifts from IA.
- Ask it to look like another brand or a screenshot.“Make it feel like Apple” pulls the piece away from IA.
- Restyle an old deck or template.The old style wins. Bring the text, not the template.
- Mix two design systems in one piece.If a piece must carry a client's brand, use one system and say which.
Setting Up a Project
For Claude projects and code projects
Do
- Keep IA Collaborative the only style source.Take old brand guides, decks and PDFs out of a Claude project's files.
- Run /ia-design:setup in every code project.It copies the system in and turns the gate on.
- Style everything from the system's tokens.Import its stylesheet once; never restate its values.
- Fix the code when the gate refuses.A refusal means the code drifted, not the rule.
- Update with the plugin, then run setup again.Every project moves to the new version together.
Don't
- Copy the system's colours or sizes into your own theme.A second copy never updates, and drifts with every version.
- Edit files inside the system's folder.Setup replaces them. Ask the owner for a new version instead.
- Keep a UI library's default theme.Setup dresses shadcn/ui with IA's tokens. A second theme fights it.
- Switch the gate off to save time.Waivers are for real one-offs, with a reason, and they are logged.
- Keep an old copy of the system in another project.Install from the kit, so every project is on the same version.
Made With It
Claude made each of these with the system. The system gave them IA's look. Open one to look through it.
Confused About Something?
Book a call with Ahmed and talk it through.