Next.js / Remix / Astro

Terrain Vivant

Inspired by the FFP (Fédération Française du Paysage) brand identity, this kit is a resolutely flat, two-color surface system. Vivid grass-green and deep cobalt-blue are sovereign peers — either can fill an entire screen or section, with no neutral intermediary. All text is set in Space Mono, deployed at every scale from hero display down to captions — this is not a code aesthetic, it is the primary typographic voice. All shapes are sharp 90° rectangles. Section breaks use stacked parallel horizontal rules. Abstract geometric illustrations using dot-matrix halftone and vertical stripe patterns in the two brand colors serve as the visual language. The result is graphic, institutional, and unmistakably French public-sector modernism.

Use this kit Customize in Studio Download DESIGN.md

editorial

institutional

flat

two-color

monospace

french

modernist

bold

color-surface

sharp

poster

terrainvivant.com
terrain
Paysagistes concepteurs de qualité de vieFédération · Nouvelle-Aquitaine · 2024
Découvrir nos actionsTokens

terrainvivant.com
terrain
Paysagistes concepteurs de qualité de vieFédération · Nouvelle-Aquitaine · 2024
Découvrir nos actionsTokens

Exports

DESIGN.md DTCG tokens JSON CSS variables Tailwind v3 config Tailwind v4 theme shadcn registry JSON Registry install endpoint

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#229F39"
    foreground: "#001500"
    card: "#2B3386"
    card-foreground: "#FFFFFF"
    popover: "#2B3386"
    popover-foreground: "#FFFFFF"
    primary: "#2B3386"
    primary-foreground: "#FFFFFF"
    secondary: "#1A4A8C"
    secondary-foreground: "#FFFFFF"
    muted: "#17882A"
    muted-foreground: "#000000"
    accent: "#095DAC"
    accent-foreground: "#FFFFFF"
    destructive: "#B91C1C"
    destructive-foreground: "#FFFFFF"
    border: "#0C7023"
    input: "#0C7023"
    ring: "#2B3386"
    success: "#004D10"
    success-foreground: "#A7F3C0"
    warning: "#92400E"
    warning-foreground: "#FEF3C7"
    chart-1: "#2B3386"
    chart-2: "#095DAC"
    chart-3: "#0C549C"
    chart-4: "#001500"
    chart-5: "#3C438A"
  palette:
    - { name: "vivid-green", hex: "#229f39", role: "background-primary" }
    - { name: "cobalt-blue", hex: "#2b3386", role: "background-secondary" }
    - { name: "electric-blue", hex: "#095dac", role: "accent" }
    - { name: "medium-blue", hex: "#0c59a6", role: "data-viz" }
    - { name: "dark-cobalt", hex: "#0c549c", role: "data-viz" }
    - { name: "navy", hex: "#1d4394", role: "data-viz" }
    - { name: "muted-blue-violet", hex: "#545ca4", role: "muted" }
    - { name: "dark-blue-violet", hex: "#3c438a", role: "muted" }
    - { name: "light-blue-tint", hex: "#d3e2f2", role: "surface-light" }
    - { name: "light-muted-blue", hex: "#acb4cc", role: "surface-muted" }
    - { name: "teal-green", hex: "#1b7c65", role: "data-viz" }
    - { name: "dark-teal", hex: "#26595b", role: "data-viz" }
    - { name: "white", hex: "#ffffff", role: "ink-on-blue" }
    - { name: "near-black-green", hex: "#001500", role: "ink-on-green" }
    - { name: "bright-green", hex: "#22c847", role: "accent-light" }
    - { name: "dark-green-muted", hex: "#17882a", role: "surface-muted" }
    - { name: "deep-navy-card", hex: "#1e2776", role: "surface-dark-card" }
    - { name: "deep-navy-muted", hex: "#1e2464", role: "surface-dark-muted" }
    - { name: "mid-navy", hex: "#3c4499", role: "surface-dark-secondary" }

shadcn CSS Variables

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Space%20Mono:wght@400;700&display=swap");

:root {
  --radius: 0rem;
  --font-heading: 'Space Mono', monospace;
  --font-sans: 'Space Mono', monospace;
  --font-mono: 'Space Mono', monospace;
  --background: 131 65% 38%;
  --foreground: 120 100% 4%;
  --card: 235 51% 35%;
  --card-foreground: 0 0% 100%;
  --popover: 235 51% 35%;
  --popover-foreground: 0 0% 100%;
  --primary: 235 51% 35%;
  --primary-foreground: 0 0% 100%;
  --secondary: 215 69% 33%;
  --secondary-foreground: 0 0% 100%;
  --muted: 130 71% 31%;
  --muted-foreground: 0 0% 0%;
  --accent: 209 90% 35%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 74% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 134 81% 24%;
  --input: 134 81% 24%;
  --ring: 235 51% 35%;
  --success: 132 100% 15%;
  --success-foreground: 140 76% 80%;
  --warning: 23 83% 31%;
  --warning-foreground: 48 96% 89%;
  --chart-1: 235 51% 35%;
  --chart-2: 209 90% 35%;
  --chart-3: 210 86% 33%;
  --chart-4: 120 100% 4%;
  --chart-5: 235 39% 39%;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.10);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-xl: 0 8px 24px rgba(0,0,0,0.14);
  --gradient-hero: linear-gradient(135deg, #229f39 0%, #1a6b2b 100%);
  --gradient-brand: linear-gradient(135deg, #229f39 0%, #2b3386 100%);
  --gradient-subtle: linear-gradient(180deg, #1e8a32 0%, #229f39 100%);
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: 0em;
  --tracking-normal: 0.02em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 0rem;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --badge-radius: 0rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: none;

Install Targets

Registry

/r/terrain-vivant.json

Tailwind v4

@theme inline {
  --font-heading: 'Space Mono', monospace;
  --font-sans: 'Space Mono', monospace;
  --font-mono: 'Space Mono', monospace;
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));
  --radius-sm: 0rem;
  --radius-md: 0rem;
  --radius-lg: 0rem;
  --radius-xl: 0rem;
  --radius-button: 0rem;
  --radius-card: 0rem;
  --radius-input: 0rem;
  --radius-badge: 0rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.10);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-xl: 0 8px 24px rgba(0,0,0,0.14);
  --tracking-tight: 0em;
  --tracking-normal: 0.02em;
  --ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-kit: 200ms;
  --duration-kit-slow: 400ms;
  --gradient-hero: linear-gradient(135deg, #229f39 0%, #1a6b2b 100%);
  --gradient-brand: linear-gradient(135deg, #229f39 0%, #2b3386 100%);
  --gradient-subtle: linear-gradient(180deg, #1e8a32 0%, #229f39 100%);
  --font-weight-heading: 700;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "terrain-vivant",
  "type": "registry:theme",
  "title": "Terrain Vivant",
  "description": "A bold two-color institutional editorial system built on vivid green and cobalt blue full-screen surfaces, with monospace type throughout and zero-radius geometry.",
  "categories": [
    "editorial",
    "institutional",
    "flat",
    "two-color",
    "monospace",
    "french",
    "modernist",
    "bold",
    "color-surface",