主题文档
主题颜色
查看和浏览应用程序的调色板
颜色系统
设计语言的核心
颜色在我们的设计系统中扮演着至关重要的角色。它传达含义，建立层次结构，并增强用户体验。我们的调色板经过精心挑选，以在所有界面中保持一致性、可访问性和视觉和谐。
主题色
我们的主色调色板是品牌标识的基础。它在整个UI中一致使用，用于重要元素、按钮和强调部分。
--color-primary-50
--color-primary-100
--color-primary-200
--color-primary-300
--color-primary-400
--color-primary-500
--color-primary-600
--color-primary-700
--color-primary-800
--color-primary-900
--color-primary-950
灰度阶
灰色调对于创建平衡的界面至关重要。它们提供对比度，同时保持中性，让主色调更加突出。
注意：灰色调色板用于创建平衡的界面，提供对比度，同时保持中性，让主色调更加突出。
--color-gray-50
--color-gray-100
--color-gray-200
--color-gray-300
--color-gray-400
--color-gray-500
--color-gray-600
--color-gray-700
--color-gray-800
--color-gray-900
--color-gray-950
背景色
背景色作为内容的画布，提供合适的对比度和可读性。
# 白色变体
--color-white
--color-white-soft
--color-white-mute
# 背景变体
浅色模式内容
--color-bg-light
深色模式内容
--color-bg-dark
文本颜色
文本颜色确保在明暗模式下的可读性和适当的层次结构。
标题文本
这是一个示例文本段落，展示文本在不同主题中的显示效果。
次要文本用于不太重要的信息和注释。
--color-text-light
标题文本
这是一个示例文本段落，展示文本在不同主题中的显示效果。
次要文本用于不太重要的信息和注释。
--color-text-dark
圆角
边框圆角值有助于在整个应用程序中保持组件样式的一致性。
--radius-default
rounded-sm
0.125rem
rounded-full
9999px
使用指南
在组件中使用颜色时，请遵循以下指南，以确保一致性和可访问性。
推荐做法
将主色用于关键交互元素和号召性按钮
保持一致的色彩对比度以确保可访问性
使用CSS变量进行主题设置，而不是硬编码值
在浅色和深色模式下测试您的UI
避免做法
避免在单个组件中使用过多颜色
不要使用与我们的主调色板冲突的颜色
避免使用硬编码的颜色值
不要忘记测试颜色对比度以确保可访问性