Terra: Erdiges Öko-Designsystem

Web · Hell · Warm · Serifen · Blogs und Inhalte

Terra

Moos, Leinen und Ton für Marken, die nah am Land arbeiten.

Terra wirkt gewachsen statt gebaut: Leinenhintergründe, Moosgrün für Aktionen, Rost und Seeblau als Begleittöne und eine warme Display-Serife für Überschriften. Es passt zu Marken, die Herkunft, Wirkung und Natur zeigen wollen, ohne Greenwashing-Klischees.

Vorschau

Live aus den Tokens unten gerendert, in den Schriften des Systems.

Neu in 2026Planen, ausliefern und messen an einem Ort

Ein ruhiger Workspace für kleine Teams. Jede Zahl, die du brauchst, und nichts, was du nicht brauchst.

Kostenlos startenDemo buchen

Aktive Nutzer12,480

Umsatz$48.2k

Bindungsrate86%

Lade dein Team einGeschäftliche E-Maildu@firma.deRolleBearbeiter ▾Einladung senden

Letzte BestellungenKundeStatusBetragAda ParkBezahlt$1,240Lukas WeberAusstehend$380Mei ChenErstattet$96

In deinem Projekt verwenden

Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.

Dieses Projekt verwendet das Designsystem Terra. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/terra.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles 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)

Dunkles 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)

Schriften

Überschriften: DM Serif Display · 400
Fließtext: DM Sans · 400
Monospace: DM Mono

Schriftgrößen

display · 80/1 · -0.02emZwölf Boxkämpfer jagen Viktor
h1 · 52/1.05 · -0.015emZwölf Boxkämpfer jagen Viktor
h2 · 32/1.15 · -0.01emZwölf Boxkämpfer jagen Viktor
h3 · 22/1.3Zwölf Boxkämpfer jagen Viktor
body · 17/1.6Zwölf Boxkämpfer jagen Viktor
small · 14/1.5 · 0.01emZwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 6pxmd 8pxlg 10pxxl 14px

Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px

SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.

Layout

Maximale Breite: 1200px
Textbreite: 66ch
Spalten: 12
Spaltenabstand: 24px

Ideal für

Nachhaltige und Outdoor-Marken
Höfe, Lebensmittelhersteller und Genossenschaften
Klima- und Naturschutz-Organisationen
Öko-Reisen und Outdoor-Ausrüster

Dos and Don’ts

Verwende echte Fotos von Orten, Menschen und Materialien.
Belege Wirkungsversprechen mit Zahlen und Quellen.
Nutze keine neongrünen Töne und streue keine Blatt-Icons überall hin.
Setze keinen Moos-Text auf Rost; der Kontrast ist zu niedrig.