next.js / react / react-native

EarthDash

A clean white-canvas productivity dashboard grounded in warm neutrals and animated by a five-tone chart palette running from pitch black through cream and olive to vivid orange and electric lime. Built around oversized display numerals, hairline-separated stat blocks, and a restrained UI that keeps the data front and center.

analytics
mobile
earthy
warm-neutral
data-viz
minimal
productivity
stats

earthdash.com

earthdash

Your year in focus

996 of 1260 sessions sorted — 79% on track

View breakdownTokens

earthdash.com

earthdash

Your year in focus

996 of 1260 sessions sorted — 79% on track

View breakdownTokens

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#FAF9F7"
    foreground: "#1A1A1A"
    card: "#FFFFFF"
    card-foreground: "#1A1A1A"
    popover: "#FFFFFF"
    popover-foreground: "#1A1A1A"
    primary: "#F7843B"
    primary-foreground: "#1A1A1A"
    secondary: "#F0ECE4"
    secondary-foreground: "#3D2F22"
    muted: "#F0ECE4"
    muted-foreground: "#6B5C50"
    accent: "#E2E240"
    accent-foreground: "#1A1A1A"
    destructive: "#C0392B"
    destructive-foreground: "#FFFFFF"
    border: "#E6E1D8"
    input: "#E6E1D8"
    ring: "#F7843B"
    success: "#6B7045"
    success-foreground: "#FFFFFF"
    warning: "#E8A020"
    warning-foreground: "#1A1A1A"
    chart-1: "#1A1A1A"
    chart-2: "#C2AB83"
    chart-3: "#6B7045"
    chart-4: "#F7843B"
    chart-5: "#E2E240"
  palette:
    - { name: "app-background", hex: "#faf9f7", role: "surface" }
    - { name: "card-white", hex: "#ffffff", role: "surface" }
    - { name: "near-black", hex: "#1a1a1a", role: "ink" }
    - { name: "cream-tan", hex: "#c2ab83", role: "data-viz" }
    - { name: "olive-green", hex: "#6b7045", role: "data-viz" }
    - { name: "vibrant-orange", hex: "#f7843b", role: "brand" }
    - { name: "electric-lime", hex: "#e2e240", role: "brand" }
    - { name: "warm-gray-border", hex: "#e6e1d8", role: "border" }
    - { name: "muted-text", hex: "#6b5c50", role: "ink" }
    - { name: "secondary-fill", hex: "#f0ece4", role: "surface" }
    - { name: "sand-muted", hex: "#aa8b6f", role: "accent" }
    - { name: "deep-brown", hex: "#4c3726", role: "ink" }
    - { name: "soft-peach", hex: "#efaa7e", role: "accent" }
    - { name: "dark-muted-brown", hex: "#a58669", role: "accent" }
    - { name: "light-muted-warm", hex: "#e0dbc1", role: "surface" }
    - { name: "destructive-red", hex: "#c0392b", role: "semantic" }
    - { name: "warning-amber", hex: "#e8a020", role: "semantic" }
    - { name: "olive-light", hex: "#8a9a52", role: "data-viz" }
    - { name: "dark-bg", hex: "#1c1a17", role: "surface" }

shadcn CSS Variables

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

:root {
  --radius: 0.75rem;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 40 23% 97%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 23 92% 60%;
  --primary-foreground: 0 0% 10%;
  --secondary: 40 29% 92%;
  --secondary-foreground: 29 28% 19%;
  --muted: 40 29% 92%;
  --muted-foreground: 27 14% 37%;
  --accent: 60 74% 57%;
  --accent-foreground: 0 0% 10%;
  --destructive: 6 63% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 39 22% 87%;
  --input: 39 22% 87%;
  --ring: 23 92% 60%;
  --success: 67 24% 35%;
  --success-foreground: 0 0% 100%;
  --warning: 38 81% 52%;
  --warning-foreground: 0 0% 10%;
  --chart-1: 0 0% 10%;
  --chart-2: 38 34% 64%;
  --chart-3: 67 24% 35%;
  --chart-4: 23 92% 60%;
  --chart-5: 60 74% 57%;
  --shadow-sm: 0 1px 2px 0 rgba(26,16,8,0.04);
  --shadow-md: 0 2px 8px 0 rgba(26,16,8,0.06);
  --shadow-lg: 0 4px 16px 0 rgba(26,16,8,0.08);
  --shadow-xl: 0 8px 32px 0 rgba(26,16,8,0.10);
  --gradient-hero: linear-gradient(160deg, #faf9f7 0%, #f0ece4 100%);
  --gradient-brand: linear-gradient(135deg, #f7843b 0%, #e2e240 100%);
  --gradient-subtle: linear-gradient(180deg, #ffffff 0%, #faf9f7 100%);
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 0.5rem;
  --card-radius: 0.75rem;
  --input-radius: 0.5rem;
  --badge-radius: 9999px;
  --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/earthdash.json

Tailwind v4

@theme inline {
  --font-heading: 'Space Grotesk', sans-serif;
  --font-sans: 'DM Sans', 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.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-button: 0.5rem;
  --radius-card: 0.75rem;
  --radius-input: 0.5rem;
  --radius-badge: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --shadow-sm: 0 1px 2px 0 rgba(26,16,8,0.04);
  --shadow-md: 0 2px 8px 0 rgba(26,16,8,0.06);
  --shadow-lg: 0 4px 16px 0 rgba(26,16,8,0.08);
  --shadow-xl: 0 8px 32px 0 rgba(26,16,8,0.10);
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --ease-kit: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-kit: 200ms;
  --duration-kit-slow: 400ms;
  --gradient-hero: linear-gradient(160deg, #faf9f7 0%, #f0ece4 100%);
  --gradient-brand: linear-gradient(135deg, #f7843b 0%, #e2e240 100%);
  --gradient-subtle: linear-gradient(180deg, #ffffff 0%, #faf9f7 100%);
  --font-weight-heading: 700;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "earthdash",
  "type": "registry:theme",
  "title": "EarthDash",
  "description": "Warm-neutral mobile analytics theme with an earthy-to-neon five-color data palette",
  "categories": [
    "analytics",
    "mobile",
    "earthy",
    "warm-neutral",
    "data-viz",
    "minimal",
    "productivity",
    "stats"
  ],