Alpine Bio 网站预览
Alpine Bio 网站预览

Alpine Bio

阳光洒落的植物药房,位于奶油羊皮纸上

Alpine Bio 读作一个温暖的药房编辑系统:奶油-羊皮纸画布,一个天蓝色胶囊的点缀,以及 Switzer 显示字体的尺寸如同植物学期刊。界面刻意保持色彩静默——几乎每个表面都属于温暖的米白色家族,仅用一种柔和的蓝色用于操作,一种花粉黄用于细微的排版高亮。组件为扁平、无阴影、胶囊形圆角;设计在很大程度上由其克制(无渐变、无阴影、无深色模式)决定,而非添加元素。全画面特写产品摄影承载了全部氛围的温暖,使 UI 保持平静和实验室感,而图像则显得可食用且生动。

查看原始网站

使用规范

建议采用

  • 使用 #8ec7e2 填充、#000000 文字和 22px 圆角,用于所有操作——这是系统中唯一的按钮样式
  • 为每个 Switzer 和 Geist 标题应用 -0.0500em 字间距——紧密的字间距是让字体具有编辑感的关键
  • 仅使用花粉黄 (#f7ca50) 作为小型排版点缀:面包屑标签、滚动提示和页脚高亮——绝不可作为按钮填充或大面积背景
  • 每个胶囊按钮必须搭配右侧圆形箭头图标——箭头是按钮身份的一部分,而非装饰
  • 默认采用全画面左对齐布局——内容从左侧边缘开始,而非在最大宽度容器中居中
  • 使用温暖奶油色 (#f8f4e6) 作为交替的区块背景,以在灰底画布上形成温暖/冷感的节奏
  • 所有 20px 及以上显示和标题大小使用 Switzer;将 Geist 用于正文,PT Mono 用于导航和标签

建议避免

  • 不要为卡片、按钮或模态框添加阴影——该系统刻意保持扁平,深度仅来自表面色彩
  • 不要引入新的色彩——色彩调色板仅为天蓝色、花粉黄和温暖中性色,除此之外无其他
  • 不要将花粉黄用作行动号召(CTA)或按钮背景——它仅作为排版点缀
  • 不要在正文区块中使用最大宽度容器进行居中——编辑风格依赖于左对齐、边缘到边缘的布局
  • 不要使用字重高于 500——Switzer 和 Geist 在 400–500 之间承载整个系统,更粗的字重会破坏安静的基调
  • 不要为主要胶囊按钮添加边框——它仅依靠天蓝色填充来确立其身份
  • 不要使用深色模式——整个系统都围绕奶油画布进行调校;反转它将破坏药房的温暖感