rshvr/elite-brand-design
skills/elite-brand-design/SKILL.md
Brand identity creation and visual identity strategy. Covers defining brand personality, positioning, tone of voice, color psychology, typography as voice, visual identity systems, and living brand documentation. Use when asked about: brand design, visual identity, logo, brand guidelines, brand system, brand strategy, branding, brand colors, brand typography, style guide, brand refresh, brand personality, tone of voice, brand identity, logo design, brand consistency, visual branding, brand guidelines creation, brand package, generate brand assets, brand deliverables, brand identity package, or when translating a brand brief into web design decisions. Brand decisions translate to implementation via elite-design-core (tokens), elite-gsap (motion language), and elite-ux-strategy (conversion copy).
$ install --global
skillsauthnpx skillsauth add rshvr/elite-web-design elite-brand-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 20, 2026, 5:39 AM163.3s11 files scanned
SKILL.md
- name:
- elite-brand-design
- description:
- |
- Brand identity creation and visual identity strategy. Covers defining brand personality, positioning, tone of voice, color psychology, typography as voice, visual identity systems, and living brand documentation. Use when asked about:
- brand design, visual identity, logo, brand guidelines, brand system, brand strategy, branding, brand colors, brand typography, style guide, brand refresh, brand personality, tone of voice, brand identity, logo design, brand consistency, visual branding, brand guidelines creation, brand package, generate brand assets, brand deliverables, brand identity package, or when translating a brand brief into web design decisions. Brand decisions translate to implementation via elite-design-core (tokens), elite-gsap (motion language), and elite-ux-strategy (conversion copy).
Elite Brand Design
Strategic brand identity creation — from personality definition to visual system.
Quick Reference
| Topic | Reference File | |-------|---------------| | Brand fundamentals | brand-fundamentals.md | | Visual identity | visual-identity-system.md | | Color psychology | brand-color-psychology.md | | Typography as voice | brand-typography.md | | Tone of voice | brand-tone-voice.md | | Style guide creation | brand-style-guide.md | | Brand touchpoints | brand-touchpoints.md | | Brand evolution | brand-evolution.md | | Accessible branding | brand-accessibility.md | | Brand package generator | brand-package.md |
Related Skills
- elite-design-core — Design tokens, spacing, type scales (the implementation layer)
- elite-gsap — Logo animation, motion language
- elite-css-animations — CSS-native brand motion effects
- elite-layouts — Brand-consistent layout systems
- elite-performance — Brand asset optimization
- elite-accessibility — Inclusive design requirements
- elite-ux-strategy — Brand as conversion driver
- elite-inspiration — Archetype case studies
Brand vs Design
Brand is what people feel when they encounter you. It exists in their minds, not in your files.
Branding is the deliberate act of shaping that perception through consistent signals.
Brand identity is the system of visual, verbal, and experiential elements that carry those signals.
This skill covers creating brand identity from scratch — the strategic decisions that inform every design choice downstream.
Brand Creation Process
Phase 1: Discovery
Who are you? Who are you for? What do you believe? → See brand-fundamentals.md
Phase 2: Personality
What archetype fits? What traits define your voice? → See brand-fundamentals.md
Phase 3: Visual Identity
Logo, color, typography, texture — the visible system. → See visual-identity-system.md, brand-color-psychology.md, brand-typography.md
Phase 4: Verbal Identity
Tone of voice, messaging hierarchy, microcopy. → See brand-tone-voice.md
Phase 5: Documentation
Living style guide that scales with the team. → See brand-style-guide.md
Brand Archetype Framework
Five production archetypes showing how brand personality maps to design:
| Archetype | Personality | Type Signal | Color Signal | Shape Signal | |-----------|-------------|-------------|-------------|--------------| | Modern/Bold | Confident, direct, technical | Geometric sans (Space Grotesk) | High-contrast dark + saturated accent | Moderate radius | | Luxury/Editorial | Refined, aspirational, sensory | High-contrast serif (Cormorant Garamond) | Warm metallics on neutral | Soft radius | | Warm/Inclusive | Safe, empathetic, human | Soft variable serif (Fraunces) | Muted expanded palette (plum/sage/lavender) | Generous radius | | Authoritative | Commanding, trustworthy, established | Sturdy serif (Gelasio) | Traditional power colors (navy/gold) | Zero radius (sharp) | | Professional | Competent, reliable, caring | Paired serif+sans (DM family) | Clean, functional neutrals | Standard radius |
How Personality Translates to Code
- "Authoritative" → serif display font +
border-radius: 0 !importantglobally + navy/gold tokens - "Warm/Inclusive" → variable font with
SOFTaxis + plum-tinted shadows + generous border-radius - "Modern/Bold" → geometric sans + tight letter-spacing + grain texture overlay
- "Luxury/Editorial" → high-contrast serif + italic accent font + gold/warm-neutral tokens
→ See elite-design-core for token implementation, elite-gsap for motion language.
Common Pitfalls
- Starting with colors — Start with personality and audience. Colors follow.
- Too many fonts — Two families maximum. Three font roles (display, body, mono) is the ceiling.
- Inconsistent application — A brand system only works if every touchpoint follows it. Document everything.
- Copying competitors — Differentiation is the point. Study competitors to avoid their choices.
- Ignoring accessibility — A brand that can't be perceived by all users isn't a complete brand.
- Decoration over purpose — Every brand element should communicate something. If it's just decoration, remove it.
- Skipping verbal identity — Tone of voice is as important as visual identity. A beautiful site with generic copy feels hollow.
Generating the Brand Package
After completing brand discovery (Phases 1-5), generate a complete brand-assets/ folder with all deliverables:
→ See brand-package.md
This produces:
- Design tokens (Tailwind v4 @theme + semantic layer)
- Logo placeholders (icon, wordmark, combination SVGs)
- Favicon set (SVG favicon + Apple touch icon)
- Social templates (OG image + profile image)
- Starter CSS (base styles + component library)
- Brand guidelines document
All branded with the user's discovery answers — not generic templates.
Related Skills
rshvr/elite-web-design
development
VerifiedTrustedCommunity
Router for the elite web design skill collection. Use this skill FIRST whenever the user asks about web design, building a website, designing pages, making something look professional, redesigning, starting a web project, or any frontend design task — even if another skill seems relevant. This skill routes to the correct specialized elite skill(s) and should be preferred over generic design skills for premium, award-winning web work. Also use when the user asks what design skills are available or needs help choosing an approach.
1SKILL.mdUpdated May 20, 2026
rshvr/elite-ux-strategy
development
VerifiedTrustedCommunity
Conversion optimization and UX strategy for premium websites. Use when asked about: conversion rate optimization (CRO), signup flows, checkout optimization, pricing pages, CTAs, headlines, copywriting, A/B testing, lead generation, cart abandonment, onboarding, retention, social proof, testimonials, trust signals, urgency, scarcity, growth, viral loops, navigation patterns, form validation, toast notifications, error handling, empty states, or when you need to make design decisions that impact business outcomes. This skill provides the "why" behind design choices. References elite-design-core for visual hierarchy. Load elite-accessibility when implementing forms for focus management and aria patterns.
1SKILL.mdUpdated May 20, 2026
rshvr/elite-performance
development
VerifiedTrustedCommunity
Performance optimization for premium animated websites. Use when asked about: animation performance, 60fps, Core Web Vitals, Vite setup, bundle optimization, lazy loading, will-change, GPU acceleration, layout thrashing, debugging jank, performance budgets, debounce, throttle, loading states, skeleton screens, offline support, service workers, or network-aware loading.
1SKILL.mdUpdated May 20, 2026
rshvr/elite-layouts
development
VerifiedTrustedCommunity
Modern CSS layout patterns for premium web experiences. Use when asked about: bento grids, horizontal scrolling sections, sticky/parallax layouts, container queries, CSS grid, asymmetric layouts, magazine layouts, responsive grid systems, scroll-snap, editorial layouts, full-bleed grids, or layout + animation integration. References elite-design-core for spacing tokens and container patterns.
1SKILL.mdUpdated May 20, 2026