Adaline 网站预览
Adaline 网站预览

Adaline

植物学家的标本笔记与开发终端并置——温暖的亚麻页面，鼠尾草墨注解，以及带有字间距的等宽标签。

Adaline 作为自然学家的野外笔记与开发终端并置：温暖的亚麻画布，鼠尾草绿注解，以及顶部一个文学性衬线标题作为锚点。色彩使用克制且自然——深林墨色用于正文和行动号召填充，而柔和的鼠尾草绿、青 青色 与酒红则作为标本卡背景及分类标签出现，而非作为扁平的装饰色块。字体系统搭配了一种新式无衬线工作字体（Akkurat）与一种轻盈的编辑衬线字体（Newsreader），以及一种带有字间距的等宽字体（Fragment Mono），用于在徽章、按钮和内联标签中作为野外记录的标记。表面保持扁平，使用细线边框而非阴影；摄影以满幅横幅形式插入内容区块之间，使页面呈现为一系列标本页，而非仪表盘面板。

查看原始网站

使用规范

建议采用

  • 在任何页面的首屏标题使用 108px Newsreader 300 衬线字体；禁止在副标题中重复使用。
  • 正文使用 18px Akkurat 400 字体，行高 1.44 —— 这是工作字体的节奏。
  • 填充型行动号召按钮设为森林墨色（#0a1d08），文字为亚麻色，圆角 20px；禁止使用任何彩色绿色或蓝色作为主要操作的填充色。
  • 使用 Fragment Mono 10–11px，字间距 0.04em 用于分类徽章、标号 ID 以及野外记录标签——始终使用大写。
  • 内容区块之间使用满幅横幅横版摄影替代分隔线或背景色变化。
  • 通过 1px 雾色（#e1e6df）边框和色调填充（亚麻 → 骨色 → 橡树绿）堆叠表面；避免使用阴影。
  • 在所有页面中保持 6px 元素间距和 96px 区块间距作为空间节奏。

建议避免

  • 禁止将衬线展示字体与无衬线标题搭配使用——Akkurat 在 30–53px 范围内拥有所有非展示类标题。
  • 禁止引入明亮的彩色行动号召（蓝色、红色、鲜艳绿色）——操作色板保持在森林墨色和橄榄压色之间。
  • 禁止为卡片或弹窗添加阴影；依赖边框和表面色调实现分隔。
  • 禁止使用图标或插图填充空白空间——布局刻意稀疏，具有标本般的特征。
  • 禁止将 Fragment Mono 标签混入连续正文——保持等宽字体仅用于徽章、ID 和元数据。
  • 禁止将内容放入多列仪表盘网格中；各区块宽大、居中并堆叠呈现。
  • 禁止打破主要区块之间 96px 的垂直节奏——Adaline 的阅读体验应如同印刷页面，而非卡片。

相似设计语言