next / vite / remix
Yearsport Athletic
A high-energy, athletic design system inspired by an annual activity recap poster. It pairs a punchy vermillion-orange brand color with crisp off-white and cool-grey neutrals for a confident, data-forward editorial feel. Big condensed headlines, flat surfaces, and minimal shadows keep it sharp and performance-oriented across light and dark modes.
athletic
bold
editorial
orange
data
sport
minimal
yearsportathletic.com
Yearsport
YOUR YEAR IN SPORT
139 hours logged, every push tracked. See the full breakdown of your season.
View My RecapTokens
yearsportathletic.com
Yearsport
YOUR YEAR IN SPORT
139 hours logged, every push tracked. See the full breakdown of your season.
View My RecapTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#F3F6EF"
foreground: "#1A1817"
card: "#FFFFFF"
card-foreground: "#1A1817"
popover: "#FFFFFF"
popover-foreground: "#1A1817"
primary: "#FD3200"
primary-foreground: "#000000"
secondary: "#E6F0EF"
secondary-foreground: "#2C3231"
muted: "#E2E7DF"
muted-foreground: "#5C615B"
accent: "#FB5405"
accent-foreground: "#000000"
destructive: "#BA1A1A"
destructive-foreground: "#FFFFFF"
border: "#D4D8CF"
input: "#D4D8CF"
ring: "#FD3200"
success: "#2E7D32"
success-foreground: "#FFFFFF"
warning: "#E08600"
warning-foreground: "#1A1817"
chart-1: "#FD3200"
chart-2: "#FB5405"
chart-3: "#F18954"
chart-4: "#9B3308"
chart-5: "#747C7A"
typography:
heading: { family: "Archivo", weights: [400, 500, 600, 700] }
body: { family: "Inter", weights: [400, 500, 600, 700] }
mono: { family: "JetBrains Mono", weights: [400, 500, 700] }
scale: "major-third"
spacing:
density: "balanced"
base: "4px"
container: "1200px"
radius:
sm: "0.25rem"
md: "0.375rem"
lg: "0.5rem"
xl: "0.75rem"
components:
button: { radius: "0.375rem", shape: "rounded", fill: "solid" }
card: { radius: "0.75rem" }
input: { radius: "0.375rem" }
badge: { radius: "0.375rem" }
borderWidth: "1px"shadcn CSS Variables
/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");
:root {
--radius: 0.5rem;
--font-heading: 'Archivo', sans-serif;
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--background: 86 28% 95%;
--foreground: 20 6% 10%;
--card: 0 0% 100%;
--card-foreground: 20 6% 10%;
--popover: 0 0% 100%;
--popover-foreground: 20 6% 10%;
--primary: 12 100% 50%;
--primary-foreground: 0 0% 0%;
--secondary: 174 25% 92%;
--secondary-foreground: 170 6% 18%;
--muted: 98 14% 89%;
--muted-foreground: 110 3% 37%;
--accent: 19 97% 50%;
--accent-foreground: 0 0% 0%;
--destructive: 0 75% 42%;
--destructive-foreground: 0 0% 100%;
--border: 87 10% 83%;
--input: 87 10% 83%;
--ring: 12 100% 50%;
--success: 123 46% 34%;
--success-foreground: 0 0% 100%;
--warning: 36 100% 44%;
--warning-foreground: 20 6% 10%;
--chart-1: 12 100% 50%;
--chart-2: 19 97% 50%;
--chart-3: 20 85% 64%;
--chart-4: 18 90% 32%;
--chart-5: 165 3% 47%;
--shadow-sm: 0 1px 2px rgba(26,24,23,0.06);
--shadow-md: 0 2px 6px rgba(26,24,23,0.08);
--shadow-lg: 0 6px 16px rgba(26,24,23,0.10);
--shadow-xl: 0 12px 32px rgba(26,24,23,0.14);
--gradient-hero: linear-gradient(135deg,#fd3200 0%,#fb5405 100%);
--gradient-brand: linear-gradient(90deg,#fd3200 0%,#f18954 100%);
--gradient-subtle: linear-gradient(180deg,#f3f6ef 0%,#e6f0ef 100%);
--duration: 180ms;
--duration-slow: 320ms;
--ease: cubic-bezier(0.2,0.8,0.2,1);
--tracking-tight: -0.02em;
--tracking-normal: 0.04em;
--font-weight-heading: 700;
--font-weight-body: 400;
--button-radius: 0.375rem;
--card-radius: 0.75rem;
--input-radius: 0.375rem;
--badge-radius: 0.375rem;
--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/yearsport-athletic.jsonTailwind v4
@theme inline {
--font-heading: 'Archivo', sans-serif;
--font-sans: 'Inter', 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.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-button: 0.375rem;
--radius-card: 0.75rem;
--radius-input: 0.375rem;
--radius-badge: 0.375rem;
--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(26,24,23,0.06);
--shadow-md: 0 2px 6px rgba(26,24,23,0.08);
--shadow-lg: 0 6px 16px rgba(26,24,23,0.10);
--shadow-xl: 0 12px 32px rgba(26,24,23,0.14);
--tracking-tight: -0.02em;
--tracking-normal: 0.04em;
--ease-kit: cubic-bezier(0.2,0.8,0.2,1);
--duration-kit: 180ms;
--duration-kit-slow: 320ms;
--gradient-hero: linear-gradient(135deg,#fd3200 0%,#fb5405 100%);
--gradient-brand: linear-gradient(90deg,#fd3200 0%,#f18954 100%);
--gradient-subtle: linear-gradient(180deg,#f3f6ef 0%,#e6f0ef 100%);
--font-weight-heading: 700;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "yearsport-athletic",
"type": "registry:theme",
"title": "Yearsport Athletic",
"description": "Bold editorial sports-data design kit anchored by a vivid Strava-style orange on clean neutral surfaces.",
"categories": [
"athletic",
"bold",
"editorial",
"orange",
"data",
"sport",
"minimal"
],
"cssVars": {