next / remix / astro
Nature's Archive
Inspired by a nature editorial layout combining a strict visible column grid, full-bleed photography bands, oversized lowercase headings, and a restrained palette of forest green, olive, and warm amber set against near-white. Every element earns its place in the grid; typography does the heavy lifting. The monospace body font signals archival intention — this is a keeper of quiet moments.
editorial
grid
nature
minimal
monospace
archival
forest
photography
naturesarchive.com
archive
the silence that heals .
NATURE'S ATMOSPHERE — Creative Story 2K25
View ArchiveTokens
naturesarchive.com
archive
the silence that heals .
NATURE'S ATMOSPHERE — Creative Story 2K25
View ArchiveTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#FDFDFD"
foreground: "#1C1C1C"
card: "#FFFFFF"
card-foreground: "#1C1C1C"
popover: "#FFFFFF"
popover-foreground: "#1C1C1C"
primary: "#205240"
primary-foreground: "#FFFFFF"
secondary: "#6F811F"
secondary-foreground: "#000000"
muted: "#F2F2EE"
muted-foreground: "#5E5E5A"
accent: "#8E9767"
accent-foreground: "#1C1C1C"
destructive: "#B83224"
destructive-foreground: "#FFFFFF"
border: "#E2E2DC"
input: "#E8E8E3"
ring: "#205240"
success: "#2D6A4F"
success-foreground: "#FFFFFF"
warning: "#9E5E22"
warning-foreground: "#FFFFFF"
chart-1: "#205240"
chart-2: "#6F811F"
chart-3: "#9E5E22"
chart-4: "#8E9767"
chart-5: "#4A6741"
palette:
- { name: "forest-green", hex: "#205240", role: "primary" }
- { name: "olive-green", hex: "#6f811f", role: "secondary" }
- { name: "sage", hex: "#8e9767", role: "accent" }
- { name: "warm-amber", hex: "#ac7434", role: "brand-warm" }
- { name: "dark-amber", hex: "#664421", role: "dark-vibrant" }
- { name: "light-sage", hex: "#d4d8c3", role: "light-muted" }
- { name: "near-white", hex: "#fdfdfd", role: "background" }
- { name: "near-black", hex: "#1c1c1c", role: "foreground" }
- { name: "cool-off-white", hex: "#ecf2f9", role: "surface-tint" }
- { name: "grid-line", hex: "#e2e2dc", role: "border" }
- { name: "light-olive-bg", hex: "#f2f2ee", role: "muted" }
- { name: "dark-forest-bg", hex: "#111613", role: "dark-background" }
- { name: "dark-forest-ink", hex: "#0a2618", role: "primaryForeground-dark" }
- { name: "warning-amber", hex: "#9e5e22", role: "warning" }
- { name: "chart-forest", hex: "#205240", role: "data-viz" }
- { name: "chart-olive", hex: "#6f811f", role: "data-viz" }
- { name: "chart-amber", hex: "#9e5e22", role: "data-viz" }
- { name: "chart-sage", hex: "#8e9767", role: "data-viz" }
- { name: "chart-moss", hex: "#4a6741", role: "data-viz" }shadcn CSS Variables
/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=DM%20Sans:wght@400;500;700&family=IBM%20Plex%20Mono:wght@400;500;600&display=swap");
:root {
--radius: 0rem;
--font-heading: 'DM Sans', sans-serif;
--font-sans: 'IBM Plex Mono', monospace;
--font-mono: 'IBM Plex Mono', monospace;
--background: 0 0% 99%;
--foreground: 0 0% 11%;
--card: 0 0% 100%;
--card-foreground: 0 0% 11%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 11%;
--primary: 158 44% 22%;
--primary-foreground: 0 0% 100%;
--secondary: 71 61% 31%;
--secondary-foreground: 0 0% 0%;
--muted: 60 13% 94%;
--muted-foreground: 60 2% 36%;
--accent: 71 19% 50%;
--accent-foreground: 0 0% 11%;
--destructive: 6 67% 43%;
--destructive-foreground: 0 0% 100%;
--border: 60 9% 87%;
--input: 60 10% 90%;
--ring: 158 44% 22%;
--success: 153 40% 30%;
--success-foreground: 0 0% 100%;
--warning: 29 65% 38%;
--warning-foreground: 0 0% 100%;
--chart-1: 158 44% 22%;
--chart-2: 71 61% 31%;
--chart-3: 29 65% 38%;
--chart-4: 71 19% 50%;
--chart-5: 106 23% 33%;
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: 0 2px 8px rgba(0,0,0,0.05);
--shadow-xl: 0 4px 16px rgba(0,0,0,0.08);
--gradient-hero: linear-gradient(180deg, rgba(253,253,253,0) 0%, rgba(32,82,64,0.12) 100%);
--gradient-brand: linear-gradient(135deg, #205240 0%, #6f811f 100%);
--gradient-subtle: linear-gradient(180deg, #fdfdfd 0%, #f0f2ea 100%);
--duration: 200ms;
--duration-slow: 500ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--tracking-tight: -0.02em;
--tracking-normal: 0.01em;
--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: 0;
--badge-border-width: 0;
--heading-transform: none;Install Targets
Registry
/r/nature-s-archive.jsonTailwind v4
@theme inline {
--font-heading: 'DM Sans', sans-serif;
--font-sans: 'IBM Plex Mono', monospace;
--font-mono: 'IBM Plex 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: 0;
--badge-border-width: 0;
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: 0 2px 8px rgba(0,0,0,0.05);
--shadow-xl: 0 4px 16px rgba(0,0,0,0.08);
--tracking-tight: -0.02em;
--tracking-normal: 0.01em;
--ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
--duration-kit: 200ms;
--duration-kit-slow: 500ms;
--gradient-hero: linear-gradient(180deg, rgba(253,253,253,0) 0%, rgba(32,82,64,0.12) 100%);
--gradient-brand: linear-gradient(135deg, #205240 0%, #6f811f 100%);
--gradient-subtle: linear-gradient(180deg, #fdfdfd 0%, #f0f2ea 100%);
--font-weight-heading: 700;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "nature-s-archive",
"type": "registry:theme",
"title": "Nature's Archive",
"description": "A minimal editorial grid kit drawn from forest photography — white canvas, visible hairline grid, forest-green accents, and IBM Plex Mono as the editorial voice.",
"categories": [
"editorial",
"grid",
"nature",
"minimal",
"monospace",
"archival",
"forest",
"photography"
],