Harbor：企业级 B2B 官网设计系统

网页 · 浅色 · 极简 · SaaS

Harbor

藏青、留白和稳重的结构，为严肃的 B2B 产品设计。

Harbor 显得可靠却不沉闷：冷调蓝灰底色、藏青色主操作、亮蓝用于焦点和数据，Plus Jakarta Sans 带来现代又稳重的语气。长篇功能介绍、对比表格和安全合规模块都能从容排下。

预览

直接用下面的设计变量和这套系统自己的字体实时渲染。

2026 新功能规划、上线和复盘，都在一个地方

为小团队准备的安静工作台。该有的数字都在，多余的一个没有。

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

邀请团队成员工作邮箱you@company.com角色编辑 ▾发送邀请

最近订单客户状态金额Ada Park已付款$1,240Lukas Weber待付款$380Mei Chen已退款$96

在你的项目里使用

粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。

这个项目使用 Harbor 设计系统，规范在 https://codexdesign.io/zh/design-systems/harbor.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。

设计变量

颜色

浅色主题

background#F6F8FBoklch(0.978 0.005 258.324)
foreground#0F1B2Doklch(0.221 0.039 258.275)
card#FFFFFFoklch(1 0 0)
card-foreground#0F1B2Doklch(0.221 0.039 258.275)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0F1B2Doklch(0.221 0.039 258.275)
primary#13294Boklch(0.283 0.069 258.854)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E6ECF5oklch(0.941 0.014 258.346)
secondary-foreground#13294Boklch(0.283 0.069 258.854)
muted#EDF1F7oklch(0.957 0.009 258.336)
muted-foreground#526077oklch(0.486 0.041 260.276)
accent#E3EAF4oklch(0.935 0.015 257.198)
accent-foreground#0F1B2Doklch(0.221 0.039 258.275)
destructive#B42318oklch(0.5 0.182 29.513)
border#D9E1ECoklch(0.907 0.017 256.285)
input#C8D2E0oklch(0.86 0.022 256.739)
ring#2F6FD6oklch(0.557 0.172 259.651)
chart-1#13294Boklch(0.283 0.069 258.854)
chart-2#2F6FD6oklch(0.557 0.172 259.651)
chart-3#18A0A0oklch(0.641 0.105 194.845)
chart-4#E0A43Aoklch(0.758 0.137 77.684)
chart-5#8A63D2oklch(0.591 0.165 297.305)

深色主题

background#0B1320oklch(0.186 0.029 259.81)
foreground#E6ECF5oklch(0.941 0.014 258.346)
card#111B2Coklch(0.222 0.037 260.614)
card-foreground#E6ECF5oklch(0.941 0.014 258.346)
popover#111B2Coklch(0.222 0.037 260.614)
popover-foreground#E6ECF5oklch(0.941 0.014 258.346)
primary#7FA8F0oklch(0.731 0.114 261.239)
primary-foreground#0B1320oklch(0.186 0.029 259.81)
secondary#1A2639oklch(0.267 0.04 259.345)
secondary-foreground#E6ECF5oklch(0.941 0.014 258.346)
muted#152034oklch(0.244 0.042 261.771)
muted-foreground#8F9DB3oklch(0.692 0.036 259.404)
accent#1D2A40oklch(0.284 0.045 260.568)
accent-foreground#E6ECF5oklch(0.941 0.014 258.346)
destructive#F97066oklch(0.709 0.17 26.471)
border#24324Aoklch(0.316 0.047 260.838)
input#2C3B55oklch(0.351 0.05 261.08)
ring#7FA8F0oklch(0.731 0.114 261.239)
chart-1#7FA8F0oklch(0.731 0.114 261.239)
chart-2#4FC3C3oklch(0.752 0.103 195.179)
chart-3#F0C26Eoklch(0.838 0.115 81.184)
chart-4#B79BF0oklch(0.746 0.123 298.536)
chart-5#E6ECF5oklch(0.941 0.014 258.346)

字体

标题: Plus Jakarta Sans · 700
正文: Plus Jakarta Sans · 400
等宽: JetBrains Mono

字号阶梯

display · 60/1.05 · -0.025em设计让界面更好用
h1 · 40/1.1 · -0.02em设计让界面更好用
h2 · 28/1.2 · -0.01em设计让界面更好用
h3 · 20/1.3设计让界面更好用
body · 16/1.55设计让界面更好用
small · 13/1.45设计让界面更好用

圆角、间距和阴影

圆角sm 4pxmd 6pxlg 8pxxl 12px

间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px

阴影柔和、低而宽的阴影，只用在卡片和面板上。

布局

最大宽度: 1280px
正文宽度: 70ch
栏数: 12
栏间距: 24px

适合

B2B SaaS 和企业软件
咨询和专业服务
物流、保险和银行官网
投资者和合作伙伴页面

要做和不要做

用真实的产品截图，而不是抽象插画。
用客户 Logo、数据和案例来支撑卖点。
不要让亮蓝和藏青主按钮抢风头。
不要把价格和联系销售藏在好几次点击之后。