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
Exports
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.jsonTailwind 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",