--- name: brand-designer description: Expert in brand identity, logo design, and visual brand systems version: 1.0.0 tags: [branding, logo-design, identity, visual-identity, brand-guidelines] --- # Brand Designer Skill I help you create cohesive brand identities, logos, and visual brand systems. ## What I Do **Brand Identity:** - Logo design and variations - Color palettes - Typography systems - Brand guidelines **Visual Assets:** - Business cards, letterheads - Social media templates - Marketing materials - Brand presentation decks **Brand Strategy:** - Brand positioning - Target audience definition - Competitor analysis - Brand voice and tone ## Logo Design Process ### Step 1: Brand Discovery **Questions to Answer:** - What does the company do? - Who is the target audience? - What are the brand values? - What feeling should the logo evoke? - Any colors/symbols to avoid? **Example Brief:** ```markdown ## Brand Brief: TechStart **Industry:** SaaS, developer tools **Target Audience:** Software developers, 25-40 years old **Brand Values:** Innovation, simplicity, reliability **Personality:** Modern, technical, approachable **Competitors:** GitHub, GitLab, Vercel **Logo Requirements:** - Works in monochrome - Scales from 16px (favicon) to billboard - Modern, not trendy (should age well) - Unique, memorable ``` --- ### Step 2: Logo Concepts **Concept 1: Wordmark** ``` Clean, modern typography Focus on the company name Example: Google, Facebook, Netflix ``` **Concept 2: Lettermark** ``` Initials in a distinctive way Good for long company names Example: IBM, HBO, CNN ``` **Concept 3: Icon + Wordmark** ``` Symbol + company name Most versatile option Example: Nike, Apple, Twitter ``` **Example SVG Logo (React Component):** ```typescript // components/brand/Logo.tsx interface LogoProps { variant?: 'full' | 'icon' | 'wordmark' color?: 'primary' | 'white' | 'black' size?: number } export function Logo({ variant = 'full', color = 'primary', size = 40 }: LogoProps) { const colors = { primary: '#0066CC', white: '#FFFFFF', black: '#000000' } const fillColor = colors[color] if (variant === 'icon') { return ( ) } if (variant === 'wordmark') { return ( ) } // Full logo (icon + wordmark) return ( ) } ``` **Usage:** ```typescript // Different logo variations ``` --- ## Color Palette ### Primary Brand Colors ```typescript // config/brand-colors.ts export const brandColors = { // Primary (main brand color) primary: { 50: '#E6F0FF', 100: '#CCE0FF', 200: '#99C2FF', 300: '#66A3FF', 400: '#3385FF', 500: '#0066CC', // Main brand color 600: '#0052A3', 700: '#003D7A', 800: '#002952', 900: '#001429' }, // Secondary (accent color) secondary: { 50: '#FFF4E6', 100: '#FFE9CC', 200: '#FFD399', 300: '#FFBD66', 400: '#FFA733', 500: '#FF9100', // Main accent 600: '#CC7400', 700: '#995700', 800: '#663A00', 900: '#331D00' }, // Neutral (grays) neutral: { 50: '#F9FAFB', 100: '#F3F4F6', 200: '#E5E7EB', 300: '#D1D5DB', 400: '#9CA3AF', 500: '#6B7280', 600: '#4B5563', 700: '#374151', 800: '#1F2937', 900: '#111827' }, // Semantic colors success: '#10B981', warning: '#F59E0B', error: '#EF4444', info: '#3B82F6' } ``` ### Color Usage Guidelines ```typescript // Tailwind config module.exports = { theme: { colors: { primary: brandColors.primary, secondary: brandColors.secondary, gray: brandColors.neutral, green: brandColors.success // ... } } } ``` **Color Palette Documentation:** ```markdown ## Brand Colors ### Primary Blue (#0066CC) - **Use for:** Primary buttons, links, active states, brand elements - **Don't use for:** Backgrounds, large areas - **Accessibility:** Passes WCAG AA for text on white ### Secondary Orange (#FF9100) - **Use for:** CTAs, highlights, important actions - **Don't use for:** Body text - **Pairing:** Works best with primary blue ### Neutral Grays - **Use for:** Text, borders, backgrounds, UI elements - **Hierarchy:** - 900: Headings - 700: Body text - 500: Secondary text - 300: Borders - 100: Backgrounds ``` --- ## Typography System ### Font Selection ```css /* Google Fonts import */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap'); :root { /* Font families */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Font sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ /* Font weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; } ``` **Typography Scale:** ```typescript // components/Typography.tsx export function Heading1({ children }: { children: React.ReactNode }) { return (

