Back to Details

corporate-colors

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

When to Use

适用场景

  • Defining brand color systems for applications
  • Implementing light/dark theme switching
  • Creating design tokens or style systems
  • Establishing color naming conventions across teams
  • 为应用定义品牌色彩系统
  • 实现明暗主题切换
  • 创建设计令牌或样式系统
  • 跨团队建立色彩命名规范

Design Philosophy

设计理念

Warm tones only. Bastet is a pet care platform — the brand must feel warm, inviting, and trustworthy. Cold blues/purples are explicitly avoided for primary and secondary roles.
Based on Catppuccin flavors:
  • Light mode: Latte
  • Dark mode: Mocha
仅使用暖色调。 Bastet是一个宠物护理平台，品牌调性必须给人温暖、有亲和力、值得信赖的感觉。主色和辅助色明确避免使用冷调的蓝色/紫色。
基于Catppuccin风格变体：
  • 亮色模式：Latte
  • 暗色模式：Mocha

Brand Colors

品牌色彩

RoleCatppuccin NameLight (Latte)Dark (Mocha)Usage
PrimaryMaroon
#E64553
#EBA0AC
CTAs, buttons, links, focus rings
SecondaryFlamingo
#DD7878
#F2CDCD
Badges, tags, supporting elements
EmphasisPeach
#FE640B
#FAB387
Hover states, highlights, accents
Warm infoRosewater
#DC8A78
#F5E0DC
Informational, subtle accents
角色Catppuccin名称亮色（Latte）暗色（Mocha）用途
主色Maroon
#E64553
#EBA0AC
CTA、按钮、链接、焦点环
辅助色Flamingo
#DD7878
#F2CDCD
徽章、标签、支撑元素
强调色Peach
#FE640B
#FAB387
悬停状态、高亮、装饰色
暖调信息色Rosewater
#DC8A78
#F5E0DC
信息提示、细微装饰

Why These Colors

色彩选择原因

  • Maroon — Bold warm red. Reads as "action" with confidence and warmth
  • Flamingo — Soft pink that complements Maroon without competing
  • Peach — Energetic orange for emphasis/hover, draws attention to highlights
  • Rosewater — Delicate pink for info states, keeps everything cohesive
  • Maroon — 醒目暖红色，传递“可行动”的感受，兼具可靠感与温度
  • Flamingo — 柔和粉色，可搭配Maroon使用，不会产生视觉冲突
  • Peach — 充满活力的橙色，用于强调/悬停状态，吸引用户注意高亮内容
  • Rosewater — 精致粉色，用于信息状态，保持整体设计协调性

Colors NOT Used as Primary/Secondary

不可用作主色/辅助色的色彩

ColorReason
Blue, SapphireToo cold, corporate feel
Lavender, MauvePurple is cold, doesn't match pet care warmth
TealCold, clinical
GreenReserved for semantic "success" only
颜色原因
蓝色、蓝宝石色过冷，偏传统企业感
薰衣草色、淡紫色紫色偏冷，不符合宠物护理的温暖调性
青色冷调，有临床感
绿色仅保留用作语义化“成功”状态

Color Categories

色彩分类

CategoryPurposeUsage
PrimaryMain brand actions (CTA, links, focus states)Buttons, active states, primary actions
SecondarySupporting elements, less prominent actionsBadges, tags, secondary buttons
AccentEmphasis, highlights, notificationsAlerts, highlights, important info
SurfaceBackgrounds, containersCards, modals, panels
TextTypography hierarchyBody text, headings, labels
BorderDividers, outlinesSeparators, input borders
分类用途使用场景
主色核心品牌行动（CTA、链接、焦点状态）按钮、激活状态、主要操作
辅助色支撑元素、次重要操作徽章、标签、次要按钮
装饰色强调、高亮、通知告警、高亮、重要信息
表面色背景、容器卡片、弹窗、面板
文本色排版层级正文、标题、标签
边框色分割线、轮廓分隔符、输入框边框

Catppuccin Color Mappings

Catppuccin色彩映射

All color token definitions (primary, secondary, accent, surface, text, border) for both light and dark modes:
See assets/color-tokens.ts
明暗模式下所有色彩令牌定义（主色、辅助色、装饰色、表面色、文本色、边框色）：
参考 assets/color-tokens.ts

