Terra：アースカラーのエコブランドデザインシステム

Web · ライト · 温かみ · セリフ体 · ブログ・コンテンツ

Terra

モス、リネン、クレイ。大地に寄り添うブランドのために。

Terra は、作られたというより育ったような質感です。リネンの背景、アクションにはモスグリーン、補助色にラストと湖の青、見出しには温かみのあるディスプレイセリフ。産地、インパクト、アウトドアを、グリーンウォッシュの決まり文句に頼らずに見せたいブランドに合います。

プレビュー

下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。

2026 年の新機能計画も、リリースも、計測も、ひとつの場所で

小さなチームのための、落ち着いたワークスペース。必要な数字はすべて、不要なものは何もなく。

無料で始めるデモを予約

アクティブユーザー12,480

売上$48.2k

継続率86%

チームを招待仕事用メールアドレスyou@company.comロール編集者 ▾招待を送信

最近の注文顧客ステータス金額Ada Park支払い済み$1,240Lukas Weber保留中$380Mei Chen返金済み$96

プロジェクトで使う

これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。

このプロジェクトでは Terra デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/terra.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。

トークン

カラー

ライトテーマ

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)

ダークテーマ

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)

フォント

見出し: DM Serif Display · 400
本文: DM Sans · 400
等幅: DM Mono

タイプスケール

display · 80/1 · -0.02emデザインで、画面はもっと使いやすくなる
h1 · 52/1.05 · -0.015emデザインで、画面はもっと使いやすくなる
h2 · 32/1.15 · -0.01emデザインで、画面はもっと使いやすくなる
h3 · 22/1.3デザインで、画面はもっと使いやすくなる
body · 17/1.6デザインで、画面はもっと使いやすくなる
small · 14/1.5 · 0.01emデザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 6pxmd 8pxlg 10pxxl 14px

余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px

影なし：奥行きは枠線と色で表現します。

レイアウト

最大幅: 1200px
本文の幅: 66ch
カラム: 12
ガター: 24px

向いている用途

サステナブル・アウトドアブランド
農園、食品生産者、協同組合
気候・自然保護の非営利団体
エコ旅行とギアのショップ

やること・やらないこと

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