Compound

白色基底、胶囊形控件与圆角卡片。
页面以白色为基底,搭配近黑色文字。字体采用 Monument Grotesk。视觉特点包括胶囊形控件、圆角卡片、细线分隔、宽松留白。适合参考的场景:支付服务首页、金融科技产品介绍页。
查看原始网站使用规范
建议采用
- 仅使用 Monument Grotesk 字体,字重 400——绝不引入粗体、斜体或第二种字体
- 所有按钮、标签和图标容器均使用 9999px 边距圆角
- 所有卡片和内容容器均使用 20px 边距圆角
- 所有边框和分隔线均使用 #e5e7eb——绝不使用比 #dbdbdb 更深的颜色
- 区块间使用 80px 垂直间距以让空白空间承载层级
- 配色方案必须严格无色——唯一的色彩是 #ffe9bf 用于公告栏
- 任何提升状态的元素均使用四层柔和阴影,不透明度范围为 0.01–0.10
建议避免
- 绝不引入任何超出奶油公告栏之外的彩色强调色
- 绝不使用除 Monument Grotesk 以外的任何字体,或添加第二种字重
- 绝不使用卡片或按钮的锐角——所有角落必须圆角
- 绝不使用厚重或深色的阴影——不透明度必须保持在 0.10 以下
- 绝不使用除 #ffffff、#f3f3f3 或 #ffe9bf 以外的背景颜色用于完整表面
- 绝不将区块间距减少到低于 64px——空白空间即为层级
- 绝不为文本或标题添加装饰性边框、轮廓或彩色描边