
Superhuman
黄金时段编辑委员会
Superhuman 的设计巧妙地融合了编辑摄影和软件用户界面——温暖如羊皮纸般的底色(绝非纯白)衬托着酒红色品牌元素和充满活力的紫色点缀。标题采用 460 号字体,低调内敛而非张扬夺目,让全页电影级摄影作品得以充分展现,而半透明的产品界面卡片则如玻璃般悬浮于图像之上。整体色调沉稳而富有编辑感:奶油色的背景、炭灰色的文字、柔和的暖灰色边框以及元素间宽敞的间距,色彩仅用于点缀品牌标识——例如酒红色的号召性用语、紫色的链接以及浅紫色的附加功能按钮。该系统刻意避免在用户界面表面使用强烈的阴影和渐变;其深度感并非通过堆叠效果实现,而是通过层叠的摄影作品和标题中微妙的背景虚化来营造。
主元素是一张全宽照片,居中标题(48-64像素/460像素),以及一个包含葡萄酒图片的行动号召按钮,左右两侧叠加了半透明的浮动产品UI卡片。主元素下方是一条白色条纹logo(每行6格,最大宽度受限),再往下是带有白色卡片的标签页区域,卡片表面为羊皮纸纹理。页面大约三分之二处,一条深蓝绿色条纹打破了整体的节奏——全宽,两列(左侧图片,右侧文字)——在滚动过程中形成唯一的色调对比。之后是一条渐变氛围条纹。各部分之间的垂直间距为64-96像素。内容最大宽度约为1200像素,居中显示,主元素和深色条纹占据了整个视口宽度。导航栏为一个固定的头部,背景模糊;没有侧边栏,也没有超级菜单。页脚是一个全宽的酒红色页面,采用多列布局的链接。整体节奏为:主框架 → 平静的白色/奶油色内容 → 带有主图像的深色条纹 → 氛围渐变 → 勃艮第酒红色页脚,明暗条纹交替,营造出编辑节奏。
主要视觉元素是电影摄影:一张以天空为背景的全幅人像作为视觉焦点,页面下方则有一条氛围条纹。图像色调温暖,略微柔和,采用侧面拍摄,令人联想起黄金时段,营造出更偏向杂志而非企业风格的氛围。一条带有半透明几何矩形和手写文字的深色条纹叠加在一张沉思男子的照片上——与其说是一张单一图像,不如说是一幅拼贴画。用户界面以悬浮玻璃卡片的形式直接叠加在照片上,而非单独的屏幕截图。除了渐变氛围条纹外,没有使用任何素材插图、3D渲染图或抽象装饰图案。图标采用极简的单色线条设计,宽度约为16-20像素,单一宽度对应460磅的文本字重。
调色板
品牌
- Midnight Wine
#421d24— 主要操作按钮、广告横幅和页脚采用温暖的、近乎黑色的酒红色,感觉更像是墨水而不是红色,既奠定了调色板的基调,又不会过于刺眼。 - Royal Violet
#714cb6— 紫色用于突出显示链接、标签和短语。它不应该用作行动号召的主要颜色。
中性的
- Lilac Mist
#d4c7ff— 辅助表面填充、浅色图标和幽灵按钮背景都采用了柔和的紫色,既暗示了品牌的风格,又不会过于引人注目。 - Deep Lagoon
#0c4243— 作为主要叙事元素的漫画条的深色背景是系统中唯一的深色表面,并叠加了几何图案。 - Warm Parchment
#f2f0eb— 页面的工作表面是主要元素;温暖的奶油色取代白色作为底色,赋予整个系统一种编辑般的温暖感。 - Soft Mist
#e3e3e2— 精细的边框、卡片轮廓、分割线——温暖的浅灰色,与羊皮纸融为一体,但又清晰地勾勒出边缘。 - Ink Charcoal
#292827— 正文、标题、图标轮廓——一种温暖的、近乎黑色的颜色,带有足够的棕色,给人以纸上墨迹的感觉,绝不冷冰冰的 #000 - Stone Gray
#666666— 次要正文、辅助文本、谨慎的描述——使用单一的中灰色,谨慎使用,以免与正文冲突。
排版
从 12 像素到 64 像素 · 8 个步骤
- Super Sans VF — 替代品: Inter (closest open equivalent for variable weight range) · 轮廓 460, 500, 540, 600, 700 · 整个系统仅使用一种字体。轴变量的范围从 460(标志性字体,略微裁剪,用于所有大标题文本)到 540(强调正文文本)和 700(小号粗体标题)。特别设计的视觉效果使 460 字重的标题看起来更加精心设计而非随意——在 48-64 像素的字宽和紧凑的字母间距下,“略微裁剪”的效果给人以自信而非单薄之感。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 稠密 |
| 基本步骤 | 8px |
| 按钮半径 | 16px |
| 卡片半径 | 16px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 64-96px |
| 页面宽度 | 1200px |
AI 将按照Superhuman风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- AI for Business — 以暖灰色调为主的粗野主义风格编辑展示厅
- Jeton — 一篇关于金融科技的社论,主题是温暖的大理石。
- Airtable — 一个温馨的研讨会,章节用不同颜色标记。
- Osmo — 灰色混凝土上的开发商博物馆
- Linktr — 社论海报像糖果一样堆叠起来。网站采用色块设计,亮绿色的标题映衬着钴蓝色的背景,白色的药丸状导航元素漂浮在酒红色的区域中。
- Outsource Consultants — 一张印在骨纸上的大幅建筑图纸。一种单幅美学风格,其中一块明亮的靛蓝色打破了原本温暖、排版繁复的网格布局。
- Streamtime — 触感创意情绪板 - 设计师剪贴簿桌
- Switch-Lit — 编辑网格以墨水印刷在米色纸上
- HubSpot — HubSpot 的封面采用温暖的奶油色纸张,并以一抹亮眼的橙色点缀。它就像一本印在厚纸上的设计杂志——衬线字体的标题、温暖的奶油色内页,以及一抹醒目的橙色,只突出最重要的信息。
- Granola — 温暖的羊皮纸上的田野笔记——《格兰诺拉》读起来就像一本用旧了的 Moleskine 笔记本,摊开在阳光照射的桌子上:衬线标题给人一种坚实感,有机的绿色点缀如同植物墨水,卡片边缘的细线如同手写笔记。
- Secure — 在柔和的日光下,欧洲咖啡馆里的对话是对视频通话的一种温暖、时尚的诠释,其中衬线标题读起来像是一篇深思熟虑的杂志文章,而不是科技产品页面。
- Mockups made easy — 白皮书上的编辑设计工作室