Brand Designer

daffy0208/ai-dev-standards/skills/brand-designer

by daffy020832c3241e48f9No license37 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 9 months ago

Expert in brand identity, logo design, and visual brand systems

Instructions onlyDesign & CreativeMarketing & Sales
AI-generated overview

Guides brand identity creation: logos, color palettes, typography systems, and brand guidelines.

What it does
This skill provides instructions and templates for building cohesive brand identities. It walks through logo design concepts (wordmark, lettermark, icon plus wordmark), color palette definitions, typography scales, and brand guideline documents. It also supplies example SVG/React templates for logos, social media images, and business cards, plus guidance on brand strategy and asset organization.
When to use it
Use it when creating a new brand identity, designing a logo or visual system, or documenting brand guidelines. It also fits producing marketing and social media templates and keeping brand assets consistent.
Requirements
No scripts are shipped; it is instructions and example code only. Following the examples assumes a web/React toolchain with SVG support, and the favicon example references the sharp package and Google Fonts imports.

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 typographyFocus on the company nameExample: Google, Facebook, Netflix

Concept 2: Lettermark

Initials in a distinctive wayGood for long company namesExample: IBM, HBO, CNN

Concept 3: Icon + Wordmark

Symbol + company nameMost versatile optionExample: 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 (      <svg width={size} height={size} viewBox="0 0 40 40" fill="none">        <circle cx="20" cy="20" r="18" fill={fillColor} />        <path          d="M15 20 L25 15 L25 25 Z"          fill="white"        />      </svg>    )  }
  if (variant === 'wordmark') {    return (      <svg width={size * 4} height={size} viewBox="0 0 160 40" fill="none">        <text          x="0"          y="30"          fontFamily="Inter, sans-serif"          fontSize="24"          fontWeight="700"          fill={fillColor}        >          TechStart        </text>      </svg>    )  }
  // Full logo (icon + wordmark)  return (    <svg width={size * 5} height={size} viewBox="0 0 200 40" fill="none">      <circle cx="20" cy="20" r="18" fill={fillColor} />      <path d="M15 20 L25 15 L25 25 Z" fill="white" />      <text        x="50"        y="30"        fontFamily="Inter, sans-serif"        fontSize="24"        fontWeight="700"        fill={fillColor}      >        TechStart      </text>    </svg>  )}

Usage:

typescript
// Different logo variations<Logo variant="full" /><Logo variant="icon" size={32} /><Logo variant="wordmark" color="white" />

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 configmodule.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 (    <h1 className="text-4xl font-bold leading-tight text-gray-900">      {children}    </h1>  )}
export function Heading2({ children }: { children: React.ReactNode }) {  return (    <h2 className="text-3xl font-semibold leading-tight text-gray-900">      {children}    </h2>  )}
export function BodyText({ children }: { children: React.ReactNode }) {  return (    <p className="text-base font-normal leading-normal text-gray-700">      {children}    </p>  )}
export function Caption({ children }: { children: React.ReactNode }) {  return (    <p className="text-sm font-normal leading-normal text-gray-500">      {children}    </p>  )}

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 (    <svg width="400" height="400" viewBox="0 0 400 400">      {/* Background */}      <rect width="400" height="400" fill="#0066CC" />
      {/* Logo (centered) */}      <circle cx="200" cy="200" r="120" fill="white" />      <path        d="M160 200 L240 160 L240 240 Z"        fill="#0066CC"      />    </svg>  )}

Social Media Post Template

typescript
// templates/SocialPost.tsx
interface SocialPostProps {  title: string  description: string  imageUrl?: string}
export function SocialPost({ title, description, imageUrl }: SocialPostProps) {  return (    <svg width="1200" height="630" viewBox="0 0 1200 630">      {/* Background gradient */}      <defs>        <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">          <stop offset="0%" stopColor="#0066CC" />          <stop offset="100%" stopColor="#003D7A" />        </linearGradient>      </defs>      <rect width="1200" height="630" fill="url(#bg)" />
      {/* Content */}      <text        x="60"        y="200"        fontSize="60"        fontWeight="700"        fill="white"        fontFamily="Inter"      >        {title}      </text>      <text        x="60"        y="270"        fontSize="32"        fill="#CCE0FF"        fontFamily="Inter"      >        {description}      </text>
      {/* Logo */}      <Logo variant="icon" size={60} color="white" />    </svg>  )}

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 (    <svg width="350" height="200" viewBox="0 0 350 200">      {/* Front side */}      <rect width="350" height="200" fill="white" />
      {/* Logo */}      <Logo variant="full" size={30} />
      {/* Contact info */}      <text x="20" y="120" fontSize="20" fontWeight="700" fill="#111827">        {name}      </text>      <text x="20" y="145" fontSize="14" fill="#6B7280">        {title}      </text>      <text x="20" y="170" fontSize="12" fill="#6B7280">        {email}      </text>      <text x="20" y="185" fontSize="12" fill="#6B7280">        {phone}      </text>    </svg>  )}

Brand Asset Management

File Organization

brand-assets/├── logo/│   ├── svg/│   │   ├── logo-full.svg│   │   ├── logo-icon.svg│   │   └── logo-wordmark.svg│   ├── png/│   │   ├── [email protected]│   │   ├── [email protected]│   │   └── [email protected]│   └── 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
<!-- In layout/head --><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /><link rel="manifest" href="/site.webmanifest" />

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!

Source and attribution

Source:daffy0208/ai-dev-standardsinskills/brand-designerat commit32c3241

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from daffy0208/ai-dev-standards

Video Producer

daffy0208

Guides building custom web video players with HLS streaming, subtitles, quality selection, and uploads.

Design & Creative37updated 9 months ago

Data Visualizer

daffy0208

Guides building charts and dashboards with Recharts, Chart.js and D3, including layout, color and export patterns.

Data & Analytics37updated 9 months ago

3d Visualizer

daffy0208

Guides creation of Three.js and React Three Fiber 3D scenes, product viewers, and 3D data visualizations.

Design & Creative37updated 9 months ago

Animation Designer

daffy0208

Provides web animation patterns and guidance using Framer Motion and CSS for UI motion design.

Design & Creative37updated 9 months ago

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today