---
version: alpha
name: "Terra"
description: "Musgo, lino y arcilla para marcas que trabajan cerca de la tierra. Terra parece cultivado en lugar de construido: fondos de lino, verde musgo para la acción, óxido y azul lago como tonos de apoyo y una serif display cálida para los titulares. Encaja con marcas que quieren mostrar procedencia, impacto y naturaleza sin caer en los clichés del greenwashing."
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 parece cultivado en lugar de construido: fondos de lino, verde musgo para la acción, óxido y azul lago como tonos de apoyo y una serif display cálida para los titulares. Encaja con marcas que quieren mostrar procedencia, impacto y naturaleza sin caer en los clichés del greenwashing.

## Colors

- **primary (#4E5E22):** Verde musgo, para botones principales y enlaces. En modo oscuro se aclara hasta un verde liquen pálido.
- **on-primary (#FFFFFF)**
- **secondary (#B0662E):** Óxido, para destacados, etiquetas de temporada y la segunda serie de gráficos.
- **tertiary (#3F6E7A):** Azul lago, para el agua, los datos climáticos y una tercera serie.
- **neutral (#5E604F):** Gris oliva para pies de foto, fuentes y metadatos.
- **surface (#F3EFE6):** Lino; las tarjetas son de un blanco avena más claro.
- **on-surface (#22261A)**

## Typography

DM Serif Display con grosor 400 para los titulares, de hasta 80px; DM Sans para el cuerpo a 17px, con interlineado de 1.6. DM Mono para cifras como toneladas de CO2, distancias y coordenadas.

## Layout

El contenido se extiende hasta 1200px en 12 columnas con gutters de 24px, con espaciado en pasos de 4px. Grandes fotos de paisaje alternan con secciones de texto; las cifras de impacto se sitúan en una sencilla fila de tres columnas.

## Shapes

Esquinas de 10px en tarjetas, imágenes y botones. Bordes de 1px en gris arena; sin sombras, de modo que la página se mantiene plana como la impresión sobre papel reciclado.

## Components

Botones sólidos de musgo, tarjetas de foto con una etiqueta de óxido, filas de cifras de impacto, un mapa o una línea de tiempo de abastecimiento y una suscripción a la newsletter en un panel de lino.

## Do's and Don'ts

- Usa fotos reales de lugares, personas y materiales.
- Respalda las afirmaciones de impacto con cifras y fuentes.
- No uses verdes de neón ni esparzas iconos de hojas por todas partes.
- No pongas texto musgo sobre óxido; el contraste es demasiado bajo.