Identity Forge
Next.js / Remix / SvelteKit

Mauve Broadcast

Inspired by a flat radio broadcast schedule poster rendered entirely on a single lavender-mauve field. Oversized Anton display headings in jet-black dominate each date section at poster scale, while Space Mono body text carries every show listing in monospace precision. Zero border-radius, no shadows, no cards — only typographic contrast and a two-column schedule grid define the layout. Beloved Radio's editorial boldness made into a repeatable system.

Use this kitCustomize in StudioDownload DESIGN.md
color-surface
flat
poster
editorial
broadcast
monospace
condensed
purple
bold
all-caps
sharp

mauvebroadcast.com

Signal

JAN — 20

FLAMMIN OUT • 10AM-11AM • CST

VIEW FULL SCHEDULETokens

mauvebroadcast.com

Signal

JAN — 20

FLAMMIN OUT • 10AM-11AM • CST

VIEW FULL SCHEDULETokens

Exports

DESIGN.mdDTCG tokens JSONCSS variablesTailwind v3 configTailwind v4 themeshadcn registry JSONRegistry install endpoint

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#AA80B2"
    foreground: "#0B140B"
    card: "#A07AAA"
    card-foreground: "#0B140B"
    popover: "#B690BE"
    popover-foreground: "#0B140B"
    primary: "#1A0F1C"
    primary-foreground: "#F0E8F2"
    secondary: "#C4A0CC"
    secondary-foreground: "#1A0F1C"
    muted: "#7E6086"
    muted-foreground: "#FFFFFF"
    accent: "#94609E"
    accent-foreground: "#FFFFFF"
    destructive: "#B83232"
    destructive-foreground: "#FFFFFF"
    border: "#1A0F1C"
    input: "#1A0F1C"
    ring: "#94609E"
    success: "#2E6B27"
    success-foreground: "#FFFFFF"
    warning: "#B87820"
    warning-foreground: "#000000"
    chart-1: "#94609E"
    chart-2: "#4D3252"
    chart-3: "#C7ACCC"
    chart-4: "#E8D4EC"
    chart-5: "#6B4872"
  palette:
    - { name: "purple-surface", hex: "#aa80b2", role: "background" }
    - { name: "purple-surface-mid", hex: "#ab84b3", role: "background-variant" }
    - { name: "purple-surface-warm", hex: "#ae87b6", role: "background-variant" }
    - { name: "purple-surface-deep", hex: "#a97eb0", role: "background-variant" }
    - { name: "purple-vibrant", hex: "#94609e", role: "accent" }
    - { name: "purple-dark", hex: "#4d3252", role: "dark-accent" }
    - { name: "purple-light", hex: "#c7accc", role: "light-accent" }
    - { name: "purple-muted", hex: "#ac7cb3", role: "muted" }
    - { name: "dark-muted", hex: "#4c3d44", role: "dark-muted" }
    - { name: "purple-light-muted", hex: "#ac84b4", role: "light-muted" }
    - { name: "ink-black", hex: "#0b140b", role: "foreground" }
    - { name: "off-white", hex: "#f0e8f2", role: "light-foreground" }
    - { name: "near-black", hex: "#1a0f1c", role: "primary-interactive" }
    - { name: "pale-lavender", hex: "#e8d4ec", role: "light-surface" }
    - { name: "mid-purple", hex: "#6b4872", role: "data-viz" }
typography:
  heading: { family: "Anton", weights: [400] }
  body: { family: "Space Mono", weights: [400, 700] }
  mono: { family: "Space Mono", weights: [400, 700] }

shadcn CSS Variables

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Anton:wght@400&family=Space%20Mono:wght@400;700&display=swap");

:root {
  --radius: 0rem;
  --font-heading: 'Anton', sans-serif;
  --font-sans: 'Space Mono', monospace;
  --font-mono: 'Space Mono', monospace;
  --background: 290 25% 60%;
  --foreground: 120 29% 6%;
  --card: 288 22% 57%;
  --card-foreground: 120 29% 6%;
  --popover: 290 26% 65%;
  --popover-foreground: 120 29% 6%;
  --primary: 291 30% 8%;
  --primary-foreground: 288 28% 93%;
  --secondary: 289 30% 71%;
  --secondary-foreground: 291 30% 8%;
  --muted: 287 17% 45%;
  --muted-foreground: 0 0% 100%;
  --accent: 290 24% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 57% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 291 30% 8%;
  --input: 291 30% 8%;
  --ring: 290 24% 50%;
  --success: 114 47% 29%;
  --success-foreground: 0 0% 100%;
  --warning: 35 70% 42%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 290 24% 50%;
  --chart-2: 291 24% 26%;
  --chart-3: 291 24% 74%;
  --chart-4: 290 39% 88%;
  --chart-5: 290 23% 36%;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --gradient-hero: linear-gradient(180deg, #aa80b2 0%, #94609e 100%);
  --gradient-brand: linear-gradient(135deg, #c7accc 0%, #aa80b2 50%, #94609e 100%);
  --gradient-subtle: linear-gradient(180deg, #aa80b2 0%, #a07aaa 100%);
  --duration: 120ms;
  --duration-slow: 250ms;
  --ease: linear;
  --tracking-tight: -0.01em;
  --tracking-normal: 0.05em;
  --font-weight-heading: 900;
  --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: 0;
  --badge-border-width: 1px;
  --heading-transform: uppercase;

Install Targets

Registry

/r/mauve-broadcast.json

Tailwind v4

@theme inline {
  --font-heading: 'Anton', sans-serif;
  --font-sans: 'Space Mono', monospace;
  --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: 0;
  --badge-border-width: 1px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --tracking-tight: -0.01em;
  --tracking-normal: 0.05em;
  --ease-kit: linear;
  --duration-kit: 120ms;
  --duration-kit-slow: 250ms;
  --gradient-hero: linear-gradient(180deg, #aa80b2 0%, #94609e 100%);
  --gradient-brand: linear-gradient(135deg, #c7accc 0%, #aa80b2 50%, #94609e 100%);
  --gradient-subtle: linear-gradient(180deg, #aa80b2 0%, #a07aaa 100%);
  --font-weight-heading: 900;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mauve-broadcast",
  "type": "registry:theme",
  "title": "Mauve Broadcast",
  "description": "A pervasive lavender-mauve color surface with jet-black poster typography — the purple IS the canvas, every word set directly on it",
  "categories": [
    "color-surface",
    "flat",
    "poster",
    "editorial",
    "broadcast",
    "monospace",
    "condensed",
    "purple",
    "bold",