Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/dembrandt/dembrandt-skillsnpx agentmods add skills/dembrandt/dembrandt-skills/brand-visual-languageWrote 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/dembrandt/dembrandt-skills/brand-visual-language)<a href="https://agentmods.dev/skills/dembrandt/dembrandt-skills/brand-visual-language"><img src="https://agentmods.dev/badge/skills/dembrandt/dembrandt-skills/brand-visual-language/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/dembrandt/dembrandt-skills/brand-visual-language"><img src="https://agentmods.dev/badge/skills/dembrandt/dembrandt-skills/brand-visual-language.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
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.00035 | $0.02986 |
| Opus 5.5 | $0.00014 | $0.01194 |
| Sonnet 5.5 | $0.00007 | $0.00597 |
| Haiku 4.5 | $0.00003 | $0.00299 |
Grade A, and why
brand-visual-language 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 25d 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 — 207 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Brand Visual Language
Visual shape communicates personality. A rounded corner says something different to the user than a sharp one — and that message arrives before they read a single word. The shapes in typography, border-radius, and iconography should tell a consistent story.
Shape Language
| Shape | Tone | Associated with |
|---|---|---|
| Rounded, pill-shaped | Friendly, approachable, playful, modern | Consumer apps, health, kids, lifestyle, social |
| Softly rounded (8–12px) | Professional, warm, accessible | SaaS, productivity, general B2B |
| Lightly rounded (2–4px) | Precise, structured, efficient | Enterprise tools, finance, data platforms |
| Sharp / no radius | Technical, serious, authoritative | Developer tools, security, industrial |
Every component — cards, inputs, modals, badges — should follow the same radius logic.
Radius for Large Surfaces
The perceived "roundedness" of an element changes with its scale. A radius that looks soft on a button may look sharp on a large container.
- Large Cards & Modals: Typically use a larger radius than buttons (e.g., if buttons are 4px, large cards might be 8px or 12px) to maintain a consistent visual tone.
- Wells and Background Sections: For large background areas or "wells," a smaller radius (2px–8px) is often used to provide structure and define the region without making it feel like a "floating" component. This keeps the focus on the content within, rather than the container itself.
Reading Shape from an Existing Brand
Before choosing a radius, look at the brand's existing materials:
- Logo: Is it rounded, geometric, or angular? The logo's shapes are intentional brand decisions.
- Product photography or illustration style: Rounded, bubbly illustrations signal a different personality than sharp, technical diagrams.
- Typography: A geometric sans-serif (Circular, Futura) reads differently than a humanist sans (Inter, Söhne) or a sharp editorial serif.
- Competitor landscape: Sometimes being the slightly softer option in a sharp market, or the more structured option in a playful market, is the differentiator.
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.
- 25d ago Changed · -33 tokens per session fe9732ceb276
- 1mo ago Changed · +15 lines 8327ec495931
- 1mo ago Changed · +12 lines 064e68eedd80
- 1mo ago First seen · 180 lines · 68 tokens per session scan A d05e6d03d143
brand-visual-language is a skill published in the GitHub repository dembrandt/dembrandt-skills (169 stars, last pushed 5d ago), licensed MIT. It adds 35 tokens to every session and 2,986 once invoked, about $0.0001 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-30.
Other skills, from other repositories
indian-gov-web-ui
A set of design and accessibility rules for Indian government websites, portals, and administrative panels, including required standards such as GIGW and WCAG.
ux4g-design-system
Use when building or reviewing UI with UX4G — India's official government design system (ux4g.gov.in, cdn.ux4g.gov.in, ux4g-web-components). Covers the v3.0.18 token API, the 52 components, install paths for HTML/React/Angular/Flutter, and the interop hazards. Triggers include "UX4G", "ux4g-web-components"…
design-doctrine
The house rules for ANY design or UI work - the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states, one thing leads, and output completeness. Load this FIRST whenever building, reviewing, or theming a screen, component, or token…
image-to-code
Turn a reference image, screenshot, or mockup into token-driven, accessible code. Infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants…
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
desktop-principles
Desktop-specific UX principles - hover states, pointer precision, keyboard shortcuts, multi-window, focus management. Covers macOS, Windows, Linux, web desktop.