---
version: alpha
name: "Terra"
description: "Moss, linen and clay for brands that work close to the land. Terra feels grown rather than built: linen backgrounds, moss green for action, rust and lake blue as supporting tones, and a warm display serif for headlines. It suits brands that want to show provenance, impact and the outdoors without greenwashing clichés."
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 feels grown rather than built: linen backgrounds, moss green for action, rust and lake blue as supporting tones, and a warm display serif for headlines. It suits brands that want to show provenance, impact and the outdoors without greenwashing clichés.

## Colors

- **primary (#4E5E22):** Moss green, for primary buttons and links. In dark mode it lightens to a pale lichen green.
- **on-primary (#FFFFFF)**
- **secondary (#B0662E):** Rust, for highlights, seasonal tags and the second chart series.
- **tertiary (#3F6E7A):** Lake blue, for water, climate data and a third series.
- **neutral (#5E604F):** Olive grey for captions, sources and metadata.
- **surface (#F3EFE6):** Linen; cards are a lighter oat white.
- **on-surface (#22261A)**

## Typography

DM Serif Display at weight 400 for headlines, up to 80px; DM Sans for body at 17px, on a 1.6 line height. DM Mono for figures such as tonnes of CO2, distances and coordinates.

## Layout

Content spans up to 1200px on 12 columns with 24px gutters, spaced in 4px steps. Big landscape photos alternate with text sections; impact numbers sit in a simple three-column row.

## Shapes

10px corners on cards, images and buttons. 1px borders in a sandy grey; no shadows, so the page stays flat like print on recycled paper.

## Components

Solid moss buttons, photo cards with a rust tag, impact stat rows, a sourcing map or timeline, and a newsletter sign-up in a linen panel.

## Do's and Don'ts

- Do use real photos of places, people and materials.
- Do back impact claims with numbers and sources.
- Don't use neon greens or scatter leaf icons everywhere.
- Don't place moss text on rust; the contrast is too low.