Design Tokens

设计令牌

CSS Custom Properties (light + dark)

CSS自定义属性（明暗模式）

See assets/styles.css
参考 assets/styles.css

Tailwind Configuration

Tailwind配置

See assets/tailwind-colors.js
参考 assets/tailwind-colors.js

TypeScript Theme System

TypeScript主题系统

See assets/theme-tokens.ts
参考 assets/theme-tokens.ts

React Component Examples

React组件示例

See assets/example-component.tsx
参考 assets/example-component.tsx

Flutter Implementation

Flutter实现

Reference: 
mobile/lib/app/theme/app_colors.dart
dart
// Access via Forui theme
final colors = context.theme.colors;
colors.primary;    // Maroon
colors.secondary;  // Flamingo
参考路径：
mobile/lib/app/theme/app_colors.dart
dart
// Access via Forui theme
final colors = context.theme.colors;
colors.primary;    // Maroon
colors.secondary;  // Flamingo

Light/Dark Mode Conventions

明暗模式规范

Contrast Requirements

对比度要求

ElementLight ModeDark Mode
Text on backgroundsDark text on light surfacesLight text on dark surfaces
Primary actionsHigh contrast (Maroon 
#E64553
on Base 
#eff1f5
)		Softer contrast (Maroon 
#EBA0AC
on Base 
#1e1e2e
)
BordersSubtle, darker than backgroundSubtle, lighter than background
Hover statesShift to Peach (warmer, energetic)Shift to Peach (warmer, energetic)
元素亮色模式暗色模式
背景上的文本浅色表面配深色文本深色表面配浅色文本
主要操作元素高对比度（Maroon 
#E64553
在基础色 
#eff1f5
上）		柔和对比度（Maroon 
#EBA0AC
在基础色 
#1e1e2e
上）
边框比背景稍深，低存在感比背景稍浅，低存在感
悬停状态切换为Peach（更暖、更有活力）切换为Peach（更暖、更有活力）

Semantic Color Usage

语义化色彩使用

typescript
// DO: Use semantic names
<Button color="primary">Submit</Button>
<Alert variant="error">Failed</Alert>

// DON'T: Use specific color names
<Button color="peach">Submit</Button>
<Alert variant="red">Failed</Alert>
typescript
// 推荐：使用语义化名称
<Button color="primary">Submit</Button>
<Alert variant="error">Failed</Alert>

// 不推荐：使用具体色彩名称
<Button color="peach">Submit</Button>
<Alert variant="red">Failed</Alert>

Mode Switching

模式切换

The app MUST respect the device's system brightness preference. Never force a single mode.
dart
// Flutter — reads system preference automatically
final brightness = MediaQuery.platformBrightnessOf(context);
final scheme = brightness == Brightness.dark
    ? AppColors.dark
    : AppColors.light;
应用必须遵循设备的系统亮度偏好，禁止强制使用单一模式。
dart
// Flutter — 自动读取系统偏好
final brightness = MediaQuery.platformBrightnessOf(context);
final scheme = brightness == Brightness.dark
    ? AppColors.dark
    : AppColors.light;

Accessibility Guidelines

无障碍指南

  • WCAG AA Compliance: Minimum 4.5:1 contrast for normal text, 3:1 for large text
  • Focus Indicators: Use primary color with 2px outline
  • Error States: Always pair error color with icons/text, never rely on color alone
  • Color Blindness: Peach/Flamingo may appear similar to protanopia — always pair with shape/text cues
  • WCAG AA 合规：普通文本对比度最低为4.5:1，大文本最低为3:1
  • 焦点指示器：使用主色搭配2px轮廓线
  • 错误状态：错误色必须搭配图标/文本使用，禁止仅依靠色彩传递信息
  • 色盲适配：Peach/Flamingo对红色盲用户可能看起来相似，必须搭配形状/文本提示

Commands

命令

bash
undefined
bash
undefined

Install Catppuccin palette packages (optional)

安装Catppuccin调色板包（可选）

npm install @catppuccin/palette
npm install @catppuccin/palette

Test contrast ratios

测试对比度

npx polypane # or use online tools like contrast-ratio.com

---
npx polypane # 或使用在线工具如contrast-ratio.com

---

Resources

参考资源