Back to Details

brand-guidelines

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

IdeaForge Brand Guidelines

IdeaForge品牌指南

Brand Identity

品牌标识

Name: IdeaForge Tagline: AI-Powered Idea Generation Personality: Innovative, Inspiring, Data-Driven, Professional
Target Audience: Startup founders seeking AI-assisted business idea generation and evaluation.
名称：IdeaForge 标语：AI驱动的创意生成 品牌调性：创新、启发性、数据驱动、专业
目标受众：寻求AI辅助商业创意生成与评估的创业者

Colors

色彩规范

Primary Palette

主色调板

NameHexRGBUsage
Mint
#34D399
rgb(52, 211, 153)Primary brand color, CTAs, logo
Mint Dark
#10B981
rgb(16, 185, 129)Hover states, gradients
Coral
#FF6B6B
rgb(255, 107, 107)Text accents, highlights, alerts
名称十六进制值RGB值使用场景
薄荷绿
#34D399
rgb(52, 211, 153)品牌主色、CTA按钮、Logo
深薄荷绿
#10B981
rgb(16, 185, 129)悬停状态、渐变效果
珊瑚红
#FF6B6B
rgb(255, 107, 107)文本强调、高亮、提示信息

Background Colors

背景色

NameHexRGBUsage
Dark Base
#0f1419
rgb(15, 20, 25)Primary dark background
Dark Surface
#1c2128
rgb(28, 33, 40)Cards, elevated surfaces
Dark Elevated
#262c36
rgb(38, 44, 54)Hover states, borders
名称十六进制值RGB值使用场景
深色基底
#0f1419
rgb(15, 20, 25)主要深色背景
深色表层
#1c2128
rgb(28, 33, 40)卡片、悬浮表层
深色高亮层
#262c36
rgb(38, 44, 54)悬停状态、边框

Text Colors

文本色

NameHexRGBUsage
Text Primary
#f0f6fc
rgb(240, 246, 252)Primary text on dark
Text Secondary
#8b949e
rgb(139, 148, 158)Secondary text, labels
Text Muted
#6e7681
rgb(110, 118, 129)Disabled, placeholder
名称十六进制值RGB值使用场景
主文本
#f0f6fc
rgb(240, 246, 252)深色背景上的主要文本
次要文本
#8b949e
rgb(139, 148, 158)次要文本、标签
弱化文本
#6e7681
rgb(110, 118, 129)禁用状态、占位符

Semantic Colors

语义色

NameHexUsage
Success
#34D399
Positive actions, success states
Warning
#FBBF24
Warnings, caution
Error
#EF4444
Errors, destructive actions
Info
#67E8F9
Information, tips
名称十六进制值使用场景
成功
#34D399
正向操作、成功状态
警告
#FBBF24
警告、提醒
错误
#EF4444
错误、破坏性操作
信息
#67E8F9
信息提示、小贴士

Button Colors

按钮颜色

TypeStyle
PrimaryBackground: gradient 
#34D399
→ 
#10B981
, Text: 
#0f1419
SecondaryBackground: transparent, Border: 
rgba(255,255,255,0.3)
, Text: 
#f0f6fc
GhostBackground: transparent, Text: 
#34D399
DangerBackground: 
#EF4444
, Text: 
#ffffff
类型样式
主按钮背景：渐变 
#34D399
→ 
#10B981
，文本：
#0f1419
次要按钮背景：透明，边框：
rgba(255,255,255,0.3)
，文本：
#f0f6fc
幽灵按钮背景：透明，文本：
#34D399
危险按钮背景：
#EF4444
，文本：
#ffffff

Typography

排版规范

Font Stack

字体栈

css
/* Headings */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

/* Body */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

/* Code/Data */
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
css
/* 标题 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

/* 正文 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

/* 代码/数据 */
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

Type Scale

字体层级

ElementSizeWeightLine Height
H12.5rem (40px)7001.2
H22rem (32px)6001.25
H31.5rem (24px)6001.3
H41.25rem (20px)6001.4
Body1rem (16px)4001.6
Small0.875rem (14px)4001.5
Caption0.75rem (12px)5001.4
元素字号字重行高
H12.5rem (40px)7001.2
H22rem (32px)6001.25
H31.5rem (24px)6001.3
H41.25rem (20px)6001.4
正文1rem (16px)4001.6
小号文本0.875rem (14px)4001.5
说明文本0.75rem (12px)5001.4

Tailwind CSS Classes

Tailwind CSS 类名规范

Common Patterns

通用样式示例

tsx
// Primary Button
className="bg-gradient-to-r from-emerald-400 to-emerald-500 text-gray-900 font-semibold px-6 py-3 rounded-lg hover:from-emerald-300 hover:to-emerald-400 transition-all"

// Secondary Button
className="border border-white/30 text-gray-100 px-6 py-3 rounded-lg hover:bg-white/5 transition-all"

// Card
className="bg-gray-800/50 rounded-xl p-6 border border-gray-700/50"

// Text Accent
className="text-red-400" // For coral accent on text

// Stats/Numbers
className="text-emerald-400 font-bold text-2xl"

