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 agentmods add skills/avinava/document-design-system/brand-theme-designnpx 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.svg" alt="Measured on agentmods" 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 | $0.00163 | $0.01790 |
| Opus 5 | $0.00081 | $0.00895 |
| Sonnet 5 | $0.00033 | $0.00358 |
| Haiku 4.5 | $0.00016 | $0.00179 |
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 4d 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 — 123 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
3 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.
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.
- 4d 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 9d ago), licensed MIT. It adds 163 tokens to every session and 1,790 once invoked, about $0.0008 per session on Opus 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
chart-description-writer
Writes a precise, accessible text description of a data visualization — covering the chart type, what it shows, the key finding, and the data range — suitable for publication as a caption, alt-text, or standfirst alongside the chart.
accessibility
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
best-practices
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".
performance
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".
seo
Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".
core-web-vitals
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".