Next.js / React / Astro
Creative Leadership Salon
Derived from a typographically rigorous event-archive interface, this kit uses five stacked full-bleed section bands as the foundational layout device. There is no white canvas: every surface is intentional — off-white cream, sandy peach, lavender gray, terracotta, or near-black charcoal. ALL-CAPS Barlow Condensed ExtraBold drives every display element. A numbered index system with oversized Nº numerals marks every item. Hairline vertical rules divide columns. Shadows, rounded corners, and gradient fills are structurally absent.
editorial
swiss-modernism
condensed-grotesque
color-surface
alternating-bands
all-caps
sharp
flat
event
cultural
index
creativeleadershipsalon.com
CL Salon
WE ARE GRATEFUL FOR THESE INSPIRING EVENINGS
A curated salon series where creative leaders shape the future of ideas
I WANT TO BE INVITEDTokens
creativeleadershipsalon.com
CL Salon
WE ARE GRATEFUL FOR THESE INSPIRING EVENINGS
A curated salon series where creative leaders shape the future of ideas
I WANT TO BE INVITEDTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#E7E7DD"
foreground: "#252116"
card: "#E7BD93"
card-foreground: "#252116"
popover: "#EEEBE3"
popover-foreground: "#252116"
primary: "#D65243"
primary-foreground: "#0F0C07"
secondary: "#BDBDC5"
secondary-foreground: "#252116"
muted: "#D4C5AC"
muted-foreground: "#5A4E3A"
accent: "#883D30"
accent-foreground: "#F0EBE3"
destructive: "#B91C1C"
destructive-foreground: "#FFFFFF"
border: "#C4C0B5"
input: "#C4C0B5"
ring: "#D65243"
success: "#2D6A4F"
success-foreground: "#FFFFFF"
warning: "#C07D2E"
warning-foreground: "#252116"
chart-1: "#D65243"
chart-2: "#BDBDC5"
chart-3: "#E7BD93"
chart-4: "#883D30"
chart-5: "#846D57"
palette:
- { name: "terracotta", hex: "#d65243", role: "brand-surface" }
- { name: "sandy-peach", hex: "#e7bd93", role: "section-surface" }
- { name: "lavender-gray", hex: "#bdbdc5", role: "section-surface" }
- { name: "off-white-cream", hex: "#e7e7dd", role: "header-surface" }
- { name: "near-black-charcoal", hex: "#252116", role: "footer-surface" }
- { name: "dark-muted-charcoal", hex: "#282619", role: "surface-variant" }
- { name: "dark-terracotta", hex: "#883d30", role: "accent-dark" }
- { name: "warm-muted-brown", hex: "#846d57", role: "muted" }
- { name: "light-lavender", hex: "#cacbd4", role: "border" }
- { name: "warm-off-white", hex: "#e7e8df", role: "surface-light" }
- { name: "peach-light", hex: "#e3bb94", role: "surface-variant" }
- { name: "data-terracotta", hex: "#d65243", role: "data-viz" }
- { name: "data-lavender", hex: "#bdbdc5", role: "data-viz" }
- { name: "data-sandy", hex: "#e7bd93", role: "data-viz" }
- { name: "data-dark-red", hex: "#883d30", role: "data-viz" }
- { name: "data-brown", hex: "#846d57", role: "data-viz" }
typography:
heading: { family: "Barlow Condensed", weights: [400, 500, 600, 700] }
body: { family: "Barlow", weights: [400, 500, 600, 700] }shadcn CSS Variables
/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Barlow%20Condensed:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Space%20Mono:wght@400;700&display=swap");
:root {
--radius: 0rem;
--font-heading: 'Barlow Condensed', sans-serif;
--font-sans: 'Barlow', sans-serif;
--font-mono: 'Space Mono', monospace;
--background: 60 17% 89%;
--foreground: 44 25% 12%;
--card: 30 64% 74%;
--card-foreground: 44 25% 12%;
--popover: 44 24% 91%;
--popover-foreground: 44 25% 12%;
--primary: 6 64% 55%;
--primary-foreground: 38 36% 4%;
--secondary: 240 6% 76%;
--secondary-foreground: 44 25% 12%;
--muted: 37 32% 75%;
--muted-foreground: 38 22% 29%;
--accent: 9 48% 36%;
--accent-foreground: 37 30% 92%;
--destructive: 0 74% 42%;
--destructive-foreground: 0 0% 100%;
--border: 44 11% 74%;
--input: 44 11% 74%;
--ring: 6 64% 55%;
--success: 153 40% 30%;
--success-foreground: 0 0% 100%;
--warning: 32 61% 47%;
--warning-foreground: 44 25% 12%;
--chart-1: 6 64% 55%;
--chart-2: 240 6% 76%;
--chart-3: 30 64% 74%;
--chart-4: 9 48% 36%;
--chart-5: 29 21% 43%;
--shadow-sm: 0 1px 2px 0 rgba(37,33,22,0.08);
--shadow-md: 0 2px 4px 0 rgba(37,33,22,0.10);
--shadow-lg: 0 4px 8px 0 rgba(37,33,22,0.12);
--shadow-xl: 0 8px 16px 0 rgba(37,33,22,0.15);
--gradient-hero: linear-gradient(180deg, #d65243 0%, #883d30 100%);
--gradient-brand: linear-gradient(135deg, #d65243 0%, #e7bd93 100%);
--gradient-subtle: linear-gradient(180deg, #e7e7dd 0%, #bdbdc5 100%);
--duration: 150ms;
--duration-slow: 300ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--tracking-tight: 0.02em;
--tracking-normal: 0.03em;
--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: uppercase;Install Targets
Registry
/r/creative-leadership-salon.jsonTailwind v4
@theme inline {
--font-heading: 'Barlow Condensed', sans-serif;
--font-sans: 'Barlow', 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 0 rgba(37,33,22,0.08);
--shadow-md: 0 2px 4px 0 rgba(37,33,22,0.10);
--shadow-lg: 0 4px 8px 0 rgba(37,33,22,0.12);
--shadow-xl: 0 8px 16px 0 rgba(37,33,22,0.15);
--tracking-tight: 0.02em;
--tracking-normal: 0.03em;
--ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
--duration-kit: 150ms;
--duration-kit-slow: 300ms;
--gradient-hero: linear-gradient(180deg, #d65243 0%, #883d30 100%);
--gradient-brand: linear-gradient(135deg, #d65243 0%, #e7bd93 100%);
--gradient-subtle: linear-gradient(180deg, #e7e7dd 0%, #bdbdc5 100%);
--font-weight-heading: 800;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "creative-leadership-salon",
"type": "registry:theme",
"title": "Creative Leadership Salon",
"description": "An editorial Swiss-modernist design system built on full-bleed alternating color bands and oversized condensed grotesque typography — sharp, grid-disciplined, and zero-compromise for cultural event and salon platforms.",
"categories": [
"editorial",
"swiss-modernism",
"condensed-grotesque",
"color-surface",
"alternating-bands",
"all-caps",
"sharp",
"flat",
"event",