---
version: alpha
name: "Terra"
description: "Moos, Leinen und Ton für Marken, die nah am Land arbeiten. Terra wirkt gewachsen statt gebaut: Leinenhintergründe, Moosgrün für Aktionen, Rost und Seeblau als Begleittöne und eine warme Display-Serife für Überschriften. Es passt zu Marken, die Herkunft, Wirkung und Natur zeigen wollen, ohne Greenwashing-Klischees."
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 wirkt gewachsen statt gebaut: Leinenhintergründe, Moosgrün für Aktionen, Rost und Seeblau als Begleittöne und eine warme Display-Serife für Überschriften. Es passt zu Marken, die Herkunft, Wirkung und Natur zeigen wollen, ohne Greenwashing-Klischees.

## Colors

- **primary (#4E5E22):** Moosgrün für primäre Buttons und Links. Im Dunkelmodus hellt es zu einem blassen Flechtengrün auf.
- **on-primary (#FFFFFF)**
- **secondary (#B0662E):** Rost für Hervorhebungen, saisonale Tags und die zweite Diagrammreihe.
- **tertiary (#3F6E7A):** Seeblau für Wasser, Klimadaten und eine dritte Reihe.
- **neutral (#5E604F):** Olivgrau für Bildunterschriften, Quellen und Metadaten.
- **surface (#F3EFE6):** Leinen; Karten sind ein helleres Haferweiß.
- **on-surface (#22261A)**

## Typography

DM Serif Display im Schnitt 400 für Überschriften, bis 80px; DM Sans für Fließtext in 17px auf Zeilenhöhe 1.6. DM Mono für Zahlen wie Tonnen CO2, Entfernungen und Koordinaten.

## Layout

Der Inhalt reicht bis 1200px auf 12 Spalten mit 24px Spaltenabstand, in 4px-Schritten abgestuft. Große Landschaftsfotos wechseln sich mit Textabschnitten ab; Wirkungszahlen stehen in einer schlichten dreispaltigen Reihe.

## Shapes

10px-Ecken an Karten, Bildern und Buttons. 1px-Rahmen in sandigem Grau; keine Schatten, damit die Seite flach bleibt wie Druck auf Recyclingpapier.

## Components

Massive Moos-Buttons, Fotokarten mit Rost-Tag, Zeilen mit Wirkungszahlen, eine Herkunftskarte oder Timeline und eine Newsletter-Anmeldung in einem Leinenpanel.

## Do's and Don'ts

- Verwende echte Fotos von Orten, Menschen und Materialien.
- Belege Wirkungsversprechen mit Zahlen und Quellen.
- Nutze keine neongrünen Töne und streue keine Blatt-Icons überall hin.
- Setze keinen Moos-Text auf Rost; der Kontrast ist zu niedrig.