Back to Details

brand-guidelines

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Brand Guidelines Application

品牌指南应用

Purpose

目的

Apply consistent brand styling to any artifact: documents, presentations, web pages, or marketing materials.
将一致的品牌样式应用于任何产出物：文档、演示文稿、网页或营销物料。

Core Brand Elements

核心品牌元素

Colors

色彩

Define your brand palette with CSS variables:
css
:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}
使用CSS变量定义你的品牌调色板：
css
:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}

Typography

排版

css
/* Primary font for headings */
--font-display: 'Product Sans', 'Google Sans', system-ui;

/* Body font */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;

/* Monospace for code */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;

/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
css
/* Primary font for headings */
--font-display: 'Product Sans', 'Google Sans', system-ui;

/* Body font */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;

/* Monospace for code */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;

/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

Spacing

间距

css
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
css
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

Application Examples

应用示例

Buttons

按钮

css
.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}
css
.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}

Cards

卡片

css
.card {
  background: white;
  border: 1px solid var(--brand-light);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
css
.card {
  background: white;
  border: 1px solid var(--brand-light);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Headers

标题

css
h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--brand-dark);
  font-weight: 500;
}
css
h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--brand-dark);
  font-weight: 500;
}

Document Templates

文档模板

Google Docs

Google Docs

  • Heading 1: Display font, 24pt, Brand Dark
  • Heading 2: Display font, 18pt, Brand Primary
  • Body: Body font, 11pt, Brand Text
  • Links: Brand Primary, underlined
  • 标题1：显示字体，24磅，品牌深色
  • 标题2：显示字体，18磅，品牌主色
  • 正文：正文字体，11磅，品牌文本色
  • 链接：品牌主色，带下划线

Presentations

演示文稿

  • Title slides: White text on Brand Primary background
  • Content slides: Brand Dark text on white
  • Accent elements: Brand Secondary or Accent
  • 标题页：品牌主色背景配白色文字
  • 内容页：白色背景配品牌深色文字
  • 强调元素：品牌辅助色或强调色

Best Practices

最佳实践

  1. Consistency: Use exact brand colors, never approximate
  2. Contrast: Ensure 4.5:1 minimum for text readability
  3. Hierarchy: Use size and weight to establish importance
  4. Whitespace: Generous spacing feels premium
  5. Logo usage: Maintain clear space around logo
  1. 一致性：使用精确的品牌色彩，绝不近似替代
  2. 对比度：确保文本可读性的最小对比度为4.5:1
  3. 层级：使用字号和字重建立内容重要性层级
  4. 留白：充足的间距能提升质感
  5. Logo使用：在Logo周围保留足够的空白区域