Brand system for the Collaborative Human-Robot Interaction Lab, School of Computing and Information Systems, University of Melbourne.
Drop it into Claude and any deck, document, spreadsheet, poster, or figure it produces comes out in lab styling — the real colours and type from chri-lab.github.io, not an approximation.
Robots and Agents that Work With People
Ask Claude for a talk, a report, a results figure, or an A0 poster, and this skill supplies the design system: palette, type scale, slide anatomy, chart styling, and the component patterns from the website. It also knows when not to brand something — grant forms, anonymous peer review, and participant-facing ethics documents are deliberately left plain.
| Format | What you get |
|---|---|
Presentations (.pptx) |
Title, section, and content slide builders; cards, statistics, tags; branded native charts |
Documents (.docx) |
Ready style block — Title, Heading 1–3, Body, Eyebrow, Caption, Quote |
Spreadsheets (.xlsx) |
Header fill, row banding, hairline rules, frozen panes, branded charts |
| Posters (A0/A1/A2) | Column grid, scaling header band, stacking sections |
| Figures | matplotlib theme and a stable condition→colour palette |
| Web / HTML | CSS custom properties and component classes |
The repository is the skill — SKILL.md sits at the root. The containing folder must be named chri-brand to match the skill's frontmatter.
Personal, available in every project:
git clone https://github.com/CHRI-Lab/chri-brand-skill.git ~/.claude/skills/chri-brandOr project-scoped, so everyone who clones the repo gets it:
git clone https://github.com/CHRI-Lab/chri-brand-skill.git .claude/skills/chri-brandStart a new session — Claude Code scans both directories at startup.
Download the repo as a ZIP, then add it under Settings → Capabilities → Skills. Upload the folder or the archive; no terminal needed.
Start a fresh conversation and ask:
Make me a three-slide deck about our teleoperation work, on brand.
If the skill loaded, the title slide comes back on #1A1E26 with a blue-to-green gradient rule. If not, check that the folder is named chri-brand, that SKILL.md is capitalised exactly, and that you started a new session.
chri-brand/
├── SKILL.md # Triggers, core tokens, per-format routing
├── assets/
│ └── chri-logo.png
├── references/
│ ├── brand-guidelines.md # Layout rules, type scale, components, do/don't
│ ├── examples.md # Tested copy-paste starters per format
│ ├── poster.md # Column grid, sizing, print checklist
│ └── documents.md # When NOT to brand
└── scripts/
├── brand.js # pptxgenjs + docx-js tokens and builders
├── brand.py # openpyxl + matplotlib
└── brand.css # CSS custom properties and components
Claude reads SKILL.md first and pulls in the references/ files only when the task needs them, so the detail costs nothing on simple requests.
| Token | Hex | Role |
|---|---|---|
| Steel Blue | #7A9DB8 |
Primary accent — links, rules, first series |
| Blue Dark | #5A7D96 |
Deeper accent; accent text below 14pt |
| Sage Green | #85AD96 |
Secondary accent |
| Orange | #D4531A |
Highlight only — awards, one call-out per view |
| Purple | #8B5CF6 |
Tertiary tag |
| Ink | #1A1E26 |
Dark backgrounds, title slides |
| Text | #2D3142 |
Body text on light — never pure black |
| Muted | #6C7280 |
Captions, axis labels, metadata |
| Border | #E2E6EA |
Hairlines |
| Surface | #F7F9FB |
Subtle backgrounds, table banding |
Headings are Inter 500 — medium, not bold. Body is Manrope 400. Fallbacks are Arial and Calibri.
The most common mistake is reaching for the wrong one.
Data cycle #7A9DB8 → #85AD96 → #D4531A → #8B5CF6 → #5A7D96 → #6C7280
Soft cycle #7A9DB8 → #85AD96 → #5A7D96 → #8B5CF6 → #4A8A63 → #6C7280
Orange reads as emphasis. A third card or a third experimental condition tinted orange tells the viewer this one matters, whether or not it does. The soft cycle exists so decorative repeats and neutral categories never make that claim by accident. Use the data cycle only where colour carries information.
You don't need Claude to use these — they're ordinary libraries.
const B = require('./scripts/brand.js');
const pres = new pptxgen();
pres.layout = 'LAYOUT_WIDE'; // before adding slides
B.titleSlide(pres, {
kicker: 'HRI 2027 · Long Paper',
title: 'Negotiated Autonomy in Shared Control',
presenter: 'Wafa Johal',
affiliation: 'University of Melbourne',
logoPath: './assets/chri-logo.png',
});import brand
brand.apply_matplotlib()
# Lock condition → colour once, reuse in every figure in the paper
PALETTE = brand.condition_palette(['Baseline', 'Gaze', 'Gaze+Speech'])references/examples.md has tested starters for all six formats.
The tokens are lifted from _sass/_chri-modern.scss in CHRI-Lab.github.io. If the site theme changes, update:
scripts/brand.js→colorsscripts/brand.py→COLORSscripts/brand.css→:root- the palette tables in
SKILL.mdandreferences/brand-guidelines.md
Three copies of the same values is the cost of the modules being standalone. A drift check is a reasonable thing to automate if this gets much bigger.
Lab members: branch, change, and open a PR. Two things worth doing before you push.
Render what you changed. Every builder in here was verified by generating a file and looking at it, not by reading the code. The poster section stacker in particular predicts text wrapping from character counts — it's deliberately conservative, but it is not a text engine, and PowerPoint and LibreOffice wrap differently.
node your_script.js
python /path/to/pptx/scripts/office/validate.py out.pptx
soffice --headless --convert-to pdf out.pptxKeep the two modules aligned. brand.js and brand.py are intentional duplicates. A token added to one belongs in the other.
There's a stray .DS_Store committed at the root — worth removing along with a .gitignore next time someone touches the repo.
MIT — see LICENSE.
The logo and the CHRI Lab name are lab identity, not covered by the code licence. Fork the system for your own group by all means; swap the logo and palette for your own.