Superlocal 网站预览
Superlocal 网站预览

Superlocal

暖白色基底、胶囊形控件与网格布局。

页面以暖白色为基底,搭配近黑色文字。字体采用 RST Reactor、Inter。视觉特点包括胶囊形控件、网格布局、大字排版、细线分隔。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 每个正文区块的默认画布使用#fbf5e7;纯白色会违背纸面温暖感的系统。
  • #1673ff只用于铺满画面的首屏色带和唯一需要引爆注意力的时刻,绝不用作小按钮填充或标签块。
  • 按钮和标签采用99px圆角,胶囊轮廓是系统反复出现的标点。
  • 所有64px及以上展示字号采用-0.05em或更紧的字间距;正字间距只属于10-12px眉题与说明文字。
  • 合作伙伴、赞助商或标志墙都使用6列极细线网格;单元格间隔为零,分隔线为1px黑线,不添加卡片阴影。
  • 每个区块都以奶油色或咖啡棕色表面为基础,不引入第三种深色或浅色调。
  • 太阳放射状插画以小尺寸出现时(例如在Reservar按钮中),搭配一个12-32px的奶油色或黑色圆形徽标。

建议避免

  • 任何地方都不要添加投影;系统呈现平面印刷品的感觉,而非有层叠的UI。
  • 不要将#1673ff用作链接色、图标色或文字强调色;它是一整面墙,而非高亮标记。
  • RST Reactor正文不要大于17px;这款字体的设计张力来自微小、宽字间距的标签与巨大展示文字之间的对比,正文应保持在14-17px范围。
  • 按钮不要使用0px圆角;胶囊是系统反复出现的主题,方形按钮会破坏节奏。
  • 不要引入新的强调色相;品牌的彩色词汇严格限定为三种:Cobalt、Coffee、Tangerine。
  • 64px和172px展示字号的行高不要超过1.0,几乎相接的文字行是刻意设计。
  • 不要将彩色按钮放在相同色相的表面上;Reservar按钮在钴蓝背景上使用奶油色,对比是结构的一部分。