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:

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):

// 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:

// Different logo variations

Color Palette Primary Brand Colors // 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 // Tailwind config module.exports = { theme: { colors: { primary: brandColors.primary, secondary: brandColors.secondary, gray: brandColors.neutral, green: brandColors.success // ... } } }

Color Palette Documentation:

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 / 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:

// 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

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) // templates/SocialProfileImage.tsx

export function SocialProfileImage() { return ( Background /}

  {/* 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 // templates/SocialPost.tsx

interface SocialPostProps { title: string description: string imageUrl?: string }

export function SocialPost({ title, description, imageUrl }: SocialPostProps) { return ( Background gradient /}

  {/* 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 // templates/BusinessCard.tsx

interface BusinessCardProps { name: string title: string email: string phone: string }

export function BusinessCard({ name, title, email, phone }: BusinessCardProps) { return ( Front side /}

  {/* 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/ │ │ ├── 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 // 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:

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

安装

Brand Brief: TechStart

Brand Colors

Primary Blue (#0066CC)

Secondary Orange (#FF9100)

Neutral Grays

{children}

{children}

TechStart Brand Guidelines

Logo Usage

Logo Variations

Clear Space

Minimum Size

Don'ts

Color Palette

Primary Colors

Usage

Typography

Fonts

Hierarchy

Voice & Tone

Brand Personality

Writing Style

Examples