Next.js / Remix / Astro
OffCourt Dark Court
Built from the OffCourt visual language: a near-black (#0a0c0e) background that swallows the full screen with mint green (#01c88f) used as the literal TEXT color across all type — logo, headlines, body paragraphs, and labels. The only secondary surface is a full-bleed mint-green band at the foot of the page that inverts the relationship (black ink on green). Interactive elements are universally pill-shaped. Eyebrow labels are ALL CAPS with em-dash separators. Typography is a heavy, rounded geometric grotesque at oversized scale. The design reads like a performance-brand poster: bold, flat, high-contrast, zero ornamentation.
dark
athletic
mint
bold
flat
performance
editorial
DTC
high-contrast
monochromatic
offcourtdarkcourt.com
OffCourt
Performance Starts Here
Body products engineered for men who train hard and recover harder.
Get Early AccessTokens
offcourtdarkcourt.com
OffCourt
Performance Starts Here
Body products engineered for men who train hard and recover harder.
Get Early AccessTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#01C88F"
foreground: "#060A0A"
card: "#00B87E"
card-foreground: "#060A0A"
popover: "#00AC74"
popover-foreground: "#060A0A"
primary: "#060A0A"
primary-foreground: "#F0FDF8"
secondary: "#009D6B"
secondary-foreground: "#060A0A"
muted: "#00B07B"
muted-foreground: "#000000"
accent: "#056B4A"
accent-foreground: "#E8FDF4"
destructive: "#B91C1C"
destructive-foreground: "#FFFFFF"
border: "#00A06B"
input: "#00B07B"
ring: "#060A0A"
success: "#064E35"
success-foreground: "#ECFDF5"
warning: "#92400E"
warning-foreground: "#FEF3C7"
chart-1: "#060A0A"
chart-2: "#1E3A5F"
chart-3: "#6B3049"
chart-4: "#3D536B"
chart-5: "#443260"
palette:
- { name: "brand-mint", hex: "#01c88f", role: "primary" }
- { name: "bright-mint", hex: "#11d49f", role: "accent" }
- { name: "dark-mint", hex: "#0b9c6c", role: "dark-vibrant" }
- { name: "deep-teal", hex: "#2f6b60", role: "dark-muted" }
- { name: "near-black", hex: "#0a0c0e", role: "background-dark" }
- { name: "off-black-a", hex: "#0c0e11", role: "surface-dark" }
- { name: "off-black-b", hex: "#0b0c0e", role: "surface-dark" }
- { name: "off-black-c", hex: "#060a0a", role: "ink-dark" }
- { name: "dark-charcoal", hex: "#0c1112", role: "surface-variant" }
- { name: "slate-teal", hex: "#627886", role: "muted" }
- { name: "muted-slate", hex: "#5a7683", role: "muted" }
- { name: "ice-blue-green", hex: "#93cecf", role: "light-vibrant" }
- { name: "light-silver", hex: "#b8becb", role: "light-muted" }
- { name: "pearl", hex: "#b8cee4", role: "light-accent" }
- { name: "mauve", hex: "#c3bdc5", role: "light-neutral" }
- { name: "burgundy", hex: "#833845", role: "destructive-alt" }
- { name: "card-dark", hex: "#0f1512", role: "card-surface" }
- { name: "muted-dark", hex: "#0d1612", role: "muted-surface" }
- { name: "border-dark", hex: "#182b21", role: "border" }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=Space%20Mono:wght@400;700&display=swap");
:root {
--radius: 0.75rem;
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-sans: 'Plus Jakarta Sans', sans-serif;
--font-mono: 'Space Mono', monospace;
--background: 163 99% 39%;
--foreground: 180 25% 3%;
--card: 161 100% 36%;
--card-foreground: 180 25% 3%;
--popover: 160 100% 34%;
--popover-foreground: 180 25% 3%;
--primary: 180 25% 3%;
--primary-foreground: 157 76% 97%;
--secondary: 161 100% 31%;
--secondary-foreground: 180 25% 3%;
--muted: 162 100% 35%;
--muted-foreground: 0 0% 0%;
--accent: 161 91% 22%;
--accent-foreground: 154 84% 95%;
--destructive: 0 74% 42%;
--destructive-foreground: 0 0% 100%;
--border: 160 100% 31%;
--input: 162 100% 35%;
--ring: 180 25% 3%;
--success: 159 86% 16%;
--success-foreground: 152 81% 96%;
--warning: 23 83% 31%;
--warning-foreground: 48 96% 89%;
--chart-1: 180 25% 3%;
--chart-2: 214 52% 25%;
--chart-3: 335 38% 30%;
--chart-4: 211 27% 33%;
--chart-5: 263 32% 29%;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
--shadow-md: 0 4px 16px rgba(0,0,0,0.7);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.85);
--shadow-xl: 0 20px 60px rgba(0,0,0,0.95);
--gradient-hero: linear-gradient(180deg, #0a0c0e 0%, #0b1410 60%, #0a0c0e 100%);
--gradient-brand: linear-gradient(135deg, #01c88f 0%, #11d49f 100%);
--gradient-subtle: linear-gradient(180deg, #0f1512 0%, #0a0c0e 100%);
--duration: 200ms;
--duration-slow: 400ms;
--ease: cubic-bezier(0.25, 0, 0, 1);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--font-weight-heading: 800;
--font-weight-body: 500;
--button-radius: 9999px;
--card-radius: 0.5rem;
--input-radius: 9999px;
--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/offcourt-dark-court.jsonTailwind v4
@theme inline {
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-sans: 'Plus Jakarta Sans', sans-serif;
--font-mono: 'Space 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: 9999px;
--radius-card: 0.5rem;
--radius-input: 9999px;
--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 rgba(0,0,0,0.5);
--shadow-md: 0 4px 16px rgba(0,0,0,0.7);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.85);
--shadow-xl: 0 20px 60px rgba(0,0,0,0.95);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--ease-kit: cubic-bezier(0.25, 0, 0, 1);
--duration-kit: 200ms;
--duration-kit-slow: 400ms;
--gradient-hero: linear-gradient(180deg, #0a0c0e 0%, #0b1410 60%, #0a0c0e 100%);
--gradient-brand: linear-gradient(135deg, #01c88f 0%, #11d49f 100%);
--gradient-subtle: linear-gradient(180deg, #0f1512 0%, #0a0c0e 100%);
--font-weight-heading: 800;
--font-weight-body: 500;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "offcourt-dark-court",
"type": "registry:theme",
"title": "OffCourt Dark Court",
"description": "A high-impact dark-surface athletic brand kit where near-black is the pervasive canvas and electric mint green serves as the primary ink color — applied to both display headings and body copy, not merely to accents. The footer section inverts to a full mint-green surface with near-black text and a dark pill CTA, creating a bold two-tone identity system.",
"categories": [
"dark",
"athletic",
"mint",
"bold",
"flat",
"performance",
"editorial",
"DTC",
"high-contrast",