Nordic：北欧风 SaaS 设计系统

网页 · 浅色 · 柔和 · SaaS · 效率工具

Nordic

低饱和的蓝、柔和的灰和安静的自信，为效率工具设计。

Nordic 把北欧式的克制带进软件：近白色页面、低饱和的峡湾蓝做操作色、柔和的海绿和蜂蜜黄作辅助色，Manrope 用舒适的字号。没有任何元素在喊叫，长篇功能页和密集的设置页都看得很轻松。

预览

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

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

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

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

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

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

在你的项目里使用

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

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

设计变量

颜色

浅色主题

background#FBFBFAoklch(0.988 0.001 106.423)
foreground#1D2125oklch(0.245 0.01 248.22)
card#FFFFFFoklch(1 0 0)
card-foreground#1D2125oklch(0.245 0.01 248.22)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1D2125oklch(0.245 0.01 248.22)
primary#3A5BA0oklch(0.481 0.118 263.376)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#EDF0F5oklch(0.954 0.007 260.732)
secondary-foreground#1D2125oklch(0.245 0.01 248.22)
muted#F1F2F4oklch(0.961 0.003 264.542)
muted-foreground#5C636Boklch(0.496 0.015 251.687)
accent#ECEEF2oklch(0.949 0.006 264.532)
accent-foreground#1D2125oklch(0.245 0.01 248.22)
destructive#B93A32oklch(0.533 0.165 27.691)
border#E2E5EAoklch(0.921 0.008 260.732)
input#D3D8DFoklch(0.88 0.011 256.7)
ring#3A5BA0oklch(0.481 0.118 263.376)
chart-1#3A5BA0oklch(0.481 0.118 263.376)
chart-2#5E9C8Foklch(0.647 0.068 179.163)
chart-3#C98A3Eoklch(0.683 0.119 68.299)
chart-4#9A6FB0oklch(0.61 0.107 313.712)
chart-5#C25E6Eoklch(0.607 0.129 11.672)

深色主题

background#131619oklch(0.198 0.008 248.212)
foreground#E9ECEFoklch(0.942 0.005 247.879)
card#191D21oklch(0.228 0.01 248.257)
card-foreground#E9ECEFoklch(0.942 0.005 247.879)
popover#191D21oklch(0.228 0.01 248.257)
popover-foreground#E9ECEFoklch(0.942 0.005 247.879)
primary#8EA9E0oklch(0.735 0.086 264.147)
primary-foreground#131619oklch(0.198 0.008 248.212)
secondary#22272Coklch(0.27 0.012 248.263)
secondary-foreground#E9ECEFoklch(0.942 0.005 247.879)
muted#1D2126oklch(0.246 0.011 254.046)
muted-foreground#959DA6oklch(0.692 0.016 251.217)
accent#242A30oklch(0.282 0.014 248.322)
accent-foreground#E9ECEFoklch(0.942 0.005 247.879)
destructive#F28A82oklch(0.743 0.128 25.246)
border#2A3036oklch(0.306 0.014 248.274)
input#333A41oklch(0.345 0.016 248.276)
ring#8EA9E0oklch(0.735 0.086 264.147)
chart-1#8EA9E0oklch(0.735 0.086 264.147)
chart-2#8CC7BAoklch(0.785 0.064 179.312)
chart-3#E6B46Eoklch(0.801 0.105 74.641)
chart-4#C3A2D6oklch(0.759 0.081 312.997)
chart-5#E6939Foklch(0.751 0.101 10.369)

字体

标题: Manrope · 700
正文: Manrope · 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 8pxmd 10pxlg 12pxxl 16px

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

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

布局

最大宽度: 1200px
正文宽度: 68ch
栏数: 12
栏间距: 24px

适合

效率和协作类 SaaS
笔记和计划工具
产品营销官网
帮助中心和新手引导

要做和不要做

产品截图四周留足空白。
图标用细线、单色。
不要在低饱和配色旁边放高饱和的品牌色。
不要叠加多层阴影，一层柔和阴影就够了。