designing-visual-identities
Skill1 starsChanged 3 months agoMITView on GitHub
Use when an approved brand strategy needs a coherent visual identity system across multiple touchpoints, including marks, typography, color, imagery, graphic language, and responsive applications.
In this repository65 other files it gives its agents.
- analyzing-change-blast-radiusSkill
- analyzing-developer-career-opportunitiesSkill
- art-directing-web-interfacesSkill
- assessing-developer-proficiencySkill
- auditing-dependency-riskSkill
- auditing-pixel-perfect-frontendSkill
- bootstrapping-modern-web-appsSkill
- brag-slimSkill
- building-brand-guidelinesSkill
- building-conversion-product-pagesSkill
- building-developer-career-roadmapsSkill
- building-hybrid-game-assetsSkill
- building-premium-nextjs-interfacesSkill
- building-project-showcasesSkill
- building-regression-testsSkill
- building-reliable-node-api-boundariesSkill
- choosing-application-architectureSkill
- craft-premium-motionSkill
- creating-character-sprite-pipelinesSkill
- defining-brand-strategySkill
- designing-action-combatSkill
- designing-developer-portfolio-evidenceSkill
- designing-relational-data-modelsSkill
- designing-software-boundariesSkill
- designing-test-strategiesSkill
- designing-ui-systemsSkill
- documenting-architecture-decisionsSkill
- editing-for-clarity-and-toneSkill
- engineering-gsap-animationsSkill
- evaluating-developer-proficiencySkill
- evolving-postgres-schemas-safelySkill
- humanizing-generated-proseSkill
- implementing-reference-faithful-uiSkill
- investigating-codebase-semanticallySkill
- managing-implementation-slicesSkill
- mapping-existing-codebase-structureSkill
- naming-brands-and-productsSkill
- optimizing-frontend-motion-performanceSkill
- orchestrating-cinematic-web-motionSkill
- planning-codebase-changes-with-evidenceSkill
- planning-engineering-workSkill
- planning-launch-distributionSkill
- planning-safe-refactorsSkill
- planning-written-communicationSkill
- preparing-project-launchSkill
- profiling-postgres-query-performanceSkill
- reconstructing-images-as-threejsSkill
- reviewing-api-securitySkill
- reviewing-apple-platform-interfacesSkill
- reviewing-pull-requestsSkill
- reviewing-web-securitySkill
- selecting-working-methodsSkill
- shipping-github-vercel-changesSkill
- teaching-developer-conceptsSkill
- testing-integration-boundariesSkill
- testing-playable-gamesSkill
- testing-web-applications-end-to-endSkill
- threat-modeling-applicationsSkill
- tracing-code-execution-pathsSkill
- translating-figma-to-nextjsSkill
- The first 60 shown.
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 3 are distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈3
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 17
Test reproduction and resilience.
- Distinctive: line 18
Treat accessibility as a system constraint.
- Distinctive: line 39
Test the identity with the same representative content across several touchpoints and sizes.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Designing Visual Identities
Core principle
A visual identity is a recognizable system of choices, not a logo delivered in isolation. Translate strategy into a visual grammar that can stay distinctive across contexts, sizes, media, and content density.
Identity workflow
- Convert the brand strategy into visual criteria. Define what the identity must communicate, which category conventions may be used or broken, and what would feel off-strategy.
- Explore a small number of genuinely different visual territories. Each territory should have a coherent premise, not just a different logo sketch or color palette.
- Design the recognition system. Decide the role of wordmark/symbol, typography, color, spacing, composition, graphic devices, imagery, illustration, iconography, and motion only where each element earns its place.
- Establish hierarchy and repeatable relationships. Specify how type scales, spacing, shapes, image treatment, and marks work together rather than designing isolated hero compositions.
- Prototype across representative touchpoints early. Include at least one small digital surface, one content-dense layout, one high-impact brand moment, and any medium essential to the actual business.
- Test reproduction and resilience. Check light/dark backgrounds, small sizes, monochrome or limited-color use, low-quality displays/printing when relevant, localization, and content extremes.
- Treat accessibility as a system constraint. Brand colors used for interface text or meaningful graphics must support accessible combinations; information should not depend on color alone.
- Compare territories against the strategic criteria and real applications. Select the direction that performs as a system, not the one with the most impressive standalone mockup.
- Prepare the chosen identity for documentation in
building-brand-guidelines.
Identity quality checks
A strong system should:
- remain recognizable without requiring every brand element at once;
- work when the logo is small or absent;
- support both expressive and utilitarian contexts;
- distinguish brand expression from product UI state semantics;
- provide enough variation for real content without becoming visually arbitrary;
- preserve legibility and accessible communication in digital applications.
Avoid
- solving the whole identity with one logo lockup;
- choosing typography or colors only because they are fashionable;
- presenting every concept in different mockups that make fair comparison impossible;
- making accessibility a final correction pass;
- creating rules so rigid that normal content breaks the system.
Verification
Test the identity with the same representative content across several touchpoints and sizes. Confirm recognition, hierarchy, legibility, accessible color use, reproducibility, and strategic fit before expanding asset production.
References
- Design Council, brand guidelines for its visual identity: https://www.designcouncil.org.uk/who-we-are/press/
- W3C WAI, WCAG 2.2 Level AA: https://www.w3.org/WAI/WCAG2AA-Conformance
- W3C WAI, use of color: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

