next / react / expo
TaskForge
TaskForge centers on a dark near-black (#1a1a1a) app shell populated by large, heavily-rounded cards whose backgrounds signal task priority at a glance — lime for active, amber for medium, coral for urgent, cream for neutral. The create-task flow flips the entire screen to vivid coral-red (#e85a50) with dark text and a near-black CTA pill, creating a distinct contextual identity without leaving the design language. Zero box shadows; hierarchy is expressed entirely through color. All buttons, badges, date chips, and the floating bottom nav bar are maximum-radius pills.
mobile
dark
colorful
pill
productivity
task
no-shadow
geometric
bold
taskforge.com
TaskForge
Manage Your Task
Stay on top of every deadline and keep your team in sync — color tells the whole story.
Create New TaskTokens
taskforge.com
TaskForge
Manage Your Task
Stay on top of every deadline and keep your team in sync — color tells the whole story.
Create New TaskTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#E85A50"
foreground: "#1A1A1A"
card: "#F07068"
card-foreground: "#1A1A1A"
popover: "#F47C72"
popover-foreground: "#1A1A1A"
primary: "#1A1A1A"
primary-foreground: "#FFFFFF"
secondary: "#BF3C34"
secondary-foreground: "#FDF0EF"
muted: "#D44C44"
muted-foreground: "#000000"
accent: "#F0C840"
accent-foreground: "#1A1A1A"
destructive: "#7C1810"
destructive-foreground: "#FFFFFF"
border: "#C44038"
input: "#D44C44"
ring: "#F0C840"
success: "#CCE85A"
success-foreground: "#1A1A1A"
warning: "#F0C840"
warning-foreground: "#1A1A1A"
chart-1: "#CCE85A"
chart-2: "#F0C840"
chart-3: "#E85A50"
chart-4: "#F0EEEA"
chart-5: "#E89050"
palette:
- { name: "app-black", hex: "#1a1a1a", role: "background-dark" }
- { name: "card-dark", hex: "#252525", role: "surface-dark" }
- { name: "input-dark", hex: "#2a2a2a", role: "input-surface-dark" }
- { name: "border-dark", hex: "#333333", role: "border-dark" }
- { name: "muted-grey", hex: "#909090", role: "muted-text" }
- { name: "white", hex: "#ffffff", role: "ink-on-dark" }
- { name: "coral-red", hex: "#e85a50", role: "brand-form-surface" }
- { name: "coral-red-deep", hex: "#bf3c34", role: "secondary-dark" }
- { name: "coral-red-input", hex: "#d44c44", role: "input-surface-light" }
- { name: "coral-red-card", hex: "#f07068", role: "card-surface-light" }
- { name: "coral-border", hex: "#c44038", role: "border-light" }
- { name: "lime-green", hex: "#cce85a", role: "category-active" }
- { name: "amber-yellow", hex: "#f0c840", role: "category-medium-accent" }
- { name: "cream", hex: "#f0eeea", role: "category-neutral" }
- { name: "peach-orange", hex: "#e89050", role: "accent-secondary" }
- { name: "destructive-dark-red", hex: "#7c1810", role: "destructive-on-coral" }
- { name: "chart-lime", hex: "#cce85a", role: "data-viz" }
- { name: "chart-amber", hex: "#f0c840", role: "data-viz" }
- { name: "chart-coral", hex: "#e85a50", role: "data-viz" }shadcn CSS Variables
/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Plus%20Jakarta%20Sans:wght@400;500;600;700&family=DM%20Sans:wght@400;500;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");
:root {
--radius: 1.25rem;
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-sans: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--background: 4 77% 61%;
--foreground: 0 0% 10%;
--card: 4 82% 67%;
--card-foreground: 0 0% 10%;
--popover: 5 86% 70%;
--popover-foreground: 0 0% 10%;
--primary: 0 0% 10%;
--primary-foreground: 0 0% 100%;
--secondary: 3 57% 48%;
--secondary-foreground: 4 78% 96%;
--muted: 3 63% 55%;
--muted-foreground: 0 0% 0%;
--accent: 46 85% 60%;
--accent-foreground: 0 0% 10%;
--destructive: 4 77% 27%;
--destructive-foreground: 0 0% 100%;
--border: 3 56% 49%;
--input: 3 63% 55%;
--ring: 46 85% 60%;
--success: 72 76% 63%;
--success-foreground: 0 0% 10%;
--warning: 46 85% 60%;
--warning-foreground: 0 0% 10%;
--chart-1: 72 76% 63%;
--chart-2: 46 85% 60%;
--chart-3: 4 77% 61%;
--chart-4: 40 17% 93%;
--chart-5: 25 77% 61%;
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: 0 4px 16px rgba(0,0,0,0.24);
--shadow-xl: 0 8px 32px rgba(0,0,0,0.36);
--gradient-hero: linear-gradient(135deg,#e85a50 0%,#bf3c34 100%);
--gradient-brand: linear-gradient(135deg,#f0c840 0%,#e89050 100%);
--gradient-subtle: linear-gradient(180deg,#252525 0%,#1a1a1a 100%);
--duration: 200ms;
--duration-slow: 380ms;
--ease: cubic-bezier(0.34,1.56,0.64,1);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--font-weight-heading: 700;
--font-weight-body: 400;
--button-radius: 9999px;
--card-radius: 1.5rem;
--input-radius: 0.875rem;
--badge-radius: 9999px;
--border-width: 0;
--card-border-width: 0;
--input-border-width: 0;
--button-border-width: 0;
--badge-border-width: 0;
--heading-transform: none;Install Targets
Registry
/r/taskforge.jsonTailwind v4
@theme inline {
--font-heading: 'Plus Jakarta Sans', 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.5rem;
--radius-md: 0.875rem;
--radius-lg: 1.25rem;
--radius-xl: 1.75rem;
--radius-button: 9999px;
--radius-card: 1.5rem;
--radius-input: 0.875rem;
--radius-badge: 9999px;
--border-width: 0;
--card-border-width: 0;
--input-border-width: 0;
--button-border-width: 0;
--badge-border-width: 0;
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: 0 4px 16px rgba(0,0,0,0.24);
--shadow-xl: 0 8px 32px rgba(0,0,0,0.36);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--ease-kit: cubic-bezier(0.34,1.56,0.64,1);
--duration-kit: 200ms;
--duration-kit-slow: 380ms;
--gradient-hero: linear-gradient(135deg,#e85a50 0%,#bf3c34 100%);
--gradient-brand: linear-gradient(135deg,#f0c840 0%,#e89050 100%);
--gradient-subtle: linear-gradient(180deg,#252525 0%,#1a1a1a 100%);
--font-weight-heading: 700;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "taskforge",
"type": "registry:theme",
"title": "TaskForge",
"description": "A mobile-first task management design system built on a near-black app shell with vivid categorical card surfaces and a full coral-red form mode. Every interactive element is pill-shaped; depth comes from color temperature, never shadows.",
"categories": [
"mobile",
"dark",
"colorful",
"pill",
"productivity",
"task",
"no-shadow",
"geometric",
"bold"