
Superpower
生物发光健康管理中心
Superpower 以极具电影感和氛围感的用户界面,展现了严谨的临床理念:深色的全幅照片与简洁的白色内容区域无缝过渡,而充满活力的日出橙色则贯穿整个系统。字体设计体现了品牌特色——标志性的几何无衬线字体,字母间距极小,元数据文本的字号为 11 像素,正文文本的字号为 66 像素,行距也随着字号的增大而压缩(正文文本为 1.00 像素,1.40-1.50 像素)。悬浮的深色胶囊形导航栏位于图像上方,胶囊形的行动号召按钮则在严谨的临床设计和温暖的活力之间营造出一种张力。界面以平面为主——系统大量运用留白、简洁的锌灰色分隔线和单一的阴影图案,而非强烈的立体感。色彩运用也十分克制:几乎所有元素都以黑色、白色或锌灰色为主,橙色仅作为功能性标点符号出现在操作和品牌标识中。
主图是一张占据整个画面宽度的电影感照片——一个人的剪影映衬在深邃的碧蓝色天空下;画面刻意营造出一种阴郁的氛围,旨在增强情感冲击力,并与健康理念形成鲜明对比。辅助图片则采用简洁明了的产品风格照片(例如橙色大理石纹会员卡、应用程序截图),而非生活方式类照片。整个设计中没有插图、3D渲染图或抽象图形——照片的对比本身就是视觉识别的核心。会员卡上饰有日出色调的有机大理石纹/熔岩灯图案——这是唯一的装饰性视觉元素。图标采用7.5像素圆角半径(柔和的圆角方形),并以黑色碳笔勾勒出细微的线条。
调色板
品牌
- Sunrise Coral
#fc5f2b— 橙色用作装饰细节的辅助点缀色,以及突出不常用的提示信息。它不应作为行动号召的主色调。 - Coral Glow
#ff8b64— 渐变终点与日出珊瑚色相结合,用于会员卡的装饰设计。
中性的
- Carbon Black
#18181b— 正文、浮动导航栏填充、标题、图标轮廓。 - Pure Black
#000000— 标志、文字标识、高对比度边框 - Zinc Gray
#71717a— 正文、附加描述、隐藏元数据、辅助文本。 - Ash Gray
#a1a1aa— 三级文本、非活动边界、禁用状态 - Mist Gray
#e4e4e7— 精细的边缘线、卡片轮廓线、分割线、按钮框。 - Fog Gray
#f4f4f5— 表面细微不规则,背景柔和,图像叠加在网格基底上。
排版
从 11 像素到 66 像素 · 8 步
- NB International Pro — 替代品: Inter Tight · 轮廓 400, 700 · 设计、标题、正文、用户界面和导航等所有元素都无缝整合。其标志性的解决方案是采用极窄的负间距,并根据字号进行缩放(小字号正文的负间距从 -0.025em 到 66px),同时行间距也随着字号增大而压缩,使标题呈现出如同海报般厚重的视觉效果,这让 Superpower 在医疗技术领域众多轻量级竞争对手中脱颖而出。
- NB International Mono Pro — 替代品: JetBrains Mono · 轮廓 400 · 表格元数据、微文本注释、技术标签仅在需要临床/仪器方法的情况下才会谨慎使用。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 11px |
| 按钮半径 | 9999px |
| 卡片半径 | 15px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 75px |
| 页面宽度 | 1200px |
AI 将按照Superpower风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- Visitors — 白色工程图
- Dock — 阳光奶油纸,钴脉冲
- Flying Papers — 周六早晨卡通片中的忏悔
- Quizlet — 教室以白色为背景,装饰着各种颜色——一张安静的桌子,桌子后面是四张粉彩色的卡片,这是冷灰色墙壁背景下唯一的亮色点缀,墙上还有一抹靛蓝色记号笔的痕迹。
- ON.energy — 午夜钢铁上的黄色高压警告标志
- Navigate — 一大堆贴纸贴在板子上:粗体大字,形状像平板电脑,还有五个彩色图标,像标志一样重复出现。
- Linear — 午夜精密仪器
- Pop Site — 一个风格鲜明的字体画廊——巨大的黑色标题漂浮在白色的墙面上,一个蓝色的圆点表达着意图
- Hyperstudio — 图案刻在黑曜石上。文字和细线勾勒出纯黑色的白色区域,偶尔出现的金色罗盘标记指示方向。
- Pa'lais — 一本植物素描本,仿佛浸透了蜂蜜。米色的纸张、蓝色的茹伊印花线描插图和温暖的色彩点缀,让人联想起一本手工食谱,而粗体、紧凑的字体和大量的留白则赋予它现代的编辑风格。
- Raus — 一本写在米色纸上的温馨日记——每一页都像一张来自森林的明信片。
- Privy — 一幅用墨水绘制在大理石上的社论。白色大理石画布,紧凑的黑色衬线标题,顶部横贯一条紫色横幅——克制即权威。