---
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. CO2 톤수, 거리, 좌표 같은 수치는 DM Mono.

## Layout

콘텐츠는 12컬럼에 거터 24px, 4px 단위 간격으로 최대 1200px. 큼직한 풍경 사진과 텍스트 섹션이 번갈아 나오고, 임팩트 수치는 단순한 3열 행에 놓입니다.

## Shapes

카드, 이미지, 버튼은 10px 모서리. 샌디 그레이 1px 테두리, 그림자가 없어 페이지가 재생지에 인쇄한 것처럼 평평하게 유지됩니다.

## Components

꽉 찬 모스 버튼, 러스트 태그가 붙은 사진 카드, 임팩트 통계 행, 원료 조달 지도나 타임라인, 린넨 패널 속 뉴스레터 구독.

## Do's and Don'ts

- 장소, 사람, 소재의 실제 사진을 쓰세요.
- 임팩트 주장은 수치와 출처로 뒷받침하세요.
- 네온 그린을 쓰거나 나뭇잎 아이콘을 여기저기 흩뿌리지 마세요.
- 러스트 위에 모스 색 텍스트를 올리지 마세요. 대비가 너무 낮습니다.