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
Exports
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.jsonTailwind 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"
],