Alpine Bio

近白色基底、大幅摄影展示与扁平表面。
页面以近白色为基底,搭配近黑色文字。字体采用 Switzer、Geist。视觉特点包括大幅摄影展示、扁平表面、胶囊形控件、网格布局。适合参考的场景:摄影作品集、视觉内容展示页。
查看原始网站使用规范
建议采用
- 使用 #8ec7e2 填充、#000000 文字和 22px 圆角,用于所有操作——这是系统中唯一的按钮样式
- 为每个 Switzer 和 Geist 标题应用 -0.0500em 字间距——紧密的字间距是让字体具有编辑感的关键
- 仅使用花粉黄 (#f7ca50) 作为小型排版点缀:面包屑标签、滚动提示和页脚高亮——绝不可作为按钮填充或大面积背景
- 每个胶囊按钮必须搭配右侧圆形箭头图标——箭头是按钮身份的一部分,而非装饰
- 默认采用全画面左对齐布局——内容从左侧边缘开始,而非在最大宽度容器中居中
- 使用温暖奶油色 (#f8f4e6) 作为交替的区块背景,以在灰底画布上形成温暖/冷感的节奏
- 所有 20px 及以上显示和标题大小使用 Switzer;将 Geist 用于正文,PT Mono 用于导航和标签
建议避免
- 不要为卡片、按钮或模态框添加阴影——该系统刻意保持扁平,深度仅来自表面色彩
- 不要引入新的色彩——色彩调色板仅为天蓝色、花粉黄和温暖中性色,除此之外无其他
- 不要将花粉黄用作行动号召(CTA)或按钮背景——它仅作为排版点缀
- 不要在正文区块中使用最大宽度容器进行居中——编辑风格依赖于左对齐、边缘到边缘的布局
- 不要使用字重高于 500——Switzer 和 Geist 在 400–500 之间承载整个系统,更粗的字重会破坏安静的基调
- 不要为主要胶囊按钮添加边框——它仅依靠天蓝色填充来确立其身份
- 不要使用深色模式——整个系统都围绕奶油画布进行调校;反转它将破坏药房的温暖感