Arva 网站预览
Arva 网站预览

Arva

奶油色田野上的田园编辑式杂志跨页。

Arva采用田园编辑式语言:温暖奶油色画布取代纯白,深森林绿锚定品牌,拼被般的粉彩表面(天蓝、桃色、鼠尾草、骨白)在内容区块中平铺,像从高处看到的田野。排版将精致编辑式衬线Reckless与中性无衬线Inter配对,使网站像印刷杂志而非典型SaaS界面装饰。按钮具有戏剧性的胶囊形(100–110px圆角),铺满画面的摄影主导首屏;除品牌绿外,唯一饱和颜色是一条鲜亮青柠滚动条,在原本安静、泥土色调的系统中提供唯一高能强调。

查看原始网站

使用规范

建议采用

  • 每个浅色区块的页面画布使用#f1efdf(Bone),绝不用纯#ffffff替代底层。
  • 每个按钮无论变体都采用100px胶囊圆角,胶囊的一致性是品牌标志。
  • 区块标题采用45–57px Reckless衬线,正文采用14–17px Inter无衬线,衬线与无衬线之间的张力定义编辑式语气。
  • #e8fe85青柠色只出现在滚动条和促销微型强调中,通过稀缺性赢得注意力。
  • 四种粉彩卡片表面(天蓝、桃色、鼠尾草、骨白)在单行内轮流使用,像拼被系列,而非随机分布。
  • 导航栏和区块分隔用纯#07503f(Forest Ink)填充,深绿色带是页面节奏的结构骨架。
  • 首屏标题采用57–80px Reckless 300或Inter 600,居中置于铺满画面的风景摄影上。

建议避免

  • 页面背景不要使用#ffffff,始终将它叠在#f1efdf上,以保留温暖印刷感。
  • 按钮或卡片不要采用小圆角(4–8px),20px+和100px+圆角必须遵守。
  • 不要引入Forest Ink和Vivid Lime以外的新饱和颜色,粉彩内容块承担色彩分量。
  • Reckless不要低于24px,也不要用于正文,衬线字体只用于标题和摘录引文。
  • 卡片不要应用阴影或高度效果,深度来自粉彩表面颜色变化,而非box-shadow。
  • 单张卡片不要搭配多种粉彩,每个内容块只有一种表面色。
  • 正文段落不要居中;标题和首屏文案可以居中,辅助文字则左对齐,最大宽度60ch。