GitHubExplore library
← Themes

Themes / CSS · Tailwind / shadcn

Forest Archive

Organic styling with Fraunces, coordinated semantic colors, decorative gradients and complete light/dark tokens.

Download resource
Studio / Forest ArchiveWorkspace
Your next chapter

Good things,
beautifully composed.

A complete palette, considered typography and clear states. Make space for the work that matters.

Project overview

12,480 +24.8%

Illustrative data · last 7 days

Make it yours

Local demo. Nothing leaves this preview.

primarysecondaryaccentmuteddestructive

Fraunces headings / Manrope body · light and dark · semantic CSS variables · decorative gradients · fonts retain their separate OFL notices.

CSS tokens and installation

Copy these variables into your global stylesheet. Use your existing Tailwind/shadcn semantic token mappings and add the listed fonts with their OFL notices. Select the Source tab for the complete files and setup instructions.

/* Original MigBits theme. MIT; preserve LICENSE.txt. Fonts are separate OFL resources. */

:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #166534;
  --primary-foreground: #ffffff;
  --secondary: #e2e8f0;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #475569;
  --accent: #e2e8f0;
  --accent-foreground: #0f172a;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #64748b;
  --input: #64748b;
  --ring: #166534;
  --radius: 1rem;
  --font-heading: "Fraunces", serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "Geist Mono", monospace;
  --decorative-gradient: linear-gradient(125deg,#166534,#fcd34d);
}

.dark {
  --background: #0b1220;
  --foreground: #f1f5f9;
  --card: #111c30;
  --card-foreground: #f1f5f9;
  --popover: #111c30;
  --popover-foreground: #f1f5f9;
  --primary: #86efac;
  --primary-foreground: #0b1220;
  --secondary: #1e293b;
  --secondary-foreground: #f1f5f9;
  --muted: #1e293b;
  --muted-foreground: #cbd5e1;
  --accent: #23314a;
  --accent-foreground: #f1f5f9;
  --destructive: #fca5a5;
  --destructive-foreground: #0b1220;
  --border: #64748b;
  --input: #64748b;
  --ring: #86efac;
  --radius: 1rem;
  --font-heading: "Fraunces", serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "Geist Mono", monospace;
  --decorative-gradient: linear-gradient(125deg,#166534,#fcd34d);
}

/* Tailwind v4 / shadcn: map these semantic variables in your existing @theme inline block. Keep text on semantic surfaces, not on the decorative gradient. */

A few more good starting points