查看 DESIGN.md ↓ 
Constructify — 预制建筑设计风格参考 · 来源预览 ↗
Constructify — 预制建筑设计风格参考
深海军蓝项目框架、工程橙色，以及明确的 B2B 项目简报路径。
Constructify 是一套用于展示预制建筑能力、并把早期需求转化为结构化项目简报的克制工程系统。白色工具型页头进入深海军蓝首屏，橙色操作与项目标记建立优先级，紧凑且小圆角的卡片让技术方向便于比较。完整交互顺序为能力评估、单系统入选、本地 RFQ 校验、确认与重置。
调色板
本次改编实现的设计变量；请遵循 DESIGN.md 指定的前景与背景组合。
参考颜色
排版
字体尺寸与角色遵循交付实现；正式使用前请检查 Quick Start 中的字体服务要求。
字号刻度
字体
字体族
- 字重
- 800 · 600 · 400
- 字号
- 12–16px · 3 个值
- 行高
- 1.3–1.6 · 3 个值
- 备选字体
- ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
标签 / 小正文 / 正文
字体族
- 字重
- 800
- 字号
- 21–62px · 3 个值
- 行高
- 1.02–1.2 · 3 个值
- 备选字体
- Avenir Next, ui-sans-serif, system-ui, sans-serif
卡片标题 / 区块标题 / 展示标题
间距与形状
间距
| 用途 | 数值 | 预览 |
|---|---|---|
| 密度 | ||
| 基础单位 | ||
| 页面最大宽度 | ||
| 桌面边距 | ||
| 移动端边距 | ||
| 首屏最小高度 | ||
| 主要断点 |
边框圆角
| 用途 | 数值 | 预览 |
|---|---|---|
| 输入框与操作 | ||
| 卡片与面板 | ||
| 徽标与计数 |
完整间距刻度
- 1
--space-1 - 2
--space-2 - 3
--space-3 - 4
--space-4 - 6
--space-6 - 8
--space-8 - 12
--space-12 - 16
--space-16
指南
建议
- 工程橙仅用于主要决策、激活分隔线与清晰焦点。
- 深海军蓝用于首屏、流程框架、标题和项目简报计数。
- 每张系统卡只保留一个场景摘要与一个加入项目简报操作。
- 项目简报出现明确系统名称前保持 RFQ 准备按钮禁用。
- 保留入选、检查、校验、确认与重置的完整顺序。
- 模态层打开时让背景不可交互，循环约束 Tab 与 Shift+Tab，Escape 关闭后焦点回到触发器；并在 760px 以下重排所有网格。
避免
- 不要添加没有依据的产能、认证、价格、交期、交付或质保声明。
- 项目简报为空时不要启用 RFQ 表单。
- 不要在浅色表面使用亮橙正文，正常字号的文字与表面组合不得低于 4.5:1。
- 不要使用夸张大圆角卡片、装饰渐变或强烈动画。
- 不要隐藏标签、焦点指示、空状态或校验消息。
- 不要在空白构建中加载专有模板素材或外部字体文件。