{"owner":"zarazhangrui","repo":"frontend-slides","hasSkills":true,"totalSkillsCount":77,"totalTokensCount":427452,"categories":["marketplace","anthropic-skill","plugin-manifest"],"hasMcp":false,"mcpConfig":null,"found":[".claude-plugin/marketplace.json","SKILL.md","plugins/frontend-slides/.claude-plugin/plugin.json","plugins/frontend-slides/skills/frontend-slides/SKILL.md","plugins/frontend-slides/skills/frontend-slides/STYLE_PRESETS.md","plugins/frontend-slides/skills/frontend-slides/animation-patterns.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/README.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/selection-index.json","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/8-bit-orbit/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/8-bit-orbit/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/biennale-yellow/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/biennale-yellow/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/block-frame/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/block-frame/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/blue-professional/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/blue-professional/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/bold-poster/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/bold-poster/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/broadside/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/broadside/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/capsule/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/capsule/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/cartesian/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/cartesian/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/cobalt-grid/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/cobalt-grid/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/coral/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/coral/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/creative-mode/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/creative-mode/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/daisy-days/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/daisy-days/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/editorial-forest/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/editorial-forest/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/editorial-tri-tone/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/editorial-tri-tone/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/emerald-editorial/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/emerald-editorial/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/grove/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/grove/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/long-table/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/long-table/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/mat/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/mat/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/monochrome/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/monochrome/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/neo-grid-bold/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/neo-grid-bold/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/peoples-platform/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/peoples-platform/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/pin-and-paper/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/pin-and-paper/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/pink-script/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/pink-script/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/playful/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/playful/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/raw-grid/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/raw-grid/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/retro-windows/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/retro-windows/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/retro-zine/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/retro-zine/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/sakura-chroma/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/sakura-chroma/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/scatterbrain/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/scatterbrain/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/signal/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/signal/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/soft-editorial/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/soft-editorial/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/stencil-tablet/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/stencil-tablet/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/studio/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/studio/preview.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/vellum/design.md","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/vellum/preview.md","plugins/frontend-slides/skills/frontend-slides/html-template.md"],"skills":{".claude-plugin/marketplace.json":"","SKILL.md":"","plugins/frontend-slides/.claude-plugin/plugin.json":"","plugins/frontend-slides/skills/frontend-slides/SKILL.md":"","plugins/frontend-slides/skills/frontend-slides/STYLE_PRESETS.md":"","plugins/frontend-slides/skills/frontend-slides/animation-patterns.md":"# Animation Patterns Reference\n\nUse this reference when generating presentations. Match animations to the intended feeling.\n\n## Effect-to-Feeling Guide\n\n| Feeling | Animations | Visual Cues |\n|---------|-----------|-------------|\n| **Dramatic / Cinematic** | Slow fade-ins (1-1.5s), large scale transitions (0.9 to 1), parallax scrolling | Dark backgrounds, spotlight effects, full-bleed images |\n| **Techy / Futuristic** | Neon glow (box-shadow), glitch/scramble text, grid reveals | Particle systems (canvas), grid patterns, monospace accents, cyan/magenta/electric blue |\n| **Playful / Friendly** | Bouncy easing (spring physics), floating/bobbing | Rounded corners, pastel/bright colors, hand-drawn elements |\n| **Professional / Corporate** | Subtle fast animations (200-300ms), clean slides | Navy/slate/charcoal, precise spacing, data visualization focus |\n| **Calm / Minimal** | Very slow subtle motion, gentle fades | High whitespace, muted palette, serif typography, generous padding |\n| **Editorial / Magazine** | Staggered text reveals, image-text interplay | Strong type hierarchy, pull quotes, grid-breaking layouts, serif headlines + sans body |\n\n## Entrance Animations\n\n```css\n/* Fade + Slide Up (most versatile) */\n.reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.6s var(--ease-out-expo),\n transform 0.6s var(--ease-out-expo);\n}\n.visible .reveal {\n opacity: 1;\n transform: translateY(0);\n}\n\n/* Scale In */\n.reveal-scale {\n opacity: 0;\n transform: scale(0.9);\n transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);\n}\n\n/* Slide from Left */\n.reveal-left {\n opacity: 0;\n transform: translateX(-50px);\n transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);\n}\n\n/* Blur In */\n.reveal-blur {\n opacity: 0;\n filter: blur(10px);\n transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);\n}\n```\n\n## Background Effects\n\n```css\n/* Gradient Mesh — layered radial gradients for depth */\n.gradient-bg {\n background:\n radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),\n radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),\n var(--bg-primary);\n}\n\n/* Noise Texture — inline SVG for grain */\n.noise-bg {\n background-image: url(\"data:image/svg+xml,...\"); /* Inline SVG noise */\n}\n\n/* Grid Pattern — subtle structural lines */\n.grid-bg {\n background-image:\n linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);\n background-size: 50px 50px;\n}\n```\n\n## Interactive Effects\n\n```javascript\n/* 3D Tilt on Hover — adds depth to cards/panels */\nclass TiltEffect {\n constructor(element) {\n this.element = element;\n this.element.style.transformStyle = 'preserve-3d';\n this.element.style.perspective = '1000px';\n\n this.element.addEventListener('mousemove', (e) => {\n const rect = this.element.getBoundingClientRect();\n const x = (e.clientX - rect.left) / rect.width - 0.5;\n const y = (e.clientY - rect.top) / rect.height - 0.5;\n this.element.style.transform = `rotateY(${x * 10}deg) rotateX(${-y * 10}deg)`;\n });\n\n this.element.addEventListener('mouseleave', () => {\n this.element.style.transform = 'rotateY(0) rotateX(0)';\n });\n }\n}\n```\n\n## Troubleshooting\n\n| Problem | Fix |\n|---------|-----|\n| Fonts not loading | Check Fontshare/Google Fonts URL; ensure font names match in CSS |\n| Animations not triggering | Verify Intersection Observer is running; check `.visible` class is being added |\n| Scroll snap not working | Ensure `scroll-snap-type: y mandatory` on html; each slide needs `scroll-snap-align: start` |\n| Mobile issues | Disable heavy effects at 768px breakpoint; test touch events; reduce particle count |\n| Performance issues | Use `will-change` sparingly; prefer `transform`/`opacity` animations; throttle scroll handlers |\n","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/README.md":"","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/selection-index.json":"{\n \"schema_version\": 1,\n \"pack_name\": \"Beautiful HTML Templates - Bold Design Pack\",\n \"source_repo\": \"zarazhangrui/beautiful-html-templates\",\n \"template_count\": 34,\n \"usage\": {\n \"selection\": \"Read this compact index first to shortlist bold templates from metadata.\",\n \"previews\": \"For title-slide previews, read only the preview_md files for the shortlisted bold candidates.\",\n \"final_generation\": \"After the user chooses a bold template, read exactly that template design_md before generating the full deck.\",\n \"never\": \"Do not bulk-read templates/*/design.md and do not read template.html unless the selected design.md is missing a critical implementation detail.\"\n },\n \"frontend_slides_policy\": {\n \"layout_model\": \"fixed-stage\",\n \"canvas_width\": 1920,\n \"canvas_height\": 1080,\n \"scaling\": \"scale-stage-to-viewport\",\n \"mobile_behavior\": \"preserve 16:9 stage; letterbox or pillarbox instead of reflowing slide content\"\n },\n \"templates\": [\n {\n \"slug\": \"8-bit-orbit\",\n \"name\": \"8-Bit Orbit\",\n \"tagline\": \"Pixel-art neon arcade aesthetic on a deep navy void.\",\n \"mood\": [\n \"retro-tech\",\n \"playful\",\n \"cyberpunk\",\n \"energetic\"\n ],\n \"tone\": [\n \"geeky\",\n \"neon\",\n \"rebellious\",\n \"sci-fi\"\n ],\n \"formality\": \"low\",\n \"density\": \"medium\",\n \"scheme\": \"dark\",\n \"best_for\": \"Anything that should feel like a CRT screen at 2am: cyberpunk, gaming, web3, indie dev tools, hackathon demos. Just as good for a tech talk that wants to lean into nostalgic-digital craft, a synthwave brand deck, or a creative review that wants to feel like a console.\",\n \"avoid_for\": \"Contexts where the dark neon palette would actively work against the message — quiet institutional finance disclosures, healthcare patient-facing materials, traditional luxury.\",\n \"preview_md\": \"bold-template-pack/templates/8-bit-orbit/preview.md\",\n \"design_md\": \"bold-template-pack/templates/8-bit-orbit/design.md\"\n },\n {\n \"slug\": \"biennale-yellow\",\n \"name\": \"Biennale Yellow\",\n \"tagline\": \"Solar yellow on warm parchment with deep indigo serif and atmospheric sun-glow gradients.\",\n \"mood\": [\n \"editorial\",\n \"atmospheric\",\n \"warm\",\n \"cultural-institution\",\n \"poster-like\"\n ],\n \"tone\": [\n \"literary\",\n \"considered\",\n \"contemplative\",\n \"warm-modern\",\n \"Dutch-editorial\"\n ],\n \"formality\": \"high\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel like an art-biennale poster or a museum's annual programme: exhibition decks, arts-institution announcements, design conference brochures, curatorial pitches, literary publications, studio retrospectives. Equally good for any deck wanting Dutch-editorial atmosphere with an unmistakable single-color signature.\",\n \"avoid_for\": \"Decks that need visual punch or saturated multi-color energy — the warm-paper canvas and one-yellow palette are intentionally quiet and atmospheric.\",\n \"preview_md\": \"bold-template-pack/templates/biennale-yellow/preview.md\",\n \"design_md\": \"bold-template-pack/templates/biennale-yellow/design.md\"\n },\n {\n \"slug\": \"block-frame\",\n \"name\": \"BlockFrame\",\n \"tagline\": \"Neobrutalist deck with pastel-neon color blocks and chunky black borders.\",\n \"mood\": [\n \"bold\",\n \"playful\",\n \"graphic\",\n \"fresh\"\n ],\n \"tone\": [\n \"confident\",\n \"graphic\",\n \"pop\",\n \"design-led\"\n ],\n \"formality\": \"medium-low\",\n \"density\": \"high\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel pop-graphic and design-led: indie SaaS launches, agency credentials, creative reviews, brand redesigns. Also a strong unexpected pick for tech, finance, or research when the speaker wants to land as confident and contemporary rather than buttoned-up.\",\n \"avoid_for\": \"Contexts that require quiet institutional restraint or traditional weight (regulated disclosures, formal legal briefs).\",\n \"preview_md\": \"bold-template-pack/templates/block-frame/preview.md\",\n \"design_md\": \"bold-template-pack/templates/block-frame/design.md\"\n },\n {\n \"slug\": \"blue-professional\",\n \"name\": \"Blue Professional\",\n \"tagline\": \"Cream paper background with electric cobalt blue accents; clean modern professional.\",\n \"mood\": [\n \"professional\",\n \"modern\",\n \"calm\",\n \"trustworthy\"\n ],\n \"tone\": [\n \"clean\",\n \"considered\",\n \"polished\",\n \"neutral\"\n ],\n \"formality\": \"medium-high\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel modern-considered and lightly authoritative: B2B SaaS pitches, consulting deliverables, advisory updates, investor reports. Also a clean, tasteful choice whenever you want to read as professional without going stiff — research synthesis, internal reviews, brand work for service businesses.\",\n \"avoid_for\": \"Contexts where the deck should feel hot, playful, or intentionally informal — the cool electric-blue restraint will read as overly polished.\",\n \"preview_md\": \"bold-template-pack/templates/blue-professional/preview.md\",\n \"design_md\": \"bold-template-pack/templates/blue-professional/design.md\"\n },\n {\n \"slug\": \"bold-poster\",\n \"name\": \"Bold Poster\",\n \"tagline\": \"Editorial poster aesthetic with massive Shrikhand display and a single fire-engine red accent.\",\n \"mood\": [\n \"bold\",\n \"editorial\",\n \"loud\",\n \"confident\"\n ],\n \"tone\": [\n \"dramatic\",\n \"graphic\",\n \"sharp\",\n \"intentional\"\n ],\n \"formality\": \"medium\",\n \"density\": \"low\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should land like a magazine cover: brand manifestos, founder vision decks, editorial / cultural pitches, creative reviews. Excellent any time you want a few words to feel like a poster — including unexpected fits like a tech keynote or a finance manifesto that wants to be quotable.\",\n \"avoid_for\": \"Decks that need to communicate dense information per slide — the layout is built around a few large statements, not paragraphs of detail.\",\n \"preview_md\": \"bold-template-pack/templates/bold-poster/preview.md\",\n \"design_md\": \"bold-template-pack/templates/bold-poster/design.md\"\n },\n {\n \"slug\": \"broadside\",\n \"name\": \"Broadside\",\n \"tagline\": \"Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack.\",\n \"mood\": [\n \"editorial\",\n \"dramatic\",\n \"loud\",\n \"newspaper\"\n ],\n \"tone\": [\n \"graphic\",\n \"punchy\",\n \"literary\",\n \"considered\"\n ],\n \"formality\": \"medium-high\",\n \"density\": \"medium\",\n \"scheme\": \"dark\",\n \"best_for\": \"Anything that should land like a broadside newspaper headline: brand manifestos, magazine and cultural pitches, design talks, bilingual EN/CN decks, founder vision statements. Also a striking pick for tech, research, or business decks that want a dramatic single-accent editorial feel.\",\n \"avoid_for\": \"Decks that need to feel quiet, warm, or institutionally traditional — the dark canvas with fire-orange accent commits to drama.\",\n \"preview_md\": \"bold-template-pack/templates/broadside/preview.md\",\n \"design_md\": \"bold-template-pack/templates/broadside/design.md\"\n },\n {\n \"slug\": \"capsule\",\n \"name\": \"Capsule\",\n \"tagline\": \"Modular pill-shaped cards on warm bone with a full pastel-pop palette.\",\n \"mood\": [\n \"playful\",\n \"modern\",\n \"warm\",\n \"fresh\",\n \"fun\"\n ],\n \"tone\": [\n \"upbeat\",\n \"graphic\",\n \"approachable\",\n \"cool\"\n ],\n \"formality\": \"medium-low\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel modular, modern, and a little Y2K: lifestyle brands, creator portfolios, DTC launches, beauty / wellness, agency credentials. Also fun for a playful tech demo or a research deck that wants pop-art clarity instead of gravitas.\",\n \"avoid_for\": \"Contexts that require traditional institutional weight — the capsule shapes and pastel pops actively soften authority.\",\n \"preview_md\": \"bold-template-pack/templates/capsule/preview.md\",\n \"design_md\": \"bold-template-pack/templates/capsule/design.md\"\n },\n {\n \"slug\": \"cartesian\",\n \"name\": \"Cartesian\",\n \"tagline\": \"Quiet warm-neutral palette with classical Playfair serifs; tasteful and unhurried.\",\n \"mood\": [\n \"quiet\",\n \"considered\",\n \"elegant\",\n \"warm-minimal\"\n ],\n \"tone\": [\n \"classical\",\n \"literary\",\n \"restrained\",\n \"confident-quiet\"\n ],\n \"formality\": \"high\",\n \"density\": \"low\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel quiet, considered, and grown-up: investment theses, white papers, advisory work, longform research, gallery / cultural decks. Also a strong choice for editorial features, founder reflections, or any deck where restraint is the message — including across tech and finance.\",\n \"avoid_for\": \"Decks that need visual heat, multiple accents, or a sense of urgency — the warm-neutral palette is intentionally low-energy.\",\n \"preview_md\": \"bold-template-pack/templates/cartesian/preview.md\",\n \"design_md\": \"bold-template-pack/templates/cartesian/design.md\"\n },\n {\n \"slug\": \"cobalt-grid\",\n \"name\": \"Cobalt Grid\",\n \"tagline\": \"Electric cobalt serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules.\",\n \"mood\": [\n \"editorial\",\n \"design-research\",\n \"studious\",\n \"modernist\",\n \"tech-print\",\n \"monochrome\"\n ],\n \"tone\": [\n \"considered\",\n \"literary\",\n \"studious\",\n \"quietly-modern\",\n \"editorial\"\n ],\n \"formality\": \"high\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel like a quietly serious design / research bulletin, art publication, or curated trend report. Strong for studio annuals, agency capabilities decks, design-research publications, architecture / art / academic decks, and any deck wanting one strict accent colour and a printed-ledger calmness rather than corporate polish.\",\n \"avoid_for\": \"Decks that need warmth, multi-colour energy, or a casual / playful voice — the strict cobalt + cream + grid palette is intentionally austere.\",\n \"preview_md\": \"bold-template-pack/templates/cobalt-grid/preview.md\",\n \"design_md\": \"bold-template-pack/templates/cobalt-grid/design.md\"\n },\n {\n \"slug\": \"coral\",\n \"name\": \"Coral\",\n \"tagline\": \"Cream and coral on near-black, set in oversized Bebas Neue.\",\n \"mood\": [\n \"bold\",\n \"warm\",\n \"modern\",\n \"confident\"\n ],\n \"tone\": [\n \"graphic\",\n \"punchy\",\n \"magazine\"\n ],\n \"formality\": \"medium\",\n \"density\": \"medium\",\n \"scheme\": \"mixed\",\n \"best_for\": \"Anything that should feel warm-graphic and editorial: fashion, beauty, fitness, F&B, lifestyle brands, agency credentials. Just as strong for a creator portfolio, a manifesto, or a tech / research deck that wants warmth and a single bold accent instead of corporate cool.\",\n \"avoid_for\": \"Contexts that should feel quiet or institutional — the coral accent and oversized Bebas Neue commit hard to a confident magazine voice.\",\n \"preview_md\": \"bold-template-pack/templates/coral/preview.md\",\n \"design_md\": \"bold-template-pack/templates/coral/design.md\"\n },\n {\n \"slug\": \"creative-mode\",\n \"name\": \"Creative Mode\",\n \"tagline\": \"Cream paper canvas with confident multi-color (green, pink, orange, yellow) accents and Archivo Black display.\",\n \"mood\": [\n \"creative\",\n \"confident\",\n \"playful\",\n \"design-led\"\n ],\n \"tone\": [\n \"graphic\",\n \"expressive\",\n \"modern\"\n ],\n \"formality\": \"medium\",\n \"density\": \"medium-high\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel design-led and confident: creative agency pitches, design studio decks, ad shop credentials, brand creative reviews, art-direction reviews. Also a great unexpected pick for a tech talk, research findings, or finance review when the speaker wants to lead with taste rather than convention.\",\n \"avoid_for\": \"Contexts that demand institutional restraint and a quiet authority — the saturated multi-accent palette will read as expressive, not formal.\",\n \"preview_md\": \"bold-template-pack/templates/creative-mode/preview.md\",\n \"design_md\": \"bold-template-pack/templates/creative-mode/design.md\"\n },\n {\n \"slug\": \"daisy-days\",\n \"name\": \"Daisy Days\",\n \"tagline\": \"Cheerful pastel deck with hand-drawn daisies, stars, and rainbows. Friendly, soft, and warm.\",\n \"mood\": [\n \"cheerful\",\n \"playful\",\n \"warm\",\n \"sunny\",\n \"wholesome\"\n ],\n \"tone\": [\n \"friendly\",\n \"soft\",\n \"encouraging\",\n \"approachable\",\n \"lighthearted\"\n ],\n \"formality\": \"low\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel friendly, soft, and joyful: educational content, kids and family, wellness programs, community workshops, creator portfolios for craft / illustration. Also lovely for an unexpected playful internal kickoff, a wedding planning deck, or any moment where warmth is the message — including across tech or business contexts.\",\n \"avoid_for\": \"Contexts where the audience explicitly expects authority and precision — the hand-drawn pastel SVG decorations are the opposite of buttoned-up.\",\n \"preview_md\": \"bold-template-pack/templates/daisy-days/preview.md\",\n \"design_md\": \"bold-template-pack/templates/daisy-days/design.md\"\n },\n {\n \"slug\": \"editorial-forest\",\n \"name\": \"Editorial Forest\",\n \"tagline\": \"Forest green, dusty pink, and warm cream meet Source Serif 4 in a quiet, intentional quarterly-review deck.\",\n \"mood\": [\n \"editorial\",\n \"quiet\",\n \"considered\",\n \"warm\",\n \"intentional\"\n ],\n \"tone\": [\n \"literary\",\n \"thoughtful\",\n \"warm\",\n \"low-pressure\"\n ],\n \"formality\": \"medium\",\n \"density\": \"medium\",\n \"scheme\": \"mixed\",\n \"best_for\": \"Anything that should feel like a considered editorial — quarterly reviews, internal readouts, studio updates, creative-agency presentations. Equally good for any deck that wants to feel warm and unhurried rather than corporate, including research recaps, book or program announcements, and team retrospectives.\",\n \"avoid_for\": \"Contexts that need to feel urgent, punchy, or sales-driven — the palette and rhythm are intentionally quiet.\",\n \"preview_md\": \"bold-template-pack/templates/editorial-forest/preview.md\",\n \"design_md\": \"bold-template-pack/templates/editorial-forest/design.md\"\n },\n {\n \"slug\": \"editorial-tri-tone\",\n \"name\": \"Editorial Tri-Tone\",\n \"tagline\": \"Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif.\",\n \"mood\": [\n \"editorial\",\n \"warm\",\n \"intentional\",\n \"moody\"\n ],\n \"tone\": [\n \"literary\",\n \"warm\",\n \"considered\",\n \"stylish\"\n ],\n \"formality\": \"medium-high\",\n \"density\": \"medium\",\n \"scheme\": \"mixed\",\n \"best_for\": \"Anything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews. Equally good for any deck — including tech, research, or business — that wants tri-tone discipline and serif/sans contrast instead of the usual neutrals.\",\n \"avoid_for\": \"Decks that need to read as soft or comforting — the burgundy/pink/cream tri-tone is intentionally high-contrast and styled.\",\n \"preview_md\": \"bold-template-pack/templates/editorial-tri-tone/preview.md\",\n \"design_md\": \"bold-template-pack/templates/editorial-tri-tone/design.md\"\n },\n {\n \"slug\": \"emerald-editorial\",\n \"name\": \"Emerald Editorial\",\n \"tagline\": \"A magazine-cover business deck: emerald + navy + paper, double-rule masthead ornaments, and a bold Bodoni-style display serif.\",\n \"mood\": [\n \"editorial\",\n \"considered\",\n \"confident\",\n \"magazine-cover\"\n ],\n \"tone\": [\n \"literary\",\n \"authoritative\",\n \"warm\",\n \"designed\"\n ],\n \"formality\": \"medium-high\",\n \"density\": \"medium\",\n \"scheme\": \"mixed\",\n \"best_for\": \"Anything that should feel like the front of a serious magazine, including but not limited to leadership readouts, planning-office reviews, and strategy briefings. The double-rule masthead ornament gives it editorial gravitas without making it stiff — also a great unexpected pick for product launches or research recaps that want to feel considered rather than corporate.\",\n \"avoid_for\": \"Contexts that need to read as quiet, neutral, or institutionally restrained — the emerald field is too saturated to disappear into the background.\",\n \"preview_md\": \"bold-template-pack/templates/emerald-editorial/preview.md\",\n \"design_md\": \"bold-template-pack/templates/emerald-editorial/design.md\"\n },\n {\n \"slug\": \"grove\",\n \"name\": \"Grove\",\n \"tagline\": \"Forest-green canvas with cream type, classical Playfair serifs, and a single rust accent.\",\n \"mood\": [\n \"organic\",\n \"considered\",\n \"warm\",\n \"literary\",\n \"natural\"\n ],\n \"tone\": [\n \"classical\",\n \"warm\",\n \"considered\",\n \"patient\"\n ],\n \"formality\": \"medium-high\",\n \"density\": \"medium\",\n \"scheme\": \"mixed\",\n \"best_for\": \"Anything that should feel organic, considered, and grown-up: sustainability and wellness brands, outdoor / nature products, wineries and restaurants, literary or arts decks, advisory deliverables, bilingual EN/CN reports. Also a calm, distinctive choice for tech, research, or business decks that want patience over urgency.\",\n \"avoid_for\": \"Decks that need neon energy or rapid-fire pop — the forest-green canvas and Playfair serif commit to a slow, classical voice.\",\n \"preview_md\": \"bold-template-pack/templates/grove/preview.md\",\n \"design_md\": \"bold-template-pack/templates/grove/design.md\"\n },\n {\n \"slug\": \"long-table\",\n \"name\": \"Long Table\",\n \"tagline\": \"Warm cream and rust-red supper-club aesthetic with bold uppercase grotesk headlines, Fraunces serifs, and pill-shaped outlined buttons.\",\n \"mood\": [\n \"warm\",\n \"intimate\",\n \"modern\",\n \"friendly\",\n \"small-batch\",\n \"social\",\n \"hospitality\"\n ],\n \"tone\": [\n \"warm\",\n \"playful\",\n \"considered\",\n \"social\",\n \"magazine-friendly\",\n \"modern-editorial\"\n ],\n \"formality\": \"medium\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel like a warm, intimate, modern hospitality / community brand: supper clubs, dinner series, small restaurants, creative-studio events, membership pitches, lifestyle and wine brands. Equally good for any deck wanting a single warm accent colour, mixed-weight typography, and a social-media-aware modern-editorial voice.\",\n \"avoid_for\": \"Decks that need corporate polish, technical density, or a cold / minimalist register — the rust-red palette and bold serif mix are intentionally warm and people-facing.\",\n \"preview_md\": \"bold-template-pack/templates/long-table/preview.md\",\n \"design_md\": \"bold-template-pack/templates/long-table/design.md\"\n },\n {\n \"slug\": \"mat\",\n \"name\": \"Mat\",\n \"tagline\": \"Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones.\",\n \"mood\": [\n \"warm-modern\",\n \"considered\",\n \"tactile\",\n \"mid-century\"\n ],\n \"tone\": [\n \"warm\",\n \"design-led\",\n \"intentional\",\n \"considered\"\n ],\n \"formality\": \"medium\",\n \"density\": \"medium\",\n \"scheme\": \"mixed\",\n \"best_for\": \"Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture / interior brands, ceramics / craft / furniture, advisory decks. Also a warm, distinctive choice for tech, research, or business decks that want a considered analog feel instead of digital-cool.\",\n \"avoid_for\": \"Contexts that need fast tech energy or institutional restraint — the muted sage and burnt-orange palette is intentionally warm and slow.\",\n \"preview_md\": \"bold-template-pack/templates/mat/preview.md\",\n \"design_md\": \"bold-template-pack/templates/mat/design.md\"\n },\n {\n \"slug\": \"monochrome\",\n \"name\": \"Monochrome\",\n \"tagline\": \"Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all.\",\n \"mood\": [\n \"restrained\",\n \"literary\",\n \"archival\",\n \"ledger\"\n ],\n \"tone\": [\n \"literary\",\n \"considered\",\n \"neutral\",\n \"honest\"\n ],\n \"formality\": \"high\",\n \"density\": \"high\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel like a hand-typeset ledger: user research synthesis, white papers, longform reports, academic and policy briefs, advisory deliverables, bilingual EN/CN reports. Equally good for tech, design, or brand decks that want their words to be the only thing on the page.\",\n \"avoid_for\": \"Decks that need visual personality or color-led storytelling — the all-ink palette is intentionally austere.\",\n \"preview_md\": \"bold-template-pack/templates/monochrome/preview.md\",\n \"design_md\": \"bold-template-pack/templates/monochrome/design.md\"\n },\n {\n \"slug\": \"neo-grid-bold\",\n \"name\": \"Neo-Grid Bold\",\n \"tagline\": \"Editorial neo-brutalism with a single neon yellow accent on off-white paper.\",\n \"mood\": [\n \"confident\",\n \"punchy\",\n \"editorial\",\n \"modern\"\n ],\n \"tone\": [\n \"bold\",\n \"minimal\",\n \"design-led\",\n \"graphic\"\n ],\n \"formality\": \"medium\",\n \"density\": \"high\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel confident and editorial-graphic: design-led pitches, brand work, founder talks, conference keynotes. Excellent for stat-heavy slides, comparisons, and process flows. Just as strong for tech, research, or finance when the speaker wants to read as design-led rather than corporate.\",\n \"avoid_for\": \"Contexts that need to feel quiet, traditional, or warm — the neon-yellow accent and uppercase display commit to a confident editorial voice.\",\n \"preview_md\": \"bold-template-pack/templates/neo-grid-bold/preview.md\",\n \"design_md\": \"bold-template-pack/templates/neo-grid-bold/design.md\"\n },\n {\n \"slug\": \"peoples-platform\",\n \"name\": \"People's Platform (Block & Bold)\",\n \"tagline\": \"Activist poster energy: blue, orange, red on cream, with Alfa Slab + Caveat Brush.\",\n \"mood\": [\n \"activist\",\n \"loud\",\n \"graphic\",\n \"honest\"\n ],\n \"tone\": [\n \"punchy\",\n \"direct\",\n \"expressive\",\n \"warm-bold\"\n ],\n \"formality\": \"medium-low\",\n \"density\": \"medium-high\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel honest, loud, and graphic: cultural commentary, manifestos, civic and community decks, design talks, campaign pitches. Excellent for founder-vision moments, mission statements, or any deck — including across industries — that wants protest-poster energy instead of corporate polish.\",\n \"avoid_for\": \"Contexts where institutional restraint is the actual goal — the saturated political-poster palette commits hard to expressive energy.\",\n \"preview_md\": \"bold-template-pack/templates/peoples-platform/preview.md\",\n \"design_md\": \"bold-template-pack/templates/peoples-platform/design.md\"\n },\n {\n \"slug\": \"pin-and-paper\",\n \"name\": \"Pin & Paper\",\n \"tagline\": \"Yellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture.\",\n \"mood\": [\n \"crafted\",\n \"handmade\",\n \"warm\",\n \"thoughtful\",\n \"literary\"\n ],\n \"tone\": [\n \"literary\",\n \"intimate\",\n \"warm\",\n \"grounded\"\n ],\n \"formality\": \"medium\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel hand-crafted, warm, and literary: qualitative research findings, founder reflections, longform brand stories, workshop debriefs. The signature safety-pin illustrations and paper-grain texture make it especially good for any deck — including tech or business — that wants personality and warmth over polish.\",\n \"avoid_for\": \"Decks that need to feel digital-native polished or rigorously data-driven — handwritten Caveat is intentionally informal.\",\n \"preview_md\": \"bold-template-pack/templates/pin-and-paper/preview.md\",\n \"design_md\": \"bold-template-pack/templates/pin-and-paper/design.md\"\n },\n {\n \"slug\": \"pink-script\",\n \"name\": \"Pink Script — After Hours\",\n \"tagline\": \"Black canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury.\",\n \"mood\": [\n \"nocturnal\",\n \"moody\",\n \"intentional\",\n \"luxe\",\n \"expressive\"\n ],\n \"tone\": [\n \"literary\",\n \"sultry\",\n \"considered\",\n \"magazine\"\n ],\n \"formality\": \"medium-high\",\n \"density\": \"low\",\n \"scheme\": \"dark\",\n \"best_for\": \"Anything that should feel nocturnal, intentional, and a little luxe: fashion brand decks, creator personal brands, after-hours / nightlife / spirits launches, luxury product reveals, editorial features. Also a striking unexpected pick for a tech keynote, research synthesis, or business pitch that wants to land with magnetic confidence.\",\n \"avoid_for\": \"Daytime corporate-professional and traditional B2B contexts where the dark canvas with hot-pink accent reads as too styled or too expressive.\",\n \"preview_md\": \"bold-template-pack/templates/pink-script/preview.md\",\n \"design_md\": \"bold-template-pack/templates/pink-script/design.md\"\n },\n {\n \"slug\": \"playful\",\n \"name\": \"Playful\",\n \"tagline\": \"Sun-warm peach background with Syne display: a friendly indie launch deck.\",\n \"mood\": [\n \"warm\",\n \"approachable\",\n \"indie\",\n \"friendly\"\n ],\n \"tone\": [\n \"upbeat\",\n \"informal\",\n \"welcoming\"\n ],\n \"formality\": \"low\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel warm, indie, and approachable: creator portfolios, indie product launches, lifestyle brands, small-business pitches, newsletter / community decks. Also welcoming for any deck — including tech or research — that wants to feel friendly and human rather than corporate.\",\n \"avoid_for\": \"Contexts where institutional credibility matters more than warmth — the peach palette is intentionally informal.\",\n \"preview_md\": \"bold-template-pack/templates/playful/preview.md\",\n \"design_md\": \"bold-template-pack/templates/playful/design.md\"\n },\n {\n \"slug\": \"raw-grid\",\n \"name\": \"Raw Grid\",\n \"tagline\": \"Neo-brutalist deck with thick borders, offset shadows, and a pink/sage/ink palette.\",\n \"mood\": [\n \"raw\",\n \"punchy\",\n \"energetic\",\n \"confident\"\n ],\n \"tone\": [\n \"direct\",\n \"modern\",\n \"no-nonsense\",\n \"graphic\"\n ],\n \"formality\": \"medium-low\",\n \"density\": \"high\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel direct and graphic-confident: founder pitches, accelerator demos, brand decks, indie launches, creator portfolios. Strong for stat slides, comparison tables, and process flows. Equally good for tech, research, or finance when the speaker wants the deck to feel scrappy-confident rather than buttoned-up.\",\n \"avoid_for\": \"Contexts that need to feel soft, warm, or intentionally quiet — the brutalist borders and offset shadows commit to a graphic voice.\",\n \"preview_md\": \"bold-template-pack/templates/raw-grid/preview.md\",\n \"design_md\": \"bold-template-pack/templates/raw-grid/design.md\"\n },\n {\n \"slug\": \"retro-windows\",\n \"name\": \"Retro Windows\",\n \"tagline\": \"Windows 95 chrome: gray title bars, MS Sans Serif, pixel typography, full nostalgia.\",\n \"mood\": [\n \"nostalgic\",\n \"retro\",\n \"geeky\",\n \"playful\"\n ],\n \"tone\": [\n \"winking\",\n \"nostalgic\",\n \"geeky\",\n \"fun\"\n ],\n \"formality\": \"low\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel knowingly nostalgic: retro gaming, Y2K-aesthetic brands, creator portfolios with a 90s vibe, tech-history talks, deliberately tongue-in-cheek decks. A great choice anywhere a playful retro reference is the entire point.\",\n \"avoid_for\": \"Decks that need to read as modern, elegant, or institutionally credible — the Win95 chrome will always read as a costume.\",\n \"preview_md\": \"bold-template-pack/templates/retro-windows/preview.md\",\n \"design_md\": \"bold-template-pack/templates/retro-windows/design.md\"\n },\n {\n \"slug\": \"retro-zine\",\n \"name\": \"Retro Zine\",\n \"tagline\": \"Beige paper with green accent and Bebas Neue + Caveat: a riso-printed zine in HTML form.\",\n \"mood\": [\n \"crafted\",\n \"lo-fi\",\n \"underground\",\n \"warm-retro\"\n ],\n \"tone\": [\n \"scrappy\",\n \"warm\",\n \"intentional\",\n \"DIY\"\n ],\n \"formality\": \"medium-low\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel printed, lo-fi, and crafted: indie zines and publications, music / arts brands, creator portfolios, small-batch craft launches, community decks. Also a great underdog choice for tech, research, or business decks that want a riso-print warmth instead of digital polish.\",\n \"avoid_for\": \"Contexts that demand digital-native polish or fast modern-tech energy — the layered zine aesthetic intentionally feels handmade.\",\n \"preview_md\": \"bold-template-pack/templates/retro-zine/preview.md\",\n \"design_md\": \"bold-template-pack/templates/retro-zine/design.md\"\n },\n {\n \"slug\": \"sakura-chroma\",\n \"name\": \"Sakura Chroma\",\n \"tagline\": \"Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes.\",\n \"mood\": [\n \"retro\",\n \"playful\",\n \"kawaii-tech\",\n \"warm\",\n \"tactile\",\n \"product-catalogue\"\n ],\n \"tone\": [\n \"playful\",\n \"confident\",\n \"warm\",\n \"tactile\",\n \"80s-Japanese-tech\"\n ],\n \"formality\": \"low\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel like a vintage Japanese cassette package or a TDK / Sony / Sakura Color product catalogue: indie hardware brand decks, music-label release schedules, analog studio retrospectives, zine and magazine pitches, kawaii-tech product launches, creative-studio annual reports. Equally good for any deck wanting bold colour, condensed display type, and a tactile printed-product personality.\",\n \"avoid_for\": \"Decks that need restrained, corporate, or quiet typography — the bold condensed lockups, ribbon stripes, and primary-colour palette are intentionally loud and product-page-y.\",\n \"preview_md\": \"bold-template-pack/templates/sakura-chroma/preview.md\",\n \"design_md\": \"bold-template-pack/templates/sakura-chroma/design.md\"\n },\n {\n \"slug\": \"scatterbrain\",\n \"name\": \"Scatterbrain\",\n \"tagline\": \"Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand and Zilla Slab type stack.\",\n \"mood\": [\n \"playful\",\n \"creative\",\n \"warm\",\n \"messy-on-purpose\",\n \"workshop\"\n ],\n \"tone\": [\n \"informal\",\n \"warm\",\n \"expressive\",\n \"human\"\n ],\n \"formality\": \"low\",\n \"density\": \"high\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel like a designer's whiteboard: brainstorms, workshops, creative-agency credentials, design-thinking sessions, ideation pitches, art-direction reviews. Equally fun for any deck — including tech, research, or business — that wants to read as in-progress thinking rather than polished conclusions.\",\n \"avoid_for\": \"Contexts that demand precision and institutional weight — the post-it sticky-note aesthetic intentionally reads as warm and unfinished.\",\n \"preview_md\": \"bold-template-pack/templates/scatterbrain/preview.md\",\n \"design_md\": \"bold-template-pack/templates/scatterbrain/design.md\"\n },\n {\n \"slug\": \"signal\",\n \"name\": \"Signal\",\n \"tagline\": \"Deep navy canvas with bone paper and a single muted-gold accent; institutional with quiet weight.\",\n \"mood\": [\n \"institutional\",\n \"trustworthy\",\n \"considered\",\n \"weighty\"\n ],\n \"tone\": [\n \"sober\",\n \"polished\",\n \"established\",\n \"literary\"\n ],\n \"formality\": \"high\",\n \"density\": \"high\",\n \"scheme\": \"mixed\",\n \"best_for\": \"Anything that should feel weighty, considered, and credibly institutional: investor decks, board presentations, consulting deliverables, legal / policy briefs, advisory pitches. Also a strong choice for tech, research, or brand work that wants to read as quietly authoritative rather than loud.\",\n \"avoid_for\": \"Contexts that should feel hot, fast, or intentionally playful — the navy + gold restraint commits to a sober voice.\",\n \"preview_md\": \"bold-template-pack/templates/signal/preview.md\",\n \"design_md\": \"bold-template-pack/templates/signal/design.md\"\n },\n {\n \"slug\": \"soft-editorial\",\n \"name\": \"Soft Editorial\",\n \"tagline\": \"Cormorant Garamond serif on warm paper with sage, blush, and lemon accents.\",\n \"mood\": [\n \"literary\",\n \"elegant\",\n \"quiet\",\n \"warm-classical\"\n ],\n \"tone\": [\n \"literary\",\n \"considered\",\n \"warm\",\n \"magazine\"\n ],\n \"formality\": \"high\",\n \"density\": \"low\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel literary, elegant, and unhurried: editorial features, longform brand stories, gallery / museum decks, advisory deliverables, wedding / lifestyle media, founder essays. Equally good for tech, research, or business decks that want a Sunday-supplement warmth instead of corporate polish.\",\n \"avoid_for\": \"Decks that need visual heat or punch — the warm-paper palette and Cormorant serif are intentionally quiet.\",\n \"preview_md\": \"bold-template-pack/templates/soft-editorial/preview.md\",\n \"design_md\": \"bold-template-pack/templates/soft-editorial/design.md\"\n },\n {\n \"slug\": \"stencil-tablet\",\n \"name\": \"Stencil & Tablet\",\n \"tagline\": \"Bone paper with stencil-cut headlines and a six-color earth palette: archaeology meets brand.\",\n \"mood\": [\n \"archival\",\n \"earthy\",\n \"tactile\",\n \"considered\",\n \"graphic\"\n ],\n \"tone\": [\n \"weighty\",\n \"considered\",\n \"tactile\",\n \"literary\"\n ],\n \"formality\": \"medium-high\",\n \"density\": \"medium\",\n \"scheme\": \"light\",\n \"best_for\": \"Anything that should feel archival, tactile, and weighty-graphic: museum and cultural-institution decks, art / architecture brands, longform research, heritage and craft brands, manifestos. A great choice anytime — including across tech and business — when you want the deck to feel like a field manual rather than a slide deck.\",\n \"avoid_for\": \"Contexts that demand digital-native polish or playful pop — the stencil-cut display and earth-tone palette commit to a deliberate analog feel.\",\n \"preview_md\": \"bold-template-pack/templates/stencil-tablet/preview.md\",\n \"design_md\": \"bold-template-pack/templates/stencil-tablet/design.md\"\n },\n {\n \"slug\": \"studio\",\n \"name\": \"Studio\",\n \"tagline\": \"Black canvas with electric-yellow type; high-voltage design studio aesthetic.\",\n \"mood\": [\n \"electric\",\n \"bold\",\n \"graphic\",\n \"design-led\",\n \"high-contrast\"\n ],\n \"tone\": [\n \"graphic\",\n \"loud\",\n \"modern\",\n \"intentional\"\n ],\n \"formality\": \"medium\",\n \"density\": \"medium\",\n \"scheme\": \"dark\",\n \"best_for\": \"Anything that should feel electric and design-led: studio credentials, creative agency pitches, brand showcases, art-direction reviews, fashion / sneaker brand work. Also a striking unexpected choice for tech, research, or business decks where the speaker wants the deck to *be* a brand statement.\",\n \"avoid_for\": \"Contexts that should feel quiet or institutional — the black-and-electric-yellow palette is the loudest in the library.\",\n \"preview_md\": \"bold-template-pack/templates/studio/preview.md\",\n \"design_md\": \"bold-template-pack/templates/studio/design.md\"\n },\n {\n \"slug\": \"vellum\",\n \"name\": \"Vellum\",\n \"tagline\": \"Deep navy canvas with warm-yellow Cormorant serifs and a single dusty teal accent. A quiet, scholarly aesthetic.\",\n \"mood\": [\n \"scholarly\",\n \"literary\",\n \"considered\",\n \"quiet\",\n \"intellectual\"\n ],\n \"tone\": [\n \"literary\",\n \"considered\",\n \"patient\",\n \"intelligent\"\n ],\n \"formality\": \"high\",\n \"density\": \"low\",\n \"scheme\": \"dark\",\n \"best_for\": \"Anything that should feel scholarly, literary, and quietly intelligent: research synthesis, white papers, academic and policy briefs, advisory deliverables, longform editorial pieces, founder reflections. Equally strong for any deck — including tech, business, or creator work — that wants a calm, considered atmosphere instead of energetic visuals.\",\n \"avoid_for\": \"Contexts that need visual heat or pop — the navy + warm-yellow Cormorant aesthetic is intentionally low-tempo.\",\n \"preview_md\": \"bold-template-pack/templates/vellum/preview.md\",\n \"design_md\": \"bold-template-pack/templates/vellum/design.md\"\n }\n ]\n}\n","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/8-bit-orbit/design.md":"---\nversion: alpha\nname: 8-Bit Orbit\ndescription: A retro-futuristic pixel-art presentation system that fuses 16-bit arcade nostalgia with editorial discipline. Display type runs in Tektur (a chunky geometric display face built on pixel-grid logic) paired with Chakra Petch for body and Space Mono for code-flavored labels and tabular data. The palette pivots on a deep cosmic navy (`#0F1B3D` / `#0A0E27`) lit by three saturated neons — cyan, hot pink, and a high-key yellow — with a soft lavender pastel for warm reprieves. Depth is built from stacked hard offset shadows in 4px increments (the pixel unit), CRT scanlines, atmospheric grain, vignettes, and animated starfields. The effect sits between an arcade cabinet and a Tron-era boardroom — unmistakably digital, intentionally lo-fi, and engineered to feel as if it just booted up.\n\ncolors:\n dark-void: \"#0A0E27\"\n deep-navy: \"#0F1B3D\"\n neon-cyan: \"#5EDCF4\"\n neon-pink: \"#F0A6CA\"\n neon-yellow: \"#F4D03F\"\n soft-lavender: \"#E2D5F2\"\n white: \"#FFFFFF\"\n\nshadows:\n pixel-stack-cyan-yellow: \"4px 0 0 0 {colors.deep-navy}, 0 4px 0 0 {colors.deep-navy}, 4px 4px 0 0 {colors.deep-navy}, 8px 4px 0 0 {colors.neon-yellow}, 4px 8px 0 0 {colors.neon-yellow}, 8px 8px 0 0 {colors.neon-yellow}\"\n pixel-stack-pink-cyan: \"4px 0 0 0 {colors.deep-navy}, 0 4px 0 0 {colors.deep-navy}, 4px 4px 0 0 {colors.deep-navy}, 8px 4px 0 0 {colors.neon-cyan}, 4px 8px 0 0 {colors.neon-cyan}, 8px 8px 0 0 {colors.neon-cyan}\"\n pixel-l-shape: \"4px 0 0 0 {colors.deep-navy}, 0 4px 0 0 {colors.deep-navy}, 4px 4px 0 0 {colors.deep-navy}\"\n pixel-text-shadow: \"4px 4px 0 {colors.neon-yellow}, 8px 8px 0 {colors.deep-navy}\"\n pixel-text-shadow-small: \"3px 3px 0 {colors.deep-navy}\"\n card-offset: \"6px 6px 0 rgba(15, 27, 61, 0.15)\"\n card-featured: \"8px 8px 0 {colors.neon-yellow}\"\n\ntypography:\n pixel-hero:\n fontFamily: \"'Tektur', cursive\"\n fontSize: \"clamp(48px, 10vw, 128px)\"\n fontWeight: 900\n lineHeight: 1.05\n letterSpacing: 0.04em\n display:\n fontFamily: \"'Tektur', cursive\"\n fontSize: \"clamp(32px, 5vw, 64px)\"\n fontWeight: 700\n lineHeight: 1.15\n headline:\n fontFamily: \"'Tektur', cursive\"\n fontSize: \"clamp(24px, 3.5vw, 45px)\"\n fontWeight: 700\n lineHeight: 1.15\n subhead:\n fontFamily: \"'Tektur', cursive\"\n fontSize: \"clamp(17.6px, 2vw, 24px)\"\n fontWeight: 700\n lineHeight: 1.15\n stat-number:\n fontFamily: \"'Tektur', cursive\"\n fontSize: \"clamp(32px, 4vw, 56px)\"\n fontWeight: 900\n lineHeight: 1\n body:\n fontFamily: \"'Chakra Petch', sans-serif\"\n fontSize: \"clamp(14.4px, 1.2vw, 18.4px)\"\n fontWeight: 400\n lineHeight: 1.7\n hero-tagline:\n fontFamily: \"'Chakra Petch', sans-serif\"\n fontSize: \"clamp(14.4px, 1.5vw, 19.2px)\"\n fontWeight: 400\n lineHeight: 1.8\n quote-body:\n fontFamily: \"'Chakra Petch', sans-serif\"\n fontSize: \"clamp(17.6px, 2.2vw, 25.6px)\"\n fontWeight: 500\n lineHeight: 1.8\n label-pill:\n fontFamily: \"'Space Mono', monospace\"\n fontSize: 12px\n fontWeight: 700\n lineHeight: 1\n letterSpacing: 0.2em\n textTransform: uppercase\n label-eyebrow:\n fontFamily: \"'Space Mono', monospace\"\n fontSize: 13.6px\n fontWeight: 400\n lineHeight: 1\n letterSpacing: 0.3em\n textTransform: uppercase\n badge:\n fontFamily: \"'Space Mono', monospace\"\n fontSize: 11.2px\n fontWeight: 400\n lineHeight: 1\n letterSpacing: 0.1em\n textTransform: uppercase\n chart-value:\n fontFamily: \"'Space Mono', monospace\"\n fontSize: 12px\n fontWeight: 700\n lineHeight: 1\n chart-label:\n fontFamily: \"'Space Mono', monospace\"\n fontSize: 11.2px\n fontWeight: 400\n lineHeight: 1\n letterSpacing: 0.05em\n date-chip:\n fontFamily: \"'Space Mono', monospace\"\n fontSize: 11.2px\n fontWeight: 400\n lineHeight: 1\n counter:\n fontFamily: \"'Space Mono', monospace\"\n fontSize: 12.8px\n fontWeight: 400\n lineHeight: 1\n letterSpacing: 0.15em\n\nspacing:\n pixel-unit: 4px\n pad-slide-y: \"3vh\"\n pad-slide-x: \"4vw\"\n pad-card-lg: \"32px 40px\"\n pad-card-md: \"28px\"\n pad-card-sm: \"16px 20px\"\n gap-grid-lg: 32px\n gap-grid-md: 24px\n gap-grid-sm: 16px\n content-max-width: 1200px\n\ncanvas:\n width: 100vw\n height: 100vh\n\ncomponents:\n label-pill:\n background: \"{colors.deep-navy}\"\n color: \"{colors.neon-yellow}\"\n padding: \"6px 14px\"\n fontSize: 12px\n fontWeight: 700\n letterSpacing: 0.2em\n textTransform: uppercase\n fontFamily: \"'Space Mono', monospace\"\n description: \"Universal section tag. Default fill is deep-navy with neon-yellow text. Variant fills swap text color so the pill stays legible (e.g., navy bg with cyan text, navy bg with pink text).\"\n pixel-button:\n background: \"{colors.neon-cyan}\"\n color: \"{colors.deep-navy}\"\n padding: \"16px 36px\"\n fontFamily: \"'Tektur', cursive\"\n fontWeight: 700\n letterSpacing: 0.08em\n textTransform: uppercase\n boxShadow: \"{shadows.pixel-stack-cyan-yellow}\"\n description: \"The signature stacked-shadow CTA. The pink variant swaps cyan body for pink and yellow shadow halo for cyan halo.\"\n pixel-corner-bracket:\n width: 24px\n height: 24px\n borderWidth: 4px\n description: \"Two outward-facing L-shapes (top-left + bottom-right) bracketing a region. Default color is neon-cyan; yellow and pink variants exist. Sits 8px outside the bracketed element.\"\n feature-card:\n background: \"rgba(255, 255, 255, 0.15)\"\n backdropFilter: \"blur(8px)\"\n padding: \"32px 24px\"\n border: \"2px solid rgba(15, 27, 61, 0.2)\"\n description: \"Frosted-glass card with inset navy L-brackets (top-left + bottom-right) replacing rounded corners. Used on light-surface slides.\"\n stat-block:\n background: \"rgba(94, 220, 244, 0.08)\"\n border: \"2px solid rgba(94, 220, 244, 0.2)\"\n padding: \"32px 16px\"\n description: \"Cyan-tinted glass stat tile with cyan L-bracket accents at opposite corners. Used on dark surfaces. Stat numeral uses the pixel-text-shadow-small treatment.\"\n bar-track-light:\n height: 32px\n background: \"rgba(15, 27, 61, 0.1)\"\n description: \"Horizontal track for hbar charts on light surfaces. Fill is solid navy/cyan/pink with a yellow offset shadow.\"\n bar-vertical:\n background: \"{colors.neon-cyan}\"\n boxShadow: \"{shadows.pixel-l-shape}\"\n description: \"Vertical chart bar with three-piece navy L-shadow. Color cycles cyan → pink → yellow.\"\n timeline-node:\n width: 24px\n height: 24px\n background: \"{colors.neon-cyan}\"\n border: \"4px solid {colors.deep-navy}\"\n description: \"Square pixel node on timeline rails. Active state swaps fill to neon-yellow.\"\n timeline-rail:\n width: 4px\n background: \"repeating-linear-gradient(to bottom, {colors.deep-navy} 0px, {colors.deep-navy} 16px, transparent 16px, transparent 24px)\"\n description: \"Dashed pixel rail running between timeline nodes.\"\n date-chip:\n background: \"{colors.deep-navy}\"\n color: \"{colors.neon-cyan}\"\n padding: \"2px 10px\"\n fontFamily: \"'Space Mono', monospace\"\n fontSize: 11.2px\n description: \"Small inline date marker on timeline events.\"\n hero-badge:\n border: \"2px solid {colors.neon-yellow}\"\n color: \"{colors.neon-yellow}\"\n padding: \"8px 16px\"\n fontFamily: \"'Space Mono', monospace\"\n fontSize: 11.2px\n letterSpacing: 0.1em\n textTransform: uppercase\n description: \"Outline-only chip used in clusters under hero headlines.\"\n bg-grid:\n backgroundColor: \"{colors.dark-void}\"\n backgroundImage: \"linear-gradient(rgba(94, 220, 244, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 220, 244, 0.07) 1px, transparent 1px)\"\n backgroundSize: \"40px 40px\"\n description: \"40px cyan-on-navy grid wallpaper for dark surfaces. Pink, cyan, and lavender variants invert the relationship (colored ground with low-opacity navy grid lines).\"\n scanlines:\n background: \"repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(10, 14, 39, 0.04) 2px, rgba(10, 14, 39, 0.04) 4px)\"\n mixBlendMode: multiply\n description: \"Horizontal CRT scanline overlay applied via ::after at z-index 50. Always present on every slide.\"\n grain:\n opacity: 0.035\n description: \"SVG fractal-noise grain layer applied via ::before at z-index 49. Always present on every slide.\"\n crt-glow:\n background: \"radial-gradient(ellipse at center, transparent 50%, rgba(10, 14, 39, 0.25) 100%)\"\n description: \"Radial vignette that darkens the corners to mimic a CRT bulge. Applied to dark-surface slides via ::after at z-index 51.\"\n starfield:\n description: \"Container of small 4-6px colored squares (cyan, yellow, pink) positioned absolutely with a 3s twinkle keyframe. Lives on dark surfaces only.\"\n pixel-particles:\n description: \"Floating 8px colored squares with an 8s float keyframe. Decorative ambient layer on hero and CTA-type surfaces.\"\n nav-dot:\n width: 12px\n height: 12px\n border: \"2px solid {colors.neon-cyan}\"\n background: transparent\n description: \"Hollow square pip with a 2px inset cyan fill on active state. Fixed vertical rail at right edge.\"\n quote-line:\n width: 60px\n height: 4px\n background: \"{colors.neon-yellow}\"\n boxShadow: \"4px 4px 0 {colors.deep-navy}\"\n description: \"Short yellow rule with navy offset shadow, used as a separator under quote bodies.\"\n---\n\n## Frontend Slides Fixed-Stage Policy\n\nWhen this design system is used by the `frontend-slides` skill, generate the final deck as a **fixed 1920×1080 stage** that scales uniformly to the browser viewport. The deck should preserve a 16:9 slide canvas on every screen, including phones; it may letterbox or pillarbox, but it should not reflow slide content for mobile.\n\nThis policy has higher priority than any source-template responsive behavior described later in this file. If a later section says the original template is viewport-fluid, treat that as source history only, not as the target generation model for `frontend-slides`.\n\nThis policy applies even if the source template was originally implemented with viewport-fluid CSS such as `100vw`, `100vh`, `vw`, `vh`, or `clamp()`. Treat those values as design proportions to translate into 1920×1080 stage coordinates, not as live responsive rules in the generated deck.\n\nUse `deck-stage.js` or an equivalent inline stage scaler for final output: render each slide at 1920×1080, scale the whole stage with one transform, and verify rendered screenshots for both text overflow and panel overlap.\n\n\n## Overview\n\n8-Bit Orbit is a **retro-futuristic pixel-art presentation system**. Its foundational premise is the **4-pixel unit**: every shadow offset, every border, every corner bracket, every label height resolves to a multiple of 4px. Layouts feel as if they were rasterized on an old CRT and dragged into HTML — and atmospheric overlays (scanlines, grain, vignette glow, animated starfields) reinforce the illusion on every surface.\n\nThe type stack is three faces working in concert. **Tektur** is the display face — a chunky, geometric, semi-pixelated grotesque that carries headlines, hero text, stat numerals, and any text that needs to feel like it was drawn on the pixel grid. **Chakra Petch** is the body face — a humanist sans with subtle geometric cuts that reads cleanly at small sizes and avoids fighting Tektur for attention. **Space Mono** is the system face — used exclusively for labels, captions, badges, chart values, dates, and counters. The mono treatment + wide tracking on these elements makes them feel like HUD readouts, not editorial captions.\n\nThe palette is built around **deep navy as ground** (`{colors.dark-void}` and `{colors.deep-navy}`) lit by **three saturated neons** — cyan, hot pink, yellow — plus a soft lavender pastel. Surfaces alternate: a dark navy surface (cyan grid wallpaper, white text, neon accents glowing in front) followed by a colored surface (pink, cyan, or lavender ground with navy text and navy grid lines etched at low opacity). The neons never appear as body text — they are reserved for headlines, stat numerals, accent rules, and label fills. The result is high contrast without being harsh: the neons feel illuminated rather than printed.\n\nDepth is the system's signature trick: **stacked hard offset shadows in the pixel unit**. The flagship pattern is a six-piece shadow on buttons — three navy offsets stepping down-right at 4px, then three colored halo offsets stepping further at 8px. Hero text gets a two-layer text shadow (yellow at +4/+4, navy at +8/+8). Cards get either a 6px navy box shadow or an 8px yellow box shadow on the featured tier. Every shadow is hard-edged, zero blur, locked to the 4px grid. Atmospheric depth comes from the always-on **scanlines + grain + CRT glow** overlay trio that subtly modulates every surface.\n\n**Density philosophy: moderately dense, atmospherically loaded.** The system reads as broken when surfaces are clean and unaccompanied — without scanlines, grain, vignette, particles, or a colored grid behind, the type loses its arcade context and starts to look like generic web typography. Always layer the atmosphere. Within content regions, however, breathing room matters: cards are widely spaced (24-32px gaps), stat tiles get heavy internal padding, and hero text is allowed to dominate. A typical slide carries one display moment + a small constellation of supporting elements (badges, labels, a chart, or a small grid), all sitting on a fully decorated atmospheric background.\n\n**Key Characteristics:**\n- Three-font stack: Tektur (display), Chakra Petch (body), Space Mono (HUD/labels) — never substitute, never mix outside their roles.\n- Navy ground (`{colors.dark-void}` / `{colors.deep-navy}`) alternates with colored-grid surfaces (pink, cyan, lavender) — both carry the 40px etched grid.\n- Three neons (cyan, pink, yellow) reserved for display, stats, rules, and label fills — never for body text.\n- All measurements snap to the 4px pixel unit: borders 2-4px, shadow offsets 4px / 8px, corner brackets 24×24 with 4px stroke.\n- Stacked hard offset shadows are the system's depth language — never blurred, never colored on text shadows except in the yellow→navy cascade.\n- Every slide carries the persistent scanline + grain + CRT-vignette trio at z-index 49-51.\n- L-shaped corner brackets (`{components.pixel-corner-bracket}`) replace rounded corners and frame regions, cards, and stat tiles.\n- A monospace label pill (`{components.label-pill}`) sits as the universal eyebrow on every region — navy fill, neon text, 0.2em tracking, uppercase.\n- Animated starfields and floating particle squares wallpaper dark surfaces — ambient, not decorative.\n\n## Colors\n\n### Palette\n\n- **Dark Void** (`{colors.dark-void}` — `#0A0E27`): The deepest ground, used on `` and as the base for dark-grid surfaces. Reads as black-with-blue-bias under the CRT vignette.\n- **Deep Navy** (`{colors.deep-navy}` — `#0F1B3D`): The structural color — all shadow stacks, label fills, dark cards, button text on neon surfaces, and chart bar text. Slightly warmer than the void; the two read as ground and figure when stacked.\n- **Neon Cyan** (`{colors.neon-cyan}` — `#5EDCF4`): The system's primary glow. Used for headlines on dark surfaces, primary button fill, stat numerals, primary chart bars, timeline nodes, navigation dots, corner brackets, and grid lines on dark surfaces (at 7% opacity).\n- **Neon Pink** (`{colors.neon-pink}` — `#F0A6CA`): The warm accent. Used as a colored surface ground (40px navy-on-pink grid), secondary button fill, secondary chart bars, mouth detail in pixel avatars, and tertiary corner brackets.\n- **Neon Yellow** (`{colors.neon-yellow}` — `#F4D03F`): The high-key alert color. Used in shadow halos behind buttons and on featured tier cards, as the active timeline-node fill, on hero badges, in label-pill text variants, in the quote-line, and as Tektur text-shadow layer 1.\n- **Soft Lavender** (`{colors.soft-lavender}` — `#E2D5F2`): The calm pastel surface — used as ground for slides that need a softer reprieve from the neon-on-navy intensity. Carries the same etched-navy grid wallpaper as the other colored surfaces.\n- **White** (`{colors.white}` — `#FFFFFF`): Text color on dark/neon surfaces only. Never used as a slide background.\n\n### Defaults\n\n- **Default surface background**: `{colors.dark-void}` with the 40px cyan grid (`{components.bg-grid}`). Always apply scanlines + grain + crt-glow on top.\n- **Default headline color on dark surfaces**: `{colors.neon-cyan}`, with the `{shadows.pixel-text-shadow-small}` or `{shadows.pixel-text-shadow}` treatment for hero-scale text.\n- **Default headline color on colored grids (pink/cyan/lavender)**: `{colors.deep-navy}` — neon text becomes illegible on neon grounds.\n- **Default body text color on dark surfaces**: `rgba(255, 255, 255, 0.7)` — softened white, not pure white.\n- **Default body text color on colored grids**: `rgba(15, 27, 61, 0.75)` — softened navy.\n- **Default label-pill fill**: `{colors.deep-navy}` with `{colors.neon-yellow}` text. On colored grids the text can swap to cyan or pink as long as contrast against navy holds.\n- **Default accent color for callouts and stat numerals**: `{colors.neon-cyan}`.\n- **Default chart palette order**: cyan → pink → yellow (in that order across series).\n- **Default corner bracket color**: `{colors.neon-cyan}`. Yellow and pink variants exist for thematic accents.\n\nWhen a slide needs to feel softer or warmer, switch the colored grid from cyan-on-navy (default) to navy-on-pink, navy-on-cyan, or navy-on-lavender — the structural relationship inverts (grid lines become navy at low opacity) but the typographic rules stay the same.\n\n## Typography\n\n### Font Family\nThe system runs three faces, each locked to its role.\n\n**Tektur** is the display face — a wide-bodied, semi-geometric grotesque with subtle pixel-grid cuts. Used for every hero title, headline, stat numeral, quote mark, and large numeral. Tektur's chunky personality is what makes the system feel arcade-native; replacing it with Inter or Space Grotesk breaks the entire aesthetic.\n\n**Chakra Petch** is the body face — a humanist sans with mild geometric/squared character that reads cleanly at 14-22px and has enough personality to sit next to Tektur without disappearing. Used for paragraphs, hero taglines, quote bodies, and any longer-form prose.\n\n**Space Mono** is the HUD face — a monospace used exclusively for labels, badges, chart values/axes, page counters, date chips, and any element that should feel like a system readout. The mono + wide-tracked uppercase combination is the system's \"interface\" voice.\n\nNever use Tektur for body, never use Chakra Petch for chrome/HUD, never use Space Mono for headlines. The three-role separation is the typographic structure.\n\n### Typography Scale\n\n| Token | Size (clamp) | Family | Weight | Use |\n|---|---|---|---|---|\n| `{typography.pixel-hero}` | 48–128px | Tektur | 900 | Hero or cover display title — always carries the two-layer text shadow |\n| `{typography.display}` | 32–64px | Tektur | 700 | Large section opener |\n| `{typography.headline}` | 24–45px | Tektur | 700 | Primary section headline |\n| `{typography.subhead}` | 17.6–24px | Tektur | 700 | Region-level subheading or card title |\n| `{typography.stat-number}` | 32–56px | Tektur | 900 | Stat tile numeral — pairs with the small text shadow |\n| `{typography.body}` | 14.4–18.4px | Chakra Petch | 400 | Paragraph body |\n| `{typography.hero-tagline}` | 14.4–19.2px | Chakra Petch | 400 | Hero subtitle / lede paragraph below a pixel-hero |\n| `{typography.quote-body}` | 17.6–25.6px | Chakra Petch | 500 | Quote text |\n| `{typography.label-pill}` | 12px | Space Mono | 700 | Text inside the navy label pill |\n| `{typography.label-eyebrow}` | 13.6px | Space Mono | 400 | Standalone uppercase eyebrow above a headline (heavier tracking than the pill) |\n| `{typography.badge}` | 11.2px | Space Mono | 400 | Outline-only hero badge text |\n| `{typography.chart-value}` | 12px | Space Mono | 700 | Chart bar value numerals |\n| `{typography.chart-label}` | 11.2px | Space Mono | 400 | Chart axis or category labels |\n| `{typography.date-chip}` | 11.2px | Space Mono | 400 | Date marker on timeline events |\n| `{typography.counter}` | 12.8px | Space Mono | 400 | Persistent slide counter (NN / NN) |\n\n### Defaults\n\n- **Default size for a hero or cover title**: `{typography.pixel-hero}` (48–128px clamp) — always Tektur weight 900 with the two-layer text shadow.\n- **Default size for a primary section headline**: `{typography.headline}` (24–45px clamp) — Tektur weight 700.\n- **Default size for paragraph body**: `{typography.body}` (14.4–18.4px clamp) — Chakra Petch weight 400.\n- **Default size for a stat numeral**: `{typography.stat-number}` (32–56px clamp) — Tektur weight 900, always carries the 3px navy text shadow.\n- **Default size for an eyebrow label**: `{typography.label-pill}` (12px) housed in the navy pill — or `{typography.label-eyebrow}` (13.6px) if the eyebrow sits standalone.\n- **Default tracking for any Space Mono label**: 0.1em (badges) to 0.3em (eyebrow labels). Mono without wide tracking reads as code, not HUD.\n- **Default body weight**: 400 for Chakra Petch, 500 for quote bodies.\n- **Default display weight**: 700 for headlines, 900 for hero scale and stat numerals.\n\nWhen unsure which display token to reach for, default to `{typography.headline}` — it's the section-level workhorse. Reserve `{typography.pixel-hero}` for cover and CTA moments only.\n\n### Signature Treatments\n\nThese treatments are **non-optional whenever the corresponding element type is used**:\n\n- **Every pixel-hero element carries the stacked text-shadow.** The pattern is `4px 4px 0 {colors.neon-yellow}, 8px 8px 0 {colors.deep-navy}` on cyan text. A pixel-hero element without this two-layer cascade reads as untreated display type and breaks the arcade voice.\n- **Every stat numeral carries the small text-shadow.** The pattern is `3px 3px 0 {colors.deep-navy}` on cyan text. Stat numerals on dark surfaces need this shadow to feel illuminated; without it they read flat.\n- **Every Space Mono element is uppercase with wide tracking** — minimum 0.05em for chart labels, 0.08–0.2em for pills and badges, 0.3em for standalone eyebrow labels. Sentence-case mono does not exist in this system.\n- **Every Tektur display element keeps its native letter-spacing or slight positive (+0.04em on hero scale).** Tektur is wide-bodied by design — adding negative tracking compresses it into something that no longer reads as the same face.\n- **Every Chakra Petch body block uses line-height ≥ 1.6.** The face is dense; tighter line-height on body bleeds into unreadable.\n- **Every label pill uses Space Mono at 12px with 0.2em letter-spacing.** No exceptions — the pill is the system's most recognizable small chrome and any deviation in size or tracking breaks it.\n- **Every chart bar value / axis label uses Space Mono.** Numerical chrome is mono, never Tektur or Chakra Petch.\n\n### Typography Principles\n\nThe voice contrast is **chunky display ↔ humanist body ↔ wide-tracked mono chrome**. Switching any of the three roles to a different face flattens the system into a generic dark-mode aesthetic. Italic is never used in display or body — the only italic that appears anywhere is implicit in the slight tilt on pixel-art decorative elements.\n\nTektur should always feel **planted** — left-aligned, generous line-height, never centered for body-length runs (centering is permitted on hero and CTA titles only). Chakra Petch should always feel **calm** — left-aligned by default, no all-caps treatment, no letter-spacing.\n\n## Layout\n\n### Canvas System\nThe system targets `100vw × 100vh` per slide. Slides are stacked vertically inside a `slides-container` and translated via `transform: translateY(...)` for navigation. Only one slide occupies the viewport at a time, with cubic-bezier `(0.22, 1, 0.36, 1)` easing on an 800ms transition.\n\nDefault slide padding is `3vh 4vw`. The inner `slide-content` caps at `max-width: 1200px` and centers, so on wide displays content keeps editorial column width while the colored background fills the viewport.\n\n### Pixel Unit\nEvery measurement in the system snaps to a **4px grid**. Border widths are 2px or 4px. Shadow offsets are 4px or 8px. Corner brackets are 24×24 with 4px stroke. The background grid is 40px (10 × pixel-unit). Card padding usually resolves to multiples of 8 (16, 24, 32, 48). This discipline is what makes the system feel rasterized rather than vector.\n\n### Persistent Chrome\nThree elements appear on every slide:\n- **Navigation dot rail** — vertical stack of 12×12 cyan-bordered squares, fixed at `right: 24px`, vertically centered. Active state fills the inner 8×8 with cyan.\n- **Slide counter** — Space Mono `01 / 10` format, fixed at `bottom: 24px`, horizontally centered, dark-navy semi-transparent pill background.\n- **Nav hint** — `USE KEYS ↑ ↓`, Space Mono 11px at 50% opacity, fixed at `bottom: 24px right: 24px`.\n\nThe cursor across the entire deck is `crosshair` — an additional arcade signal.\n\n### Atmospheric Overlay Stack\nEvery slide carries (in z-order):\n1. Surface background — either `{components.bg-grid}` (cyan-on-navy) or one of the colored grid variants.\n2. Grain layer at z-index 49, opacity 0.035.\n3. Scanlines at z-index 50, multiply blend mode.\n4. CRT vignette glow at z-index 51 (dark surfaces only).\n5. Optional starfield / pixel particles at z-index 1 inside the surface.\n6. `.slide-content` at z-index 10 above the atmospheric layers.\n\nThis overlay stack is the system's identity. A slide rendered without it looks like a wireframe.\n\n## Depth and Elevation\n\n### Stacked Hard Offset Shadow (Signature)\nThe system uses **stacked, multi-step hard offset shadows** in the 4px pixel unit. Every shadow value is composed in one of three patterns:\n\n- **Three-step navy L-shape** (`{shadows.pixel-l-shape}`) — three offsets at `4px 0`, `0 4px`, `4px 4px` in deep-navy, zero blur. Used on chart bars and small elevated chrome to suggest a single-layer drop.\n- **Six-step button cascade** (`{shadows.pixel-stack-cyan-yellow}` / `{shadows.pixel-stack-pink-cyan}`) — three navy offsets at 4px stepping then three colored halo offsets at 8px stepping behind. Creates a two-layer pixel-bevel effect. Used exclusively on `{components.pixel-button}`.\n- **Two-layer text-shadow** (`{shadows.pixel-text-shadow}` / `{shadows.pixel-text-shadow-small}`) — yellow layer at +4/+4 then navy layer at +8/+8 (or just navy at +3/+3 for stat-scale numerals). Used on every Tektur display element.\n\nAll shadows are zero-blur, hard-edged, locked to the pixel unit. A blurred drop shadow does not exist anywhere in the system.\n\n### Card Shadows\nTwo simpler patterns serve cards:\n- `{shadows.card-offset}` = `6px 6px 0 rgba(15, 27, 61, 0.15)` — soft navy offset for non-featured tier cards on light surfaces.\n- `{shadows.card-featured}` = `8px 8px 0 {colors.neon-yellow}` — neon-yellow offset for featured tier cards, paired with a `-12px` translateY lift.\n\n### Corner Brackets as Depth\nThe L-shaped corner brackets (`{components.pixel-corner-bracket}`) replace traditional border treatments on regions and cards. Two brackets at opposite corners imply a frame without enclosing it — the eye fills in the missing edges. On stat blocks and feature cards, brackets sit inset at `top: -2px / left: -2px` and `bottom: -2px / right: -2px` so they break the cell edge slightly, reinforcing the pixel-bevel feel.\n\n### Atmospheric Depth\nThe scanline + grain + CRT-vignette stack provides ambient depth on every surface without requiring shadow on individual elements. Animated starfields and floating particles layer additional spatial cues behind content. None of these are decorative add-ons — they are core to the depth perception of the system.\n\n## Shapes and Treatment\n\n### Border Radius\nEffectively zero. The only round shape that appears anywhere is the donut-style nav dot inner-fill (which is still a square in this system — the nav dots are square pips, not circles). Rounded buttons, rounded cards, or rounded pill chips break the pixel-art aesthetic immediately.\n\nThe pixel-face avatar zone uses square eyes and a rectangular mouth — anatomy rendered in pixels, not curves.\n\n### Border Weights\n- **2px solid** — used on feature-card outlines, hero badges, nav dots, stat-block frames, chart bars (inline edges).\n- **3px stroke** — used for chart axes inside SVG charts (deep-navy).\n- **4px solid** — used on corner brackets, timeline node borders, the quote-line, and the inner pixel-bevel of buttons.\n\nBorders are always solid, always navy or neon, never dashed except for the timeline rail (`{components.timeline-rail}`) which is intentionally rendered as a 16px-on, 8px-off repeating linear gradient to mimic a pixel-dashed line.\n\n### Decorative Element Types\n\n**Pixel corner bracket** — Two outward L-shapes (top-left + bottom-right) bracketing a region. 24×24 with 4px stroke. Default color is cyan; yellow and pink variants exist. The bracket pattern is the system's most distinctive non-typographic mark.\n\n**Label pill** — Navy rectangle with neon-yellow Space Mono text at 12px / 0.2em. The universal section eyebrow. Variants flip the text color to cyan or pink while keeping the navy fill.\n\n**Hero badge** — Outline-only 2px yellow border with yellow Space Mono text. Appears in clusters under hero titles as feature tags.\n\n**Stat block** — Cyan-tinted glass tile (8% cyan fill, 20% cyan border) with cyan corner brackets at top-left and bottom-right. Holds a large stat numeral over a Space Mono pink label.\n\n**Feature card** — Frosted-glass white card (15% white fill, blur) with navy corner brackets at opposite corners. Used on colored-grid surfaces.\n\n**Pixel button** — Cyan rectangle with the six-step stacked shadow cascade. On hover, the button translates +2/+2 and the shadow collapses to a 4-step cascade — simulating a key-press in pixel art.\n\n**Quote-line** — A 60×4 yellow rectangle with a 4×4 navy offset shadow. Used as a separator beneath quote bodies.\n\n**Timeline node** — 24×24 cyan square with a 4px navy border, positioned on a dashed navy rail. Active state swaps fill to yellow.\n\n**Date chip** — Inline 2px-padded navy pill with cyan Space Mono text, used to mark timeline events.\n\n**Pixel face** — A 120×120 grouping of square \"facial features\" (cyan eyes, pink mouth) rendered as absolutely positioned divs inside a navy avatar zone. Functions as both a friendly mascot and a system-signature decorative module.\n\n**Tier card** — White rectangle, 6px navy offset shadow. Featured tier swaps fill to deep-navy and shadow to 8px yellow, with a `-12px` translateY lift. Tier features use a `+` ::before glyph in cyan instead of standard bullets.\n\n**Pixel landscape** — A row of variable-height navy mountains at the bottom of CTA-class surfaces, opacity 0.3. Pure decoration suggesting an arcade horizon.\n\n## Do's and Don'ts\n\n### Do\n\n- Apply the scanlines + grain + CRT-vignette overlay stack to every slide. The atmosphere is the design system; surfaces without it look like wireframes.\n- Use `{colors.neon-cyan}` as the default headline color on dark surfaces and `{colors.deep-navy}` as the default headline color on colored grids (pink/cyan/lavender).\n- Apply `{shadows.pixel-text-shadow}` to every pixel-hero element and `{shadows.pixel-text-shadow-small}` to every stat numeral. Tektur display type without its text-shadow reads flat.\n- Snap every measurement to the 4px pixel unit — border widths, shadow offsets, padding, corner-bracket dimensions. Off-grid values break the rasterized feel.\n- Use Tektur for display, Chakra Petch for body, Space Mono for chrome — exclusively. Cross-mixing the three voices flattens the system.\n- Wrap eyebrows in the `{components.label-pill}` (navy bg, yellow Space Mono text, 0.2em tracking, uppercase) as the universal section tag.\n- Pair the navy ground with at least one neon glow per region — text, chart bar, corner bracket, or button shadow halo. Pure navy without a neon accent reads as dead screen.\n- Layer animated starfields and pixel-particle floaters on dark hero and CTA surfaces. The motion is part of the atmosphere.\n- Render charts with cyan → pink → yellow series order and Space Mono numerals/labels. The neon trio is the chart palette.\n- Bracket cards and stat tiles with the L-shaped corner brackets at opposite corners instead of fully outlining them. The implied frame is the system's signature card treatment.\n\n### Don't\n\n- Don't substitute fonts. Tektur, Chakra Petch, and Space Mono are the three voices — replacing any of them with Inter, Roboto, or Space Grotesk collapses the system.\n- Don't round any corner. The pixel aesthetic depends on square edges. Border-radius is reserved for SVG donut chart geometry only.\n- Don't blur any shadow. Every shadow is hard-edged at zero blur. `0 4px 12px rgba(0,0,0,0.1)` does not exist here.\n- Don't place neon text on neon surfaces. Cyan headlines on the pink grid become illegible — switch to deep-navy on colored grounds.\n- Don't use Tektur in sentence-case body runs or Chakra Petch in chrome/labels. Each face has a single role.\n- Don't introduce a fourth neon. The palette is cyan + pink + yellow + lavender pastel. Adding green or orange breaks the curated neon trio.\n- Don't omit the atmospheric overlay stack on any slide, even chart-heavy or table-heavy slides. The overlays are non-negotiable.\n- Don't use uppercase Chakra Petch body text. Body always sentence-case; uppercase is reserved for Space Mono and Tektur display.\n- Don't drop the navy label pill in favor of a plain text eyebrow. The pill is the most recognizable small chrome in the system.\n- Don't shadow text or chrome with off-axis offsets. Every shadow steps down-right in 4px increments — left or upward offsets do not exist.\n\n## Responsive Behavior\n\n8-Bit Orbit is a **viewport-fluid system** built around `vw/vh`-based sizing and CSS `clamp()` ranges. There are no hard breakpoints for the deck itself — every font size, padding value, and gap interpolates between a minimum and maximum based on viewport width.\n\n### Scaling Behavior\n- Hero text scales 48px → 128px on viewport width.\n- Stat numerals scale 32px → 56px.\n- Body scales 14.4px → 18.4px.\n- The 4px pixel unit, 40px grid size, scanline 4px stripe, and corner-bracket dimensions are fixed — they do not scale, which means at larger viewports the pixel chrome appears proportionally finer (intentionally — the larger the canvas, the smaller and more refined the pixels read).\n\n### Component Breakpoints\nThree component-level breakpoints exist:\n- `max-width: 1024px` — feature grid collapses 4→2 columns, two-column split layouts stack.\n- `max-width: 900px` — feature grid further collapses, hbar chart label column shrinks.\n- `max-width: 500px` — feature grid becomes single column, stats grid stacks.\n\n### Presenter Behavior\n- Slides advance via `ArrowDown`, `ArrowRight`, or `Space`.\n- Slides reverse via `ArrowUp` or `ArrowLeft`.\n- `Home` jumps to first, `End` to last.\n- Vertical swipe on touch devices advances/reverses with a 50px threshold.\n- Mouse wheel scroll advances/reverses with an 800ms debounce lock.\n- Slide transitions use 800ms cubic-bezier `(0.22, 1, 0.36, 1)` on a translateY transform.\n\n### Animation Triggers\nChart bars and stat counters animate in on slide entry with `setTimeout` staggers (100-150ms between items). When a slide is exited, its bars/counters reset to 0 so re-entry replays the animation. The `prefers-reduced-motion` media query disables transitions and the starfield/particle twinkle keyframes.\n\n### Print Behavior\nThe system has no `@media print` rule. The deck is screen-first; printing produces only the active slide. For static export, screenshots of each slide preserve all atmospheric overlays (scanlines and grain are CSS-rendered, not assets).\n\n## CJK & International Content\n\nWhen using this template for Chinese (or other CJK) content, swap the Latin typeface stack for an equivalent Chinese pairing and apply universal CJK adjustments. All recommended Chinese fonts load via CDN — no install required.\n\n### Recommended Chinese Pairing\n\n| Role | Latin (default) | Chinese counterpart |\n|---|---|---|\n| Display / hero / stat numerals | Tektur 700–900 | 思源黑体 Noto Sans SC 900 |\n| Body / hero tagline / quote body | Chakra Petch 400–500 | 思源黑体 Noto Sans SC 400 |\n| HUD labels / badges / chart values / counter | Space Mono 400–700 (uppercase + wide tracking) | 思源黑体 Noto Sans SC 500 (no transform, no tracking) — see Known CJK Gap below |\n\n### Mixed-Content Strategy\n\n**Strategy A** — single CJK family with built-in Latin glyph coverage. Set every text element to `font-family: 'Noto Sans SC', sans-serif`. 思源黑体 ships Latin glyphs that read cleanly alongside Chinese characters, so a sentence like `使用 Tektur 字体` renders in one consistent face rather than font-switching mid-word. This system normally runs three faces (display / body / HUD); collapsing to one CJK face is the right tradeoff because none of the three Latin faces have credible Chinese counterparts, and visual hierarchy still works through weight (900 / 700 / 500 / 400) plus the system's signature shadow stacks.\n\n### Loading\n\nAdd to the template's ``:\n\n```html\n\n\n\n```\n\n### Universal CJK Adjustments\n\n- **Line-height**: increase by ~15–25% from the Latin spec. Body 1.75–1.85 (up from 1.7–1.8), display 1.15–1.25 (up from 1.05–1.15). CJK characters are square and visually full — they crowd vertically more than Latin.\n- **Letter-spacing**: set to 0 on every CJK run. The template's positive tracking on Tektur display (+0.04em) and 0.1–0.3em mono tracking on Space Mono labels looks broken on square CJK glyphs — they're already evenly spaced by design.\n- **Text transform**: don't apply `uppercase` to Chinese text — CJK has no case. Every Space Mono label in this system uses `text-transform: uppercase`; remove it for CJK runs.\n- **Punctuation**: use full-width Chinese punctuation （，。：；！？「」（））.\n- **No period on display headlines**: Chinese typography convention omits trailing 。 on display-scale headlines.\n- **Space between CJK and Latin (盘古之白)**: insert an ASCII space between every Chinese character and adjacent Latin character or digit. Write `8 位赛博 / 1989 模式` not `8位赛博/1989模式`.\n- **One font per sentence**: 思源黑体 covers both CJK and Latin glyphs in a unified style — let it handle mixed sentences. Don't let the browser fall back to Tektur or Space Mono mid-sentence for ASCII characters.\n\n### Aesthetic Notes for This System\n\nThe system's identity rests on three voices — Tektur (chunky arcade display), Chakra Petch (humanist body), Space Mono (HUD readouts) — and a CJK build cannot preserve that three-face contrast. Compensate by leaning harder on the **non-typographic** signature elements: the stacked text-shadow (yellow at +4/+4, navy at +8/+8) still works on 思源黑体 900 headlines and is what carries the arcade voice when the face itself is generic. Keep all atmospheric overlays (scanlines, grain, CRT vignette, starfields, grid wallpaper) — they do more identity work in a CJK build than in the Latin original.\n\nThe system's Space Mono label-pill (navy fill, neon-yellow text, 0.2em tracking, uppercase) is the most recognizable small chrome and translates poorly: CJK characters won't accept the wide tracking or uppercase transform. Render Chinese label-pills with 思源黑体 weight 500 at 0 tracking, no transform, and a slightly tighter fontSize (10–11px instead of 12px) to preserve the chip's compact silhouette. The colored pill background and corner-bracket framing carry the recognition load.\n\n### Known CJK Gap\n\n- **No CDN-loadable Chinese pixel font.** The system's arcade aesthetic depends on Tektur's semi-pixel grotesque character — there is no equivalent Chinese face on Google Fonts or major CDNs that reads as \"pixel-art\" while remaining legible. 思源黑体 at weight 900 gives heft but loses the pixel-grid signal entirely. The atmospheric overlays (scanlines, grain, vignette, starfields) and pixel-bevel shadow stacks must carry the arcade voice on their own.\n- **No CDN Chinese monospace face for HUD labels.** Space Mono's \"system readout\" voice depends on monospaced rhythm + uppercase + 0.1–0.3em tracking — none of which transfer to CJK. The label-pill loses its mono character; lean on the navy fill + neon text + corner-bracket framing to keep chrome recognizable.\n\n## Iteration Guide\n\n1. Any new slide gets the full atmospheric overlay trio (scanlines + grain + crt-glow on dark surfaces, scanlines + grain on colored surfaces) and a 40px etched grid surface. Don't skip the overlays.\n2. Any new display element uses Tektur. Any new body element uses Chakra Petch. Any new label, badge, counter, or chart value uses Space Mono. Never cross the role boundaries.\n3. Any new headline gets `{colors.neon-cyan}` on dark surfaces or `{colors.deep-navy}` on colored grids — both with the appropriate Tektur weight and (for hero scale) the stacked text-shadow.\n4. Any new eyebrow uses the `{components.label-pill}` — navy fill, neon-yellow Space Mono text at 12px / 0.2em / uppercase. Don't substitute a plain h-tag.\n5. Any new card or region gets the L-shaped corner brackets at opposite corners (top-left + bottom-right) instead of a full outline. The implied frame is the system's signature.\n6. Any new measurement snaps to the 4px pixel unit. Borders 2-4px, shadow offsets 4px / 8px, corner brackets 24px, grid 40px. Off-grid values feel wrong.\n7. Any new shadow is hard-edged at zero blur. For buttons use the six-step cascade; for cards use 6px navy or 8px yellow; for text use the two-layer cascade.\n8. Any new chart cycles cyan → pink → yellow in series order. Numerical labels and axis labels are always Space Mono.\n9. If a surface needs to feel warmer or softer, switch to the pink, cyan, or lavender etched grid variant — but keep all typographic rules intact (navy headlines, softened-navy body).\n10. Animated elements (starfield, particles, chart bar grow, counter rollup) should respect `prefers-reduced-motion`. Atmospheric overlays (scanlines, grain, vignette) are not animated and stay on always.\n\n## Known Gaps\n\n- **Tektur, Chakra Petch, and Space Mono are Google Fonts** loaded via a preconnect + ``. The system has no fallback strategy beyond `cursive` / `sans-serif` / `monospace` — in environments where Google Fonts fail (offline, restricted networks), the aesthetic collapses to system defaults and loses its character.\n- **Starfield and pixel-particle elements are generated by inline JS** that creates a fixed count of absolutely-positioned divs with random positions and animation delays. The animation keyframes are present in CSS, but the elements are only created if the JS runs successfully.\n- **The chart system is hardcoded**: bar heights, hbar widths, and stat counter targets are stored in `data-*` attributes and animated via `setTimeout` staggers triggered by slide-index matching. There is no data-binding layer — adding a new chart requires copying the HTML pattern and updating the JS slide-index matcher.\n- **The pixel-landscape on CTA surfaces is JS-generated** from a hardcoded heights array `[30, 50, 70, ...]`. Width varies per mountain (60 + (i % 3) * 20px). Replacing the landscape requires editing the JS heights array.\n- **The CRT vignette glow uses a fixed dark-navy radial gradient.** Adjusting it requires editing the CSS gradient stops; there is no tokenized vignette intensity.\n- **The cursor is set to `crosshair` deck-wide** for atmospheric reasons. This may conflict with text-selection expectations in contexts where the deck is embedded.\n- **No keyboard navigation hint exists for the wheel/touch fallback.** The nav-hint reads `USE KEYS ↑ ↓` even though wheel and touch are also wired up.\n- **The slide counter format is fixed at `NN / NN` zero-padded.** Decks with more than 99 slides would render with a layout-shifting counter.\n- **The pixel-corner-bracket sizing is fixed at 24×24 with 4px stroke** and does not scale with viewport. On very large or very small viewports the brackets may feel proportionally off.\n","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/8-bit-orbit/preview.md":"# 8-Bit Orbit Preview Card\n\nUse this small file for title-slide previews only. For final deck generation, read the full design doc listed below.\n\n## Files\n\n- Full design doc: `bold-template-pack/templates/8-bit-orbit/design.md`\n- Preview card: `bold-template-pack/templates/8-bit-orbit/preview.md`\n\n## Selection Metadata\n\n- Slug: `8-bit-orbit`\n- Tagline: Pixel-art neon arcade aesthetic on a deep navy void.\n- Mood: retro-tech, playful, cyberpunk, energetic\n- Tone: geeky, neon, rebellious, sci-fi\n- Formality: low\n- Density: medium\n- Scheme: dark\n- Best for: Anything that should feel like a CRT screen at 2am: cyberpunk, gaming, web3, indie dev tools, hackathon demos. Just as good for a tech talk that wants to lean into nostalgic-digital craft, a synthwave brand deck, or a creative review that wants to feel like a console.\n- Avoid for: Contexts where the dark neon palette would actively work against the message — quiet institutional finance disclosures, healthcare patient-facing materials, traditional luxury.\n\n## Visual Snapshot\n\nA retro-futuristic pixel-art presentation system that fuses 16-bit arcade nostalgia with editorial discipline. Display type runs in Tektur (a chunky geometric display face built on pixel-grid logic) paired with Chakra Petch for body and Space Mono for code-flavored labels and tabular data. The palette pivots on a deep cosmic navy (#0F1B3D / #0A0E27) lit by three saturated neons — cyan, hot pink, and a high-key yellow — with a soft lavender pastel for warm reprieves. Depth is built from stacked hard offset shadows in 4px increments (the pixel unit), CRT scanlines, atmospheric grain, vignettes, and animated starfields. The effect sits between an arcade cabinet and a Tron-era boardroom — unmistakably digital, intentionally lo-fi, and engineered to feel as if it just booted up.\n\n8-Bit Orbit is a retro-futuristic pixel-art presentation system. Its foundational premise is the 4-pixel unit: every shadow offset, every border, every corner bracket, every label height resolves to a multiple of 4px. Layouts feel as if they were rasterized on an old CRT and dragged into HTML — and atmospheric overlays (scanlines, grain, vignette glow, animated starfields) reinforce the illusion on every surface.\n\n## Preview Ingredients\n\n- Palette: dark-void #0A0E27; deep-navy #0F1B3D; neon-cyan #5EDCF4; neon-pink #F0A6CA; neon-yellow #F4D03F; soft-lavender #E2D5F2; white #FFFFFF\n- Typography: See full design doc after selection.\n- Signature move: Three-font stack: Tektur (display), Chakra Petch (body), Space Mono (HUD/labels) — never substitute, never mix outside their roles.\n- Signature move: Navy ground ({colors.dark-void} / {colors.deep-navy}) alternates with colored-grid surfaces (pink, cyan, lavender) — both carry the 40px etched grid.\n- Signature move: Three neons (cyan, pink, yellow) reserved for display, stats, rules, and label fills — never for body text.\n- Signature move: All measurements snap to the 4px pixel unit: borders 2-4px, shadow offsets 4px / 8px, corner brackets 24×24 with 4px stroke.\n- Signature move: Stacked hard offset shadows are the system's depth language — never blurred, never colored on text shadows except in the yellow→navy cascade.\n\n## International / CJK Preview Note\n\n- If the preview uses Chinese or other CJK text, keep CJK letter-spacing at 0, loosen line-height, and avoid uppercase transforms on CJK runs.\n- Use the full `design.md` CJK section after selection for exact font pairings and script-specific adjustments.\n\n## Preview Rules\n\n- Build exactly one title slide at 1920x1080 inside the fixed-stage model.\n- Preserve the palette, type roles, surface rhythm, and decorative vocabulary described above.\n- Use the user's real title/subtitle/context; do not copy demo slide content.\n- The rendered preview must look like a real first slide, not a template-selection card.\n- Never place internal workflow text on the slide: no `preview`, `generated from`, `preview.md`, `template`, `preset`, `style option`, `Option A/B/C`, file names, paths, or source-doc labels.\n- Never place the template name or slug on the slide itself; mention it only in the chat message.\n- Never place user requirement notes such as desired vibe, audience, or internal-use labels on the slide unless the user explicitly wants those exact words in the deck.\n- Use only real deck content for visible chrome: deck title, real section title, date, author, company, page number, or genuine content phrases from the user material.\n- Do not read `template.html` for preview generation.\n- Do not read other templates' `design.md` files.\n- After the user picks this template for the full deck, read the full design doc before generating final slides.\n","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/biennale-yellow/design.md":"---\nversion: alpha\nname: Biennale Yellow\ndescription: \"A literary-editorial presentation system in the visual register of an art biennale catalogue or quiet exhibition poster. The aesthetic is built on warm parchment grounds (`#E9E5DB`) flooded with soft solar yellow (`#F1EE2E`) radial blooms, set against a single deep indigo navy ink color. Display type is Instrument Serif — a contemporary high-contrast serif with tall ascenders and elegant italics — paired with Archivo for sans-serif chrome and JetBrains Mono for numerical and metadata callouts. No drop shadows, no rounded corners, no bordered cards: the only structural lines are hairline 1px rules in ink. The mood sits between a folded museum brochure, a slow-reading literary quarterly, and a Mediterranean exhibition poster — confident, atmospheric, and deeply restrained.\"\n\ncolors:\n paper: \"#E9E5DB\"\n paper-deep: \"#DCD6C4\"\n sun: \"#F1EE2E\"\n sun-soft: \"#F8F39B\"\n haze: \"#F0DA7C\"\n ink: \"#1B2566\"\n ember: \"#E26B4A\"\n\ncolor-aliases:\n line: ink\n\ntypography:\n display:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(120px, min(14.6vw, 22vh), 240px)\"\n lineHeight: 0.86\n letterSpacing: -0.018em\n display-md:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(80px, min(10vw, 16vh), 200px)\"\n lineHeight: 0.86\n letterSpacing: -0.018em\n display-sm:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(110px, min(11vw, 18vh), 200px)\"\n lineHeight: 0.86\n letterSpacing: -0.018em\n display-it:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontStyle: italic\n fontSize: \"clamp(56px, min(7vw, 11vh), 120px)\"\n lineHeight: 1.04\n letterSpacing: -0.005em\n numeral-jumbo:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(220px, min(28vw, 64vh), 720px)\"\n lineHeight: 0.84\n letterSpacing: -0.04em\n numeral-lg:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(120px, min(15vw, 22vh), 280px)\"\n lineHeight: 0.9\n letterSpacing: -0.04em\n numeral-md:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(72px, min(7vw, 12vh), 144px)\"\n lineHeight: 0.92\n letterSpacing: -0.01em\n headline:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(40px, min(4.6vw, 7vh), 88px)\"\n lineHeight: 1.06\n letterSpacing: -0.005em\n headline-sm:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(32px, min(3.6vw, 6vh), 56px)\"\n lineHeight: 1\n date-rail:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(48px, min(5.2vw, 9vh), 96px)\"\n lineHeight: 0.96\n letterSpacing: -0.005em\n ledger-title:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(20px, 1.6vw, 30px)\"\n lineHeight: 1.15\n strand-title:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(22px, 1.7vw, 32px)\"\n lineHeight: 1.1\n strand-num:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontWeight: 400\n fontSize: \"clamp(28px, 2vw, 38px)\"\n lineHeight: 1\n body-lede:\n fontFamily: \"'Archivo', sans-serif\"\n fontWeight: 400\n fontSize: \"clamp(15px, 1.05vw, 18px)\"\n lineHeight: 1.55\n body:\n fontFamily: \"'Archivo', sans-serif\"\n fontWeight: 400\n fontSize: \"clamp(14px, 0.95vw, 16px)\"\n lineHeight: 1.5\n body-sm:\n fontFamily: \"'Archivo', sans-serif\"\n fontWeight: 400\n fontSize: \"clamp(11px, 0.78vw, 13px)\"\n lineHeight: 1.5\n micro-label:\n fontFamily: \"'Archivo', sans-serif\"\n fontWeight: 600\n fontSize: \"clamp(11px, 0.85vw, 14px)\"\n lineHeight: 1.2\n letterSpacing: 0.18em\n textTransform: uppercase\n micro-label-tight:\n fontFamily: \"'Archivo', sans-serif\"\n fontWeight: 600\n fontSize: \"clamp(10px, 0.72vw, 12px)\"\n lineHeight: 1.2\n letterSpacing: 0.16em\n textTransform: uppercase\n rail-label:\n fontFamily: \"'Archivo', sans-serif\"\n fontWeight: 600\n fontSize: \"clamp(11px, 0.85vw, 13px)\"\n lineHeight: 1\n letterSpacing: 0.32em\n textTransform: uppercase\n mono-data:\n fontFamily: \"'JetBrains Mono', ui-monospace, monospace\"\n fontWeight: 400\n fontSize: \"clamp(12px, 0.85vw, 14px)\"\n lineHeight: 1.4\n letterSpacing: 0.04em\n mono-date:\n fontFamily: \"'JetBrains Mono', ui-monospace, monospace\"\n fontWeight: 400\n fontSize: \"clamp(13px, 0.95vw, 16px)\"\n lineHeight: 1.4\n letterSpacing: 0.02em\n pagenum:\n fontFamily: \"'JetBrains Mono', ui-monospace, monospace\"\n fontWeight: 400\n fontSize: \"clamp(11px, 0.85vw, 13px)\"\n lineHeight: 1\n letterSpacing: 0.08em\n\nspacing:\n pad-edge: \"clamp(40px, 4vw, 76px)\"\n pad-region: \"clamp(40px, 4.2vw, 80px)\"\n pad-foot: \"clamp(56px, 5vh, 88px)\"\n pad-strand-y: \"clamp(12px, 1.6vh, 22px)\"\n gap-region: \"clamp(20px, 2.5vw, 48px)\"\n gap-strand: \"clamp(14px, 1.8vh, 22px)\"\n gap-footer-col: \"clamp(20px, 2.4vw, 44px)\"\n pagenum-bottom: \"clamp(22px, 2.4vh, 42px)\"\n pagenum-right: \"clamp(24px, 2.4vw, 48px)\"\n\ncanvas:\n width: 100vw\n height: 100vh\n background: \"{colors.paper}\"\n\ncomponents:\n pagenum:\n position: \"absolute, right + bottom\"\n color: \"{colors.ink}\"\n opacity: 0.75\n fontFamily: \"'JetBrains Mono', ui-monospace, monospace\"\n fontSize: \"clamp(11px, 0.85vw, 13px)\"\n letterSpacing: 0.08em\n description: \"Single mono pagenum NN / NN pinned to bottom-right of every slide at 75% opacity. The only persistent chrome on every surface.\"\n hairline-rule:\n border: \"1px solid {colors.ink}\"\n description: \"1px solid ink horizontal or vertical rule. The system's only border treatment — separates header bands from content, footer columns from each other, ledger rows from each other. No thicker rule exists.\"\n hairline-rule-soft:\n border: \"1px solid rgba(27, 37, 102, 0.18-0.2)\"\n description: \"1px ink at 18-20% opacity. Used for between-row separators inside dense ledger or strand lists where a full-weight rule would feel oppressive.\"\n sun-bloom:\n background: \"radial-gradient using {colors.sun} {colors.sun-soft} {colors.haze} blending to transparent on {colors.paper}\"\n description: \"Large soft radial bloom of solar yellow placed off-center or behind a focal element. The system's primary atmospheric layer. Sized 42-70% of viewport in the larger axis.\"\n ember-bloom:\n background: \"radial-gradient using {colors.ember} at 15-22% opacity blending to transparent\"\n description: \"Small warm peach bloom used as a counter-temperature accent in a corner opposite the sun bloom. Always subordinate; never dominant.\"\n block-tile:\n background: \"{colors.sun} at 40-70% opacity\"\n description: \"Geometric blocks of translucent solar yellow placed on an 8-row × 4-column grid behind cover or colophon surfaces. Suggests a layered poster underprint.\"\n yellow-panel:\n background: \"{colors.sun}\"\n color: \"{colors.ink}\"\n description: \"Full-bleed yellow panel covering a column or third of the slide. The strongest possible color statement — used when a region needs to read as poster-fill, not paper.\"\n bar-ink:\n background: \"{colors.ink}\"\n height: \"clamp(14px, 1.6vh, 22px)\"\n description: \"Solid ink horizontal bar for data charts. Width carries the data value.\"\n bar-lit:\n background: \"{colors.sun}\"\n border: \"1px solid {colors.ink}\"\n height: \"clamp(14px, 1.6vh, 22px)\"\n description: \"Highlighted variant of bar-ink — yellow fill with 1px ink stroke. Used to mark the current or featured row in a series.\"\n strand-row:\n layout: \"grid 56px 1fr, gap clamp(14px, 1.4vw, 24px), border-bottom hairline-soft, padding-bottom clamp(12px, 1.6vh, 22px)\"\n description: \"Numbered editorial list row — numeral cell + content cell separated by hairline-soft. Used for programmes, agendas, and curated lists.\"\n ledger-row:\n layout: \"grid 92px 1.6fr 0.9fr 80px, gap clamp(14px, 1.4vw, 28px), border-bottom hairline-soft, padding clamp(10px, 1.3vh, 18px) 0\"\n description: \"Four-column tabular row for calendars and itineraries. Date column is mono, title is serif, venue is sans, duration is mono right-aligned.\"\n footer-band:\n layout: \"grid 4-column with hairline-rule top border on each cell, gap clamp(20px, 2.4vw, 44px)\"\n description: \"Four-column metadata strip pinned to the bottom of cover and colophon surfaces. Each cell has a tiny uppercase tag + a brief plain-English statement.\"\n vertical-rail:\n transform: \"rotate(-90deg) translateY(-50%) at left edge\"\n fontFamily: \"'Archivo', sans-serif\"\n fontSize: \"clamp(11px, 0.85vw, 13px)\"\n letterSpacing: 0.32em\n textTransform: uppercase\n description: \"Rotated vertical text label running up the left edge. Used on chapter/divider surfaces as a section marker.\"\n date-rail-stack:\n fontFamily: \"'Instrument Serif', Georgia, serif\"\n fontSize: \"clamp(48px, min(5.2vw, 9vh), 96px)\"\n lineHeight: 0.96\n textAlign: right\n description: \"Large serif date or date-range stacked at top-right of cover surfaces. Uses an en-dash to indicate spans.\"\n---\n\n## Frontend Slides Fixed-Stage Policy\n\nWhen this design system is used by the `frontend-slides` skill, generate the final deck as a **fixed 1920×1080 stage** that scales uniformly to the browser viewport. The deck should preserve a 16:9 slide canvas on every screen, including phones; it may letterbox or pillarbox, but it should not reflow slide content for mobile.\n\nThis policy has higher priority than any source-template responsive behavior described later in this file. If a later section says the original template is viewport-fluid, treat that as source history only, not as the target generation model for `frontend-slides`.\n\nThis policy applies even if the source template was originally implemented with viewport-fluid CSS such as `100vw`, `100vh`, `vw`, `vh`, or `clamp()`. Treat those values as design proportions to translate into 1920×1080 stage coordinates, not as live responsive rules in the generated deck.\n\nUse `deck-stage.js` or an equivalent inline stage scaler for final output: render each slide at 1920×1080, scale the whole stage with one transform, and verify rendered screenshots for both text overflow and panel overlap.\n\n\n## Overview\n\nBiennale Yellow is a **literary-editorial presentation system** modeled on the visual language of European art biennale catalogues, slow exhibition posters, and quarterly literary publications. There are no cards, no buttons, no shadows, no rounded corners. The structural vocabulary is just three things: paper, ink, and yellow.\n\nThe typographic system pivots on **Instrument Serif**, a contemporary high-contrast serif with tall ascenders, elegant italics, and slightly flared terminals. It carries every display moment, every numeral, every quote — at scales ranging from headline-small (40px) to jumbo numerals over 700px. Set tight (line-height 0.86, letter-spacing −0.018em), it reads as confident editorial display; set looser in italic (line-height 1.04, letter-spacing −0.005em), it becomes a slow-reading quotation face. **Archivo** is the sans companion — used for body paragraphs and as small, wide-tracked uppercase labels (the \"micro-label\" treatment). **JetBrains Mono** handles all numerical and metadata callouts: dates, ledger figures, page numbers. The three-face system is rigid and disciplined; the contrast between them is the entire typographic story.\n\nThe color world is built on **warm parchment** (`{colors.paper}` — `#E9E5DB`) as the universal ground, marked by a single **ink** color (`{colors.ink}` — `#1B2566`, a deep indigo navy) used for every line of type and every rule. The system's signature color is **sun** (`{colors.sun}` — `#F1EE2E`), a highly saturated solar yellow used as a flooded panel, as a soft blooming radial gradient, or as a geometric tile underprint. A **soft ember peach** (`{colors.ember}` — `#E26B4A`) appears only as a subordinate counter-temperature accent, always at 15-22% opacity in a corner radial bloom. Inverted color treatments are not used; the system commits to navy ink on a warm ground.\n\nDepth is **atmospheric, not structural**. There are no drop shadows anywhere in the system. Depth comes from layered radial gradients of yellow (the sun-bloom and ember-bloom components) and the optional block-tile underprint on cover-class surfaces. Cards have no borders; regions are separated only by 1px hairline rules in ink. The lack of border weight is itself the aesthetic — the design feels printed, not engineered.\n\n**Density philosophy: editorial-restrained.** This system reads as elegant when sparse and broken when crowded. A typical surface holds one large display moment + a handful of supporting elements (a micro-label, a body paragraph, an ordered list, or a single radial bloom). Crowding the canvas with cards, buttons, panels, or stacked components turns the system into a different aesthetic entirely. Even dense surfaces (a calendar or programme) achieve density through tabular repetition, not visual richness — many quiet rows of hairline-separated metadata, not many bordered cells. Generous edge padding (40-76px) and wide footer/header bands let the canvas breathe.\n\n**Key Characteristics:**\n- Warm parchment ground (`{colors.paper}`) on every surface; never white, never gray.\n- Single ink color (`{colors.ink}`) for all text and all rules — no secondary text colors.\n- Solar yellow (`{colors.sun}`) deployed three ways: as a flooded panel, as a soft radial bloom, as a translucent geometric tile underprint.\n- Instrument Serif handles every display moment at scales from 40px to 720px+.\n- Archivo Bold uppercase + 0.16–0.32em tracking is the universal label voice.\n- JetBrains Mono is reserved exclusively for dates, ledger numerals, and page numbers.\n- 1px hairline rules in `{colors.ink}` are the only border treatment — used for header bands, ledger rows, footer columns, and strand separators.\n- No drop shadows, no rounded corners, no card outlines, no buttons. Decoration is atmospheric (radial blooms) or geometric (translucent tile blocks).\n- Persistent `01 / NN` JetBrains Mono pagenumber at bottom-right of every surface at 75% opacity.\n- Optional vertical rotated rail-label at the left edge of chapter/divider surfaces.\n\n## Colors\n\n### Palette\n\n- **Paper** (`{colors.paper}` — `#E9E5DB`): The warm parchment canvas. The default and near-universal background. Reads as a softened off-white with strong warmth — never neutral, never cold.\n- **Paper-deep** (`{colors.paper-deep}` — `#DCD6C4`): A slightly darker parchment tone, available as a secondary surface or to suggest a shadow band without using actual shadow. Reserved for moments that need surface differentiation while staying within the warm-paper family.\n- **Ink** (`{colors.ink}` — `#1B2566`): The single text and line color across the entire system. A deep indigo navy that reads as confident editorial black-with-blue-bias. Used for headlines, body, micro-labels, monos, hairline rules, and ink-bar fills. The `--line` CSS variable resolves to this same color.\n- **Sun** (`{colors.sun}` — `#F1EE2E`): The system's signature solar yellow. Highly saturated, slightly green-leaning. Used three ways: as a flooded full-bleed or column-bleed panel, as the core of soft radial blooms, and as 40-70% opacity geometric tile blocks.\n- **Sun-soft** (`{colors.sun-soft}` — `#F8F39B`): A paler buttery yellow used in the middle stops of sun-bloom gradients to soften the transition from saturated sun to paper.\n- **Haze** (`{colors.haze}` — `#F0DA7C`): A warmer mustard-leaning yellow used in the outermost stops of sun-bloom gradients to extend the bloom into the paper without a hard edge.\n- **Ember** (`{colors.ember}` — `#E26B4A`): A warm peach-orange used only as a subordinate counter-temperature accent in 15-22% opacity radial blooms. Never used as a fill color, never as a text color. Its job is to balance a sun-bloom on the opposite side of the canvas.\n\n### Defaults\n\n- **Default surface background**: `{colors.paper}`. Every surface starts here.\n- **Default headline color**: `{colors.ink}`. Always. Headlines never appear in yellow, ember, or paper-deep — only ink.\n- **Default body text color**: `{colors.ink}`. Body uses the same color as display; the contrast is achieved through size and weight, not color.\n- **Default rule color**: `{colors.ink}` (1px solid) for primary separators, ink at 18-20% opacity for secondary row separators.\n- **Default accent surface for poster moments**: `{colors.sun}` — a flooded panel of solar yellow with `{colors.ink}` text on top.\n- **Default atmospheric layer**: a single `{components.sun-bloom}` placed off-center on the surface, with an optional `{components.ember-bloom}` in the opposite corner.\n- **Default chart bar color**: `{colors.ink}`. The featured/current bar uses `{components.bar-lit}` (yellow fill, ink stroke).\n- **Default label color**: `{colors.ink}` for the text, no fill. Labels are tracking + uppercase + weight 600, not filled pills.\n\nThe system never inverts: ink text on a sun panel is correct (and a key signature treatment), but yellow text on an ink ground does not exist. Text is always ink; the variability lives in what's behind the text, not in the text color itself.\n\n## Typography\n\n### Font Family Stack\nThe system runs three faces, each with a tightly defined role.\n\n**Instrument Serif** (Google Fonts, italic + roman) is the display and editorial face. Its high contrast, tall ascenders, and slightly flared terminals give it a contemporary literary register — closer to a magazine masthead than a traditional book serif. Roman is used for headlines, numerals, ledger titles, and date rails. Italic is used for manifesto quotes and certain emphasis moments. Set tight (line-height ≤ 1.06, negative letter-spacing −0.005 to −0.04em).\n\n**Archivo** (Google Fonts) is the sans companion. Used at weight 400 for body paragraphs (line-height 1.5) and at weight 600 for the universal micro-label treatment (uppercase, 0.16-0.32em tracking, 10-14px). Never used at intermediate weights, never used for headlines.\n\n**JetBrains Mono** (Google Fonts) is the numerical/metadata face. Used exclusively for dates in ledgers, mono numerical callouts in data slides, page numbers, and the nav-hint. Its slab character gives editorial weight to numerical content without leaning on bold styling.\n\n### Typography Scale\n\n| Token | Size (clamp) | Family | Weight | Use |\n|---|---|---|---|---|\n| `{typography.display}` | 120–240px | Instrument Serif | 400 | Cover-scale display title |\n| `{typography.display-sm}` | 110–200px | Instrument Serif | 400 | Editorial display in a panel context |\n| `{typography.display-md}` | 80–200px | Instrument Serif | 400 | Closing-statement display |\n| `{typography.display-it}` | 56–120px | Instrument Serif italic | 400 | Manifesto-scale italic quote body |\n| `{typography.numeral-jumbo}` | 220–720px | Instrument Serif | 400 | Chapter-divider ordinal numeral |\n| `{typography.numeral-lg}` | 120–280px | Instrument Serif | 400 | Decorative quotation mark, oversized punctuation |\n| `{typography.numeral-md}` | 72–144px | Instrument Serif | 400 | Hero stat figure |\n| `{typography.headline}` | 40–88px | Instrument Serif | 400 | Primary section headline, large quote body |\n| `{typography.headline-sm}` | 32–56px | Instrument Serif | 400 | Region headline, ledger/calendar topbar |\n| `{typography.date-rail}` | 48–96px | Instrument Serif | 400 | Date or date-range stacked at top of a surface |\n| `{typography.ledger-title}` | 20–30px | Instrument Serif | 400 | Title cell inside a calendar/ledger row |\n| `{typography.strand-title}` | 22–32px | Instrument Serif | 400 | Title inside a numbered strand/list row |\n| `{typography.strand-num}` | 28–38px | Instrument Serif | 400 | Numeral cell inside a strand row |\n| `{typography.body-lede}` | 15–18px | Archivo | 400 | Lede paragraph following a chapter headline |\n| `{typography.body}` | 14–16px | Archivo | 400 | Standard body paragraph |\n| `{typography.body-sm}` | 11–13px | Archivo | 400 | Footer-band body text, dense metadata |\n| `{typography.micro-label}` | 11–14px | Archivo | 600 | Universal uppercase eyebrow label |\n| `{typography.micro-label-tight}` | 10–12px | Archivo | 600 | Smaller uppercase label inside footer cells |\n| `{typography.rail-label}` | 11–13px | Archivo | 600 | Vertical rotated rail label |\n| `{typography.mono-data}` | 12–14px | JetBrains Mono | 400 | Chart year/value labels, mono inline data |\n| `{typography.mono-date}` | 13–16px | JetBrains Mono | 400 | Date column in calendar ledgers |\n| `{typography.pagenum}` | 11–13px | JetBrains Mono | 400 | Persistent page number |\n\n### Defaults\n\n- **Default size for a cover-scale display headline**: `{typography.display}` (120–240px clamp). Anything smaller reads as section-level, not cover-level.\n- **Default size for a primary section headline**: `{typography.headline}` (40–88px clamp).\n- **Default size for a chapter-divider numeral**: `{typography.numeral-jumbo}` (220–720px clamp). Don't shrink — the jumbo numeral is the point of a divider surface.\n- **Default size for a hero statistic**: `{typography.numeral-md}` (72–144px clamp). Stat figures share the same serif as headlines — they are display moments, not data chrome.\n- **Default size for a paragraph body**: `{typography.body}` (14–16px). For a lede after a chapter headline, step up to `{typography.body-lede}` (15–18px).\n- **Default size for any eyebrow label**: `{typography.micro-label}` (11–14px) at weight 600, uppercase, 0.18em tracking.\n- **Default weight for any Archivo body**: 400. Archivo body at any other weight breaks the rhythm.\n- **Default weight for any micro-label**: 600. Labels at weight 400 or 700 read as either timid or oversized.\n- **Default tracking for any uppercase label**: 0.16em minimum, 0.32em maximum. Labels without wide tracking read as code, not editorial.\n\nWhen unsure which display token to reach for, default to `{typography.headline}` (40–88px) for the primary moment, and `{typography.numeral-md}` (72–144px) for a single hero statistic. The display, display-sm, and display-md tokens are reserved for cover/colophon/poster-scale moments.\n\n### Signature Treatments\n\nThese treatments are **non-optional whenever the corresponding element type is used**:\n\n- **Every display, numeral, headline, and ledger-title element is Instrument Serif at weight 400.** Bold serif display does not exist in this system — the face's contrast is its weight signal. Setting Instrument Serif at weight 700 collapses the entire elegance.\n- **Every Instrument Serif display element uses tight line-height (0.84–1.06).** Generous line-height on display destroys the editorial poster feel — large serif headlines must feel stacked, not aerated.\n- **Every Instrument Serif display element uses negative letter-spacing.** Display, headline, jumbo numerals at −0.018 to −0.04em; italic display at −0.005em. Without negative tracking, the wide-bodied glyphs read as untreated.\n- **Every micro-label is uppercase Archivo weight 600 with tracking ≥ 0.16em.** No exceptions. A label without uppercase + tracking is not a label in this system; it's a stray sans element.\n- **Every numerical metadata element (date, page number, chart value, calendar date) is JetBrains Mono.** Serif numerals are for display moments; mono numerals are for data chrome. Don't cross the line.\n- **Every italic manifesto-scale quote uses `{typography.display-it}`.** Setting an italic quote at headline scale (40–88px) reads as a smaller moment; the italic is meant to dominate.\n- **Every body paragraph is Archivo weight 400 with line-height ≥ 1.45.** Body in Instrument Serif does not exist — Instrument is for display only.\n\n### Typography Principles\n\nThe voice contrast is **slow elegant serif ↔ wide-tracked uppercase sans ↔ tabular mono**. Italic Instrument is the system's \"feeling\" voice (reserved for quotes and manifesto moments); roman Instrument is the \"statement\" voice; Archivo upper-tracked is the \"label\" voice; mono is the \"data\" voice. Each has a single job.\n\nMixing rules are tight: an `` inside an Instrument Serif headline stays in italic Instrument Serif (no face switch). An `` inside an Archivo body paragraph becomes italic Archivo, not a serif. Don't mix faces inline.\n\nColor is locked to ink on every element. There is no \"accent color text\" treatment in this system — accent is delivered through atmospheric blooms and panel fills, not text color.\n\n## Layout\n\n### Canvas System\nThe system targets `100vw × 100vh` per slide. Slides are absolutely positioned and crossfade via opacity transition (280ms ease). Only one slide is `.active` at a time. Every measurement uses CSS `clamp()` with both vw and vh terms — typography clamps include `min(...vw, ...vh)` patterns so display type scales by whichever viewport axis is shorter.\n\n### Padding and Margin Scale\n\n| Token | Range | Use |\n|---|---|---|\n| `{spacing.pad-edge}` | 40–76px | Standard edge padding from any slide edge to content |\n| `{spacing.pad-region}` | 40–80px | Internal padding inside a flooded yellow panel or major region |\n| `{spacing.pad-foot}` | 56–88px | Bottom padding when the footer band is present |\n| `{spacing.gap-region}` | 20–48px | Gap between two major content columns/regions |\n| `{spacing.gap-strand}` | 14–22px | Gap between strand rows in a numbered list |\n| `{spacing.gap-footer-col}` | 20–44px | Gap between columns of the footer-band metadata strip |\n| `{spacing.pagenum-bottom}` | 22–42px | Bottom inset of the persistent pagenum |\n| `{spacing.pagenum-right}` | 24–48px | Right inset of the persistent pagenum |\n\n### Persistent Chrome\nThe **pagenum** is the only persistent on-canvas element. It appears at `bottom-right` of every slide in JetBrains Mono at 11–13px, color ink, opacity 0.75. A **nav-hint** (`← / → · space`) appears once, fixed to the bottom-left of the viewport in JetBrains Mono at 10–12px / opacity 0.4. The nav-hint is not part of the slide composition — it lives outside the `.stage`.\n\n### Edge Discipline\nEvery meaningful element respects a minimum 40px (mobile) to 76px (desktop) edge inset. The system's elegance depends on negative space at the edges — pushing content to the bleed (other than full-bleed panels, blooms, and tile blocks) breaks the catalogue feel.\n\n### Atmospheric Layer\nEvery slide may carry one or both atmospheric layers behind content:\n- A **sun-bloom** (`{components.sun-bloom}`) — a large soft radial gradient of solar yellow, sized 42-70% of viewport, placed off-center or behind a focal element.\n- An **ember-bloom** (`{components.ember-bloom}`) — a small warm peach radial gradient at 15-22% opacity, placed in a corner opposite the sun bloom.\n\nThese layers are not optional decoration — they are the system's primary depth mechanism. A surface without a bloom reads as flat parchment.\n\n## Depth and Elevation\n\n### No Drop Shadows\nThe system has **zero drop shadows**. No `box-shadow`, no `text-shadow`, no `filter: drop-shadow(...)`. Depth is delivered atmospherically.\n\n### Atmospheric Depth (Sun Bloom)\nThe primary depth mechanism is the **sun-bloom** — a large soft radial gradient of solar yellow blooming from a point on the canvas. Bloom anatomy is a layered radial gradient with three or four color stops:\n- 0%: `{colors.sun}` at 70-95% opacity (the hot core)\n- ~30-40%: `{colors.sun}` at 40-65% opacity (the bloom)\n- ~55-65%: `{colors.haze}` at 18-22% opacity (the soft extension)\n- 80-90%: `{colors.paper}` at 0% (smooth fade into ground)\n\nBloom size and position varies by surface need: cover surfaces use a centered or slightly-off-center bloom 42% × 38% of viewport; chapter surfaces use a corner-anchored 720px-radius bloom; closing surfaces use a bottom-anchored 55% × 50% bloom rising from below.\n\n### Counter-Temperature Accent (Ember Bloom)\nAn optional **ember-bloom** in a corner opposite the sun-bloom provides warm-cool color tension without raising the saturation of the canvas. Always at 15-22% opacity, always smaller than the sun-bloom, always subordinate.\n\n### Geometric Underprint (Block Tiles)\nOn cover and colophon surfaces, an additional **block-tile** layer can appear behind content — translucent solar yellow rectangles placed on an 8-row × 4-column grid system at 40-70% opacity. This layer suggests a layered poster underprint without committing to a solid panel. The tiles are decorative geometry, not active content regions.\n\n### Yellow Panel (Structural Color)\nFor surfaces that need the strongest possible color statement, a **yellow-panel** flood (`{components.yellow-panel}`) covers a column, half, or third of the canvas in saturated `{colors.sun}`. This is the only \"hard\" color treatment in the system — when a panel is used, ink text sits on top at full opacity. Panels do not have borders or shadows; they meet the paper edge or another panel edge directly.\n\n### Hairline Rules\nInternal structural depth is delivered by **1px solid ink hairline rules** separating header bands from content, ledger rows from each other, and footer columns from each other. Rules are never thicker than 1px. Between secondary list rows (e.g., strand separators), the rule drops to `rgba(27, 37, 102, 0.18-0.2)` — same color, lower opacity.\n\n## Shapes and Treatment\n\n### Border Radius\n**Zero, on everything.** Every shape is a strict rectangle. The radial blooms are technically circles but they have no visible edge — they fade into paper.\n\n### Border Weights\n- **1px solid `{colors.ink}`** — the universal rule. Used for header-band underlines, ledger row separators, footer-column tops, and the bordered chart bar accent on the lit row.\n- **1px solid `rgba(27, 37, 102, 0.18-0.2)`** — soft variant of the same rule. Used for secondary row separators inside dense lists where full-weight ink would feel heavy.\n\nThe system has **no thicker borders**. There are no 2px, 3px, or 4px outlines anywhere. The visual structure depends on the lightness of the hairline.\n\n### Decorative Element Types\n\n**Sun-bloom** — Large soft radial gradient of solar yellow placed off-center or behind a focal element. The system's primary depth mechanism. Always one per surface, sometimes paired with a counter-bloom.\n\n**Ember-bloom** — Small warm peach radial gradient at 15-22% opacity, placed in a corner opposite the sun-bloom. Subordinate atmospheric balance.\n\n**Block-tile underprint** — Translucent solar yellow rectangles placed on an 8×4 grid system. Decorative geometry suggesting a layered poster, used on cover and colophon-type surfaces.\n\n**Yellow panel** — A full-bleed column, half, or third of the canvas flooded with `{colors.sun}`. The system's strongest color statement. Carries ink text on top.\n\n**Hairline rule** — 1px solid ink. Used for header-band underlines, ledger separators, footer column tops. The system's only border.\n\n**Footer band** — A four-column metadata strip at the bottom of cover/colophon surfaces. Each cell has a `{components.hairline-rule}` top border, an Archivo micro-label, and a short body statement.\n\n**Strand row** — Numbered editorial list row with serif numeral cell + serif title + sans body, separated from the next row by a hairline-soft rule.\n\n**Ledger row** — Four-column tabular calendar/itinerary row: mono date + serif title + sans venue + mono duration (right-aligned), separated by hairline-soft rules.\n\n**Vertical rail label** — Rotated Archivo uppercase text running up the left edge of a chapter-divider surface, with 0.32em tracking.\n\n**Date rail** — Large serif date or date-range stacked at top-right of cover surfaces, often using an en-dash to indicate a span across years or months.\n\n**Jumbo numeral** — A single huge Instrument Serif numeral (220-720px) dominating a divider surface. Always serif, always at weight 400, always with tight line-height.\n\n**Chart bar** — A solid ink rectangle whose width carries the data value. The featured/current bar swaps to yellow fill with a 1px ink stroke (`{components.bar-lit}`). Chart layouts use grid-row patterns: mono year label + bar + mono value, separated by gap.\n\n## Do's and Don'ts\n\n### Do\n\n- Apply `{colors.paper}` as the universal background. Every surface starts on parchment.\n- Set every line of text in `{colors.ink}` — display, body, micro-label, mono, everything. The single text color is non-negotiable.\n- Use Instrument Serif at weight 400 with tight line-height (0.84-1.06) and negative letter-spacing (-0.018 to -0.04em) for every display moment. The serif's elegance lives in this configuration.\n- Add at least one `{components.sun-bloom}` to every surface. Atmospheric depth is the system's depth mechanism; a flat parchment surface reads as broken.\n- Pair a sun-bloom with an `{components.ember-bloom}` in the opposite corner when you want warm-cool tension without raising the overall saturation.\n- Use `{components.hairline-rule}` (1px solid ink) for every structural separator: header-band underline, ledger row, footer column, strand separator.\n- Set every uppercase label in Archivo weight 600 with 0.16-0.32em tracking. Without the wide tracking, labels read as code, not editorial.\n- Use `{components.yellow-panel}` (full-bleed sun column or panel) when a surface needs strongest color commitment — keep ink text on top at full opacity.\n- Place the persistent `{components.pagenum}` (JetBrains Mono, 75% opacity ink) at bottom-right of every surface.\n- Reserve JetBrains Mono exclusively for numerical and metadata callouts: dates, ledger figures, chart values, page numbers, nav-hint. Never use mono for display or body.\n\n### Don't\n\n- Don't add drop shadows. The system has zero box-shadows and zero text-shadows. Adding any blurred or offset shadow breaks the printed-paper feel immediately.\n- Don't round any corner. Every shape is strict rectangle. Border-radius is forbidden.\n- Don't use borders thicker than 1px. The hairline rule is the only border vocabulary; 2px, 3px, or 4px outlines do not exist.\n- Don't set Instrument Serif at weight 700 or any bold weight. The serif's character lives at weight 400; bold serif display flattens the system.\n- Don't introduce a second text color. Yellow text on paper, ember text anywhere, or muted-ink secondary text — none exist. Text is always full-opacity ink.\n- Don't crowd the canvas with cards or panels. The system reads as elegant when sparse. Bordered cards, button stacks, or multi-region grids of containers break the editorial restraint.\n- Don't invert: ink panels with yellow or paper text are not part of the system. Ink ground is reserved for chart bars and small rule elements only.\n- Don't substitute Inter, Helvetica, or system-ui for Archivo, or Times for Instrument Serif. The font selection is the visual identity; substitution collapses the aesthetic.\n- Don't use mono for body or headlines. JetBrains Mono is exclusively for numerical/metadata chrome.\n- Don't omit the bloom layer on a surface. A flat parchment slide reads as a CMS template; the bloom is the atmosphere that signals \"biennale\".\n\n## Responsive Behavior\n\nThis system is built as a **viewport-fluid 100vw × 100vh deck** with no responsive breakpoints. Every font size, padding value, and gap uses CSS `clamp()` with both vw and vh terms — `clamp(40px, min(4.4vw, 7vh), 88px)` is a typical pattern. Display type scales by whichever viewport axis is shorter, so portrait orientations don't blow out the headlines.\n\n### Scaling Behavior\n- Cover-scale display scales 120px → 240px.\n- Chapter-divider jumbo numeral scales 220px → 720px.\n- Headline scales 40px → 88px.\n- Body scales 14px → 16px.\n- Edge padding scales 40px → 76px.\n- Hairline rule (1px) and pagenum sizing (11-13px) are essentially fixed.\n\n### Presenter Behavior\n- Slides advance via `ArrowRight`, `PageDown`, or `Space`.\n- Slides reverse via `ArrowLeft` or `PageUp`.\n- `Home` jumps to first slide, `End` to last.\n- Horizontal touch swipe with a 40px threshold advances/reverses.\n- Slide crossfades at 280ms ease via `opacity` toggle on the `.active` class. Only the active slide is `pointer-events: auto`.\n\n### Print Behavior\nThe system has no `@media print` rule. The crossfade transition is screen-only. For static export, capturing each slide individually via screenshot preserves all atmospheric layers (the radial blooms are pure CSS gradients, not assets).\n\n### Mobile Behavior\nThe `min(vw, vh)` pattern in display clamps means narrow portrait viewports automatically shrink display type to fit. The strand and ledger rows use fixed-px first columns (56px, 92px) that may feel tight on narrow widths — the system is designed for landscape presentation contexts and is functional but not optimized for sub-768px portrait usage.\n\n## CJK & International Content\n\nWhen using this template for Chinese (or other CJK) content, swap the Latin typeface stack for an equivalent Chinese pairing and apply universal CJK adjustments. All recommended Chinese fonts load via CDN — no install required.\n\n### Recommended Chinese Pairing\n\n| Role | Latin (default) | Chinese counterpart |\n|---|---|---|\n| Display / numerals / headlines / date rail | Instrument Serif 400 | 得意黑 Smiley Sans (oblique) — display moments; 思源宋体 Noto Serif SC 400 as fallback for long-form serif headlines |\n| Body / lede / micro-label | Archivo 400–600 | 思源宋体 Noto Serif SC 400 for body; 思源黑体 Noto Sans SC 600 for micro-labels |\n| Mono data / dates / page numbers | JetBrains Mono 400 | 思源黑体 Noto Sans SC 500 with tabular-feeling alignment — see Known CJK Gap below |\n\n### Mixed-Content Strategy\n\n**Strategy A** — single CJK family per role, with Latin glyphs handled by the same CJK family. Both 思源宋体 and 思源黑体 ship Latin glyphs that read cleanly alongside Chinese characters, so a mixed sentence renders in a consistent face. 得意黑 is used surgically — only on the biggest display moments where its slight oblique slant matches the Italian-poster register Instrument Serif provides in the Latin original. For everything else (body, micro-label, mono), Noto Serif SC / Noto Sans SC carries both scripts.\n\n### Loading\n\nAdd to the template's ``:\n\n```html\n\n\n\n\n```\n\nAfter loading, reference 得意黑 as `font-family: 'Smiley Sans Oblique', 'Noto Serif SC', serif` on the display tokens that should carry the strongest poster register.\n\n### Universal CJK Adjustments\n\n- **Line-height**: increase by ~15–25% from the Latin spec. Body 1.75–1.85 (up from 1.5–1.55), display 1.05–1.15 (up from the very tight 0.84–0.96 used on Instrument Serif). The Latin display tokens here use line-height as low as 0.84 — at that compression, CJK characters collide vertically. Open display to a minimum of 1.0 for Chinese, and 1.15+ on multi-line headlines.\n- **Letter-spacing**: set to 0 on every CJK run. The Latin display tokens use negative tracking from −0.005em down to −0.04em; on square CJK glyphs this overlaps strokes and reads as broken. Micro-labels at 0.16–0.32em wide tracking also drop to 0.\n- **Text transform**: don't apply `uppercase` to Chinese text — CJK has no case. Every micro-label and rail-label in this system uses `text-transform: uppercase`; remove it for CJK runs.\n- **Punctuation**: use full-width Chinese punctuation （，。：；！？「」（））. Replace the en-dash separator in date ranges with a Chinese 至 or full-width 「—」 hyphen.\n- **No period on display headlines**: Chinese typography convention omits trailing 。 on display-scale headlines.\n- **Space between CJK and Latin (盘古之白)**: insert an ASCII space between every Chinese character and adjacent Latin character or digit. Write `2024 春季双年展` not `2024春季双年展`.\n- **One font per sentence**: 思源宋体 covers both CJK and Latin glyphs in a unified serif style — let it handle mixed editorial sentences. Don't let the browser font-switch to Archivo mid-paragraph.\n\n### Aesthetic Notes for This System\n\nThe system's editorial identity rests on Instrument Serif's high-contrast, tall-ascender personality — a face that signals \"art biennale catalogue\" and \"slow literary quarterly\". The closest Chinese equivalent for register is **思源宋体 Noto Serif SC** for body and editorial display, with **得意黑 Smiley Sans Oblique** reserved for the poster-scale display moments where Instrument Serif at 120–240px does the heaviest identity work in the Latin original. 得意黑's slight italic tilt and slab character matches the Italian-exhibition-poster register; pure Noto Serif SC at jumbo numerals reads as restrained academic Chinese rather than biennale-loud.\n\nThe \"single text color, single accent\" discipline of this system transfers cleanly to CJK — ink-on-paper, sun-bloom atmosphere, hairline rules, no shadows. The micro-label treatment (Archivo weight 600, uppercase, 0.16–0.32em tracking) is the system's most fragile element when translated: CJK micro-labels lose both the uppercase signal and the wide tracking. Compensate by setting Chinese micro-labels in 思源黑体 weight 600 at 0 tracking with the **slightly heavier weight contrast** (drop body to weight 400 of 思源宋体, keep labels at 600 of 思源黑体) and by **always pairing the label with a hairline-soft rule beneath** — the rule does the chrome-recognition work the wide-tracked uppercase did in Latin.\n\n### Known CJK Gap\n\n- **No CDN-loadable Chinese monospace face for tabular data.** JetBrains Mono's role here (calendar ledger dates, chart year/value labels, page numbers) depends on monospaced figure rhythm that CJK doesn't provide. 思源黑体 at weight 500 with `font-feature-settings: \"tnum\"` gives tabular Latin digits but Chinese characters remain proportional. For ledger rows where alignment is structural, keep the date and value columns in Latin digits (Arabic numerals + Latin date abbreviations) and use 思源黑体 only for the title/venue cells.\n- **Instrument Serif italic has no direct Chinese counterpart.** The italic display token (manifesto-scale quote body) loses its slow-reading personality entirely in CJK. Use 思源宋体 400 with looser line-height (1.4) and slightly larger size to compensate; consider 「」 quotation framing to signal \"this is a quoted passage\".\n- **得意黑 may not load on restricted networks.** The cn-fontsource CDN is reliable in mainland China but less proven internationally. Always include `'Noto Serif SC', serif` in the stack as fallback so display headlines remain editorial even when 得意黑 fails.\n\n## Iteration Guide\n\n1. Any new surface starts on `{colors.paper}`, places at least one `{components.sun-bloom}` for atmosphere, and pins the persistent `{components.pagenum}` to bottom-right.\n2. Any new headline uses Instrument Serif weight 400 with tight line-height and negative tracking. Reach for `{typography.headline}` for primary moments and `{typography.display}` only for cover-scale.\n3. Any new body paragraph uses Archivo weight 400 with line-height 1.5. Lede paragraphs following a headline use the slightly larger `{typography.body-lede}` for breathing room.\n4. Any new eyebrow or section tag uses the micro-label treatment: Archivo weight 600, uppercase, 0.16-0.32em tracking, ink color, no fill. Don't substitute a pill or chip.\n5. Any new structural separator is a 1px `{components.hairline-rule}` in ink, or its soft variant for secondary list rows. Never reach for a thicker border.\n6. Any new numerical or metadata content (date, page number, chart value, ledger figure) uses JetBrains Mono. Serif numerals are reserved for display moments only.\n7. Any new \"poster-scale\" color statement uses `{components.yellow-panel}` — a flooded column or fraction of the canvas in `{colors.sun}` with ink text on top.\n8. Any new ordered list of program items uses the `{components.strand-row}` pattern: serif numeral cell + serif title + sans body, separated by hairline-soft rule.\n9. Any new tabular itinerary uses the `{components.ledger-row}` pattern: mono date + serif title + sans venue + mono duration right-aligned, separated by hairline-soft rule.\n10. If a surface feels flat, add an `{components.ember-bloom}` in the opposite corner from the sun-bloom — never add a card border or shadow.\n\n## Known Gaps\n\n- **Instrument Serif, Archivo, and JetBrains Mono are loaded from Google Fonts** via a preconnect + ``. Fallbacks (`Georgia`, `Helvetica Neue`, `ui-monospace`) are defined but render very differently — in environments where Google Fonts fail, the system collapses to generic editorial defaults and loses its identity.\n- **The Instrument Serif italic axis is loaded** but used only for the manifesto-scale quote treatment. Other italic moments (an `` inside a body paragraph, for instance) will not stylistically signal the same as the dedicated italic display.\n- **The system has no chart engine** — the data slide uses inline `style=\"width: XX%\"` on bar divs. Building dynamic charts requires computing widths in JS or templating the markup server-side.\n- **The block-tile underprint uses hardcoded grid positions** (`grid-column: 1 / 3; grid-row: 6 / 9;`) per tile. Tiles are decorative and the placements are tuned per surface; there is no parametric tile placement system.\n- **The vertical rail-label uses a rotated transform** that can produce subtle subpixel rendering artifacts on some browsers. The label is decorative; if rendering looks off, it can safely be dropped.\n- **The slide navigation has no slide indicator beyond the pagenum.** There are no dot-rails, no progress bar, no thumbnail bar. The pagenum text is the only positional cue.\n- **The crossfade transition is screen-only** and doesn't degrade to a sensible print/static state. Capturing slides for PDF export requires manual screenshot per surface.\n- **The cover and colophon footer-band columns use fractional widths** (`1.1fr 1fr 1.4fr 2fr` and `1.2fr 1.1fr 1fr 1.4fr`). These ratios are tuned to the demo content and may need adjusting if footer cells carry significantly different text length.\n- **The system loads Google Fonts with `ital` axis for Instrument Serif** but only `wght` axes for Archivo and JetBrains Mono. Adding italic body or italic mono moments requires updating the font-loading request.\n","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/biennale-yellow/preview.md":"# Biennale Yellow Preview Card\n\nUse this small file for title-slide previews only. For final deck generation, read the full design doc listed below.\n\n## Files\n\n- Full design doc: `bold-template-pack/templates/biennale-yellow/design.md`\n- Preview card: `bold-template-pack/templates/biennale-yellow/preview.md`\n\n## Selection Metadata\n\n- Slug: `biennale-yellow`\n- Tagline: Solar yellow on warm parchment with deep indigo serif and atmospheric sun-glow gradients.\n- Mood: editorial, atmospheric, warm, cultural-institution, poster-like\n- Tone: literary, considered, contemplative, warm-modern, Dutch-editorial\n- Formality: high\n- Density: medium\n- Scheme: light\n- Best for: Anything that should feel like an art-biennale poster or a museum's annual programme: exhibition decks, arts-institution announcements, design conference brochures, curatorial pitches, literary publications, studio retrospectives. Equally good for any deck wanting Dutch-editorial atmosphere with an unmistakable single-color signature.\n- Avoid for: Decks that need visual punch or saturated multi-color energy — the warm-paper canvas and one-yellow palette are intentionally quiet and atmospheric.\n\n## Visual Snapshot\n\nA literary-editorial presentation system in the visual register of an art biennale catalogue or quiet exhibition poster. The aesthetic is built on warm parchment grounds (#E9E5DB) flooded with soft solar yellow (#F1EE2E) radial blooms, set against a single deep indigo navy ink color. Display type is Instrument Serif — a contemporary high-contrast serif with tall ascenders and elegant italics — paired with Archivo for sans-serif chrome and JetBrains Mono for numerical and metadata callouts. No drop shadows, no rounded corners, no bordered cards: the only structural lines are hairline 1px rules in ink. The mood sits between a folded museum brochure, a slow-reading literary quarterly, and a Mediterranean exhibition poster — confident, atmospheric, and deeply restrained.\n\nBiennale Yellow is a literary-editorial presentation system modeled on the visual language of European art biennale catalogues, slow exhibition posters, and quarterly literary publications. There are no cards, no buttons, no shadows, no rounded corners. The structural vocabulary is just three things: paper, ink, and yellow.\n\n## Preview Ingredients\n\n- Palette: paper #E9E5DB; paper-deep #DCD6C4; sun #F1EE2E; sun-soft #F8F39B; haze #F0DA7C; ink #1B2566; ember #E26B4A\n- Typography: See full design doc after selection.\n- Signature move: Warm parchment ground ({colors.paper}) on every surface; never white, never gray.\n- Signature move: Single ink color ({colors.ink}) for all text and all rules — no secondary text colors.\n- Signature move: Solar yellow ({colors.sun}) deployed three ways: as a flooded panel, as a soft radial bloom, as a translucent geometric tile underprint.\n- Signature move: Instrument Serif handles every display moment at scales from 40px to 720px+.\n- Signature move: Archivo Bold uppercase + 0.16–0.32em tracking is the universal label voice.\n\n## International / CJK Preview Note\n\n- If the preview uses Chinese or other CJK text, keep CJK letter-spacing at 0, loosen line-height, and avoid uppercase transforms on CJK runs.\n- Use the full `design.md` CJK section after selection for exact font pairings and script-specific adjustments.\n\n## Preview Rules\n\n- Build exactly one title slide at 1920x1080 inside the fixed-stage model.\n- Preserve the palette, type roles, surface rhythm, and decorative vocabulary described above.\n- Use the user's real title/subtitle/context; do not copy demo slide content.\n- The rendered preview must look like a real first slide, not a template-selection card.\n- Never place internal workflow text on the slide: no `preview`, `generated from`, `preview.md`, `template`, `preset`, `style option`, `Option A/B/C`, file names, paths, or source-doc labels.\n- Never place the template name or slug on the slide itself; mention it only in the chat message.\n- Never place user requirement notes such as desired vibe, audience, or internal-use labels on the slide unless the user explicitly wants those exact words in the deck.\n- Use only real deck content for visible chrome: deck title, real section title, date, author, company, page number, or genuine content phrases from the user material.\n- Do not read `template.html` for preview generation.\n- Do not read other templates' `design.md` files.\n- After the user picks this template for the full deck, read the full design doc before generating final slides.\n","plugins/frontend-slides/skills/frontend-slides/bold-template-pack/templates/block-frame/design.md":"---\nversion: alpha\nname: BlockFrame\ndescription: \"A maximalist neobrutalist presentation system built on 4px solid black borders, 8px hard offset shadows, and a high-key candy palette of five saturated pastels plus cream and off-white. Display type runs Inter at weight 800-900 in tight uppercase; secondary chrome uses Space Grotesk as a quasi-monospace label face. Tilted decorative shapes (rotated stars, rectangles, badges) puncture the borders and break the grid intentionally. Pastels are paired loudly: pink + blue + green + yellow + cream cycle through every region with deliberate juxtaposition. The aesthetic borrows from zine layout, 1990s-revival sticker books, and contemporary toy packaging — bold, joyful, slightly chaotic, never timid.\"\n\ncolors:\n black: \"#000000\"\n white: \"#FFFFFF\"\n offwhite: \"#FFFDF5\"\n pink: \"#FE90E8\"\n blue: \"#C0F7FE\"\n green: \"#99E885\"\n yellow: \"#F7CB46\"\n cream: \"#FFDC8B\"\n\nborders:\n primary: \"4px solid {colors.black}\"\n thin: \"3px solid {colors.black}\"\n\nshadows:\n default: \"8px 8px 0px {colors.black}\"\n small: \"4px 4px 0px {colors.black}\"\n hover: \"6px 6px 0px {colors.black}\"\n close-yellow: \"12px 12px 0px {colors.yellow}\"\n close-white: \"6px 6px 0px {colors.white}\"\n\ntypography:\n heading-xl:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 900\n fontSize: \"clamp(48px, 6vw, 96px)\"\n lineHeight: 0.95\n letterSpacing: -0.03em\n textTransform: uppercase\n heading-lg:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 800\n fontSize: \"clamp(32px, 4vw, 64px)\"\n lineHeight: 1\n letterSpacing: -0.02em\n textTransform: uppercase\n heading-md:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 700\n fontSize: \"clamp(24px, 2.5vw, 40px)\"\n lineHeight: 1.1\n letterSpacing: -0.01em\n close-title:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 900\n fontSize: \"clamp(40px, 5vw, 80px)\"\n lineHeight: 0.95\n letterSpacing: -0.03em\n textTransform: uppercase\n quote-text:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 900\n fontSize: \"clamp(28px, 3.5vw, 52px)\"\n lineHeight: 1.15\n letterSpacing: -0.02em\n textTransform: uppercase\n stat-number:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 900\n fontSize: \"clamp(36px, 4vw, 64px)\"\n lineHeight: 1\n card-title:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 700\n fontSize: 22px\n lineHeight: 1.2\n textTransform: uppercase\n step-num:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 900\n fontSize: 48px\n lineHeight: 1\n body:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 500\n fontSize: \"clamp(16px, 1.2vw, 20px)\"\n lineHeight: 1.6\n body-card:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 500\n fontSize: 15px\n lineHeight: 1.6\n list-body:\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 500\n fontSize: 16px\n lineHeight: 1.5\n label:\n fontFamily: \"'Space Grotesk', monospace\"\n fontWeight: 600\n fontSize: 13px\n lineHeight: 1\n letterSpacing: 0.08em\n textTransform: uppercase\n mono-tag:\n fontFamily: \"'Space Grotesk', monospace\"\n fontWeight: 600\n fontSize: 14px\n lineHeight: 1\n letterSpacing: 0.05em\n textTransform: uppercase\n mono-meta:\n fontFamily: \"'Space Grotesk', monospace\"\n fontWeight: 500\n fontSize: 15px\n letterSpacing: 0.02em\n subtitle-mono:\n fontFamily: \"'Space Grotesk', monospace\"\n fontWeight: 500\n fontSize: 18px\n lineHeight: 1.5\n counter:\n fontFamily: \"'Space Grotesk', monospace\"\n fontWeight: 700\n fontSize: 14px\n lineHeight: 1\n letterSpacing: 0.1em\n textTransform: uppercase\n legend-item:\n fontFamily: \"'Space Grotesk', monospace\"\n fontWeight: 600\n fontSize: 13px\n\nspacing:\n slide-pad: 60px\n card-pad-lg: 60px\n card-pad-md: 36px\n card-pad-sm: 28px\n card-pad-xs: 22px\n gap-lg: 48px\n gap-md: 32px\n gap-sm: 24px\n gap-xs: 16px\n pad-bottom-clearance: 110px\n\ncanvas:\n width: 100vw\n height: 100vh\n default-background: \"{colors.offwhite}\"\n\ncomponents:\n card-elevated:\n border: \"4px solid {colors.black}\"\n background: \"{colors.white}\"\n boxShadow: \"{shadows.default}\"\n description: \"Primary elevated card. 4px ink border + 8px ink offset shadow. Background is white by default; on darker surfaces background may shift to offwhite or to a colored fill.\"\n card-flat:\n border: \"4px solid {colors.black}\"\n background: \"{colors.white}\"\n description: \"Bordered card without elevation shadow. Used for secondary content cells inside multi-card grids where the shadow would compound.\"\n card-small:\n border: \"3px solid {colors.black}\"\n background: \"{colors.white}\"\n boxShadow: \"{shadows.small}\"\n description: \"Compact card with thinner border + smaller offset shadow. Used for intro-cards, stat-cards, team-cards, and timeline-steps.\"\n label-pill:\n border: \"3px solid {colors.black}\"\n padding: \"6px 16px\"\n fontFamily: \"'Space Grotesk', monospace\"\n fontSize: 13px\n fontWeight: 600\n letterSpacing: 0.08em\n textTransform: uppercase\n background: \"{colors.white}\"\n boxShadow: \"{shadows.small}\"\n description: \"Universal section eyebrow. White base by default; pink, blue, green, yellow, cream variants swap background. Always sits on a 3px black border with a 4px hard offset shadow.\"\n button-primary:\n border: \"3px solid {colors.black}\"\n background: \"{colors.yellow}\"\n color: \"{colors.black}\"\n padding: \"14px 32px\"\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 700\n fontSize: 16px\n boxShadow: \"{shadows.small}\"\n description: \"Primary CTA. Yellow fill with black text, 3px black border, 4px offset shadow. Hover lifts the button -2/-2 and grows shadow to 6px.\"\n corner-bracket:\n width: 24px\n height: 24px\n border: \"3px solid {colors.black}\"\n description: \"Two L-shaped brackets at opposite corners of a card or frame (tl + br + tr + bl pattern available). Sits inside the card edge as a decorative frame-within-frame.\"\n icon-square:\n width: 64px\n height: 64px\n border: \"3px solid {colors.black}\"\n description: \"Solid pastel square (pink/blue/green) holding a single uppercase letter glyph at weight 700 / 28px. Used as feature-card icons.\"\n feature-deco:\n width: 48px\n height: 48px\n border: \"3px solid {colors.black}\"\n background: \"{colors.yellow}\"\n position: \"absolute top -12px right 24px\"\n description: \"Yellow square notch that protrudes from the top edge of a feature card, breaking the card's top border line.\"\n stat-deco-dot:\n width: 12px\n height: 12px\n borderRadius: 50%\n border: \"2px solid {colors.black}\"\n description: \"Small black-bordered colored circle pinned to the top-right of a stat card. The only round shape used on cards. Fill cycles through the pastel palette.\"\n avatar-square:\n width: 72px\n height: 72px\n border: \"3px solid {colors.black}\"\n background: \"{colors.pink}\"\n fontFamily: \"'Inter', sans-serif\"\n fontWeight: 900\n fontSize: 28px\n textTransform: uppercase\n description: \"Square avatar with two-letter initials, used in team grids. Fill cycles through the pastel palette.\"\n list-number:\n width: 36px\n height: 36px\n border: \"3px solid {colors.black}\"\n background: \"{colors.yellow}\"\n fontFamily: \"'Space Grotesk', monospace\"\n fontWeight: 700\n fontSize: 14px\n description: \"Square numerical bullet pinned to the left of each list item. Black border, yellow fill, mono numeral.\"\n star-burst:\n clipPath: \"polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)\"\n border: \"3px solid\"\n background: \"{colors.pink}\"\n description: \"10-point star clipped via CSS clip-path with a 3px border. Decorative attention-grabber pinned to corners of close-frames and feature cards.\"\n stripe-block:\n background: \"repeating-linear-gradient(45deg, {colors.black}, {colors.black} 4px, {colors.green} 4px, {colors.green} 12px)\"\n border: \"3px solid {colors.black}\"\n description: \"Black-and-color diagonal stripe panel used as decorative attention block on poster-class surfaces.\"\n bg-dot-grid:\n backgroundImage: \"radial-gradient(circle, {colors.black} 1.2px, transparent 1.2px)\"\n backgroundSize: \"24px 24px\"\n description: \"Faint dot-grid background pattern used as an overlay on light surfaces or as decoration in corners of cards.\"\n tilt-card:\n transform: \"rotate(±2deg) or rotate(±8deg)\"\n description: \"Card with intentional tilt. Stat cards alternate -2deg / +2deg; decorative rectangles tilt up to ±12deg. The tilt is the system's playful structural signature.\"\n nav-btn:\n width: 48px\n height: 48px\n border: \"3px solid {colors.black}\"\n background: \"{colors.white}\"\n boxShadow: \"{shadows.small}\"\n description: \"Square nav arrow button. Hover translates -2/-2 and grows shadow; active translates 2/2 and shrinks shadow.\"\n slide-counter:\n border: \"3px solid {colors.black}\"\n background: \"{colors.white}\"\n padding: \"10px 18px\"\n boxShadow: \"{shadows.small}\"\n description: \"Persistent slide counter pill at bottom-left. Space Grotesk uppercase NN / NN format.\"\n---\n\n## Frontend Slides Fixed-Stage Policy\n\nWhen this design system is used by the `frontend-slides` skill, generate the final deck as a **fixed 1920×1080 stage** that scales uniformly to the browser viewport. The deck should preserve a 16:9 slide canvas on every screen, including phones; it may letterbox or pillarbox, but it should not reflow slide content for mobile.\n\nThis policy has higher priority than any source-template responsive behavior described later in this file. If a later section says the original template is viewport-fluid, treat that as source history only, not as the target generation model for `frontend-slides`.\n\nThis policy applies even if the source template was originally implemented with viewport-fluid CSS such as `100vw`, `100vh`, `vw`, `vh`, or `clamp()`. Treat those values as design proportions to translate into 1920×1080 stage coordinates, not as live responsive rules in the generated deck.\n\nUse `deck-stage.js` or an equivalent inline stage scaler for final output: render each slide at 1920×1080, scale the whole stage with one transform, and verify rendered screenshots for both text overflow and panel overlap.\n\n\n## Overview\n\nBlockFrame is a **maximalist neobrutalist presentation system** built on five structural laws: every region has a 4px black border, every elevated element has an 8px hard offset shadow, every corner is square, every accent color is a saturated pastel, and every layout is allowed to be a little bit crooked. The system's joy comes from the deliberate collision of these laws — bordered cards meet bordered cards, shadows stack against shadows, tilted decorations puncture the grid intentionally.\n\nThe type system pivots on **Inter** (weights 400-900) for display, body, and stats — set at weight 800-900 in tight uppercase with negative letter-spacing for headlines, weight 500 sentence case for body, and weight 700 uppercase for card titles. **Space Grotesk** (weights 400-700) is the secondary face, used as a quasi-monospace label voice for eyebrows, slide counters, stat labels, mono tags, and any chrome that should read as \"system\" rather than \"editorial\". The face combination is deliberately ordinary — both are widely-available open sans-serifs — but the treatment (heavy uppercase Inter + wide-tracked Space Grotesk) gives them a distinct neobrutalist register.\n\nThe palette is built around **five saturated pastels** (pink `#FE90E8`, blue `#C0F7FE`, green `#99E885`, yellow `#F7CB46`, cream `#FFDC8B`) plus **pure black** (`#000000`) for borders and text, **white** (`#FFFFFF`) for clean card fills, and **off-white** (`#FFFDF5`) for warm canvas. The pastels are not subtle accents — they are full-bleed surface fills. A typical deck cycles every slide through a different colored ground (offwhite cover → blue intro → offwhite content → green chart → pink quote → yellow split → offwhite timeline → blue stats → cream team → black close). This color cycling is the system's primary rhythm.\n\nDepth is **hard offset shadow at 4px and 8px**, always solid black, always zero blur, always positioned bottom-right. Larger elements get 8px, smaller chrome gets 4px. The close-frame uses a single 12px offset in **yellow** (the only colored shadow in the system) as the system's loudest depth statement, and inverted close-frames pair 6px **white** shadows on black surfaces. Borders are 4px solid black on primary cards, 3px solid black on secondary chrome. Border weight and shadow size are tightly coupled — a 4px border carries an 8px shadow; a 3px border carries a 4px shadow.\n\n**Density philosophy: comfortably dense.** This system reads as authoritative when packed and timid when sparse. A typical surface holds: a label-pill eyebrow + a large headline + a multi-card grid (3-6 cards) + at least one decorative element (tilted rectangle, star burst, stripe block, corner bracket, deco dots). Empty space within a region reads as \"broken\" — every card should be filled, every grid should be complete. The system's joy depends on the visual chatter of many bordered objects existing in the same frame.\n\n**Key Characteristics:**\n- 4px solid black borders on primary cards, 3px on secondary chrome — never thinner.\n- 8px hard offset shadows on primary cards, 4px on secondary chrome — solid black, zero blur.\n- Five-pastel palette (pink, blue, green, yellow, cream) plus black, white, off-white — cycled across surfaces.\n- Inter weight 800-900 uppercase with negative tracking is the display voice; Space Grotesk weight 600 uppercase with 0.08em tracking is the label voice.\n- Square corners everywhere except a single circular accent dot on stat cards.\n- Tilted decorative elements (rotated rectangles, stars, badges) puncture the grid intentionally.\n- Label pills (`{components.label-pill}`) carry a 3px border, 4px offset shadow, and a pastel fill variant — the universal section eyebrow.\n- Colored fills are bold and saturated; pastels are used as panel grounds, not as light accents.\n- Yellow is the default CTA color; black is the default close-surface color.\n- Star bursts, stripe blocks, and dot grids are reusable decorative attention units.\n\n## Colors\n\n### Palette\n\n- **Black** (`{colors.black}` — `#000000`): The structural color. Every border, every primary text moment, every shadow. Pure black, no warm bias. The system's contrast anchor.\n- **White** (`{colors.white}` — `#FFFFFF`): The default card fill. Used on every primary card and as the background of label-pills and nav-buttons. Pure white, no warmth.\n- **Off-white** (`{colors.offwhite}` — `#FFFDF5`): The warm canvas tone. The default body/slide background when no pastel ground is in play. Subtly warmer than pure white so that white cards sitting on top still feel layered.\n- **Pink** (`{colors.pink}` — `#FE90E8`): A high-key candy magenta. Used as a full-surface ground, as label-pill fill, as icon-square fill, as star-burst fill, and as one of the pastel chart series. The most saturated of the five pastels.\n- **Blue** (`{colors.blue}` — `#C0F7FE`): A pale cyan-ice blue. Used as a full-surface ground (the \"intro\" and \"stats\" feel), as label-pill fill, as icon-square fill, and as a chart series.\n- **Green** (`{colors.green}` — `#99E885`): A bright spring green. Used as a full-surface ground, as label-pill fill, as icon-square fill, in the stripe-block diagonal pattern, and as a chart series.\n- **Yellow** (`{colors.yellow}` — `#F7CB46`): The CTA color. Used as the default button fill, as the close-frame shadow color, as list-number squares, as the feature-deco notch, and as label-pill fill. The brightest, most attention-pulling pastel.\n- **Cream** (`{colors.cream}` — `#FFDC8B`): A warm yellow-cream. Softer than yellow, more saturated than offwhite. Used as a full-surface ground (the \"team\" or \"cover\" feel), as label-pill fill, and as a tertiary chart accent.\n\n### Defaults\n\n- **Default surface background**: `{colors.offwhite}` for content-heavy surfaces; cycle through `{colors.cream}`, `{colors.blue}`, `{colors.pink}`, `{colors.green}`, `{colors.yellow}` for surfaces that need a stronger ground. The cycle is the rhythm; staying on one ground for many slides flattens the system.\n- **Default headline color**: `{colors.black}` on all light/pastel surfaces; `{colors.white}` on the black close-surface.\n- **Default body text color**: `{colors.black}` on all light/pastel surfaces; `{colors.white}` or `{colors.cream}` on dark surfaces.\n- **Default border color**: `{colors.black}` — always. There are no colored borders anywhere except the 4px white border on the inverted close-frame.\n- **Default card fill**: `{colors.white}`. Use a pastel fill only when the card is part of a multi-card row where each card needs distinct color identity (e.g., the timeline-step row where each step is a different pastel).\n- **Default button fill**: `{colors.yellow}`. Other pastels work, but yellow is the system's primary \"click here\" signal.\n- **Default label-pill base**: `{colors.white}`; pastel variants (`{colors.pink}`, `{colors.blue}`, `{colors.green}`, `{colors.yellow}`, `{colors.cream}`) signal section type or decorate the eyebrow.\n- **Default decorative accent on stat cards**: a 12px circle (`{components.stat-deco-dot}`) in a pastel fill — cycling pink, blue, green, yellow across cards.\n- **Default chart palette order**: pink → blue → green (three-series), with yellow and cream available for additional series.\n\nThe pastels are interchangeable in role — none of them carry fixed semantic meaning (green isn't \"success\", red doesn't exist in the palette at all). Pair them by visual juxtaposition: pink + blue + green is the most common trio; cream + yellow is the warm pair; blue + pink is the cool-warm contrast.\n\n## Typography\n\n### Font Family Stack\nThe system runs two faces.\n\n**Inter** (weights 400-900) is the display, body, headline, and stat face. Used at weight 900 for hero/close titles and quote text, weight 800 for primary headlines, weight 700 for medium headlines and card titles, weight 500 for body. Display weights are always uppercase with negative letter-spacing (-0.02 to -0.03em); body weights are always sentence case with default tracking. The contrast between heavy uppercase display and weight-500 sentence body is the system's typographic rhythm.\n\n**Space Grotesk** (weights 400-700) is the label and chrome face. Used at weight 600 for label-pills (13px, 0.08em tracking, uppercase) and at weight 500 for monospace meta callouts. The face is technically not monospace, but its slightly geometric character + the wide tracking treatment makes it read as the system's \"code\" voice.\n\nDon't introduce a third face. The Inter + Space Grotesk pairing is the entire typographic palette.\n\n### Typography Scale\n\n| Token | Size (clamp / px) | Family | Weight | Use |\n|---|---|---|---|---|\n| `{typography.heading-xl}` | 48–96px clamp | Inter | 900 | Hero or cover-scale headline |\n| `{typography.heading-lg}` | 32–64px clamp | Inter | 800 | Primary section headline |\n| `{typography.heading-md}` | 24–40px clamp | Inter | 700 | Region headline, chart title |\n| `{typography.close-title}` | 40–80px clamp | Inter | 900 | Closing-statement title (inverted surface) |\n| `{typography.quote-text}` | 28–52px clamp | Inter | 900 | Quote body — always uppercase |\n| `{typography.stat-number}` | 36–64px clamp | Inter | 900 | Stat numeral |\n| `{typography.card-title}` | 22px | Inter | 700 | Feature card title — uppercase |\n| `{typography.step-num}` | 48px | Inter | 900 | Numeral inside a timeline-step (opacity 0.6) |\n| `{typography.body}` | 16–20px clamp | Inter | 500 | Standard body paragraph |\n| `{typography.body-card}` | 15px | Inter | 500 | Body inside compact cards |\n| `{typography.list-body}` | 16px | Inter | 500 | Numbered list body |\n| `{typography.label}` | 13px | Space Grotesk | 600 | Text inside label-pill |\n| `{typography.mono-tag}` | 14px | Space Grotesk | 600 | Mono tag/badge, slide-counter |\n| `{typography.mono-meta}` | 15px | Space Grotesk | 500 | Inline mono metadata |\n| `{typography.subtitle-mono}` | 18px | Space Grotesk | 500 | Hero subtitle / close subtitle |\n| `{typography.counter}` | 14px | Space Grotesk | 700 | Persistent slide counter (NN / NN) |\n| `{typography.legend-item}` | 13px | Space Grotesk | 600 | Chart legend label |\n\n### Defaults\n\n- **Default size for a hero or cover title**: `{typography.heading-xl}` (48–96px). Always uppercase, always weight 900, always with -0.03em tracking.\n- **Default size for a primary section headline**: `{typography.heading-lg}` (32–64px). Uppercase, weight 800, -0.02em.\n- **Default size for a region or chart title**: `{typography.heading-md}` (24–40px). The only Inter heading not in uppercase by default — though uppercase is permitted.\n- **Default size for a stat numeral**: `{typography.stat-number}` (36–64px). Weight 900, line-height 1.\n- **Default size for body paragraph**: `{typography.body}` (16–20px clamp). Weight 500, sentence case, line-height 1.6.\n- **Default size for an eyebrow label**: `{typography.label}` (13px) inside the `{components.label-pill}`.\n- **Default weight for any Inter display**: 800 or 900. Inter display at weight 700 reads as \"almost there\"; only use 700 for `{typography.heading-md}` or card titles.\n- **Default weight for any Inter body**: 500. Body at 400 reads as too light, body at 700 reads as oversized.\n- **Default tracking for any Space Grotesk label/chrome**: 0.05-0.10em. Wide tracking is the face's \"chrome\" signal.\n- **Default tracking for any Inter display**: -0.01em (heading-md) to -0.03em (heading-xl). Display without negative tracking reads as untreated.\n\nWhen unsure which heading token to reach for, default to `{typography.heading-lg}` (32–64px) for the slide's primary text moment. `{typography.heading-md}` is for region or chart titles within a slide.\n\n### Signature Treatments\n\nThese treatments are **non-optional whenever the corresponding element type is used**:\n\n- **Every Inter display element (heading-xl, heading-lg, quote-text, close-title) is uppercase.** Sentence-case Inter display at weights 800+ does not exist in this system. The uppercase + heavy-weight + negative-tracking combination is the visual identity.\n- **Every Inter display element uses negative letter-spacing** (-0.01 to -0.03em). Display without negative tracking reads as default Inter, which is a fundamentally different aesthetic.\n- **Every label-pill carries the 3px border + 4px shadow + uppercase Space Grotesk text** combination. A label without all three properties is not a label-pill — it's a stray text element.\n- **Every card-title is uppercase Inter weight 700.** Card titles in sentence case break the brutalist rhythm.\n- **Every Space Grotesk label/chrome/counter is uppercase with 0.05-0.1em tracking.** Sentence-case Space Grotesk does not exist in this system except for body-adjacent metadata (mono-meta, mono inline).\n- **Every stat numeral is Inter weight 900 with line-height 1.** Stat numerals are display moments, not data chrome.\n- **Every Inter body block is sentence case with line-height 1.6 (or 1.5 for compact card body).** Body in uppercase or with tight line-height reads as broken.\n- **Step numbers inside timeline-step cards are 48px weight 900 at opacity 0.6.** The reduced opacity is mandatory — full-opacity step numbers overwhelm the step title.\n\n### Typography Principles\n\nThe voice contrast is **bold uppercase display ↔ sentence body ↔ wide-tracked label**. Italic is never used. Underline is never used. The only emphasis mechanism is weight contrast within the Inter ladder and the uppercase/sentence-case switch.\n\nDisplay elements should be allowed to **dominate the canvas**. The system is built for poster-scale typography; reading a heading-xl at small size collapses its character. Lean into the upper bound of every clamp.\n\n## Layout\n\n### Canvas System\nThe system targets `100vw × 100vh` per slide. Slides are absolutely positioned and toggled via `display: none` / `display: flex` on the `.active` class. Default slide padding is 60px on all sides. Slides that contain bottom-anchored grids (timeline, team grid, chart with stat column) carry an additional `padding-bottom: 110px` to clear the fixed slide-counter and nav-controls chrome.\n\nThe default slide flex direction is column with `justify-content: center`. For two-column splits (intro slide, split image+text), flex direction switches to row.\n\n### Padding and Gap Scale\n\n| Token | Value | Use |\n|---|---|---|\n| `{spacing.slide-pad}` | 60px | Default slide padding from edge to content |\n| `{spacing.card-pad-lg}` | 60px | Hero-frame and quote-frame internal padding |\n| `{spacing.card-pad-md}` | 36px | Feature-card internal padding |\n| `{spacing.card-pad-sm}` | 28px | Intro-card internal padding |\n| `{spacing.card-pad-xs}` | 22px | Team-card and small-cell padding |\n| `{spacing.gap-lg}` | 48px | Gap between major sections (header-to-grid) |\n| `{spacing.gap-md}` | 32px | Gap between feature cards |\n| `{spacing.gap-sm}` | 24px | Gap between intro cards, stat cards |\n| `{spacing.gap-xs}` | 16px | Gap inside list items, intra-card content |\n| `{spacing.pad-bottom-clearance}` | 110px | Bottom padding reserve to clear fixed nav chrome |\n\n### Persistent Chrome\nThree elements appear on every slide:\n- **Slide counter** at bottom-left — 3px black border, white fill, 4px shadow, Space Grotesk 14px weight 700 uppercase, NN / NN format.\n- **Nav controls** at bottom-right — two 48px square nav buttons with 3px borders, white fills, 4px shadows.\n- The slide-counter and nav-controls are not part of the slide composition — they live outside `.slides-container` and overlap the bottom edge.\n\n### Card-on-Card Structure\nThe system's primary layout pattern is **cards on grounds on grounds**. A typical slide places a colored-ground surface, on which sits a white card with 4px black border + 8px shadow, which may contain smaller cards or icon-squares. Each level of nesting carries its own border weight: 4px for the outer card, 3px for inner chrome. This nested-bordered structure is what gives the system its dense, packed feel.\n\n### Decorative Disruption\nTilted decorative elements (rotated rectangles, stars, badges, dot grids) are placed absolutely on slide and card surfaces to puncture the grid intentionally. These are not \"background decoration\" — they are part of the composition. A surface without any decorative element reads as too clean.\n\n## Depth and Elevation\n\n### Hard Offset Shadow Stack\nThe system uses three primary shadow values:\n- **`{shadows.default}`** = `8px 8px 0px {colors.black}` — primary card shadow. Used on hero-frame, feature-card, quote-frame, chart-frame, and any elevated card.\n- **`{shadows.small}`** = `4px 4px 0px {colors.black}` — secondary chrome shadow. Used on intro-card, stat-card, team-card, timeline-step, label-pill, button-primary, nav-btn, slide-counter.\n- **`{shadows.hover}`** = `6px 6px 0px {colors.black}` — hover state for buttons and nav. Triggered with a -2/-2 transform.\n\nAll shadows are solid black, zero blur, fixed offset bottom-right. The shadow + transform pairing on hover creates a \"lifting off the page\" interaction signature — the element translates -2/-2 while the shadow grows to 6/6, simulating a peel-up.\n\n### Inverted Shadows\nOn the dark close-surface, shadows invert their color but keep the offset logic:\n- **`{shadows.close-yellow}`** = `12px 12px 0px {colors.yellow}` — the loudest depth statement in the system. Used on close-frame to make the inverted surface read as still \"elevated\" despite its dark ground.\n- **`{shadows.close-white}`** = `6px 6px 0px {colors.white}` — used on the close-btn to maintain elevation on the black ground.\n\nThese colored shadows are the only exceptions to the \"shadows are always black\" rule, and they appear only on the dark surface.\n\n### Border-Based Depth\nMost of the system's apparent layering comes from the 4px or 3px ink borders, not from shadow. A card with a border but no shadow still reads as \"an object on a surface\" — the shadow is what makes it read as \"lifted\". Use shadow for elevated cards; use border-only for secondary cards inside a multi-card grid where stacked shadows would compound into noise.\n\n### Tilted Elements as Depth\nThe system's playful depth signature is **tilt**. Stat cards alternate -2deg / +2deg rotation. Decorative pink rectangles tilt up to ±12deg. The yellow button tab on the hero frame tilts -3deg. These tilts break the grid alignment intentionally and create perceived dimensionality without using actual perspective or shadow.\n\n## Shapes and Treatment\n\n### Border Radius\n- **0px** on everything structural — cards, label-pills, buttons, icon-squares, list-numbers, avatars, badges. Square corners are non-negotiable.\n- **50% (circle)** used only for the stat-deco dot (12×12 circular accent pinned to stat cards). This is the only round shape in the system.\n\nThe square-corner discipline is the system's structural identity. Adding rounded corners to any card or chip immediately reads as a different aesthetic.\n\n### Border Weights\n- **4px solid `{colors.black}`** — used on primary cards (hero-frame, feature-card, quote-frame, chart-frame, team-card border, timeline-step border, stat-card border) and the close-frame inverse (4px solid white on black ground).\n- **3px solid `{colors.black}`** — used on secondary chrome (label-pill, button, intro-card, icon-square, list-number, avatar, corner-bracket, nav-btn, slide-counter, stripe-block, star-burst). The 3px weight signals \"secondary structural\" vs. the 4px \"primary structural\".\n- **2px solid `{colors.black}`** — used only on legend swatches (16×16 chart swatches) and stat-deco dots. The thinnest border weight, reserved for atomic chrome.\n- **4px solid `{colors.white}`** — used only on the inverted close-frame, the visual-box, and its ::after offset frame on the dark split-visual surface.\n\nThe border weight ladder (2 / 3 / 4) is fixed. No 1px borders, no 5px+ borders.\n\n### Decorative Element Types\n\n**Label-pill** — Square bordered pill (3px black border, 4px shadow), pastel or white fill, Space Grotesk 13px weight 600 uppercase text with 0.08em tracking. The universal section eyebrow.\n\n**Corner-bracket** — Two L-shaped brackets (or four for full enclosure) at the corners of a card, 3px black border. Creates a frame-within-frame decorative motif.\n\n**Star-burst** — 10-point star clipped via CSS clip-path with a 3px border, pastel fill. Decorative attention-grabber pinned to corners of close-frames and feature cards.\n\n**Stripe-block** — Diagonal 4px-on, 8px-off stripe pattern in black + a pastel color, framed with a 3px black border. Decorative attention block used on poster-class surfaces.\n\n**Dot-grid** — 1.2px radial-gradient dot pattern at 24×24 spacing. Used as a faint decorative overlay in corners of slides, at 30-40% opacity.\n\n**Feature-deco notch** — 48×48 yellow square with 3px black border, positioned absolutely to protrude from the top edge of a feature card. The notch breaks the card's top border, suggesting it's been \"stapled on\".\n\n**Icon-square** — 64×64 pastel square with 3px black border holding a single uppercase letter glyph at Inter weight 700 / 28px. Used as feature-card icons.\n\n**Stat-deco dot** — 12×12 circle with 2px black border, pastel fill, pinned to the top-right of a stat card. The system's only round shape.\n\n**List-number** — 36×36 yellow square with 3px black border holding a Space Grotesk 14px weight 700 numeral. Used as bullets on numbered lists.\n\n**Avatar-square** — 72×72 pastel square with 3px black border holding two uppercase initials at Inter weight 900 / 28px. Used in team grids; fills cycle through pastels.\n\n**Step-connector** — A 28×4 horizontal black bar pinned to the right edge of a timeline-step card, mid-height. Visually links adjacent steps in a horizontal flow.\n\n**Tilted decoration** — Any rectangle, badge, or star with a rotate(±2deg to ±12deg) transform. The tilt is intentional disruption of the grid; without it, the system reads as too uniform.\n\n## Do's and Don'ts\n\n### Do\n\n- Apply 4px solid black borders to primary cards (`{components.card-elevated}`, hero-frame, quote-frame) and 3px to secondary chrome. The border weight ladder is the system's structural backbone.\n- Pair every 4px border with an 8px offset shadow, and every 3px border with a 4px offset shadow. The border/shadow coupling is non-negotiable.\n- Cycle slide backgrounds through the pastel palette — offwhite, cream, blue, pink, green, yellow — to keep the deck visually rhythmic. Staying on one color for many slides flattens the system.\n- Set every Inter display element in uppercase with negative letter-spacing (-0.01 to -0.03em) and weight 800+. The combination is the typographic identity.\n- Use the `{components.label-pill}` (3px border, 4px shadow, pastel fill, Space Grotesk uppercase 0.08em) as the universal section eyebrow on every region.\n- Apply tilt to decorative rectangles, stat cards, stars, and badges (±2deg to ±12deg). The intentional misalignment is the system's playful signature.\n- Use `{colors.yellow}` as the default button color. Yellow with a 3px black border and 4px black shadow is the system's \"click here\" voice.\n- Render shadows as solid black with zero blur, always offset bottom-right. The hard-edge shadow is the depth language.\n- Add a decorative element (star-burst, stripe-block, dot-grid, corner-bracket, tilted rectangle) to every surface. The visual chatter is part of the system's energy.\n- Use pure black `{colors.black}` for the closing surface, with white text and a 12px yellow offset shadow on the close-frame. The inverted dark surface is the system's loudest contrast moment.\n\n### Don't\n\n- Don't round any corner on cards, buttons, label-pills, icon-squares, or avatars. Border-radius is forbidden except on the stat-deco dot (12px circle).\n- Don't blur any shadow. Every shadow is hard-edged at zero blur. `box-shadow: 0 4px 12px rgba(0,0,0,0.1)` does not exist in this system.\n- Don't use colored borders. Borders are always pure black, except for the inverted 4px white border on the close-frame.\n- Don't use Inter display weights in sentence case. Uppercase is mandatory on heading-xl, heading-lg, quote-text, close-title, and card-title.\n- Don't set Inter display without negative letter-spacing. Default-tracked Inter at heavy weights reads as a different system.\n- Don't introduce a sixth pastel color. The palette is locked at pink, blue, green, yellow, cream. Adding purple, orange, or red breaks the curated candy palette.\n- Don't omit the label-pill on a region. Going straight from background to headline without an eyebrow tag breaks the system's editorial rhythm.\n- Don't render label-pills as plain text. The 3px border + 4px shadow + pastel fill combination is what defines the pill.\n- Don't use blurred or colored body text. Body is solid black on light surfaces, solid white or cream on dark surfaces.\n- Don't keep every card perfectly aligned. The tilt on stat cards, decorations, and badges is what gives the system its hand-made energy.\n\n## Responsive Behavior\n\nBlockFrame is designed as a **1920×1080 presentation system** (effective 100vw × 100vh). Sizing uses CSS `clamp()` for type and fixed px for borders, shadows, and structural padding. The system has three component-level breakpoints for narrow viewports.\n\n### Scaling Behavior\n- Heading-xl scales 48px → 96px on viewport width.\n- Heading-lg scales 32px → 64px.\n- Body scales 16px → 20px.\n- Borders (3px, 4px), shadows (4px, 8px), and structural padding (60px slide-pad) are fixed and do not scale.\n\n### Component Breakpoints\n- `max-width: 1024px` — slide padding shrinks 60px → 40px, two-column splits stack vertically, feature card row stacks vertically, timeline track stacks vertically with step-connectors hidden, stats grid collapses to 2 columns, team grid collapses to 2 columns. Split visual loses left border and gains a top border.\n- `max-width: 640px` — stats grid collapses to 1 column, team grid collapses to 1 column, hero-frame padding shrinks to 32px, quote-frame padding shrinks to 32px.\n\n### Presenter Behavior\n- Slides advance via `ArrowRight` or `Space`.\n- Slides reverse via `ArrowLeft`.\n- Horizontal touch swipe with a 50px threshold advances/reverses.\n- Slide transitions are instant (`display: none` ↔ `display: flex` on the `.active` class), with no crossfade.\n\n### Print Behavior\nThe system has no `@media print` rule. Slides are absolute-positioned and only one is visible at a time — printing produces only the active slide. For static export, screenshots of each slide preserve all borders, shadows, and decorations (all are CSS, not image assets).\n\n### Interactive States\n- Buttons and nav-buttons translate -2/-2 on hover and shadow grows to 6px (`{shadows.hover}`); on active, translate 2/2 and shadow shrinks to 2px. The hover-press behavior is unusual for a presentation system; it reflects BlockFrame's hybrid identity as both deck and interactive product mockup.\n\n## CJK & International Content\n\nWhen using this template for Chinese (or other CJK) content, swap the Latin typeface stack for an equivalent Chinese pairing and apply universal CJK adjustments. All recommended Chinese fonts load via CDN — no install required.\n\n### Recommended Chinese Pairing\n\n| Role | Latin (default) | Chinese counterpart |\n|---|---|---|\n| Display / hero / quote / close title / stat numerals | Inter 800–900 (uppercase, negative tracking) | 思源黑体 Noto Sans SC 900 (sentence case, 0 tracking) |\n| Card title | Inter 700 (uppercase) | 思源黑体 Noto Sans SC 700 (no transform) |\n| Body / list body | Inter 500 | 思源黑体 Noto Sans SC 400 |\n| Label / mono tag / counter / legend | Space Grotesk 600–700 (uppercase, 0.05–0.1em tracking) | 思源黑体 Noto Sans SC 600 (no transform, no tracking) |\n\n### Mixed-Content Strategy\n\n**Strategy A** — single CJK family with built-in Latin glyph coverage. Set every text element to `font-family: 'Noto Sans SC', sans-serif`. 思源黑体 ships Latin glyphs that pair cleanly with its Chinese characters, so mixed sentences render in one consistent face. The Inter / Space Grotesk distinction in the Latin original is preserved through weight contrast: weight 900 carries the brutalist display role, weight 600 carries the label role, weight 400–500 carries body. Visual hierarchy survives even though the face contrast is gone.\n\n### Loading\n\nAdd to the template's ``:\n\n```html\n\n\n\n```\n\n### Universal CJK Adjustments\n\n- **Line-height**: increase by ~15–25% from the Latin spec. Body 1.75–1.85 (up from 1.6), display 1.15–1.25 (up from 0.95–1). The Latin display compresses to 0.95 line-height; CJK at that compression collides vertically.\n- **Letter-spacing**: set to 0 on every CJK run. The template's negative display tracking (−0.02 to −0.03em on Inter) overlaps CJK strokes and reads as broken; the positive 0.05–0.1em tracking on Space Grotesk labels reads as gappy on square glyphs.\n- **Text transform**: don't apply `uppercase` to Chinese text — CJK has no case. Every Inter display heading (heading-xl, heading-lg, quote-text, close-title, card-title) uses `text-transform: uppercase` in the Latin original; remove it for CJK runs. Every label-pill, counter, and chrome element also uses uppercase; remove that too.\n- **Punctuation**: use full-width Chinese punctuation （，。：；！？「」（））.\n- **No period on display headlines**: Chinese typography convention omits trailing 。 on display-scale headlines.\n- **Space between CJK and Latin (盘古之白)**: insert an ASCII space between every Chinese character and adjacent Latin character or digit. Write `BlockFrame 设计系统` not `BlockFrame设计系统`.\n- **One font per sentence**: 思源黑体 covers both CJK and Latin glyphs in a unified style — let it handle mixed sentences. Don't let the browser font-switch to Inter or Space Grotesk mid-word.\n\n### Aesthetic Notes for This System\n\nThe Latin original's typographic identity rests entirely on the **heavy uppercase + negative tracking** combination on Inter display. CJK has no case, so this signal disappears. The system survives because its identity is **80% structural, 20% typographic**: the 4px black borders, 8px hard offset shadows, five-pastel palette, tilted decorations, label-pills, star bursts, stripe blocks, and dot grids do the brutalist work. Set 思源黑体 900 in sentence case at the same large sizes; the chunky black-on-pastel + hard-shadow framing reads as brutalist regardless of whether the type is in caps.\n\nThe label-pill (Space Grotesk 600 uppercase, 0.08em tracking, 3px border + 4px shadow, pastel fill) loses the uppercase + tracked-mono character. Render Chinese label-pills with 思源黑体 weight 600 at 0 tracking and a slightly tighter fontSize (11–12px instead of 13px) — the bordered pill shape and shadow do the chrome-recognition work. Keep the pastel fill rotation (pink / blue / green / yellow / cream) intact; it's the system's most recognizable signal after the borders themselves.\n\n### Known CJK Gap\n\n- **No CDN Chinese monospace face for the \"system readout\" voice.** Space Grotesk's quasi-mono role (label-pills, counters, mono-tags, slide counter NN / NN) depends on its slightly geometric character plus the wide-tracked uppercase treatment. Neither survives the CJK translation. The slide counter and chart legend can keep Latin digits + Latin labels intact; for purely Chinese chrome, lean on the pill border + shadow + pastel fill to signal \"label\" rather than the typographic treatment.\n- **The \"uppercase brutalist\" identity weakens.** The system's most distinctive typographic decision is \"heavy uppercase Inter with negative tracking\" — and that signal is irreplaceable in CJK. Compensate by leaning harder on the structural elements: more decorative disruption (extra tilted rectangles, star bursts, stripe blocks), more saturated pastel-ground rotation across slides, and slightly tighter shadow offsets to compensate for the calmer typographic baseline.\n\n## Iteration Guide\n\n1. Any new card uses a 4px or 3px solid black border + the matched-weight offset shadow (8px or 4px). Never use a card without both.\n2. Any new region begins with a `{components.label-pill}` eyebrow in pastel fill, then the headline in uppercase Inter weight 800+, then content. The label-headline-content sequence is the system's editorial rhythm.\n3. Any new headline uses uppercase Inter with negative letter-spacing and weight 800-900. Reach for `{typography.heading-lg}` (32-64px) for primary moments and `{typography.heading-xl}` (48-96px) for cover/hero scale.\n4. Any new accent or surface fill picks from the 5-pastel palette (pink, blue, green, yellow, cream) — never introduce a sixth pastel.\n5. Any new CTA uses the `{components.button-primary}` pattern: 3px black border, yellow fill, 4px black shadow, Inter weight 700 / 16px. Hover lifts -2/-2 with shadow growing to 6px.\n6. Any new chart cycles through pink → blue → green for series order, with yellow/cream available for additional series. Legend swatches use 2px black border.\n7. Any new stat or metric uses Inter weight 900 + line-height 1 for the numeral, paired with Space Grotesk uppercase label below. Decorate the card with a `{components.stat-deco-dot}` in a pastel color.\n8. Any new slide adds at least one decorative disruption (tilted rectangle, star-burst, stripe-block, dot-grid corner, corner-bracket frame) — empty surfaces feel timid.\n9. Any new closing-style surface uses pure `{colors.black}` ground with white text, a 4px white-bordered close-frame, and a 12px yellow offset shadow. This is the only colored shadow allowed.\n10. If a surface feels too noisy, drop a decoration — don't drop a border or shadow. The borders and shadows are structural; the decorations are tunable.\n\n## Known Gaps\n\n- **Inter and Space Grotesk are loaded from Google Fonts** via inline `@import`. There are no system fallbacks beyond `sans-serif` and `monospace` — in environments where Google Fonts fail, the system collapses to system defaults and loses its identity.\n- **The system uses `@import` inside the `