brand-designer
Brand Designer
Overview
Brand Designer creates complete visual identity systems from discovery through asset delivery. It covers logo design with SVG components, color palette generation with accessibility compliance, typography scale configuration, brand guidelines documentation, and template creation for social media and print collateral.
When to use: New brand identity projects, logo design with SVG variants, color palette creation with Tailwind integration, typography system setup, brand guidelines documentation, social media template generation, brand asset file organization.
When NOT to use: UI component library design (use design-system), image optimization pipelines (use asset-manager), Figma-to-code workflows (use figma-developer), marketing copy or content strategy.
Quick Reference
| Pattern | Approach | Key Points |
|---|---|---|
| Logo design | SVG component with full/icon/wordmark variants | Design monochrome first, then add color |
| Color palette | Primary, secondary, neutral, semantic layers | 60/30/10 rule: neutral/primary/accent |
| Typography system | Display + body font pair with CSS custom props | Maximum two font families |
| Brand guidelines | Logo usage, colors, typography, voice and tone | Include clear space rules and minimum sizes |
| Social templates | SVG templates at platform-specific dimensions | 1200x630 for Open Graph, 400x400 for profiles |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
119knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78