---
version: alpha
name: "Terra"
description: "苔绿、亚麻和陶土色，为贴近土地的品牌设计。 Terra 给人一种长出来而不是搭出来的感觉：亚麻色底、苔绿色操作、铁锈红和湖蓝作辅助色，标题用温暖的展示型衬线字。适合想讲清产地、影响力和户外生活，又不想落入漂绿套路的品牌。"
colors:
  primary: "#4E5E22"
  on-primary: "#FFFFFF"
  secondary: "#B0662E"
  tertiary: "#3F6E7A"
  neutral: "#5E604F"
  surface: "#F3EFE6"
  on-surface: "#22261A"
typography:
  display-lg:
    fontFamily: "DM Serif Display"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "DM Serif Display"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.015em
  headline-md:
    fontFamily: "DM Serif Display"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "DM Serif Display"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
  body-md:
    fontFamily: "DM Sans"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "DM Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.01em
rounded:
  sm: 6px
  md: 8px
  lg: 10px
  xl: 14px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

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

## Colors

- **primary (#4E5E22):** 苔绿，用于主按钮和链接；深色模式下变浅为地衣绿。
- **on-primary (#FFFFFF)**
- **secondary (#B0662E):** 铁锈红，用于高亮、季节标签和第二组图表数据。
- **tertiary (#3F6E7A):** 湖蓝，用于水、气候数据和第三组数据。
- **neutral (#5E604F):** 橄榄灰，用于图片说明、数据来源和元信息。
- **surface (#F3EFE6):** 亚麻色；卡片是更浅的燕麦白。
- **on-surface (#22261A)**

## Typography

标题用 DM Serif Display，字重 400，最大 80px；正文用 DM Sans，17px，行高 1.6。碳排放吨数、距离和坐标等数字用 DM Mono。

## Layout

内容最宽 1200px，分 12 栏，栏间距 24px，间距按 4px 递增。横幅风景大图和文字区块交替出现，影响力数据排成简单的三栏。

## Shapes

卡片、图片和按钮用 10px 圆角。1px 沙灰色描边；不用阴影，页面像印在再生纸上一样平。

## Components

实心苔绿按钮、带铁锈红标签的图片卡片、影响力数据行、溯源地图或时间线，以及放在亚麻色面板里的订阅表单。

## Do's and Don'ts

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