
Superlist
夜晚的工作空间,点缀着珊瑚般的余烬——一个静谧的茄紫色应用界面,每个动作都由一个温暖的橙色火花指示。
Superlist 采用午夜紫调打造高效工作语言:深茄紫色和暖珊瑚色作为唯一的主色调,搭配醒目的无衬线标题,营造出整体氛围。界面让人联想到深夜专注工作的感觉——安静、层次分明、自信满满,色彩仅用作功能性标点,突出行动号召、激活状态和关键信息。表面采用微妙的深色调,并带有紫色底色(#181824 → #26253b),避免使用纯黑色,以确保深邃感温暖而非冷峻。组件采用圆润的造型(20px 的卡片、药丸按钮),柔和的阴影,并通过 10-16px 的舒适间距而非紧凑的网格来营造“呼吸感”。标题的风格至关重要:600 磅的字重,70-88px 的字间距,以及 -0.02em 的紧凑字间距,将文本视为排版而非用户界面——它更接近于编辑文案而非 SaaS 内容。
深色区域横跨页面整个宽度,居中放置最大宽度的内容容器。主区域垂直居中,包含标题、副标题和行动号召 (CTA),其后是一张与下一部分重叠的大尺寸产品截图。后续区域交替使用居中的文本块和卡片式布局。评论区域采用三列网格布局,包含评论卡片,并留有 16 个间距。导航栏为顶部单栏,左侧为徽标,右侧为居中链接和登录操作——没有固定侧边栏或超级菜单。各部分之间的间距较大(16 个间距),营造出一种宽敞的编辑节奏感,而非密集的产品网格布局。
视觉空间主要由产品截图构成——一个圆角的大边框,展示了应用的实际界面,占据了主要和次要区域。照片极少,仅用作用户头像或应用内媒体预览(例如,产品模型右侧面板中的音乐会图片)。信任栏上的徽标是扁平的、低调的白色文字符号。没有装饰性插图、抽象图形或3D渲染图。视觉策略是按比例展示产品,让字体本身传递情感,并以珊瑚色作为唯一的强调色。
调色板
品牌
- Coral Ember
#ff4a36— 橙色用作装饰细节的辅助点缀色,以及突出不常用的提示信息。它不应作为行动号召的主色调。
中性的
- Aubergine Canvas
#181824— 页面背景(即主画布)采用温暖的深色调,取代了纯黑色,使用户界面看起来更有层次感,而不是扁平的。 - Elevated Plum
#26253b— 卡片表面、输入字段、导航容器——比画布更容易创建深度,而无需可见边界。 - Pure White
#ffffff— 主标题、按钮文字和图标轮廓——在深色画布上形成最大对比度。 - Fog Text
#696f81— 正文、次要标题和柔和的边框——7:1 的对比度,在茄紫色背景下带来舒适的阅读体验。 - Ash Text
#8e8da0— 辅助 UI 元素、分隔线和低调标签支持使用中性色。但中性色不应用于作为行动号召按钮的主色。 - Mist Highlight
#a3a3a7— 微妙的边框、分隔线和非活动导航元素营造出一种微妙的中性色调,同时又能在画布上脱颖而出。
排版
从 12 像素到 88 像素 · 9 步
- sans-serif — 替代品: Inter · 轮廓 400 · sans-serif - 在提取的数据中发现,但人工智能未对其进行描述。
- Haffer XH SemiBold — 替代品: Inter Tight · 轮廓 400, 600 · 标题和正文的主要字体。用于主标题时,字号为 70–88 像素,字间距为 -0.02em,字重为 600。较窄的字间距和较大的字高赋予标题编辑般的厚重感,使深色界面看起来更像杂志封面而非仪表盘。建议替换为粗体字重的 Inter Tight 或 General Sans 字体。
- Jersey 10 — 替代品: Anybody · 轮廓 400 · 一种大型装饰性字体,用于强调数字和高亮部分。建议少量使用,字号要非常大,以营造排版强调效果。可替换为 Anybody 或 Cabinet Grotesk 字体。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 10-16px |
| 按钮半径 | 100px |
| 卡片半径 | 20px |
| 阴影 | 柔和的阴影 |
| 各部分之间 | 80px |
| 页面宽度 | 1200px |
AI 将按照Superlist风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- DNA — 透过粒子透镜看到的午夜天文台
- Abetterlou — 马鞍皮革上的火花——温暖柔和的字体在深咖啡黑色的背景下熠熠生辉,琥珀金色的按钮仿佛滚烫的金属压入纸面。
- Galileo-ft — 带有电蓝色信号的深空指挥甲板
- Decide AI — 午夜时分的天文台——薄荷信号
- Redis Agency — 这家编辑工作室在下班后开放,里面漆黑一片,所有的品牌设计工作都是用衬线字体和一颗红萝卜完成的。
- Spellbook — 午夜的法庭,珊瑚墨水的光芒照亮了这里——昏暗的编辑背景上,唯一的声音是温暖的橙色笔触。
- AWE — 午夜后的机器人天文台。创建类似画廊的黑色屏幕,浅色的编辑文字漂浮在人工智能生成的图像和微小的仪表盘文字之上。
- Graphite — 发光终端网格。围绕精确的白色文字标记和偶尔闪烁的光谱光,创建深色的、有边框的产品表面。
- Featurebase — 一台紫光闪烁的控制台。想象一下,每一页都像是一个黑暗静谧的舞台,产品展示区从底部边缘缓缓升起,散发着柔和的光芒。
- BAM Photographers — 午夜过后,画廊里开始放映。黑色的画布、放大的白色字母和电影般的图像组合,营造出一种网站更像是一个投影作品集,而不是典型的编辑页面的感觉。
- Nuxt — 深空中的终端辉光。创建黑暗、封闭的界面平面,使绿色在蓝黑色表面上呈现为通电信号。
- Linear — 午夜精密仪器