Next.js / React / Astro
FFP Verdure
Drawn from the Fédération Française du Paysage editorial system, this kit makes deep forest green the pervasive brand surface in dark mode and a stark white document canvas in light mode. Oversized bold-uppercase grotesque headlines fill the full container width. A single lime-yellow accent (#d0d245) drives all interactive elements on the green surface. Tight column grids with hairline rules carry dense membership data. Horizontal stripe bands of lime, purple, olive, and forest green close every major section as a palette-in-a-row motif. All corners are sharp; shadows are absent.
swiss-grid
editorial
institutional
forest-green
condensed
bold
color-surface
print-inspired
landscape
uppercase
ffpverdure.com
Verdure
EVERY LANDSCAPE IS A STATEMENT
Institutional-grade design for organizations that shape the built environment — dense, bold, grounded.
JOIN THE FEDERATIONTokens
ffpverdure.com
Verdure
EVERY LANDSCAPE IS A STATEMENT
Institutional-grade design for organizations that shape the built environment — dense, bold, grounded.
JOIN THE FEDERATIONTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#FFFFFF"
foreground: "#141A14"
card: "#F4F8F0"
card-foreground: "#141A14"
popover: "#FFFFFF"
popover-foreground: "#141A14"
primary: "#006231"
primary-foreground: "#FFFFFF"
secondary: "#E8F0E0"
secondary-foreground: "#1A3A1A"
muted: "#F0F2EC"
muted-foreground: "#5A6A5A"
accent: "#D0D245"
accent-foreground: "#1C1F00"
destructive: "#C62828"
destructive-foreground: "#FFFFFF"
border: "#D4D8D0"
input: "#DCE0D8"
ring: "#006231"
success: "#2E7D32"
success-foreground: "#FFFFFF"
warning: "#E65100"
warning-foreground: "#000000"
chart-1: "#006231"
chart-2: "#D0D245"
chart-3: "#B294C4"
chart-4: "#7A8E34"
chart-5: "#E65100"
palette:
- { name: "forest-green", hex: "#006231", role: "brand-primary" }
- { name: "deep-forest", hex: "#004d22", role: "background-dark" }
- { name: "darkest-forest", hex: "#005d2a", role: "surface-darkest" }
- { name: "pure-white", hex: "#ffffff", role: "document-surface" }
- { name: "near-black", hex: "#141a14", role: "ink-primary" }
- { name: "lime-yellow", hex: "#d0d245", role: "accent-cta" }
- { name: "vibrant-lime", hex: "#eee856", role: "accent-bright" }
- { name: "yellow-olive", hex: "#bbc046", role: "accent-warm" }
- { name: "pale-yellow", hex: "#d8d07c", role: "muted-accent" }
- { name: "olive-green", hex: "#7a8e34", role: "secondary-accent" }
- { name: "dark-olive", hex: "#30632e", role: "surface-variant" }
- { name: "moss-green", hex: "#649c7c", role: "muted-accent" }
- { name: "soft-purple", hex: "#b294c4", role: "data-viz" }
- { name: "light-purple", hex: "#b99cc4", role: "data-viz" }
- { name: "light-grey", hex: "#d4d4d4", role: "neutral-border" }
- { name: "near-white-green", hex: "#e0e5e2", role: "neutral-light" }
- { name: "document-tint", hex: "#f4f8f0", role: "card-surface-light" }
- { name: "stripe-dark-green", hex: "#1a4a28", role: "data-viz" }
- { name: "stripe-fresh-green", hex: "#4cba7a", role: "data-viz" }shadcn CSS Variables
/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Space%20Mono:wght@400;700&display=swap");
:root {
--radius: 0rem;
--font-heading: 'Barlow', sans-serif;
--font-sans: 'Barlow', sans-serif;
--font-mono: 'Space Mono', monospace;
--background: 0 0% 100%;
--foreground: 120 13% 9%;
--card: 90 36% 96%;
--card-foreground: 120 13% 9%;
--popover: 0 0% 100%;
--popover-foreground: 120 13% 9%;
--primary: 150 100% 19%;
--primary-foreground: 0 0% 100%;
--secondary: 90 35% 91%;
--secondary-foreground: 120 38% 16%;
--muted: 80 19% 94%;
--muted-foreground: 120 8% 38%;
--accent: 61 61% 55%;
--accent-foreground: 66 100% 6%;
--destructive: 0 66% 47%;
--destructive-foreground: 0 0% 100%;
--border: 90 9% 83%;
--input: 90 11% 86%;
--ring: 150 100% 19%;
--success: 123 46% 34%;
--success-foreground: 0 0% 100%;
--warning: 21 100% 45%;
--warning-foreground: 0 0% 0%;
--chart-1: 150 100% 19%;
--chart-2: 61 61% 55%;
--chart-3: 278 29% 67%;
--chart-4: 73 46% 38%;
--chart-5: 21 100% 45%;
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: 0 2px 8px rgba(0,0,0,0.12);
--shadow-xl: 0 4px 20px rgba(0,0,0,0.18);
--gradient-hero: linear-gradient(180deg, #004d22 0%, #003616 100%);
--gradient-brand: linear-gradient(180deg, #006231 0%, #004d22 100%);
--gradient-subtle: linear-gradient(180deg, #f4f8f0 0%, #e8f0e0 100%);
--duration: 120ms;
--duration-slow: 250ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--tracking-tight: -0.01em;
--tracking-normal: 0em;
--font-weight-heading: 800;
--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: uppercase;Install Targets
Registry
/r/ffp-verdure.jsonTailwind v4
@theme inline {
--font-heading: 'Barlow', sans-serif;
--font-sans: 'Barlow', sans-serif;
--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: none;
--shadow-md: none;
--shadow-lg: 0 2px 8px rgba(0,0,0,0.12);
--shadow-xl: 0 4px 20px rgba(0,0,0,0.18);
--tracking-tight: -0.01em;
--tracking-normal: 0em;
--ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
--duration-kit: 120ms;
--duration-kit-slow: 250ms;
--gradient-hero: linear-gradient(180deg, #004d22 0%, #003616 100%);
--gradient-brand: linear-gradient(180deg, #006231 0%, #004d22 100%);
--gradient-subtle: linear-gradient(180deg, #f4f8f0 0%, #e8f0e0 100%);
--font-weight-heading: 800;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "ffp-verdure",
"type": "registry:theme",
"title": "FFP Verdure",
"description": "Swiss-grid institutional identity anchored in deep forest green with oversized condensed headlines and lime-yellow CTAs",
"categories": [
"swiss-grid",
"editorial",
"institutional",
"forest-green",
"condensed",
"bold",
"color-surface",
"print-inspired",
"landscape",