GitHubExplore library
← Themes

Themes / CSS · Tailwind / shadcn

Terracotta Journal

Editorial styling with Lora, coordinated semantic colors, decorative gradients and complete light/dark tokens.

Download resource
Studio / Terracotta JournalWorkspace
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

Lora headings / Inter 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: #9a3412;
  --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: #9a3412;
  --radius: 0.75rem;
  --font-heading: "Lora", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Geist Mono", monospace;
  --decorative-gradient: linear-gradient(125deg,#9a3412,#f9a8d4);
}

.dark {
  --background: #0b1220;
  --foreground: #f1f5f9;
  --card: #111c30;
  --card-foreground: #f1f5f9;
  --popover: #111c30;
  --popover-foreground: #f1f5f9;
  --primary: #fdba74;
  --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: #fdba74;
  --radius: 0.75rem;
  --font-heading: "Lora", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Geist Mono", monospace;
  --decorative-gradient: linear-gradient(125deg,#9a3412,#f9a8d4);
}

/* 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