Next.js / React / SvelteKit

Olympic Ticket

Derived from a Paris 2024 Olympics ticket stub rendered in the Swiss International Typographic Style. The kit's vocabulary is: oversized date numerals as the hero element, a vivid cobalt blue (#2898fe) band as the primary content surface with white text and solid white pictogram silhouettes, multilingual metadata stacks prefixed by uppercase field codes (E:, A:, Seat:), sharp corners on every component, and 1px hairline rules as the sole dividing device. Every surface is flat. Every corner is zero-radius. The blue is never muddied.

Use this kit Customize in Studio Download DESIGN.md

swiss-style

olympic

flat

editorial

ticket

sports

bold

blue

grotesque

information-dense

olympicticket.com

OlymTix

29/07

E: Opening Ceremony — E: Cérémonie d'ouverture

View TicketTokens

olympicticket.com

OlymTix

29/07

E: Opening Ceremony — E: Cérémonie d'ouverture

View TicketTokens

Exports

DESIGN.md DTCG tokens JSON CSS variables Tailwind v3 config Tailwind v4 theme shadcn registry JSON Registry install endpoint

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F1F1F1"
    foreground: "#111111"
    card: "#FFFFFF"
    card-foreground: "#111111"
    popover: "#FFFFFF"
    popover-foreground: "#111111"
    primary: "#2898FE"
    primary-foreground: "#000000"
    secondary: "#D4D4D4"
    secondary-foreground: "#111111"
    muted: "#E8E8E8"
    muted-foreground: "#555555"
    accent: "#71BCEE"
    accent-foreground: "#000000"
    destructive: "#DC2626"
    destructive-foreground: "#FFFFFF"
    border: "#D4D4D4"
    input: "#E0E0E0"
    ring: "#2898FE"
    success: "#15803D"
    success-foreground: "#FFFFFF"
    warning: "#B45309"
    warning-foreground: "#FFFFFF"
    chart-1: "#2898FE"
    chart-2: "#71BCEE"
    chart-3: "#234375"
    chart-4: "#7C7C7C"
    chart-5: "#111111"
  palette:
    - { name: "canvas-grey", hex: "#f1f1f1", role: "surface" }
    - { name: "olympic-blue", hex: "#2898fe", role: "brand" }
    - { name: "olympic-blue-alt", hex: "#289afe", role: "brand" }
    - { name: "white", hex: "#ffffff", role: "surface" }
    - { name: "near-black", hex: "#111111", role: "ink" }
    - { name: "silver-panel", hex: "#cacaca", role: "surface" }
    - { name: "sky-blue", hex: "#71bcee", role: "accent" }
    - { name: "blue-light", hex: "#84c3f3", role: "accent" }
    - { name: "ice-blue", hex: "#e3f1f8", role: "surface" }
    - { name: "slate-muted", hex: "#96a9b9", role: "muted" }
    - { name: "dark-navy", hex: "#234375", role: "deep" }
    - { name: "mid-grey", hex: "#7c7c7c", role: "muted" }
    - { name: "dark-ink", hex: "#444444", role: "ink" }
    - { name: "blue-vibrant", hex: "#2497f9", role: "brand" }
    - { name: "data-cobalt", hex: "#2898fe", role: "data-viz" }
    - { name: "data-sky", hex: "#71bcee", role: "data-viz" }
    - { name: "data-navy", hex: "#234375", role: "data-viz" }
    - { name: "data-slate", hex: "#96a9b9", role: "data-viz" }
    - { name: "data-charcoal", hex: "#444444", 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=Space%20Grotesk:wght@400;500;700&family=Space%20Mono:wght@400;700&display=swap");

:root {
  --radius: 0rem;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 0 0% 95%;
  --foreground: 0 0% 7%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --primary: 209 99% 58%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 83%;
  --secondary-foreground: 0 0% 7%;
  --muted: 0 0% 91%;
  --muted-foreground: 0 0% 33%;
  --accent: 204 79% 69%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 83%;
  --input: 0 0% 88%;
  --ring: 209 99% 58%;
  --success: 142 72% 29%;
  --success-foreground: 0 0% 100%;
  --warning: 26 90% 37%;
  --warning-foreground: 0 0% 100%;
  --chart-1: 209 99% 58%;
  --chart-2: 204 79% 69%;
  --chart-3: 217 54% 30%;
  --chart-4: 0 0% 49%;
  --chart-5: 0 0% 7%;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 14px rgba(0,0,0,0.10);
  --shadow-xl: 0 8px 28px rgba(0,0,0,0.12);
  --gradient-hero: linear-gradient(180deg, #f1f1f1 0%, #e8e8e8 100%);
  --gradient-brand: linear-gradient(135deg, #2898fe 0%, #71bcee 100%);
  --gradient-subtle: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
  --duration: 180ms;
  --duration-slow: 360ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 800;
  --font-weight-body: 400;
  --button-radius: 0rem;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --badge-radius: 0rem;
  --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/olympic-ticket.json

Tailwind v4

@theme inline {
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-sans: 'Space Grotesk', 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: 0rem;
  --radius-md: 0rem;
  --radius-lg: 0rem;
  --radius-xl: 0rem;
  --radius-button: 0rem;
  --radius-card: 0rem;
  --radius-input: 0rem;
  --radius-badge: 0rem;
  --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.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 14px rgba(0,0,0,0.10);
  --shadow-xl: 0 8px 28px rgba(0,0,0,0.12);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-kit: 180ms;
  --duration-kit-slow: 360ms;
  --gradient-hero: linear-gradient(180deg, #f1f1f1 0%, #e8e8e8 100%);
  --gradient-brand: linear-gradient(135deg, #2898fe 0%, #71bcee 100%);
  --gradient-subtle: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
  --font-weight-heading: 800;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "olympic-ticket",
  "type": "registry:theme",
  "title": "Olympic Ticket",
  "description": "A Swiss-modernist event ticket system anchored in vivid Olympic blue, built on alternating horizontal surface bands — white display, cobalt content, grey header — structured, information-dense, and uncompromisingly flat.",
  "categories": [
    "swiss-style",
    "olympic",
    "flat",
    "editorial",
    "ticket",
    "sports",
    "bold",
    "blue",
    "grotesque",