Pop：新野兽派设计系统

网页 · 浅色 · 醒目 · 活泼 · 创业公司

Pop

粗黑描边、硬投影和柠檬黄，故意做得很大声。

Pop 是讲规矩的新野兽派：米白页面、宽体 Unbounded 标题、所有元素都有黑色描边，实心偏移投影让卡片像一张张贴纸。柠檬黄和珊瑚橙负责吸睛，网格和间距依然很克制。

预览

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

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

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

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

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

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

在你的项目里使用

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

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

设计变量

颜色

浅色主题

background#FFFDF5oklch(0.993 0.011 95.159)
foreground#141414oklch(0.191 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#141414oklch(0.191 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#141414oklch(0.191 0 0)
primary#141414oklch(0.191 0 0)
primary-foreground#FFE45Coklch(0.917 0.155 97.996)
secondary#FFE45Coklch(0.917 0.155 97.996)
secondary-foreground#141414oklch(0.191 0 0)
muted#F5F1E4oklch(0.958 0.018 92.683)
muted-foreground#5C5A52oklch(0.467 0.013 95.338)
accent#FFF3B0oklch(0.958 0.086 99.199)
accent-foreground#141414oklch(0.191 0 0)
destructive#D62D20oklch(0.57 0.206 29.497)
border#141414oklch(0.191 0 0)
input#141414oklch(0.191 0 0)
ring#141414oklch(0.191 0 0)
chart-1#141414oklch(0.191 0 0)
chart-2#FF6B4Aoklch(0.707 0.187 34.078)
chart-3#3D7EFFoklch(0.622 0.204 262.151)
chart-4#22B573oklch(0.684 0.153 157.451)
chart-5#FFE45Coklch(0.917 0.155 97.996)

深色主题

background#141414oklch(0.191 0 0)
foreground#FFFDF5oklch(0.993 0.011 95.159)
card#1E1E1Eoklch(0.235 0 0)
card-foreground#FFFDF5oklch(0.993 0.011 95.159)
popover#1E1E1Eoklch(0.235 0 0)
popover-foreground#FFFDF5oklch(0.993 0.011 95.159)
primary#FFE45Coklch(0.917 0.155 97.996)
primary-foreground#141414oklch(0.191 0 0)
secondary#2A2A2Aoklch(0.285 0 0)
secondary-foreground#FFFDF5oklch(0.993 0.011 95.159)
muted#222222oklch(0.252 0 0)
muted-foreground#A8A69Coklch(0.724 0.014 97.517)
accent#2E2E2Eoklch(0.301 0 0)
accent-foreground#FFFDF5oklch(0.993 0.011 95.159)
destructive#FF6B5Eoklch(0.709 0.183 27.67)
border#FFFDF5oklch(0.993 0.011 95.159)
input#FFFDF5oklch(0.993 0.011 95.159)
ring#FFE45Coklch(0.917 0.155 97.996)
chart-1#FFE45Coklch(0.917 0.155 97.996)
chart-2#FF8A6Eoklch(0.756 0.148 34.518)
chart-3#6FA0FFoklch(0.713 0.149 262.556)
chart-4#4CD494oklch(0.78 0.15 159.16)
chart-5#FFFDF5oklch(0.993 0.011 95.159)

字体

标题: Unbounded · 600
正文: Manrope · 500
等宽: JetBrains Mono

字号阶梯

display · 72/1 · -0.03em设计让界面更好用
h1 · 48/1.05 · -0.02em设计让界面更好用
h2 · 30/1.15 · -0.01em设计让界面更好用
h3 · 20/1.3设计让界面更好用
body · 17/1.55设计让界面更好用
small · 14/1.45设计让界面更好用

圆角、间距和阴影

圆角sm 10pxmd 12pxlg 14pxxl 18px

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

阴影实色偏移硬阴影，不模糊；按下时阴影消失。

布局

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

适合

创业公司和独立产品发布
创作者工具和个人项目
活动、黑客松和社区
风格活泼的 SaaS 官网

要做和不要做

所有卡片、按钮和输入框用同样的黑色描边。
每个区块只挑一个响亮的颜色。
投影不要模糊，保持实心和偏移。
不要混入粉彩渐变和毛玻璃。