Terra: 어스 톤 친환경 디자인 시스템

Web · Light · Warm · Serif · Blogs and content

Terra

땅과 가까이 일하는 브랜드를 위한 이끼, 린넨, 클레이.

Terra는 지어졌다기보다 자라난 느낌입니다. 린넨 배경, 행동에는 모스 그린, 보조 색으로 러스트와 레이크 블루, 헤드라인에는 따뜻한 디스플레이 세리프. 그린워싱 같은 상투적 표현 없이 원산지, 임팩트, 아웃도어를 보여 주고 싶은 브랜드에 어울립니다.

Preview

Rendered live from the tokens below, in the system's own fonts.

New in 2026Plan, ship and measure in one place

A calm workspace for small teams. Every number you need, nothing you don't.

Start freeBook a demo

Active users12,480

Revenue$48.2k

Retention86%

Invite your teamWork emailyou@company.comRoleEditor ▾Send invite

Recent ordersCustomerStatusAmountAda ParkPaid$1,240Lukas WeberPending$380Mei ChenRefunded$96

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Terra design system. Its spec is at https://codexdesign.io/ko/design-systems/terra.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

background#F3EFE6oklch(0.953 0.013 86.83)
foreground#22261Aoklch(0.26 0.022 122.914)
card#FAF8F3oklch(0.979 0.007 88.642)
card-foreground#22261Aoklch(0.26 0.022 122.914)
popover#FAF8F3oklch(0.979 0.007 88.642)
popover-foreground#22261Aoklch(0.26 0.022 122.914)
primary#4E5E22oklch(0.455 0.087 122.475)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E4E3CFoklch(0.911 0.027 104.584)
secondary-foreground#3A4519oklch(0.37 0.067 121.519)
muted#ECE8DCoklch(0.931 0.017 91.557)
muted-foreground#5E604Foklch(0.482 0.026 112.842)
accent#E6E2D2oklch(0.912 0.022 95.301)
accent-foreground#22261Aoklch(0.26 0.022 122.914)
destructive#A63A1Eoklch(0.499 0.148 35.306)
border#D9D3C1oklch(0.867 0.025 91.637)
input#CCC5B0oklch(0.823 0.03 91.68)
ring#4E5E22oklch(0.455 0.087 122.475)
chart-1#4E5E22oklch(0.455 0.087 122.475)
chart-2#B0662Eoklch(0.584 0.118 54.72)
chart-3#3F6E7Aoklch(0.51 0.055 216.019)
chart-4#C9A227oklch(0.728 0.138 89.726)
chart-5#7A5C8Coklch(0.524 0.081 312.266)

Dark theme

background#16180Foklch(0.204 0.017 118.145)
foreground#ECE9DDoklch(0.933 0.016 95.233)
card#1E2116oklch(0.241 0.021 120.349)
card-foreground#ECE9DDoklch(0.933 0.016 95.233)
popover#1E2116oklch(0.241 0.021 120.349)
popover-foreground#ECE9DDoklch(0.933 0.016 95.233)
primary#B6C978oklch(0.803 0.108 119.667)
primary-foreground#16180Foklch(0.204 0.017 118.145)
secondary#272B1Doklch(0.28 0.025 120.989)
secondary-foreground#ECE9DDoklch(0.933 0.016 95.233)
muted#22261Aoklch(0.26 0.022 122.914)
muted-foreground#A3A592oklch(0.715 0.027 111.956)
accent#2B3021oklch(0.299 0.027 122.988)
accent-foreground#ECE9DDoklch(0.933 0.016 95.233)
destructive#F08A6Aoklch(0.736 0.133 38.174)
border#33382Aoklch(0.331 0.025 123.711)
input#3D4333oklch(0.372 0.028 124.432)
ring#B6C978oklch(0.803 0.108 119.667)
chart-1#B6C978oklch(0.803 0.108 119.667)
chart-2#E09A60oklch(0.743 0.112 59.475)
chart-3#7FB0BCoklch(0.727 0.055 214.567)
chart-4#E6C65Aoklch(0.833 0.131 92.827)
chart-5#B79AC8oklch(0.728 0.073 312.872)

Fonts

Headings: DM Serif Display · 400
Body: DM Sans · 400
Monospace: DM Mono

Type scale

display · 80/1 · -0.02emThe quick brown fox
h1 · 52/1.05 · -0.015emThe quick brown fox
h2 · 32/1.15 · -0.01emThe quick brown fox
h3 · 22/1.3The quick brown fox
body · 17/1.6The quick brown fox
small · 14/1.5 · 0.01emThe quick brown fox

Radius, spacing and shadow

Corner radiussm 6pxmd 8pxlg 10pxxl 14px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowNone: depth comes from borders and color.

Layout

Max width: 1200px
Text width: 66ch
Columns: 12
Gutter: 24px

Best for

지속가능·아웃도어 브랜드
농장, 식품 생산자, 협동조합
기후·자연 비영리 단체
에코 여행과 장비 쇼핑몰

Do's and don'ts

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