Terra：大地色环保品牌设计系统

网页 · 浅色 · 暖色 · 衬线 · 博客和内容

Terra

苔绿、亚麻和陶土色，为贴近土地的品牌设计。

Terra 给人一种长出来而不是搭出来的感觉：亚麻色底、苔绿色操作、铁锈红和湖蓝作辅助色，标题用温暖的展示型衬线字。适合想讲清产地、影响力和户外生活，又不想落入漂绿套路的品牌。

预览

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

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

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

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

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

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

在你的项目里使用

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

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

设计变量

颜色

浅色主题

background#F3EFE6oklch(0.953 0.013 86.83)
foreground#22261Aoklch(0.26 0.022 122.914)
card#FAF8F3oklch(0.979 0.007 88.642)
card-foreground#22261Aoklch(0.26 0.022 122.914)
popover#FAF8F3oklch(0.979 0.007 88.642)
popover-foreground#22261Aoklch(0.26 0.022 122.914)
primary#4E5E22oklch(0.455 0.087 122.475)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E4E3CFoklch(0.911 0.027 104.584)
secondary-foreground#3A4519oklch(0.37 0.067 121.519)
muted#ECE8DCoklch(0.931 0.017 91.557)
muted-foreground#5E604Foklch(0.482 0.026 112.842)
accent#E6E2D2oklch(0.912 0.022 95.301)
accent-foreground#22261Aoklch(0.26 0.022 122.914)
destructive#A63A1Eoklch(0.499 0.148 35.306)
border#D9D3C1oklch(0.867 0.025 91.637)
input#CCC5B0oklch(0.823 0.03 91.68)
ring#4E5E22oklch(0.455 0.087 122.475)
chart-1#4E5E22oklch(0.455 0.087 122.475)
chart-2#B0662Eoklch(0.584 0.118 54.72)
chart-3#3F6E7Aoklch(0.51 0.055 216.019)
chart-4#C9A227oklch(0.728 0.138 89.726)
chart-5#7A5C8Coklch(0.524 0.081 312.266)

深色主题

background#16180Foklch(0.204 0.017 118.145)
foreground#ECE9DDoklch(0.933 0.016 95.233)
card#1E2116oklch(0.241 0.021 120.349)
card-foreground#ECE9DDoklch(0.933 0.016 95.233)
popover#1E2116oklch(0.241 0.021 120.349)
popover-foreground#ECE9DDoklch(0.933 0.016 95.233)
primary#B6C978oklch(0.803 0.108 119.667)
primary-foreground#16180Foklch(0.204 0.017 118.145)
secondary#272B1Doklch(0.28 0.025 120.989)
secondary-foreground#ECE9DDoklch(0.933 0.016 95.233)
muted#22261Aoklch(0.26 0.022 122.914)
muted-foreground#A3A592oklch(0.715 0.027 111.956)
accent#2B3021oklch(0.299 0.027 122.988)
accent-foreground#ECE9DDoklch(0.933 0.016 95.233)
destructive#F08A6Aoklch(0.736 0.133 38.174)
border#33382Aoklch(0.331 0.025 123.711)
input#3D4333oklch(0.372 0.028 124.432)
ring#B6C978oklch(0.803 0.108 119.667)
chart-1#B6C978oklch(0.803 0.108 119.667)
chart-2#E09A60oklch(0.743 0.112 59.475)
chart-3#7FB0BCoklch(0.727 0.055 214.567)
chart-4#E6C65Aoklch(0.833 0.131 92.827)
chart-5#B79AC8oklch(0.728 0.073 312.872)

字体

标题: DM Serif Display · 400
正文: DM Sans · 400
等宽: DM Mono

字号阶梯

display · 80/1 · -0.02em设计让界面更好用
h1 · 52/1.05 · -0.015em设计让界面更好用
h2 · 32/1.15 · -0.01em设计让界面更好用
h3 · 22/1.3设计让界面更好用
body · 17/1.6设计让界面更好用
small · 14/1.5 · 0.01em设计让界面更好用

圆角、间距和阴影

圆角sm 6pxmd 8pxlg 10pxxl 14px

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

阴影不用阴影，层次靠边框和颜色。

布局

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

适合

环保和户外品牌
农场、食品生产者和合作社
气候和自然公益组织
生态旅行和户外装备店

要做和不要做

用真实拍摄的地点、人物和材料照片。
影响力相关的说法要配上数字和出处。
不要用荧光绿，也不要到处放树叶图标。
不要把苔绿文字放在铁锈红上，对比度太低。