brand-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Brand Designer Skill

品牌设计师技能

I help you create cohesive brand identities, logos, and visual brand systems.

我可以帮助您打造连贯的品牌标识、logo及视觉品牌系统。

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设计及变体
配色方案
字体系统
品牌指南

视觉资产设计：

名片、信纸
社交媒体模板
营销物料
品牌演示文稿

品牌策略：

品牌定位
目标受众定义
竞品分析
品牌语气与风格

Logo Design Process

Logo设计流程

Step 1: Brand Discovery

步骤1：品牌调研

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

undefined

需要回答的问题：

公司的业务是什么？
目标受众是谁？
品牌核心价值是什么？
Logo需要传递什么样的感受？
有没有需要避免的颜色/符号？

品牌简报示例：

markdown

undefined

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

---

Logo Requirements:

Works in monochrome
Scales from 16px (favicon) to billboard
Modern, not trendy (should age well)
Unique, memorable

---

Step 2: Logo Concepts

步骤2：Logo概念设计

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

概念1：文字标志

Clean, modern typography
Focus on the company name
Example: Google, Facebook, Netflix

概念2：字母标志

Initials in a distinctive way
Good for long company names
Example: IBM, HBO, CNN

概念3：图标+文字标志

Symbol + company name
Most versatile option
Example: Nike, Apple, Twitter

SVG Logo示例（React组件）：

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

使用示例：

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'
}

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

undefined

typescript

// Tailwind config
module.exports = {
  theme: {
    colors: {
      primary: brandColors.primary,
      secondary: brandColors.secondary,
      gray: brandColors.neutral,
      green: brandColors.success
      // ...
    }
  }
}

配色方案文档：

markdown

undefined

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

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

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

---

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

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;
}

字体层级：

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

创建brand-guidelines.md

markdown

undefined

markdown

undefined

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

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)

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

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

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)

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

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

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

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"

---

✅ "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)

头像模板（SVG）

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

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

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

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

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

Favicon生成

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

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

适用场景：

打造全新品牌标识
设计Logo及视觉系统
制定品牌指南
创建营销模板
确保品牌一致性

我可以帮您：

设计令人难忘的Logo
创建连贯的配色方案
搭建字体系统
生成品牌资产
编写品牌指南文档

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!

🎨 Logo设计（SVG格式）
🌈 配色方案
📝 字体系统
📄 品牌指南
🖼️ 社交媒体模板
💼 名片设计

让我们一起打造强大、连贯的品牌标识！