Next.js / React / SvelteKit

Daniel Avery Tour Poster

Every surface uses the warm greige-putty as the full-bleed ground. Vivid orange (#DE5F2C) earns its place only in two roles: oversized display letterforms that bleed off the screen edges and small sharp-cornered inline date-chip badges. Body content is set in a clean grotesque with 1px hairline rules structuring the grid. A handwritten script annotation sits as a single decorative gesture over the structural column. Zero elevation, zero shadows, zero gradients — a print aesthetic native to digital.

music
event
editorial
poster
concert
orange
warm-neutral
flat
hairline
gig

danielaverytourposter.com

avery-poster

TOUR DATES

Summer 2024 — Select Cities

Add to CalendarTokens

danielaverytourposter.com

avery-poster

TOUR DATES

Summer 2024 — Select Cities

Add to CalendarTokens

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#C3C2B0"
    foreground: "#0F0F0D"
    card: "#CACBB7"
    card-foreground: "#0F0F0D"
    popover: "#D1D0BE"
    popover-foreground: "#0F0F0D"
    primary: "#DE5F2C"
    primary-foreground: "#0F0F0D"
    secondary: "#A8A895"
    secondary-foreground: "#0F0F0D"
    muted: "#B8B7A5"
    muted-foreground: "#3C3B34"
    accent: "#A7492D"
    accent-foreground: "#FFFFFF"
    destructive: "#C0392B"
    destructive-foreground: "#FFFFFF"
    border: "#A6A594"
    input: "#B4B3A1"
    ring: "#DE5F2C"
    success: "#4A7C59"
    success-foreground: "#FFFFFF"
    warning: "#C4870C"
    warning-foreground: "#0F0F0D"
    chart-1: "#DE5F2C"
    chart-2: "#A7492D"
    chart-3: "#5A8C70"
    chart-4: "#4278A8"
    chart-5: "#8C7A5A"
  palette:
    - { name: "putty", hex: "#C3C2B0", role: "background" }
    - { name: "putty-mid", hex: "#B8B7A5", role: "surface-muted" }
    - { name: "putty-light", hex: "#CECDB9", role: "surface-highlight" }
    - { name: "near-black", hex: "#0F0F0D", role: "ink-primary" }
    - { name: "concert-orange", hex: "#DE5F2C", role: "accent-primary" }
    - { name: "dark-terracotta", hex: "#A7492D", role: "accent-secondary" }
    - { name: "light-terracotta", hex: "#D4B7A4", role: "surface-warm" }
    - { name: "muted-sienna", hex: "#8F5E46", role: "accent-muted" }
    - { name: "warm-grey", hex: "#988576", role: "ink-muted" }
    - { name: "cream", hex: "#F0EEE0", role: "surface-lightest" }
    - { name: "pure-black", hex: "#010101", role: "ink-max" }
    - { name: "dark-canvas", hex: "#141310", role: "background-dark" }
    - { name: "warm-off-white", hex: "#E8E5D3", role: "ink-dark-mode" }
    - { name: "data-orange", hex: "#DE5F2C", role: "data-viz" }
    - { name: "data-terracotta", hex: "#A7492D", role: "data-viz" }
    - { name: "data-sage", hex: "#5A8C70", role: "data-viz" }
    - { name: "data-slate-blue", hex: "#4278A8", role: "data-viz" }
    - { name: "data-khaki", hex: "#8C7A5A", role: "data-viz" }
typography:

shadcn CSS Variables

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

:root {
  --radius: 0.25rem;
  --font-heading: 'Bebas Neue', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 57 14% 73%;
  --foreground: 60 7% 5%;
  --card: 63 16% 76%;
  --card-foreground: 60 7% 5%;
  --popover: 57 17% 78%;
  --popover-foreground: 60 7% 5%;
  --primary: 17 73% 52%;
  --primary-foreground: 60 7% 5%;
  --secondary: 60 10% 62%;
  --secondary-foreground: 60 7% 5%;
  --muted: 57 12% 68%;
  --muted-foreground: 53 7% 22%;
  --accent: 14 58% 42%;
  --accent-foreground: 0 0% 100%;
  --destructive: 6 63% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 57 9% 62%;
  --input: 57 11% 67%;
  --ring: 17 73% 52%;
  --success: 138 25% 39%;
  --success-foreground: 0 0% 100%;
  --warning: 40 88% 41%;
  --warning-foreground: 60 7% 5%;
  --chart-1: 17 73% 52%;
  --chart-2: 14 58% 42%;
  --chart-3: 146 22% 45%;
  --chart-4: 208 44% 46%;
  --chart-5: 38 22% 45%;
  --shadow-sm: 0 1px 0 rgba(15,15,13,0.10);
  --shadow-md: 0 2px 4px rgba(15,15,13,0.07);
  --shadow-lg: 0 4px 8px rgba(15,15,13,0.06);
  --shadow-xl: 0 8px 16px rgba(15,15,13,0.06);
  --gradient-hero: linear-gradient(180deg, #C3C2B0 0%, #B8B7A4 100%);
  --gradient-brand: linear-gradient(135deg, #DE5F2C 0%, #A7492D 100%);
  --gradient-subtle: linear-gradient(180deg, #CECDB9 0%, #C3C2B0 100%);
  --duration: 150ms;
  --duration-slow: 300ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --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: 0.125rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: uppercase;

Install Targets

Registry

/r/daniel-avery-tour-poster.json

Tailwind v4

@theme inline {
  --font-heading: 'Bebas Neue', sans-serif;
  --font-sans: 'DM 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: 0rem;
  --radius-md: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.375rem;
  --radius-button: 0rem;
  --radius-card: 0rem;
  --radius-input: 0rem;
  --radius-badge: 0.125rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --shadow-sm: 0 1px 0 rgba(15,15,13,0.10);
  --shadow-md: 0 2px 4px rgba(15,15,13,0.07);
  --shadow-lg: 0 4px 8px rgba(15,15,13,0.06);
  --shadow-xl: 0 8px 16px rgba(15,15,13,0.06);
  --tracking-tight: -0.01em;
  --tracking-normal: 0.05em;
  --ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-kit: 150ms;
  --duration-kit-slow: 300ms;
  --gradient-hero: linear-gradient(180deg, #C3C2B0 0%, #B8B7A4 100%);
  --gradient-brand: linear-gradient(135deg, #DE5F2C 0%, #A7492D 100%);
  --gradient-subtle: linear-gradient(180deg, #CECDB9 0%, #C3C2B0 100%);
  --font-weight-heading: 900;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "daniel-avery-tour-poster",
  "type": "registry:theme",
  "title": "Daniel Avery Tour Poster",
  "description": "A gig-poster editorial kit built on a pervasive warm putty canvas, vivid concert-orange display type, and a hairline-rule grid — distilled from the language of silkscreen touring handbills.",
  "categories": [
    "music",
    "event",
    "editorial",
    "poster",
    "concert",
    "orange",
    "warm-neutral",
    "flat",
    "hairline",