@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/business-tiles/tokens.ts

@@ -0,0 +1,178 @@
+import type { Direction } from "../schema";
+
+export const businessTiles: Direction = {
+  name: "business-tiles",
+  ethos:
+    "SAP Fiori 3 principles · Fiori tile dashboards · S/4HANA enterprise utility · 72-typeface humanism · process-friendly enterprise",
+  references: [
+    { brand: "SAP Fiori 3", trait: "tile-dashboard design language, cool-gray canvas, SAP blue accent" },
+    { brand: "S/4HANA", trait: "marketing register for the ERP suite — enterprise utility made approachable" },
+    { brand: "SAP Ariba", trait: "procurement screens, table-dense process surfaces" },
+    { brand: "SAP Concur", trait: "expense surfaces, friendly forms over rigid workflow" },
+    { brand: "SAP Build Apps", trait: "low-code tooling, tile-first information architecture" },
+  ],
+  feel:
+    "Enterprise productivity that doesn't feel hostile. SAP's iconic Fiori tile dashboard pattern. " +
+    "Soft cool-gray backgrounds, SAP-blue signal color, friendly rounded utility. Reads as 'ERP that's " +
+    "actually been used by humans recently.' The opposite of stuffy enterprise — process-aware but approachable.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["72", "SAP72", "system-ui", "-apple-system", "sans-serif"],
+      from: "Inter as open-source approximation of SAP's proprietary 72 typeface — licensed SAP customers should swap 72 in",
+      googleFont: "Inter:wght@400;500;600;700",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["72", "SAP72", "system-ui", "-apple-system", "sans-serif"],
+      from: "Inter body — humanist sans, matches the 72-typeface rhythm Fiori expects",
+      googleFont: "Inter:wght@400;500;600",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["72 Mono", "SAP72 Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "JetBrains Mono — used for IDs, document numbers, posting keys, GL accounts",
+      googleFont: "JetBrains+Mono:wght@400;500",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.005em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "ss01"',
+    h1ScaleClamp: "clamp(1.5rem, 3vw, 2.25rem)",
+    bodyBaseSize: "0.875rem",
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "213 14% 95%", from: "Fiori cool-gray canvas — distinguishes ERP from marketing" },
+    foreground: { hsl: "220 35% 22%", from: "deep slate — Fiori text-primary" },
+    card: { hsl: "0 0% 100%", from: "Fiori tile surface — white tile on cool-gray canvas" },
+    popover: { hsl: "0 0% 100%", from: "Fiori menus and popovers — same tile-white" },
+
+    primary: { hsl: "218 100% 35%", from: "SAP blue — the brand mark color, Fiori interactive accent" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on SAP blue" },
+
+    secondary: { hsl: "213 14% 90%", from: "Fiori tertiary surface — gray a notch darker than canvas" },
+    secondaryForeground: { hsl: "220 35% 22%", from: "deep slate on secondary gray" },
+    muted: { hsl: "213 14% 90%", from: "Fiori muted — same as secondary" },
+    mutedForeground: { hsl: "220 12% 45%", from: "Fiori secondary text — labels, meta, table captions" },
+    accent: { hsl: "213 30% 92%", from: "Fiori hover surface — faint blue-tinted gray" },
+    accentForeground: { hsl: "220 35% 22%", from: "deep slate on hover" },
+
+    border: { hsl: "213 14% 86%", from: "Fiori tile border — visible structural hairline" },
+    input: { hsl: "213 14% 78%", from: "Fiori input border — a shade darker than tile border for affordance" },
+    ring: { hsl: "218 100% 35%", from: "SAP blue — focus ring on active states" },
+
+    destructive: { hsl: "354 75% 45%", from: "Fiori semantic error red — destructive actions and error states" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on error red" },
+
+    brand: {
+      "tile-bg": { hsl: "0 0% 100%", from: "Fiori tile surface — white tile on the cool-gray canvas" },
+      "tile-border": { hsl: "213 14% 86%", from: "Fiori tile hairline border — structural, visible at dashboard density" },
+      "info-blue": { hsl: "200 100% 42%", from: "Fiori info blue — informational chips and links" },
+      "accent-orange": { hsl: "28 100% 50%", from: "Fiori warning orange — process attention, in-progress workflows" },
+      "success-green": { hsl: "140 50% 40%", from: "Fiori success green — positive semantic state" },
+      "sap-blue": { hsl: "218 100% 35%", from: "SAP brand blue — alias for primary" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64],
+    containerMax: "max-w-screen-2xl",
+    containerPadding: "px-4 lg:px-6",
+    sectionPadding: {
+      hero: "pt-10 pb-8 lg:pt-14 lg:pb-10",
+      default: "py-8 lg:py-12",
+      tight: "py-4 lg:py-6",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-tile":
+        "0 1px 2px hsl(220 35% 22% / 0.06), 0 1px 1px hsl(220 35% 22% / 0.04)",
+      "shadow-tile-hover":
+        "0 4px 8px hsl(220 35% 22% / 0.08), 0 2px 4px hsl(220 35% 22% / 0.05)",
+      "shadow-tile-focus":
+        "0 0 0 2px hsl(var(--primary) / 0.4)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,
+      loop: 1200,
+      ambient: 0,
+    },
+    keyframes: {
+      "fade-in": {
+        css:
+          "from { opacity: 0; }\n" +
+          "to { opacity: 1; }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "200ms entry fade — tiles, popovers, menus, dialog content",
+      },
+      "tile-lift": {
+        css:
+          "from { transform: translateY(2px); opacity: 0.85; }\n" +
+          "to { transform: translateY(0); opacity: 1; }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "Fiori tile hover/load — small lift, business-paced, not theatrical",
+      },
+      "fade-out": {
+        css:
+          "from { opacity: 1; }\n" +
+          "to { opacity: 0; }",
+        defaultDuration: 150,
+        iteration: "once",
+        purpose: "150ms exit fade — popovers, menus, dismissed dialogs",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Primary = solid SAP blue, white text, 4px radius, weight 600 (bg-primary text-primary-foreground rounded-sm font-semibold). " +
+      "Secondary = ghost with foreground text and 1px input border (bg-transparent border). " +
+      "Emphasized = filled SAP blue with subtle gradient (bg-gradient-to-b from-primary to-[hsl(218_100%_30%)]). " +
+      "Sizes: small (h-7 px-2.5 text-xs) and default (h-8 px-3 text-sm).",
+    card:
+      "Fiori tile: rounded-sm (4px), bg-tile-bg (white), 1px tile-border, shadow-tile drop. " +
+      "Tight padding (p-4 lg:p-5). Tile header row uses bottom hairline. " +
+      "Hover lifts to shadow-tile-hover; focus uses shadow-tile-focus ring.",
+    input:
+      "Compact (h-8 text-sm), 1px input border, bg-tile-bg, rounded-sm. " +
+      "Focus uses 2px SAP-blue ring. Label above, helper below in mutedForeground. " +
+      "Inline validation in destructive red; warning orange for in-progress process state.",
+    cta:
+      "Primary action is the SAP-blue button. Secondary = ghost. Emphasized variant reserved for the " +
+      "single most important action on a process screen (Submit, Post, Approve). " +
+      "Marketing-style double-CTAs do not exist in this language — ERP screens have one verb.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.2)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",
+    scrollbarStyle: "auto",
+  },
+};

package/themes/cabana-poster/THEME.md

@@ -0,0 +1,158 @@
+# Cabana Poster
+
+> Vintage travel-poster register applied to a warm lifestyle brand — cream canvas at
+
+**Slug:** `cabana-poster` — **Surface:** web — **Density:** balanced
+
+## Influence
+
+Vintage 1960s-70s travel-poster typography (Windsor / Cooper Black
+outlined display treatments used on airline posters, Miami / Palm
+Springs / Tulum lifestyle brands), independent Australian and
+inner-north creative spaces at their most confident, and modern
+hospitality-forward coworking / clubhouse brands that reject the
+Silicon Valley aesthetic in favour of a warmer, cheekier, more
+place-specific register. Distinct from other Family C bases through
+the WARM CREAM canvas + OUTLINED YELLOW DISPLAY WORDMARK + STICKY
+NOTE testimonial cards + HANDWRITTEN SCRIPT signature moments —
+none of which the other Family C bases carry.
+
+
+## Signature move
+
+Warm cream canvas at #eedfca — the register's non-negotiable base
+(deliberately NOT #F4F1EA, which is the Claude-cream AI-tell). Every
+card, button, input, tile, photo-frame, and sticky note ships at 0px
+border radius — sharp edges are the second non-negotiable move. The
+hero is a FULL-BLEED photograph of the actual physical space or an
+atmospheric outdoor scene (palm trees, beach, warm-lit street) under
+directional light. Over that photo sits the WORDMARK in the Windsor
+display face — YELLOW FILL (#ffd200) + ESPRESSO-BROWN STROKE OUTLINE
+at ~10-14px stroke width, at ~200px scale, mixed case (never
+uppercase). Directly beneath the wordmark: a small custom SVG
+LINE-ILLUSTRATION of the actual physical space (storefront /
+building / entrance) drawn in cream on cream, ~180px wide. Below
+that: a small DIEGETIC ADDRESS PLATE in 11px mono-caps 0.16em
+("FACTORY 2 / 10-12 EXAMPLE RD / SUBURB VIC 3057").
+Below the hero: a horizontal MARQUEE TICKER in an orange band —
+"Follow us @PORT_CABANA · 247 ACCESS · 1800-EXAMPLE · HOT DESKS
+AVAILABLE · SUPER FAST" scrolling at 24s per loop. Below the
+marquee: an INTRO COPY SPLIT — LEFT: big Windsor headline "Your
+cheeky inner-north coworking oasis." at 64px. RIGHT: two-column
+Pitch Sans body copy with a small handwritten-italic subline.
+Next: a PHOTO GALLERY BAND — 3 photos at varied sizes, ONE of them
+framed with a bright YELLOW ARCH-SHAPE SVG FRAME (the arch being a
+key vintage-poster device). A bespoke SVG smiley mark drops in the
+gutter as PUNCTUATION. Next: a big "EXPERIENCE THE ULTIMATE
+COWORKING LIFESTYLE" headline in Windsor with a HANDWRITTEN SCRIPT
+"As Seen on TV!" callout in seafoam (Caveat) beneath. A 3-TAB
+WIDGET (Hot Desking / Permanent Desk / Private Studio) crossfades
+its body card + big photo panel per tab. Below: TESTIMONIALS AS
+POST-IT NOTES — 2-3 sticky-note-aesthetic cards (yellow, orange,
+lime rectangles at ~360x240px, sharp corners, subtle static
+rotation of -2deg / 0deg / +3deg, typewriter-style body copy).
+Finally, a "COME SAY HI" callout section: a dark deep-forest
+photo-band (garage-door / studio-entrance photograph) with a CREAM
+CARD OVERLAY in the center reading "Come Say Hi" (Windsor 48px),
+"Seeing is believing, baby" (script 24px), a two-line body block,
+and a DEEP-FOREST OUTLINED BUTTON reading "Arrange a visit."
+Footer at the bottom: acknowledgement paragraph on the left, giant
+outlined wordmark + small building illustration in the middle,
+utility links (Home / Join / About / The Space / Our Members /
+Contact) top-left column. Brand character sits in the outlined
+yellow wordmark, the full-bleed photography, the multi-color
+scattered accents used SPARINGLY, and the handwritten-script
+signature moments — not in decoration, not in polish, not in
+uniform grids.
+
+## Palette
+
+- **bg:** `#eedfca`
+- **surface:** `#ffffff`
+- **ink:** `#352207`
+- **accent:** `#ffd200`
+- **secondary:** `#f38211`
+
+## Typography
+
+- **Display:** Windsor (reference proprietary face — warm 1905 chunky-serif with friendly proportions and a slightly quirky character). Free fallback stack — "Rozha One", "DM Serif Display", "Playfair Display", Georgia, serif. Weight 700, mixed case (NEVER uppercase — Windsor loses its character under textTransform:uppercase like Shrikhand does). Top of scale ~64px hero wordmark, 48px section headline, 32px subhead, 24px h3. The wordmark ships with YELLOW FILL + ESPRESSO BROWN OUTLINE STROKE — that's the vintage travel-poster signature. Every other display use is a solid espresso-brown fill.
+- **Body:** Pitch Sans (reference — Klim's Pitch Sans, a modern geometric sans). Free fallback stack — "Space Grotesk", "DM Sans", Inter, system-ui, sans-serif. Weight 500-600, mixed case, 15-16px body copy, line-height 1.55. Small labels get 12px 600-weight sentence case.
+- **Mono:** none. Cabana Poster is a warm consumer lifestyle surface. Mono has no role.
+- **Scale:** 1.333 (perfect fourth — comfortable poster-scale contrast without collapsing into monumental hero-only)
+
+## Motion
+
+Ships live in the section renderer (no external dependencies):
+1. Marquee ticker — the orange utility-label bar scrolls horizontally at 24s per loop, continuously (pauses on hover). Per reference — spec allows.
+2. Photo-gallery hover — each gallery photo scales(1.02) + shifts +/-2px vertically on hover, 240ms cubic-bezier(0.19,1,0.22,1). Reads as "picking up a print" tactile response.
+3. Tab-widget crossfade — Hot Desking / Permanent Desk / Private Studio tabs crossfade their body-card + photo-panel content over 300ms on click. No slide, no scale — just opacity.
+4. Post-it note stagger — testimonial post-it notes fade in with 120ms stagger + 500ms cubic-bezier on IntersectionObserver visibility. Each note also has a subtle static rotation (-2deg, 0deg, +3deg) so they look casually pinned.
+5. Come-Say-Hi callout reveal — the cream card overlay on the dark deep-forest photo band fades in from opacity 0 with a subtle scale(0.98 → 1) over 600ms on IntersectionObserver visibility.
+6. Handwritten script gentle sway — the "As Seen on TV!" and "Come Say Hi" script snippets rotate 1deg back-and-forth on a 4s loop, subtle enough to feel alive but not distracting.
+7. Wordmark reveal — the outlined display wordmark fades in with subtle scale(0.96 → 1) over 800ms on first paint. No letter-stagger.
+8. prefers-reduced-motion: reduce — marquee paused; hover disabled; post-it stagger disabled (all show at once); script sway paused; wordmark shows at final scale immediately. State changes still fire (tab switching still crossfades opacity).
+
+Customer installs these as dependencies for the deeper motion tier:
+- Lenis — smooth inertial scroll (page benefits from inertial cadence between the photo bands).
+- GSAP DrawSVG for the outlined display wordmark drawing letter-by-letter over the beach photo hero.
+- Real Vimeo/Cloudinary video player for the "AS SEEN ON TV!" video-thumbnail if the customer has a real reel.
+
+Motion character: warm, playful, tactile, slightly retro. Custom cubic-bezier(0.19,1,0.22,1) for reveals. The register lives between vintage travel-poster print and modern hospitality-forward web — motion should feel like paper being handled, not like a SaaS product tour.
+
+
+## Imagery
+
+FULL-BLEED photography of the actual physical space, natural
+outdoor scenes (palm trees, beach, warm-lit streets), or lifestyle
+moments (people working, hanging out, using the space). The
+reference uses atmospheric beach/palm-tree photography for the hero
+and interior-photography for the gallery. FPO imagery here should
+read as directional-light photography with warm-forward color
+grading — never generic stock, never gradient blobs, never radial
+glow fallbacks. One gallery photo gets a BRIGHT YELLOW ARCH-SHAPE
+SVG frame as a signature poster device. The rest of the gallery
+photos sit plain on the cream canvas with no frame. NO stock
+workplace photography (the "diverse laptops at a coffee shop" tell).
+NO warm-radial gradients as image fallbacks. NO drop-shadow-md on
+photo cards. Bespoke SVG marks (smiley, palm, sun, arrow, hand,
+building-line, phone, calendar, weather glyph) are dropped as
+PUNCTUATION at specific compositional moments — never as a uniform
+icon row.
+
+## Best for
+
+- Coworking spaces and creative clubhouses with a distinct place-specific character
+- Warm lifestyle brands (hospitality, boutique retail, hair salons, cafes) with a cheek-forward voice
+- Independent creative studios with a hospitality-forward register
+- Boutique wellness spaces (yoga, pilates, sauna, cold-plunge) leaning warm-vintage
+- Small hotels + bed-and-breakfasts + eco-retreats + surf houses + rural stays
+- Culture-forward brands (bookstores, record shops, print studios) with a warm-vintage character
+
+## Reject if
+
+_Director grades each of the following as a pass/fail check. Any violation blocks the theme._
+
+- Dark canvas (near-black / true-black / any dark gray) as the primary background — canvas IS warm cream at #eedfca. Swapping to a dark canvas collapses this into generic-atmospheric slop and kills the vintage-poster register.
+- Pure white (#FFFFFF) or #F4F1EA claude-cream as the canvas — #eedfca is measured and deliberately WARMER than the AI-tell claude-cream. Swapping to F4F1EA is the biggest signal the theme has been washed out toward AI-default warmth.
+- Sans-serif display type — the display face MUST be a warm chunky serif (Windsor reference; Rozha One / DM Serif Display / Playfair Display fallback). Inter Display / Anton / DM Sans have the wrong register.
+- Rounded corners on cards, buttons, inputs, photo frames, or sticky notes — 0px radius everywhere. The one arch-shape frame is bespoke SVG, not a border-radius.
+- Corporate polish — no drop-shadow-md, no soft-glow, no gradient backdrop, no glassmorphism. Photo panels sit flat on the canvas; sticky notes have zero shadow (they're vintage-poster sticky notes, not skeuomorphic ones).
+- Multi-color accent flooding — the accents (yellow, lime, orange, pink, seafoam) appear SPARINGLY as punctuation. Never floods a whole section background in any accent color; the cream canvas is the primary.
+- Uniform 3-column feature grids — the photo gallery band alternates size, orientation, and frame treatment. Not a template.
+- Handwritten script for body copy or eyebrow labels — the script (Caveat / Homemade Apple) is used ONLY for a small vocabulary of signature moments ('As Seen on TV!', 'Come Say Hi', 'Seeing is believing, baby'). Never for body copy or eyebrow slop.
+- Uniform icon row of bespoke SVG marks — the 13 SVG marks in the reference are dropped as PUNCTUATION at specific compositional moments. Never as a uniform 3-across or 4-across icon-and-caption grid.
+- Stock diverse-workplace photography (laptops around a table, hands-typing, smiling-team-portrait) — imagery MUST feel place-specific + directional-light + warm-forward. Interior-of-the-actual-space or atmospheric-outdoor, not stock.
+- Emoji or decorative unicode marks — bespoke SVG carries all the ornamentation.
+
+## Banned defaults (inherited + theme-specific)
+
+- claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is DELIBERATELY #eedfca (warmer than claude-cream) to refuse the AI-tell. Swapping to F4F1EA is the tell.
+- void+acid (near-black bg + single bright acid-green or vermilion accent)
+- broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)
+- tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)
+- uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)
+- sans-display-anywhere (this theme's whole point is the warm Windsor chunky-serif wordmark. A sans-serif display used anywhere — hero, section headline, wordmark — immediately collapses the vintage-poster register.)
+- white-canvas-flood (canvas is #eedfca warm cream, not white. White is a raised-panel surface color for the hot-desk card and gallery photo frames only. Making white the whole page background collapses the theme into generic-lifestyle slop.)
+- rounded-sticky-notes (post-it note testimonial cards are SHARP-CORNERED. Real vintage post-its had square edges. Rounded corners on the sticky notes is the skeuomorphic-mimic tell.)
+- multi-accent-flood (yellow + lime + orange + pink + seafoam are PUNCTUATION accents. Flooding an entire section background in any accent color collapses the theme into candy-slop.)
+- uniform-photo-grid (photo gallery alternates size, orientation, and frame treatment. Uniform 3-across or 4-across photo grids are the AI-default lifestyle-site tell.)

package/themes/cabana-poster/audit.log.jsonl

@@ -0,0 +1 @@
+{"slug":"cabana-poster","gates":[{"gate":"slop-blocklist","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T22:52:40.651Z","dismissed":[]},{"gate":"regression-scan","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T22:52:40.662Z","dismissed":[]},{"gate":"avoid-rubric","verdict":{"passed":true,"failures":[]},"ran_at":"2026-07-04T22:53:19.505Z","dismissed":[]},{"gate":"anchor-compare","verdict":{"passed":true,"failures":[],"skipped":"Family C rubric.md missing at /Users/mattfrischer/Taste/site/design-system/golden-set/C/rubric.md — anchor-compare skipped."},"ran_at":"2026-07-04T22:53:19.507Z","dismissed":[]}],"overall":"PASS","ran_at":"2026-07-04T22:52:40.651Z"}

package/themes/cabana-poster/tailwind.snippet.ts

@@ -0,0 +1,16 @@
+// Generated from theme.yml. Merge into your tailwind.config.ts under theme.extend.
+// slug: cabana-poster
+export const cabanaPosterTailwindExtend = {
+  colors: {
+    bg: "#eedfca",
+    surface: "#ffffff",
+    ink: "#352207",
+    accent: "#ffd200",
+    secondary: "#f38211",
+  },
+  fontFamily: {
+    display: ["Windsor (reference proprietary face — warm 1905 chunky-serif with friendly proportions and a slightly quirky character). Free fallback stack — \"Rozha One\", \"DM Serif Display\", \"Playfair Display\", Georgia, serif. Weight 700, mixed case (NEVER uppercase — Windsor loses its character under textTransform:uppercase like Shrikhand does). Top of scale ~64px hero wordmark, 48px section headline, 32px subhead, 24px h3. The wordmark ships with YELLOW FILL + ESPRESSO BROWN OUTLINE STROKE — that's the vintage travel-poster signature. Every other display use is a solid espresso-brown fill."],
+    body: ["Pitch Sans (reference — Klim's Pitch Sans, a modern geometric sans). Free fallback stack — \"Space Grotesk\", \"DM Sans\", Inter, system-ui, sans-serif. Weight 500-600, mixed case, 15-16px body copy, line-height 1.55. Small labels get 12px 600-weight sentence case."],
+    mono: ["none. Cabana Poster is a warm consumer lifestyle surface. Mono has no role."],
+  },
+};

package/themes/cabana-poster/theme.yml

@@ -0,0 +1,221 @@
+# Cabana Poster — Family C, Editorial & Print.
+#
+# Vintage travel-poster register applied to a warm lifestyle brand.
+# Cream canvas (#eedfca — measured, deliberately NOT #F4F1EA to refuse
+# the AI-tell), espresso-brown ink (#352207 — never black), a bright
+# yellow-fill + brown-outlined Windsor-style display wordmark, and a
+# scattered palette of candy accents (yellow, electric lime, burnt
+# orange, bubblegum pink, seafoam) used sparingly as punctuation.
+#
+# Sharp corners everywhere (0px radius on every card, button, input,
+# tile, sticky note). Full-bleed photography under directional light.
+# Handwritten script for a small vocabulary of signature moments only —
+# "As Seen on TV!", "Come Say Hi", "Seeing is believing, baby" — never
+# for body copy or eyebrow labels.
+#
+# Authored from Matt's provided design brief (2026-07-04,
+# coparadiso.com reference — a real cheeky inner-north coworking
+# space in Melbourne). Placeholder brand: "PORT CABANA" — a fictional
+# coworking / lifestyle imprint. Original name, original copy, no
+# reproductions of any reference. The register expresses "warm-vintage
+# cheek" through the outlined display wordmark + full-bleed
+# photography + sticky-note testimonial cards + handwritten script
+# signatures + a sparse but insistent multi-color accent palette.
+#
+# Thirteenth theme via the v2 harness. Fifth Family C theme (after
+# ember-poster + case-panel + marker-mag + pill-editorial). Eighth
+# NEW BASE.
+#
+# Alternative slugs considered — postcard-holiday (evocative but drops
+# the cabana-lounge register), paradise-poster (too source-adjacent),
+# beach-brief (too literal), holiday-brief (imprecise), tropi-print
+# (jargony), lounge-cream (drops the poster typography anchor). Cabana
+# Poster picked because "cabana" nails the warm-tropical-lounge
+# register and "poster" carries the vintage travel-poster typographic
+# signature. Both words are common-noun and aesthetic — no
+# right-of-publicity or trademark exposure.
+
+name: Cabana Poster
+concept: Vintage travel-poster register applied to a warm lifestyle brand — cream canvas at #eedfca (never white) with an outlined bright-yellow display wordmark, espresso-brown ink, full-bleed directional-light photography, sticky-note testimonial cards, and a small vocabulary of handwritten-script signature moments. Multi-color candy accents (golden yellow, electric lime, burnt orange, bubblegum pink, seafoam) used sparingly as punctuation, never flooded.
+influence: |
+  Vintage 1960s-70s travel-poster typography (Windsor / Cooper Black
+  outlined display treatments used on airline posters, Miami / Palm
+  Springs / Tulum lifestyle brands), independent Australian and
+  inner-north creative spaces at their most confident, and modern
+  hospitality-forward coworking / clubhouse brands that reject the
+  Silicon Valley aesthetic in favour of a warmer, cheekier, more
+  place-specific register. Distinct from other Family C bases through
+  the WARM CREAM canvas + OUTLINED YELLOW DISPLAY WORDMARK + STICKY
+  NOTE testimonial cards + HANDWRITTEN SCRIPT signature moments —
+  none of which the other Family C bases carry.
+
+family: C
+base_number: 28
+base_note: |
+  New-base candidate in Family C, warm-vintage-lifestyle subregion.
+  Distinct from other Family C bases through the OUTLINED DISPLAY
+  WORDMARK (yellow fill + espresso stroke — the register's typographic
+  fingerprint) and the multi-color candy-accent palette. Ember Poster
+  is warm-DARK editorial serif; Cabana Poster is warm-LIGHT vintage
+  travel-poster. Case Panel is agency portfolio bento. Marker Mag is
+  student-DIY marker chaos. Pill Editorial is 999px cultural editorial.
+  Cabana Poster fills the WARM-LIGHT-VINTAGE-LIFESTYLE slot the family
+  has been missing.
+
+render_url: http://localhost:5173/themes/cabana-poster
+
+surface: web
+
+typography:
+  display: Windsor (reference proprietary face — warm 1905 chunky-serif with friendly proportions and a slightly quirky character). Free fallback stack — "Rozha One", "DM Serif Display", "Playfair Display", Georgia, serif. Weight 700, mixed case (NEVER uppercase — Windsor loses its character under textTransform:uppercase like Shrikhand does). Top of scale ~64px hero wordmark, 48px section headline, 32px subhead, 24px h3. The wordmark ships with YELLOW FILL + ESPRESSO BROWN OUTLINE STROKE — that's the vintage travel-poster signature. Every other display use is a solid espresso-brown fill.
+  body: Pitch Sans (reference — Klim's Pitch Sans, a modern geometric sans). Free fallback stack — "Space Grotesk", "DM Sans", Inter, system-ui, sans-serif. Weight 500-600, mixed case, 15-16px body copy, line-height 1.55. Small labels get 12px 600-weight sentence case.
+  script: |
+    Caveat, Homemade Apple, Kalam, cursive — used SPARINGLY for a small
+    vocabulary of handwritten-script signature moments only (As Seen on
+    TV!, Come Say Hi, Seeing is believing, baby). Weight 700, mixed
+    case, ~24-32px. NEVER used for body copy or eyebrow labels — a
+    handwritten register cannot scale to body copy without becoming twee.
+  mono: none. Cabana Poster is a warm consumer lifestyle surface. Mono has no role.
+  scale: 1.333 (perfect fourth — comfortable poster-scale contrast without collapsing into monumental hero-only)
+  eyebrow_exception: |
+    The universal slop-blocklist bans mono-caps eyebrows as a general
+    defensive rule. Cabana Poster LEGITIMATELY uses a small vocabulary
+    of uppercase 0.16em-tracked 11px labels as DIEGETIC ADDRESS PLATE
+    labels ("FACTORY 2 / 10-12 EXAMPLE RD / SUBURB VIC 3057") and
+    marquee-ticker utility labels ("247 ACCESS · 1800-EXAMPLE · HOT
+    DESKS AVAILABLE") because the reference site uses them EXACTLY
+    in this register — they read as vintage-signage plates, not
+    marketing eyebrows. This is a THEME-SPECIFIC EXCEPTION that must
+    be manually preserved during harness grading.
+
+palette:
+  bg: "#eedfca"           # canvas — warm cream, measured
+  surface: "#ffffff"      # raised white panel — used for hot-desk card + photo gallery frames
+  ink: "#352207"          # espresso brown — primary text (NEVER black)
+  accent: "#ffd200"       # golden yellow — the display outline fill + primary button
+  secondary: "#f38211"    # burnt orange — marquee bar + secondary highlights
+  cream: "#eedfca"        # alias for bg
+  darkInk: "#163e35"      # deep forest — inverted photo-band overlay + arrange-a-visit button
+  mute: "#8c6f47"         # dimmed espresso — small labels + captions
+  lime: "#c1fc50"         # electric lime — post-it sticky note variant
+  pink: "#f775a5"         # bubblegum pink — post-it sticky note variant
+  seafoam: "#3ec2b4"      # seafoam — accent moments (never floods)
+
+density: balanced
+
+motion: |
+  Ships live in the section renderer (no external dependencies):
+  1. Marquee ticker — the orange utility-label bar scrolls horizontally at 24s per loop, continuously (pauses on hover). Per reference — spec allows.
+  2. Photo-gallery hover — each gallery photo scales(1.02) + shifts +/-2px vertically on hover, 240ms cubic-bezier(0.19,1,0.22,1). Reads as "picking up a print" tactile response.
+  3. Tab-widget crossfade — Hot Desking / Permanent Desk / Private Studio tabs crossfade their body-card + photo-panel content over 300ms on click. No slide, no scale — just opacity.
+  4. Post-it note stagger — testimonial post-it notes fade in with 120ms stagger + 500ms cubic-bezier on IntersectionObserver visibility. Each note also has a subtle static rotation (-2deg, 0deg, +3deg) so they look casually pinned.
+  5. Come-Say-Hi callout reveal — the cream card overlay on the dark deep-forest photo band fades in from opacity 0 with a subtle scale(0.98 → 1) over 600ms on IntersectionObserver visibility.
+  6. Handwritten script gentle sway — the "As Seen on TV!" and "Come Say Hi" script snippets rotate 1deg back-and-forth on a 4s loop, subtle enough to feel alive but not distracting.
+  7. Wordmark reveal — the outlined display wordmark fades in with subtle scale(0.96 → 1) over 800ms on first paint. No letter-stagger.
+  8. prefers-reduced-motion: reduce — marquee paused; hover disabled; post-it stagger disabled (all show at once); script sway paused; wordmark shows at final scale immediately. State changes still fire (tab switching still crossfades opacity).
+
+  Customer installs these as dependencies for the deeper motion tier:
+  - Lenis — smooth inertial scroll (page benefits from inertial cadence between the photo bands).
+  - GSAP DrawSVG for the outlined display wordmark drawing letter-by-letter over the beach photo hero.
+  - Real Vimeo/Cloudinary video player for the "AS SEEN ON TV!" video-thumbnail if the customer has a real reel.
+
+  Motion character: warm, playful, tactile, slightly retro. Custom cubic-bezier(0.19,1,0.22,1) for reveals. The register lives between vintage travel-poster print and modern hospitality-forward web — motion should feel like paper being handled, not like a SaaS product tour.
+
+signature: |
+  Warm cream canvas at #eedfca — the register's non-negotiable base
+  (deliberately NOT #F4F1EA, which is the Claude-cream AI-tell). Every
+  card, button, input, tile, photo-frame, and sticky note ships at 0px
+  border radius — sharp edges are the second non-negotiable move. The
+  hero is a FULL-BLEED photograph of the actual physical space or an
+  atmospheric outdoor scene (palm trees, beach, warm-lit street) under
+  directional light. Over that photo sits the WORDMARK in the Windsor
+  display face — YELLOW FILL (#ffd200) + ESPRESSO-BROWN STROKE OUTLINE
+  at ~10-14px stroke width, at ~200px scale, mixed case (never
+  uppercase). Directly beneath the wordmark: a small custom SVG
+  LINE-ILLUSTRATION of the actual physical space (storefront /
+  building / entrance) drawn in cream on cream, ~180px wide. Below
+  that: a small DIEGETIC ADDRESS PLATE in 11px mono-caps 0.16em
+  ("FACTORY 2 / 10-12 EXAMPLE RD / SUBURB VIC 3057").
+  Below the hero: a horizontal MARQUEE TICKER in an orange band —
+  "Follow us @PORT_CABANA · 247 ACCESS · 1800-EXAMPLE · HOT DESKS
+  AVAILABLE · SUPER FAST" scrolling at 24s per loop. Below the
+  marquee: an INTRO COPY SPLIT — LEFT: big Windsor headline "Your
+  cheeky inner-north coworking oasis." at 64px. RIGHT: two-column
+  Pitch Sans body copy with a small handwritten-italic subline.
+  Next: a PHOTO GALLERY BAND — 3 photos at varied sizes, ONE of them
+  framed with a bright YELLOW ARCH-SHAPE SVG FRAME (the arch being a
+  key vintage-poster device). A bespoke SVG smiley mark drops in the
+  gutter as PUNCTUATION. Next: a big "EXPERIENCE THE ULTIMATE
+  COWORKING LIFESTYLE" headline in Windsor with a HANDWRITTEN SCRIPT
+  "As Seen on TV!" callout in seafoam (Caveat) beneath. A 3-TAB
+  WIDGET (Hot Desking / Permanent Desk / Private Studio) crossfades
+  its body card + big photo panel per tab. Below: TESTIMONIALS AS
+  POST-IT NOTES — 2-3 sticky-note-aesthetic cards (yellow, orange,
+  lime rectangles at ~360x240px, sharp corners, subtle static
+  rotation of -2deg / 0deg / +3deg, typewriter-style body copy).
+  Finally, a "COME SAY HI" callout section: a dark deep-forest
+  photo-band (garage-door / studio-entrance photograph) with a CREAM
+  CARD OVERLAY in the center reading "Come Say Hi" (Windsor 48px),
+  "Seeing is believing, baby" (script 24px), a two-line body block,
+  and a DEEP-FOREST OUTLINED BUTTON reading "Arrange a visit."
+  Footer at the bottom: acknowledgement paragraph on the left, giant
+  outlined wordmark + small building illustration in the middle,
+  utility links (Home / Join / About / The Space / Our Members /
+  Contact) top-left column. Brand character sits in the outlined
+  yellow wordmark, the full-bleed photography, the multi-color
+  scattered accents used SPARINGLY, and the handwritten-script
+  signature moments — not in decoration, not in polish, not in
+  uniform grids.
+
+imagery: |
+  FULL-BLEED photography of the actual physical space, natural
+  outdoor scenes (palm trees, beach, warm-lit streets), or lifestyle
+  moments (people working, hanging out, using the space). The
+  reference uses atmospheric beach/palm-tree photography for the hero
+  and interior-photography for the gallery. FPO imagery here should
+  read as directional-light photography with warm-forward color
+  grading — never generic stock, never gradient blobs, never radial
+  glow fallbacks. One gallery photo gets a BRIGHT YELLOW ARCH-SHAPE
+  SVG frame as a signature poster device. The rest of the gallery
+  photos sit plain on the cream canvas with no frame. NO stock
+  workplace photography (the "diverse laptops at a coffee shop" tell).
+  NO warm-radial gradients as image fallbacks. NO drop-shadow-md on
+  photo cards. Bespoke SVG marks (smiley, palm, sun, arrow, hand,
+  building-line, phone, calendar, weather glyph) are dropped as
+  PUNCTUATION at specific compositional moments — never as a uniform
+  icon row.
+
+best_for:
+  - Coworking spaces and creative clubhouses with a distinct place-specific character
+  - Warm lifestyle brands (hospitality, boutique retail, hair salons, cafes) with a cheek-forward voice
+  - Independent creative studios with a hospitality-forward register
+  - Boutique wellness spaces (yoga, pilates, sauna, cold-plunge) leaning warm-vintage
+  - Small hotels + bed-and-breakfasts + eco-retreats + surf houses + rural stays
+  - Culture-forward brands (bookstores, record shops, print studios) with a warm-vintage character
+
+avoid:
+  - "Dark canvas (near-black / true-black / any dark gray) as the primary background — canvas IS warm cream at #eedfca. Swapping to a dark canvas collapses this into generic-atmospheric slop and kills the vintage-poster register."
+  - "Pure white (#FFFFFF) or #F4F1EA claude-cream as the canvas — #eedfca is measured and deliberately WARMER than the AI-tell claude-cream. Swapping to F4F1EA is the biggest signal the theme has been washed out toward AI-default warmth."
+  - "Sans-serif display type — the display face MUST be a warm chunky serif (Windsor reference; Rozha One / DM Serif Display / Playfair Display fallback). Inter Display / Anton / DM Sans have the wrong register."
+  - "Rounded corners on cards, buttons, inputs, photo frames, or sticky notes — 0px radius everywhere. The one arch-shape frame is bespoke SVG, not a border-radius."
+  - "Corporate polish — no drop-shadow-md, no soft-glow, no gradient backdrop, no glassmorphism. Photo panels sit flat on the canvas; sticky notes have zero shadow (they're vintage-poster sticky notes, not skeuomorphic ones)."
+  - "Multi-color accent flooding — the accents (yellow, lime, orange, pink, seafoam) appear SPARINGLY as punctuation. Never floods a whole section background in any accent color; the cream canvas is the primary."
+  - "Uniform 3-column feature grids — the photo gallery band alternates size, orientation, and frame treatment. Not a template."
+  - "Handwritten script for body copy or eyebrow labels — the script (Caveat / Homemade Apple) is used ONLY for a small vocabulary of signature moments ('As Seen on TV!', 'Come Say Hi', 'Seeing is believing, baby'). Never for body copy or eyebrow slop."
+  - "Uniform icon row of bespoke SVG marks — the 13 SVG marks in the reference are dropped as PUNCTUATION at specific compositional moments. Never as a uniform 3-across or 4-across icon-and-caption grid."
+  - "Stock diverse-workplace photography (laptops around a table, hands-typing, smiling-team-portrait) — imagery MUST feel place-specific + directional-light + warm-forward. Interior-of-the-actual-space or atmospheric-outdoor, not stock."
+  - "Emoji or decorative unicode marks — bespoke SVG carries all the ornamentation."
+
+banned_defaults:
+  # Global blocklist from BESPOKE_THEME_SYSTEM.md
+  - "claude-cream (#F4F1EA + serif + #D97757) — this theme's canvas is DELIBERATELY #eedfca (warmer than claude-cream) to refuse the AI-tell. Swapping to F4F1EA is the tell."
+  - "void+acid (near-black bg + single bright acid-green or vermilion accent)"
+  - "broadsheet-on-noneditorial (hairline rules + zero border-radius + newspaper columns on non-editorial content)"
+  - "tech-bro purple gradient (purple→blue gradient hero + centered headline + double CTA + emoji icons)"
+  - "uniform-everything (identical padding + one weight of one sans doing every job + rounded-2xl + shadow-md cards)"
+  # Base-specific
+  - "sans-display-anywhere (this theme's whole point is the warm Windsor chunky-serif wordmark. A sans-serif display used anywhere — hero, section headline, wordmark — immediately collapses the vintage-poster register.)"
+  - "white-canvas-flood (canvas is #eedfca warm cream, not white. White is a raised-panel surface color for the hot-desk card and gallery photo frames only. Making white the whole page background collapses the theme into generic-lifestyle slop.)"
+  - "rounded-sticky-notes (post-it note testimonial cards are SHARP-CORNERED. Real vintage post-its had square edges. Rounded corners on the sticky notes is the skeuomorphic-mimic tell.)"
+  - "multi-accent-flood (yellow + lime + orange + pink + seafoam are PUNCTUATION accents. Flooding an entire section background in any accent color collapses the theme into candy-slop.)"
+  - "uniform-photo-grid (photo gallery alternates size, orientation, and frame treatment. Uniform 3-across or 4-across photo grids are the AI-default lifestyle-site tell.)"

package/themes/cabana-poster/tokens.ts

@@ -0,0 +1,34 @@
+// Generated from theme.yml. Do not edit by hand — edit theme.yml + re-materialize.
+
+export const tokens = {
+  slug: "cabana-poster",
+  family: "C",
+  base: "28",
+  palette: {
+    "bg": "#eedfca",
+    "surface": "#ffffff",
+    "ink": "#352207",
+    "accent": "#ffd200",
+    "secondary": "#f38211",
+    "cream": "#eedfca",
+    "darkInk": "#163e35",
+    "mute": "#8c6f47",
+    "lime": "#c1fc50",
+    "pink": "#f775a5",
+    "seafoam": "#3ec2b4"
+  },
+  typography: {
+    "display": "Windsor (reference proprietary face — warm 1905 chunky-serif with friendly proportions and a slightly quirky character). Free fallback stack — \"Rozha One\", \"DM Serif Display\", \"Playfair Display\", Georgia, serif. Weight 700, mixed case (NEVER uppercase — Windsor loses its character under textTransform:uppercase like Shrikhand does). Top of scale ~64px hero wordmark, 48px section headline, 32px subhead, 24px h3. The wordmark ships with YELLOW FILL + ESPRESSO BROWN OUTLINE STROKE — that's the vintage travel-poster signature. Every other display use is a solid espresso-brown fill.",
+    "body": "Pitch Sans (reference — Klim's Pitch Sans, a modern geometric sans). Free fallback stack — \"Space Grotesk\", \"DM Sans\", Inter, system-ui, sans-serif. Weight 500-600, mixed case, 15-16px body copy, line-height 1.55. Small labels get 12px 600-weight sentence case.",
+    "script": "Caveat, Homemade Apple, Kalam, cursive — used SPARINGLY for a small\nvocabulary of handwritten-script signature moments only (As Seen on\nTV!, Come Say Hi, Seeing is believing, baby). Weight 700, mixed\ncase, ~24-32px. NEVER used for body copy or eyebrow labels — a\nhandwritten register cannot scale to body copy without becoming twee.\n",
+    "mono": "none. Cabana Poster is a warm consumer lifestyle surface. Mono has no role.",
+    "scale": "1.333 (perfect fourth — comfortable poster-scale contrast without collapsing into monumental hero-only)",
+    "eyebrow_exception": "The universal slop-blocklist bans mono-caps eyebrows as a general\ndefensive rule. Cabana Poster LEGITIMATELY uses a small vocabulary\nof uppercase 0.16em-tracked 11px labels as DIEGETIC ADDRESS PLATE\nlabels (\"FACTORY 2 / 10-12 EXAMPLE RD / SUBURB VIC 3057\") and\nmarquee-ticker utility labels (\"247 ACCESS · 1800-EXAMPLE · HOT\nDESKS AVAILABLE\") because the reference site uses them EXACTLY\nin this register — they read as vintage-signage plates, not\nmarketing eyebrows. This is a THEME-SPECIFIC EXCEPTION that must\nbe manually preserved during harness grading.\n"
+  },
+  surface: "web",
+  density: "balanced",
+  motion: "Ships live in the section renderer (no external dependencies):\n1. Marquee ticker — the orange utility-label bar scrolls horizontally at 24s per loop, continuously (pauses on hover). Per reference — spec allows.\n2. Photo-gallery hover — each gallery photo scales(1.02) + shifts +/-2px vertically on hover, 240ms cubic-bezier(0.19,1,0.22,1). Reads as \"picking up a print\" tactile response.\n3. Tab-widget crossfade — Hot Desking / Permanent Desk / Private Studio tabs crossfade their body-card + photo-panel content over 300ms on click. No slide, no scale — just opacity.\n4. Post-it note stagger — testimonial post-it notes fade in with 120ms stagger + 500ms cubic-bezier on IntersectionObserver visibility. Each note also has a subtle static rotation (-2deg, 0deg, +3deg) so they look casually pinned.\n5. Come-Say-Hi callout reveal — the cream card overlay on the dark deep-forest photo band fades in from opacity 0 with a subtle scale(0.98 → 1) over 600ms on IntersectionObserver visibility.\n6. Handwritten script gentle sway — the \"As Seen on TV!\" and \"Come Say Hi\" script snippets rotate 1deg back-and-forth on a 4s loop, subtle enough to feel alive but not distracting.\n7. Wordmark reveal — the outlined display wordmark fades in with subtle scale(0.96 → 1) over 800ms on first paint. No letter-stagger.\n8. prefers-reduced-motion: reduce — marquee paused; hover disabled; post-it stagger disabled (all show at once); script sway paused; wordmark shows at final scale immediately. State changes still fire (tab switching still crossfades opacity).\n\nCustomer installs these as dependencies for the deeper motion tier:\n- Lenis — smooth inertial scroll (page benefits from inertial cadence between the photo bands).\n- GSAP DrawSVG for the outlined display wordmark drawing letter-by-letter over the beach photo hero.\n- Real Vimeo/Cloudinary video player for the \"AS SEEN ON TV!\" video-thumbnail if the customer has a real reel.\n\nMotion character: warm, playful, tactile, slightly retro. Custom cubic-bezier(0.19,1,0.22,1) for reveals. The register lives between vintage travel-poster print and modern hospitality-forward web — motion should feel like paper being handled, not like a SaaS product tour.\n",
+  signature: "Warm cream canvas at #eedfca — the register's non-negotiable base\n(deliberately NOT #F4F1EA, which is the Claude-cream AI-tell). Every\ncard, button, input, tile, photo-frame, and sticky note ships at 0px\nborder radius — sharp edges are the second non-negotiable move. The\nhero is a FULL-BLEED photograph of the actual physical space or an\natmospheric outdoor scene (palm trees, beach, warm-lit street) under\ndirectional light. Over that photo sits the WORDMARK in the Windsor\ndisplay face — YELLOW FILL (#ffd200) + ESPRESSO-BROWN STROKE OUTLINE\nat ~10-14px stroke width, at ~200px scale, mixed case (never\nuppercase). Directly beneath the wordmark: a small custom SVG\nLINE-ILLUSTRATION of the actual physical space (storefront /\nbuilding / entrance) drawn in cream on cream, ~180px wide. Below\nthat: a small DIEGETIC ADDRESS PLATE in 11px mono-caps 0.16em\n(\"FACTORY 2 / 10-12 EXAMPLE RD / SUBURB VIC 3057\").\nBelow the hero: a horizontal MARQUEE TICKER in an orange band —\n\"Follow us @PORT_CABANA · 247 ACCESS · 1800-EXAMPLE · HOT DESKS\nAVAILABLE · SUPER FAST\" scrolling at 24s per loop. Below the\nmarquee: an INTRO COPY SPLIT — LEFT: big Windsor headline \"Your\ncheeky inner-north coworking oasis.\" at 64px. RIGHT: two-column\nPitch Sans body copy with a small handwritten-italic subline.\nNext: a PHOTO GALLERY BAND — 3 photos at varied sizes, ONE of them\nframed with a bright YELLOW ARCH-SHAPE SVG FRAME (the arch being a\nkey vintage-poster device). A bespoke SVG smiley mark drops in the\ngutter as PUNCTUATION. Next: a big \"EXPERIENCE THE ULTIMATE\nCOWORKING LIFESTYLE\" headline in Windsor with a HANDWRITTEN SCRIPT\n\"As Seen on TV!\" callout in seafoam (Caveat) beneath. A 3-TAB\nWIDGET (Hot Desking / Permanent Desk / Private Studio) crossfades\nits body card + big photo panel per tab. Below: TESTIMONIALS AS\nPOST-IT NOTES — 2-3 sticky-note-aesthetic cards (yellow, orange,\nlime rectangles at ~360x240px, sharp corners, subtle static\nrotation of -2deg / 0deg / +3deg, typewriter-style body copy).\nFinally, a \"COME SAY HI\" callout section: a dark deep-forest\nphoto-band (garage-door / studio-entrance photograph) with a CREAM\nCARD OVERLAY in the center reading \"Come Say Hi\" (Windsor 48px),\n\"Seeing is believing, baby\" (script 24px), a two-line body block,\nand a DEEP-FOREST OUTLINED BUTTON reading \"Arrange a visit.\"\nFooter at the bottom: acknowledgement paragraph on the left, giant\noutlined wordmark + small building illustration in the middle,\nutility links (Home / Join / About / The Space / Our Members /\nContact) top-left column. Brand character sits in the outlined\nyellow wordmark, the full-bleed photography, the multi-color\nscattered accents used SPARINGLY, and the handwritten-script\nsignature moments — not in decoration, not in polish, not in\nuniform grids.\n",
+} as const;
+
+export type Tokens = typeof tokens;