Catppuccin 配色方案风格指南：专业配色使用手册

Catppuccin 配色方案风格指南：专业配色使用手册

catppuccin 😸 Soothing pastel theme for the high-spirited! 项目地址: https://gitcode.com/gh_mirrors/ca/catppuccin

前言

Catppuccin 是一套精心设计的配色方案，包含四种不同风格的主题：Latte（拿铁）、Frappé（冰沙）、Macchiato（玛奇朵）和 Mocha（摩卡）。本文将为开发者详细介绍如何正确使用这套配色方案，确保界面设计的一致性和美观性。

核心设计原则

在使用 Catppuccin 配色方案时，需要遵循以下基本原则：

1. 可读性优先：所有配色使用都应确保文字内容清晰可读
2. 层次分明：通过颜色深浅建立清晰的视觉层次
3. 一致性：相同功能的元素应使用相同的配色
4. 适度调整：在特殊情况下允许适当调整，但需保持整体风格统一

背景颜色使用规范

主背景区域

• 推荐颜色：Base
• 功能说明：作为应用或网站的主要背景色
• 各主题示例：
  • Latte：浅米色
  • Frappé：中度灰蓝色
  • Macchiato：深灰紫色
  • Mocha：深灰棕色

次级面板

• 推荐颜色：Crust 或 Mantle
• 使用场景：侧边栏、辅助面板等
• 颜色特性：
  • Crust：比 Base 稍深
  • Mantle：介于 Base 和 Crust 之间

表面元素

• 推荐颜色：Surface 0、Surface 1、Surface 2
• 应用场景：卡片、按钮、输入框等
• 层级关系：
  • Surface 0：最浅
  • Surface 1：中等
  • Surface 2：最深

叠加层

• 推荐颜色：Overlay 0、Overlay 1、Overlay 2
• 使用场景：模态框、弹出菜单等
• 透明度建议：20%-30%

文字排版配色指南

正文内容

• 主色：Text
• 特点：高对比度，确保最佳可读性

标题层级

1. 主标题：使用 Text 颜色
2. 副标题/标签：使用 Subtext 0 或 Subtext 1
   • Subtext 0：较深
   • Subtext 1：较浅

功能性文字

• 链接：Blue（蓝色）
• 成功提示：Green（绿色）
• 警告信息：Yellow（黄色）
• 错误信息：Red（红色）

特殊元素

• 标签/徽章：Blue（蓝色）
• 光标：Rosewater（玫瑰水色）
• 选中背景：Overlay 2（带透明度）

终端配色方案

窗口元素

• 光标：Rosewater
• 光标文字：Base（浅色主题）或 Crust（深色主题）
• 活动边框：Lavender（薰衣草色）
• 非活动边框：Overlay 0
• 通知边框：Yellow

标准颜色

Catppuccin 为终端提供了完整的 ANSI 颜色映射：

1. 常规颜色：

   • 黑色（color0）：Surface 1/Subtext 1
   • 红色（color1）：Red
   • 绿色（color2）：Green
   • 黄色（color3）：Yellow
   • 蓝色（color4）：Blue
   • 洋红（color5）：Pink
   • 青色（color6）：Teal
   • 白色（color7）：Surface 2/Subtext 0

2. 加粗颜色：

   • 亮黑（color8）：Subtext 0/Surface 2
   • 亮红（color9）：Bright Red
   • 其他亮色保持与常规色一致

最佳实践建议

1. 对比度检查：在使用前务必检查文字与背景的对比度
2. 主题一致性：选择一个主题后，应保持整个应用使用同一主题
3. 特殊情况处理：在深色背景上使用浅色文字，反之亦然
4. 测试验证：在不同设备和光照条件下测试配色效果

通过遵循本指南，开发者可以充分利用 Catppuccin 配色方案的美学优势，创建出既美观又实用的界面设计。记住，良好的配色方案不仅能提升用户体验，还能体现产品的专业性和一致性。

catppuccin 😸 Soothing pastel theme for the high-spirited! 项目地址: https://gitcode.com/gh_mirrors/ca/catppuccin