Dub
Link的哑光宣纸控制面板
Dub 的视觉系统风格内敛，近乎编辑级的 SaaS 美学：近乎纯白的画布由纤细的边框而非凸起的元素构成，密集的单色字体提供结构支撑，而一抹亮蓝色 (#2563eb) 则起到点睛之笔的作用。乍看之下，界面平坦无边框，但每个容器都带有 1px 的 #e5e5e5 边距，营造出印刷文档的质感。一组小巧的彩色“药丸”状装饰（橙色、绿色、紫色）悬浮于中性色调之上，赋予了界面个性，而标题则显得自信而现代，却又不失低调。组件设计紧凑而精炼：8px 的间距、12px 的卡片半径、9999px 的药丸状标签，以及用隐形控件代替厚重的实心按钮。
页面采用居中布局，最大宽度约为 1200 像素。主要元素是一个居中的文本块，其上方水平放置着三个浮动元素（联盟计划、转化分析、短链接），下方是一个大型产品布局。各部分垂直排列，间距统一为 64 像素，白色画布和 #f5f5f5 纸雾色交替使用，以营造色调上的区分。底部采用 Z 字形布局：编辑文本居中位于中间三分之一处，浮动 UI 卡片锚定在左右两侧边缘，形成一种不对称的、类似杂志的韵律感。Logo 云朵是一个简单的 5x2 网格，居中放置在页面中央。导航栏采用极简设计——左侧是 Logo，中间是导航栏，右侧是一组两个按钮（一个“登录”按钮和一个“注册”按钮），没有固定菜单或超级菜单。主窗口的仪表盘布局展示了经典的双栏应用程序布局：一个固定的侧边栏（类似于 240px）+一个内容区域，该区域定义了访客在开始滚动之前看到的产品信息的密度。
视觉设计以产品为中心，而非生活方式。主屏幕中央是一张大型仪表盘截图，展示了一个真实的产品模型，包含侧边栏导航、数据表和浮动UI元素，以扁平面板的形式呈现在白色画布上。客户标志（例如beehiv、superpower、Chatbase等）以低饱和度的灰度网格形式展示，以彰显其社交媒体表现，去除色彩以突出页面上唯一的蓝色点缀。浮动的合作伙伴卡片（包含收入/支付数据的小型简介和图块）围绕底部的文本块移动，在不使用阴影的情况下营造出深度感。点状网格背景图案是其标志性特征：一排细小的点，透明度极低，营造出纹理感和设计系统/绘图表面的质感，强调了网站作为“现代链接归因平台”的定位。图标设计极简，仅使用轮廓和填充，功能标签则采用强调色（橘色、薰衣草紫、薄荷绿）。产品未使用任何照片、插图或 3D 模型——用户界面本身就是一种视觉语言。
调色板
品牌
- Electric Blue
#2563eb— 品牌主色调——包括徽标、链接、关键绩效指标、激活状态和图标强调色——均采用此色调。白色背景上的深蓝色构成了系统唯一的视觉吸引力。 - Deep Sapphire
#1e40af— 操作按钮的主要背景，即行动号召的粗体填充——也是唯一表示该操作的颜色——都经过精心设计，以吸引注意力。
中性的
- Canvas White
#ffffff— 页面背景、卡片表面、弹出面板是每个屏幕的绝对基础。 - Paper Mist
#f5f5f5— 嵌套卡片、附加面板和填充的细微悬停颜色变化。 - Ash
#e5e5e5— 卡片、输入连接器和隔板上的细边框是连接系统的结构线。 - Smoke
#d4d4d4— 为选定的容器添加更清晰的边框，并增加按钮轮廓。 - Pebble
#c8c8c8— 边框、控制轮廓和结构分隔线采用中等对比度。此颜色不应用于行动号召的主色。 - Midnight Ink
#0a0a0a— 为了达到最大对比度，按钮的主要文字、高亮显示的按钮和导航文字几乎都是黑色的。
排版
从 11 像素到 48 像素 · 9 步
- Satoshi — 替代品： Inter (weight 500 · 轮廓 500 · 显示标题——仅用于 36–48 像素行的标题和章节标题。字体粗细——500（中等，非粗体）：标题看起来自信而现代，但又不显得突兀。Satoshi 的几何比例赋予了字体一种略带编辑感和现代感的风格，这是 Inter 的正文字体所无法复制的。
- Inter — 替代品： Inter (native) · 轮廓 400, 500, 600 · 正文、UI标签、导航、副标题和次要标题。Inter 是主要的工作元素，负责处理从 11px 的微型标签到 30px 的二级标题的所有元素。正文的默认字重为 400，高亮元素和按钮标签为 500，重要的 UI 标签则使用 600。16px 的字宽（行高 1.5）是出现频率最高的单步字宽（出现 1220 次），这证实了 16px 是正文的标准字宽。
- Geist Mono — 替代品： JetBrains Mono or IBM Plex Mono · 轮廓 400, 500 · 代码片段、技术元数据和嵌入式等宽标记在代码块中以 12-14 像素的字体大小显示，在大型代码显示元素中则以 24 像素的字体大小显示。这确保了开发者工具的可信度，与 Dub 的产品定位一致。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 8px |
| 按钮半径 | 8px |
| 卡片半径 | 12px |
| 阴影 | 无边框，取而代之的是阴影 |
| 各部分之间 | 64px |
| 页面宽度 | 1200px |
AI 将按照Dub风格构建您的网站并填充内容。
- 通过链接（ Instagram 、 TikTok 、 Facebook ）发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计： React （ Next.js ），开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化，支持搜索结果和神经网络推荐。
相似风格
- ElevenLabs — 一组以温暖奶油色调为主、标题简洁的摄影作品。一本包豪斯风格的笔记本——蛋壳色纸张，黑色墨水，仅以一抹紫色和橙色点缀，用于产品展示。
- Awesomic — 编辑用的锌网布，上面点缀着橙色的标点符号，让人联想起五彩纸屑。
- Monad — 关于温暖羊皮纸的编辑技术期刊
- Seline Analytics — 温暖的纸张上摆放着一张安静的分析表格。
- Notion — 正午阳光下，一本温暖的纸质笔记本映入眼帘
- Anthropic — 一本印在温暖羊皮纸上的科学野外考察日志——平静的象牙色表面，衬线字体的编辑标题，以及一个仅在需要行动时才会出现的粘土色点缀。
- Calendly — 冷大理石纹上印有深蓝色墨水。
- Augen Pro — 苹果的白色展示柜以单色调空间为背景，仅以清冷、轻盈的电光蓝作为点缀。
- Antimetal — 一篇印在米色纸上的社论——科学期刊一个宁静的早晨，克制传达着自信，衬线字体则承担着重要的作用。
- Perk — 温暖的羊皮纸上的电光石灰
- Ditto — 阳光洒满工作室，人们正在制作野花样本。温暖的奶油色底色，鲜艳的黄色底色，深邃的藏蓝色墨水，以及作品背后绽放的自然色彩。
- Officevibe — 一本印在暖米色纸张上的杂志。想象一下，一篇关于人力资源管理的精辟文章，以产品的形式呈现——流畅的衬线字体在现代蓝色的界面中低语。