---
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):** ラスト。ハイライト、季節のタグ、2 番目のチャート系列用。
- **tertiary (#3F6E7A):** 湖の青。水、気候データ、3 番目の系列用。
- **neutral (#5E604F):** オリーブグレー。キャプション、出典、メタデータ用。
- **surface (#F3EFE6):** リネン。カードはより明るいオートミールホワイト。
- **on-surface (#22261A)**

## Typography

見出しは DM Serif Display のウェイト 400 で最大 80px。本文は DM Sans の 17px、行の高さ 1.6。CO2 のトン数、距離、座標などの数値は DM Mono。

## Layout

コンテンツは最大 1200px、12 カラム、ガター 24px、4px 刻みの余白。大きな風景写真とテキストのセクションが交互に並び、インパクトの数字はシンプルな 3 カラムの行に置きます。

## Shapes

カード、画像、ボタンは 10px の角丸。砂色がかったグレーの 1px の枠線。影は使わないので、ページは再生紙に刷った印刷物のように平らなままです。

## Components

モスグリーンのベタ塗りボタン、ラストのタグ付きの写真カード、インパクトの数字を並べた行、調達先の地図またはタイムライン、リネン色のパネルに置いたニュースレター登録。

## Do's and Don'ts

- 場所、人、素材の本物の写真を使う。
- インパクトの主張は、数字と出典で裏づける。
- ネオンのようなグリーンを使ったり、葉っぱのアイコンをあちこちにちりばめたりしない。
- ラストの上にモスグリーンの文字を置かない。コントラストが低すぎる。