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

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.json

Tailwind 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"
  ],