Next.js / Remix / SvelteKit
Redline
Redline emerges from the world of motorsport and automotive culture — a dark, high-contrast editorial platform where near-black charcoal forms the chassis and a single vivid orange-red (#c94422) punctuates recommended and featured card sections. Large full-bleed photography panels dominate the hero real estate; dark content cards stack alongside; crisp white widget cards provide moments of lift. Typography is clean and geometric — sentence-case headlines, uppercase eyebrow labels, and strong hierarchy. The diagonal arrow icon (↗) recurs as a navigational motif; oversized date numerals anchor metadata widgets. The result reads like a curated print magazine reimagined as software.
automotive
editorial
dark
orange-red
photography
news
dashboard
bold
magazine
redline.com
redline
The Art of the Road
Curated automotive stories, reviews, and culture built for enthusiasts who drive with purpose.
Explore NowTokens
redline.com
redline
The Art of the Road
Curated automotive stories, reviews, and culture built for enthusiasts who drive with purpose.
Explore NowTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#FAF8F5"
foreground: "#1A1916"
card: "#FFFFFF"
card-foreground: "#1A1916"
popover: "#FFFFFF"
popover-foreground: "#1A1916"
primary: "#C94422"
primary-foreground: "#FFFFFF"
secondary: "#F2EDE7"
secondary-foreground: "#3A3730"
muted: "#F0ECE6"
muted-foreground: "#6A6458"
accent: "#F25500"
accent-foreground: "#1A1916"
destructive: "#DC2626"
destructive-foreground: "#FFFFFF"
border: "#E0DBD2"
input: "#F0ECE6"
ring: "#C94422"
success: "#15803D"
success-foreground: "#FFFFFF"
warning: "#D97706"
warning-foreground: "#1A1916"
chart-1: "#C94422"
chart-2: "#F25500"
chart-3: "#D8724C"
chart-4: "#AA7124"
chart-5: "#2E6846"
palette:
- { name: "brand-orange-red", hex: "#c94422", role: "primary" }
- { name: "brand-vivid-orange", hex: "#f25500", role: "accent" }
- { name: "brand-deep-red", hex: "#8b2e14", role: "brand-dark" }
- { name: "shell-dark", hex: "#1c1a18", role: "background" }
- { name: "card-dark", hex: "#252220", role: "surface" }
- { name: "card-mid", hex: "#2a2724", role: "surface" }
- { name: "card-raised", hex: "#2e2b27", role: "surface" }
- { name: "ink-primary", hex: "#f0ede8", role: "foreground" }
- { name: "ink-secondary", hex: "#c8c4bc", role: "foreground-muted" }
- { name: "ink-muted", hex: "#9e9892", role: "foreground-subtle" }
- { name: "white-card", hex: "#ffffff", role: "surface-light" }
- { name: "warm-cream", hex: "#faf8f5", role: "background-light" }
- { name: "ink-dark", hex: "#1a1916", role: "foreground-light" }
- { name: "ink-dark-mid", hex: "#3a3730", role: "foreground-muted-light" }
- { name: "muted-ink-light", hex: "#6a6458", role: "foreground-subtle-light" }
- { name: "border-dark", hex: "#3e3b36", role: "border" }
- { name: "border-light", hex: "#e0dbd2", role: "border-light" }
- { name: "muted-surface-light", hex: "#f0ece6", role: "surface-muted" }
- { name: "terracotta", hex: "#d8724c", 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: 0.875rem;
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-sans: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--background: 36 33% 97%;
--foreground: 45 8% 9%;
--card: 0 0% 100%;
--card-foreground: 45 8% 9%;
--popover: 0 0% 100%;
--popover-foreground: 45 8% 9%;
--primary: 12 71% 46%;
--primary-foreground: 0 0% 100%;
--secondary: 33 30% 93%;
--secondary-foreground: 42 9% 21%;
--muted: 36 25% 92%;
--muted-foreground: 40 9% 38%;
--accent: 21 100% 47%;
--accent-foreground: 45 8% 9%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 39 18% 85%;
--input: 36 25% 92%;
--ring: 12 71% 46%;
--success: 142 72% 29%;
--success-foreground: 0 0% 100%;
--warning: 32 95% 44%;
--warning-foreground: 45 8% 9%;
--chart-1: 12 71% 46%;
--chart-2: 21 100% 47%;
--chart-3: 16 64% 57%;
--chart-4: 34 65% 40%;
--chart-5: 145 39% 29%;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.50);
--shadow-md: 0 4px 16px rgba(0,0,0,0.60);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.65);
--shadow-xl: 0 20px 60px rgba(0,0,0,0.75);
--gradient-hero: linear-gradient(135deg,#c94422 0%,#f25500 100%);
--gradient-brand: linear-gradient(180deg,#c94422 0%,#8b2e14 100%);
--gradient-subtle: linear-gradient(180deg,rgba(201,68,34,0.08) 0%,rgba(201,68,34,0) 100%);
--duration: 180ms;
--duration-slow: 360ms;
--ease: cubic-bezier(0.4,0,0.2,1);
--tracking-tight: -0.025em;
--tracking-normal: 0em;
--font-weight-heading: 700;
--font-weight-body: 400;
--button-radius: 0.5rem;
--card-radius: 0.875rem;
--input-radius: 0.5rem;
--badge-radius: 9999px;
--border-width: 1px;
--card-border-width: 0;
--input-border-width: 1px;
--button-border-width: 1px;
--badge-border-width: 0;
--heading-transform: none;Install Targets
Registry
/r/redline.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.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.875rem;
--radius-xl: 1.25rem;
--radius-button: 0.5rem;
--radius-card: 0.875rem;
--radius-input: 0.5rem;
--radius-badge: 9999px;
--border-width: 1px;
--card-border-width: 0;
--input-border-width: 1px;
--button-border-width: 1px;
--badge-border-width: 0;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.50);
--shadow-md: 0 4px 16px rgba(0,0,0,0.60);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.65);
--shadow-xl: 0 20px 60px rgba(0,0,0,0.75);
--tracking-tight: -0.025em;
--tracking-normal: 0em;
--ease-kit: cubic-bezier(0.4,0,0.2,1);
--duration-kit: 180ms;
--duration-kit-slow: 360ms;
--gradient-hero: linear-gradient(135deg,#c94422 0%,#f25500 100%);
--gradient-brand: linear-gradient(180deg,#c94422 0%,#8b2e14 100%);
--gradient-subtle: linear-gradient(180deg,rgba(201,68,34,0.08) 0%,rgba(201,68,34,0) 100%);
--font-weight-heading: 700;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "redline",
"type": "registry:theme",
"title": "Redline",
"description": "A dark-native automotive editorial design system anchored by near-black charcoal surfaces and vivid orange-red color-block feature cards, pairing full-bleed photography with a precise editorial grid of mixed-size panels.",
"categories": [
"automotive",
"editorial",
"dark",
"orange-red",
"photography",
"news",
"dashboard",
"bold",
"magazine"