Alpine Bio
近白色基底、大幅摄影展示与扁平表面。
Automate Supplier Payments
暖白色基底、衬线字形与居中构图。
页面以暖白色为基底，搭配近黑色文字。局部操作控件以黄色强调。字体采用 Champ、DM Sans。视觉特点包括衬线字形、居中构图、网格布局、满幅色块。适合参考的场景：金融产品官网、财务服务介绍页。
查看原始网站使用规范
建议采用
- 专用于每个表面的单一主要CTA，使用 Marigold（#ffd801）——它是系统中唯一的色彩语义，若被稀释则会失去力量
- 所有按钮的圆角半径设为 9999px（完整圆形）——尖锐或中等圆润的按钮会破坏手工账本的质感
- 所有显示文本使用 Champ 800 字重，字号 38-72px；次级显示文本使用 Champ 500 字重，字号 26px——绝不使用 DM Sans 作为标题字体
- 在 Buttercream（#fff6d2）画布基础上叠加白色（#ffffff）卡片，漂浮于其上——绝不使用冷灰色作为表面材质
- 使用细线 1px #000000 边框和交互元素 1.5px 边框——阴影仅用于浮动UI（菜单、弹出框）的 rgba(70,58,0,0.1) 0 4px 12px
- 每个 Marigold CTA 必须搭配一个黑色描边的圆形按钮作为其次要控件——填充黄色与描边黑色的对比是品牌标志性时刻
- 保持区块间距为 80px，元素间距为 24px——这种宽敞感让温暖的配色显得平和而非压迫
建议避免
- 不要使用任何蓝色、绿色或红色的色彩强调——系统为单色系，仅 Marigold 为色彩；语义色彩应通过形态（边框、图标）表达，而非色相
- 不要为卡片或内容区块添加阴影——卡片应仅通过色彩对比置于画布上，而非通过层叠高度
- 不要在字号大于 24px 时使用无衬线体正文——Champ 拥有全部显示文本领域
- 页面画布的背景不要设为纯白色（#ffffff）——Buttercream 为基底；白色仅出现在卡片表面
- 同一组件类别内不要混合圆角半径值——所有按钮为圆形，所有卡片为 20px，所有输入控件为 16px
- 不要使用多种黄色色调——Marigold（#ffd801）是唯一的黄色；更浅的奶油色调为中性色，非强调色
- 不要添加渐变——系统为平面且温暖；深度来自色彩叠加（奶油 → 白色 → 墨色），而非渐变渲染
