Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Avinava/document-design-system --skill brand-theme-designgit clone --depth 1 https://github.com/Avinava/document-design-systemWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/avinava/document-design-system/brand-theme-design)<a href="https://agentmods.dev/skills/avinava/document-design-system/brand-theme-design"><img src="https://agentmods.dev/badge/skills/avinava/document-design-system/brand-theme-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/avinava/document-design-system/brand-theme-design"><img src="https://agentmods.dev/badge/skills/avinava/document-design-system/brand-theme-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00163 | $0.01800 |
| Opus 5.5 | $0.00065 | $0.00720 |
| Sonnet 5.5 | $0.00033 | $0.00360 |
| Haiku 4.5 | $0.00016 | $0.00180 |
Grade A, and why
brand-theme-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 18d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 124 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Brand Theme Design
Turn a brand into a theme that satisfies the token contract — and say plainly when the brand cannot do what is being asked of it.
The job is not filling in blanks. A brand guide is a superset with different intent: five to eight colors chosen to work on a logo, a billboard, and a product UI. The contract needs a value-structured neutral ramp and exactly one accent. Most of the work is deciding what to leave out.
The other half of the job is arithmetic nobody does by eye. Brand colors routinely fail contrast for body text, because body text is not what they were picked for. Finding that out before shipping is most of this skill's value.
Workflow
1. Ask what exists
Do not guess the input. Ask which of these they have, and take the best one available:
| Input | How to read it |
|---|---|
| PDF brand guide, style guide | Best. Read the pages directly. Brand guides state their hex values as text, which beats sampling any rendering |
| Website | scripts/extract_site_theme.py <url> — reads computed styles off real elements, not pixels |
| Screenshot, logo, product shot | Look at it directly. Vision judges which color is the brand's "look here" color better than pixel-frequency counting, which just returns the most-used color |
| A few hex values | Go straight to mapping |
references/extraction.md covers each path, including what to pull beyond color.
2. Extract with provenance
Record where every value came from — "primary #0B5FFF ← brand guide p.4", "body ink #1A1A1A ← computed color on body". The user needs to correct your reading, and they cannot correct what they cannot trace.
Capture typography and border character too. A theme that changes only color is not a theme.
3. Map to roles — the judgment step
This is where the skill earns its keep, and it is mostly subtraction. The rules, in full, are in references/mapping.md. The four that decide most outcomes:
- The brand's primary is usually not
--accent. It is more often the ink, or a heading color.--accentmarks the one or two things a reader should look at first; a color that appears on every surface cannot do that job. - Neutrals must stay close in value.
--paper,--surface,--surface-mutedsit within a narrow luminance band. That value structure is what makes a document read as a document rather than as a UI. - The leftover brand colors become nothing. Not a categorical chart palette —
chart-designrejects exactly that. - Brand success/error map to the status tokens, but re-tuned. Values chosen against a white app background usually fail on this system's surfaces.
What ships with it
19 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- core/a11y.md 2.9 KB
- core/base.css 7.5 KB
- core/print.css 4.3 KB
- core/themes/brand-template.css 4.1 KB
- core/themes/console-violet.css 3.5 KB
- core/themes/editorial-coral.css 1.3 KB
- core/themes/executive-navy.css 1.0 KB
- core/themes/field-notes.css 1.0 KB
- core/themes/horizon.css 1.9 KB
- core/tokens.md 8.6 KB
- references/extraction.md 4.8 KB
- references/mapping.md 8.0 KB
- references/verification.md 4.0 KB
- scripts/audit_theme.py 9.3 KB runs code
- scripts/build_document.py 2.7 KB runs code
- scripts/export_pdf.mjs 4.2 KB runs code
- scripts/extract_site_theme.py 6.5 KB runs code
- templates/document.html 12 KB
- templates/themes.html 9.1 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 18d ago Changed · +1 lines 2b154f44739b
- 1mo ago First seen · 123 lines · 163 tokens per session scan A 2eed4bfedfa2
brand-theme-design is a skill published in the GitHub repository Avinava/document-design-system (2 stars, last pushed 19d ago), licensed MIT. It adds 163 tokens to every session and 1,800 once invoked, about $0.0007 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
ui-ux-audit
Audits web UI and raises it from competent to exceptional. Catches what AI tools ship and people notice at once: broken or shifting layouts, cards and values off a shared line, orphaned words and lone grid items, drifting radii, gutters, ratios and component sizes, text overflow, missing states, poor contrast, small…
ui-ux-laws
Priority-ordered rulebook of core UX/UI laws, cognitive-psychology principles, Nielsen's usability heuristics, and accessibility requirements that Claude must actively apply (not just cite) whenever it designs, builds, redesigns, reviews, or critiques any user interface — websites, web/mobile apps, dashboards, forms…
design-component
Design a UI component spec to the house quality bar (anatomy, variants, sizes, the 8 states, token mapping, and accessibility). Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework…
design-screen
Design or build a page, screen, landing page, website, app or UI from a request - the whole job, end to end. Use this for "design a landing page", "build a settings screen", "make me a website", "design the onboarding", "ออกแบบหน้าเว็บ", "ทำหน้า landing", "ออกแบบ UI", "ทำแอป". It runs the pipeline no single skill…
critique
Adversarial design critique of the current work. Render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.
scaffold-project
Scaffold a new design-product project that matches the recommended Claude Code layout (the reference structure). Use when starting a fresh product/app that will be built with this design system.