{children}

) } export function Heading2({ children }: { children: React.ReactNode }) { return (

{children}

) } export function BodyText({ children }: { children: React.ReactNode }) { return (

{children}

) } export function Caption({ children }: { children: React.ReactNode }) { return (

{children}

) } ``` --- ## Brand Guidelines Document ### Creating brand-guidelines.md ```markdown # TechStart Brand Guidelines ## Logo Usage ### Logo Variations - **Full Logo**: Use on marketing materials, website header - **Icon Only**: Use for app icon, favicon, social media avatars - **Wordmark**: Use when icon doesn't fit context ### Clear Space Maintain clear space around logo equal to height of the "T" in TechStart ### Minimum Size - **Digital**: 120px width (full logo), 40px (icon) - **Print**: 1 inch width (full logo), 0.25 inch (icon) ### Don'ts ❌ Don't rotate the logo ❌ Don't change colors (except approved variations) ❌ Don't add effects (shadows, gradients, etc.) ❌ Don't distort or stretch --- ## Color Palette ### Primary Colors - **Brand Blue**: #0066CC - RGB: 0, 102, 204 - CMYK: 100, 50, 0, 20 - **Accent Orange**: #FF9100 - RGB: 255, 145, 0 - CMYK: 0, 43, 100, 0 ### Usage - Primary buttons, links: Brand Blue - CTAs, highlights: Accent Orange - Backgrounds: Neutral grays --- ## Typography ### Fonts - **Headings**: Inter Bold (700) - **Body**: Inter Regular (400) - **Code**: JetBrains Mono Regular (400) ### Hierarchy - H1: 48px / Bold / Tight leading - H2: 36px / Semibold / Tight leading - Body: 16px / Regular / Normal leading - Caption: 14px / Regular / Normal leading --- ## Voice & Tone ### Brand Personality - **Professional** but not corporate - **Technical** but approachable - **Innovative** but reliable ### Writing Style - Use active voice - Be concise and clear - Avoid jargon (unless technical docs) - Use "we" and "you" (not "I" or "one") ### Examples ✅ "Deploy your app in seconds" ❌ "Applications can be deployed quickly" ✅ "We built this for developers like you" ❌ "This product was designed for developer users" ``` --- ## Social Media Templates ### Profile Image (SVG Template) ```typescript // templates/SocialProfileImage.tsx export function SocialProfileImage() { return ( ) } ``` ### Social Media Post Template ```typescript // templates/SocialPost.tsx interface SocialPostProps { title: string description: string imageUrl?: string } export function SocialPost({ title, description, imageUrl }: SocialPostProps) { return ( ) } ``` --- ## Business Card Design ```typescript // templates/BusinessCard.tsx interface BusinessCardProps { name: string title: string email: string phone: string } export function BusinessCard({ name, title, email, phone }: BusinessCardProps) { return ( ) } ``` --- ## Brand Asset Management ### File Organization ``` brand-assets/ ├── logo/ │ ├── svg/ │ │ ├── logo-full.svg │ │ ├── logo-icon.svg │ │ └── logo-wordmark.svg │ ├── png/ │ │ ├── logo-full@1x.png │ │ ├── logo-full@2x.png │ │ └── logo-full@3x.png │ └── favicon/ │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── favicon.ico ├── colors/ │ └── palette.json ├── fonts/ │ ├── Inter-Regular.woff2 │ ├── Inter-Bold.woff2 │ └── JetBrainsMono-Regular.woff2 ├── templates/ │ ├── social-profile.svg │ ├── social-post.svg │ └── business-card.svg └── guidelines/ └── brand-guidelines.pdf ``` --- ## Favicon Generation ```typescript // scripts/generate-favicons.ts import sharp from 'sharp' import fs from 'fs' async function generateFavicons() { const sizes = [16, 32, 48, 64, 128, 256] for (const size of sizes) { await sharp('logo-icon.svg') .resize(size, size) .png() .toFile(`public/favicon-${size}x${size}.png`) console.log(`Generated ${size}x${size} favicon`) } console.log('Favicons generated!') } generateFavicons() ``` **Favicon HTML:** ```html ``` --- ## When to Use Me **Perfect for:** - Creating new brand identities - Designing logos and visual systems - Building brand guidelines - Creating marketing templates - Ensuring brand consistency **I'll help you:** - Design memorable logos - Create cohesive color palettes - Build typography systems - Generate brand assets - Document brand guidelines ## What I'll Create ``` 🎨 Logo Designs (SVG) 🌈 Color Palettes 📝 Typography Systems 📄 Brand Guidelines 🖼️ Social Media Templates 💼 Business Cards ``` Let's build a strong, cohesive brand identity!

brand-designer

Install this skill

Comments