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按钮在钴蓝背景上使用奶油色,对比是结构的一部分。