// Background
className="bg-gradient-to-br from-gray-900 to-gray-800"
tsx
// 主按钮
className="bg-gradient-to-r from-emerald-400 to-emerald-500 text-gray-900 font-semibold px-6 py-3 rounded-lg hover:from-emerald-300 hover:to-emerald-400 transition-all"

// 次要按钮
className="border border-white/30 text-gray-100 px-6 py-3 rounded-lg hover:bg-white/5 transition-all"

// 卡片
className="bg-gray-800/50 rounded-xl p-6 border border-gray-700/50"

// 文本强调
className="text-red-400" // 用于珊瑚红色文本强调

// 统计数字
className="text-emerald-400 font-bold text-2xl"

// 背景
className="bg-gradient-to-br from-gray-900 to-gray-800"

Dark Mode (Default)

深色模式（默认）

IdeaForge uses dark mode as the primary theme. All components should be designed dark-first.
tsx
// Standard background layers
bg-[#0f1419]      // Base
bg-[#1c2128]      // Surface
bg-[#262c36]      // Elevated

// Or using Tailwind
bg-gray-900       // Base
bg-gray-800       // Surface
bg-gray-700       // Elevated
IdeaForge将深色模式作为默认主题。所有组件均需优先按深色模式设计。
tsx
// 标准背景层级
bg-[#0f1419]      // 基底
bg-[#1c2128]      // 表层
bg-[#262c36]      // 高亮层

// 或使用Tailwind预设
bg-gray-900       // 基底
bg-gray-800       // 表层
bg-gray-700       // 高亮层

Spacing

间距规范

Base unit: 4px
TokenValueUsage
xs4pxTight spacing
sm8pxBetween related elements
md16pxDefault padding
lg24pxSection padding
xl32pxMajor sections
2xl48pxPage sections
基础单位：4px
标识数值使用场景
xs4px紧凑间距
sm8px关联元素间间距
md16px默认内边距
lg24px区块内边距
xl32px主要区块间距
2xl48px页面区块间距

Border Radius

圆角规范

TokenValueUsage
sm4pxButtons, inputs
md8pxCards, containers
lg12pxModals, large cards
xl16pxHero sections
full9999pxPills, avatars
标识数值使用场景
sm4px按钮、输入框
md8px卡片、容器
lg12px弹窗、大型卡片
xl16px首屏区块
full9999px胶囊状元素、头像

Shadows

阴影规范

css
/* Subtle */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

/* Card */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);

/* Elevated */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

/* Glow (for primary elements) */
box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
css
/* 轻微阴影 */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

/* 卡片阴影 */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);

/* 悬浮阴影 */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

/* 发光效果（主元素用） */
box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);

Component Examples

组件示例

Score Badge

评分徽章

tsx
// High score (80-100)
className="bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded text-sm font-medium"

// Medium score (50-79)
className="bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded text-sm font-medium"

// Low score (0-49)
className="bg-red-500/20 text-red-400 px-2 py-1 rounded text-sm font-medium"
tsx
// 高分（80-100）
className="bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded text-sm font-medium"

// 中分（50-79）
className="bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded text-sm font-medium"

// 低分（0-49）
className="bg-red-500/20 text-red-400 px-2 py-1 rounded text-sm font-medium"

Navigation

导航栏

tsx
className="bg-gray-900/95 backdrop-blur border-b border-gray-800"
tsx
className="bg-gray-900/95 backdrop-blur border-b border-gray-800"

Input Fields

输入框

tsx
className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-gray-100 placeholder-gray-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
tsx
className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-gray-100 placeholder-gray-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"

Logo Usage

Logo使用规范

  • Primary color: Mint 
    #34D399
  • Can be displayed on dark backgrounds only
  • Minimum clear space: height of logo on all sides
  • Do not distort, rotate, or add effects
  • 主色：薄荷绿 
    #34D399
  • 仅可在深色背景上展示
  • 最小留白：Logo高度的空间（四周均需保留）
  • 不得扭曲、旋转或添加特效

Voice & Tone

语气与风格

  • Professional but approachable - Not stiff, not casual
  • Action-oriented - "Generate ideas", "Start exploring"
  • Confident - Emphasize AI capabilities without overpromising
  • Concise - Data-dense UI means minimal text
  • 专业且亲和 - 既不生硬也不随意
  • 行动导向 - 如"生成创意"、"开始探索"
  • 自信严谨 - 强调AI能力但不过度承诺
  • 简洁凝练 - 数据密集型UI需尽量精简文本

Anti-Patterns

反模式

Avoid:
  • Light/white backgrounds as primary
  • Generic blue (#007bff) as primary color
  • Gradients using coral/red (reserve for text accents only)
  • Low contrast text combinations
  • Excessive animations
  • Purple gradients (overused in AI products)
需避免：
  • 将浅色/白色背景作为主背景
  • 使用通用蓝色（#007bff）作为主色
  • 使用珊瑚红/红色渐变（仅可用于文本强调）
  • 低对比度文本组合
  • 过度动画
  • 紫色渐变（AI产品中过度使用）",