跳到正文
查看 DESIGN.md ↓
Chemindus - Industrial Responsive HTML Template 来源采集截图
Chemindus — Style Reference · 来源预览 ↗

Chemindus — Style Reference

居中化工服务门户:临床感白色画布、深蓝工具条与精准绿色行动信号。

这是一份受 Chemindus 视觉方向启发的原创 B2B 实施规范,使用虚构品牌与通用文案。保留大幅居中工艺视觉、方正控件、白色导航和宽松内容节奏;不得复用来源品牌、摄影、资质、经营年限表述或客户陈述。目标路径为浏览服务 → 评估应用需求 → 提交询盘;不包含购物袋、支付或结账处理。

https://thetestingstudio.com

调色板

本次改编实现的设计变量;请遵循 DESIGN.md 指定的前景与背景组合。

参考颜色

排版

字体尺寸与角色遵循交付实现;正式使用前请检查 Quick Start 中的字体服务要求。

字号刻度

  1. hero65px · 700 · 1.1
  2. section36px · 600 · 1.25
  3. card20px · 600 · 1.35
  4. lead18px · 400 · 1.55
  5. body15px · 400 · 1.7
  6. label14px · 600 · 1.35
  7. caption12px · 400 · 1.4

字体

字体族
字重
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 卡片、胶囊形、渐变或悬浮阴影。
  • 不要在亮绿色默认按钮上使用正文尺寸白字。
  • 不要暗示表单会传输数据或生成实时报价。

我们仅使用必要的浏览器存储来记住隐私偏好并支持网站核心功能。