查看 DESIGN.md ↓
Chemindus — Style Reference · 来源预览 ↗
Chemindus — Style Reference
居中化工服务门户:临床感白色画布、深蓝工具条与精准绿色行动信号。
这是一份受 Chemindus 视觉方向启发的原创 B2B 实施规范,使用虚构品牌与通用文案。保留大幅居中工艺视觉、方正控件、白色导航和宽松内容节奏;不得复用来源品牌、摄影、资质、经营年限表述或客户陈述。目标路径为浏览服务 → 评估应用需求 → 提交询盘;不包含购物袋、支付或结账处理。
调色板
本次改编实现的设计变量;请遵循 DESIGN.md 指定的前景与背景组合。
参考颜色
排版
字体尺寸与角色遵循交付实现;正式使用前请检查 Quick Start 中的字体服务要求。
字号刻度
字体
字体族
- 字重
- 400 · 600 · 700
- 字号
- 12–65px · 7 个值
- 行高
- 1.1–1.7 · 6 个值
- 备选字体
- Arial, sans-serif
注释 / 标签 / 正文 / 导语 / 卡片标题 / 区块标题 / Hero
间距与形状
间距
| 用途 | 数值 | 预览 |
|---|---|---|
| 密度 | ||
| 基础单位 | ||
| 桌面内容宽度 | ||
| Hero 视觉区 | ||
| 区块节奏 |
边框圆角
| 用途 | 数值 | 预览 |
|---|---|---|
| 卡片 | ||
| 按钮 | ||
| 输入框 | ||
| 导航 |
完整间距刻度
- 1
--space-1 - 2
--space-2 - 3
--space-3 - 4
--space-4 - 5
--space-5 - 6
--space-6 - 7
--space-7 - 区块
--space-section
指南
建议
- 使用 1140px 居中壳层与桌面 100px 的充裕区块内边距。
- 保持 Hero 为居中全宽视觉,并只放置一个绿色 RFQ 行动。
- 使用带绿色顶线和细边界的扁平方角卡片。
- 在绿色按钮上使用行动深墨绿,并在对应表面使用指定焦点色。
- 以服务发现和询盘准备作为主要 B2B 路径。
- 保留原生折叠语义与清晰的本地表单反馈。
避免
- 不要将 Hero 改成左右分栏的商品电商布局。
- 不要添加购物袋、购物车、价格、支付、结账或购买账户流程。
- 不要复用来源摄影、Logo、人物、认证、客户 Logo 或经营历史声明。
- 不要使用圆角 SaaS 卡片、胶囊形、渐变或悬浮阴影。
- 不要在亮绿色默认按钮上使用正文尺寸白字。
- 不要暗示表单会传输数据或生成实时报价。