next / vite / remix

Sorted Earth

Inspired by a clean statistics app screen set against a warm tan backdrop, Sorted Earth pairs a confident orange brand color with olive-green accents and soft, sandy neutrals. The system feels editorial and tactile — generous whitespace, restrained shadows, and serif-influenced headings — while remaining crisp enough for data-dense charts and dashboards.

Use this kit Customize in Studio Download DESIGN.md

warm

editorial

earthy

orange

analytics

mobile

sortedearth.com

Sorted

Sorted, clearly.

Track every session and watch your year take shape with warm, readable analytics.

View statisticsTokens

sortedearth.com

Sorted

Sorted, clearly.

Track every session and watch your year take shape with warm, readable analytics.

View statisticsTokens

Exports

DESIGN.md DTCG tokens JSON CSS variables Tailwind v3 config Tailwind v4 theme shadcn registry JSON Registry install endpoint

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#FAF8F3"
    foreground: "#221A12"
    card: "#FFFFFF"
    card-foreground: "#221A12"
    popover: "#FFFFFF"
    popover-foreground: "#221A12"
    primary: "#F7843B"
    primary-foreground: "#2A1709"
    secondary: "#E8E2CF"
    secondary-foreground: "#3A2E1D"
    muted: "#EFE9DA"
    muted-foreground: "#6B5E48"
    accent: "#6B7034"
    accent-foreground: "#FFFFFF"
    destructive: "#BA1A1A"
    destructive-foreground: "#FFFFFF"
    border: "#DDD5C2"
    input: "#DDD5C2"
    ring: "#F7843B"
    success: "#5C6B22"
    success-foreground: "#FFFFFF"
    warning: "#E2A93B"
    warning-foreground: "#2A1D05"
    chart-1: "#F7843B"
    chart-2: "#6B7034"
    chart-3: "#D6D63A"
    chart-4: "#2A2118"
    chart-5: "#C2AB83"
typography:
  heading: { family: "Fraunces", weights: [400, 500, 600, 700] }
  body: { family: "Inter", weights: [400, 500, 600, 700] }
  mono: { family: "JetBrains Mono", weights: [400, 500, 700] }
  scale: "major-third"
spacing:
  density: "balanced"
  base: "4px"
  container: "32rem"
radius:
  sm: "0.375rem"
  md: "0.625rem"
  lg: "1rem"
  xl: "1.5rem"
components:
  button: { radius: "0.625rem", shape: "rounded", fill: "solid" }
  card: { radius: "1.5rem" }
  input: { radius: "0.625rem" }
  badge: { radius: "0.625rem" }
  borderWidth: "1px"

shadcn CSS Variables

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");

:root {
  --radius: 1rem;
  --font-heading: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 43 41% 97%;
  --foreground: 30 31% 10%;
  --card: 0 0% 100%;
  --card-foreground: 30 31% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 30 31% 10%;
  --primary: 23 92% 60%;
  --primary-foreground: 25 65% 10%;
  --secondary: 46 35% 86%;
  --secondary-foreground: 35 33% 17%;
  --muted: 43 40% 90%;
  --muted-foreground: 38 20% 35%;
  --accent: 65 37% 32%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 75% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 42 28% 81%;
  --input: 42 28% 81%;
  --ring: 23 92% 60%;
  --success: 72 52% 28%;
  --success-foreground: 0 0% 100%;
  --warning: 40 74% 56%;
  --warning-foreground: 39 79% 9%;
  --chart-1: 23 92% 60%;
  --chart-2: 65 37% 32%;
  --chart-3: 60 66% 53%;
  --chart-4: 30 27% 13%;
  --chart-5: 38 34% 64%;
  --shadow-sm: 0 1px 2px rgba(42,33,24,0.06);
  --shadow-md: 0 4px 10px rgba(42,33,24,0.08);
  --shadow-lg: 0 10px 24px rgba(42,33,24,0.10);
  --shadow-xl: 0 20px 48px rgba(42,33,24,0.14);
  --gradient-hero: linear-gradient(135deg,#f7843b 0%,#e2a93b 100%);
  --gradient-brand: linear-gradient(120deg,#f7843b 0%,#6b7034 100%);
  --gradient-subtle: linear-gradient(180deg,#faf8f3 0%,#efe9da 100%);
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 600;
  --font-weight-body: 400;
  --button-radius: 0.625rem;
  --card-radius: 1.5rem;
  --input-radius: 0.625rem;
  --badge-radius: 0.625rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: none;

Install Targets

Registry

/r/sorted-earth.json

Tailwind v4

@theme inline {
  --font-heading: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains 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: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-button: 0.625rem;
  --radius-card: 1.5rem;
  --radius-input: 0.625rem;
  --radius-badge: 0.625rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(42,33,24,0.06);
  --shadow-md: 0 4px 10px rgba(42,33,24,0.08);
  --shadow-lg: 0 10px 24px rgba(42,33,24,0.10);
  --shadow-xl: 0 20px 48px rgba(42,33,24,0.14);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --ease-kit: cubic-bezier(0.4,0,0.2,1);
  --duration-kit: 200ms;
  --duration-kit-slow: 400ms;
  --gradient-hero: linear-gradient(135deg,#f7843b 0%,#e2a93b 100%);
  --gradient-brand: linear-gradient(120deg,#f7843b 0%,#6b7034 100%);
  --gradient-subtle: linear-gradient(180deg,#faf8f3 0%,#efe9da 100%);
  --font-weight-heading: 600;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sorted-earth",
  "type": "registry:theme",
  "title": "Sorted Earth",
  "description": "A warm, editorial mobile-analytics kit anchored on vibrant orange with earthy olive and tan neutrals.",
  "categories": [
    "warm",
    "editorial",
    "earthy",
    "orange",
    "analytics",
    "mobile"
  ],
  "cssVars": {
    "theme": {