设计基础

说明

设计基础定义 Elysola 产品界面的视觉语言。具体数值应优先通过 Elysola UI 提供的 Token 和组件实现；业务页面不应随意创建新的颜色、字号、圆角或间距值。

颜色

• 使用语义化颜色表达信息，例如主要操作、成功、警告、错误和提示。
• 页面表面应以中性背景为主，品牌色用于强调和主要交互，不作为普通装饰。
• 文本颜色应根据层级选择主要文本、次要文本和禁用文本，不能只通过降低透明度制造可读性不足的文字。
• 状态信息不能只依赖颜色表达，应同时使用文字、图标或其他明确提示。
• 品牌蓝、渐变和品牌元素遵循品牌设计规范。

排版

• 页面标题、区块标题、正文和辅助说明应保持清晰的层级关系。
• 正文优先保证可读性；数据密集型界面可以使用更紧凑的行高，但不应压缩到难以阅读。
• 代码、命令、标识符和数据值使用等宽字体或组件库提供的代码样式。
• 数字密集型表格和指标应使用等宽数字，确保列对齐。
• 业务页面不得直接引入与产品主题不一致的字体。

间距

• 页面布局、卡片内容和表单字段应使用统一的间距刻度。
• 相关内容使用较小间距，不同内容组之间使用较大间距。
• 不要通过随机增加 margin 来修复布局问题；应优先调整容器、布局模式或使用已有组件。
• 响应式布局需要在窄屏下保持操作顺序和内容层级。

圆角与形状

圆角应表达元素的层级和交互属性，而不是作为业务页面中的自由装饰：

对象	使用原则
按钮、输入框等控件	使用控件级圆角 Token，保持同一交互组一致
卡片、面板	使用容器级圆角 Token，不因页面不同而随意改变
Dialog、Sheet 等浮层	使用浮层级圆角 Token
Badge、状态标签	仅在表达标签或状态时使用全圆角
页面主体和大面积背景	通常不使用圆角，避免页面被切割成过多孤立表面

具体 Token 名称和实际值以 Elysola UI 当前版本为准。业务代码不得自行添加仅使用一次的圆角值。

层级与阴影

• 页面背景、内容表面、浮层和重点操作应有清晰的层级关系。
• 优先使用背景、边框和间距建立层级，阴影仅用于表达浮层或需要强调的分离关系。
• 不要为所有卡片统一添加明显阴影，也不要使用品牌渐变替代表面层级。

交互状态

所有交互控件至少应考虑默认、悬停、按下、聚焦、禁用和加载状态。状态变化应保持稳定，不应导致按钮、表格或表单发生不必要的布局跳动。