---
title: "Cascade 2026"
platform: web
slug: cascade-2026-design-festival-landing-page-web
screens: ["landing-page"]
domains: ["booking"]
style: "minimal"
fonts: ["Bricolage Grotesque", "Geist", "JetBrains Mono"]
roles: ["top-navigation-bar", "button", "gallery", "card"]
score: {clean: 100, consistent: 66, accessible: 99, comprehensible: 21}
url: https://gui.farm/web/cascade-2026-design-festival-landing-page-web
raw: https://gui.farm/web/cascade-2026-design-festival-landing-page-web/design.guix
download: https://gui.farm/web/cascade-2026-design-festival-landing-page-web.gui
---

# Cascade 2026

A landing page for the Cascade 2026 design and code festival in Kyoto with lineup, schedule and passes.

- **Live preview:** https://gui.farm/web/cascade-2026-design-festival-landing-page-web
- **Raw source:** https://gui.farm/web/cascade-2026-design-festival-landing-page-web/design.guix
- **Download (.gui):** https://gui.farm/web/cascade-2026-design-festival-landing-page-web.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cascade 2026">
  <tokens>
    <!-- Backgrounds & Containers -->
    <color name="bg"            value="#EFF3EF" />
    <color name="bg-2"          value="#E1E8E2" />
    <color name="surface"       value="#FBFCFB" />
    <color name="ink"           value="#111612" />
    <color name="text"          value="#111612" />
    <color name="text-2"        value="#4B534C" />
    <color name="text-3"        value="#7E8880" />
    <color name="border"        value="#D3DDD5" />
    <color name="accent"        value="#1A5E3E" />
    <color name="accent-subtle" value="#D2E6DC" />
    <color name="on-accent"     value="#EFF3EF" />
    <color name="inv-text"      value="#EBF2ED" />
    <color name="inv-text-2"    value="#A0B2A6" />
    <color name="inv-border"    value="#2E3A32" />
  </tokens>

  <styles>
    <!-- Typography scale matching Sundial -->
    <text-style name="Display/Mega"    font-family="Bricolage Grotesque" font-size="130" font-weight="700" line-height="124" letter-spacing="-3" />
    <text-style name="Display/H1"      font-family="Bricolage Grotesque" font-size="96"  font-weight="700" line-height="94"  letter-spacing="-2" />
    <text-style name="Display/H2"      font-family="Bricolage Grotesque" font-size="58"  font-weight="600" line-height="62"  letter-spacing="-1" />
    <text-style name="Display/Service" font-family="Bricolage Grotesque" font-size="40"  font-weight="600" line-height="46"  letter-spacing="-0.5" />
    <text-style name="Display/Card"    font-family="Bricolage Grotesque" font-size="30"  font-weight="600" line-height="34" />
    <text-style name="Stat/Numeral"    font-family="Bricolage Grotesque" font-size="84"  font-weight="700" line-height="84"  letter-spacing="-2" />
    <text-style name="Lead"            font-family="Geist" font-size="24" font-weight="400" line-height="36" />
    <text-style name="Body/Base"       font-family="Geist" font-size="17" font-weight="400" line-height="28" />
    <text-style name="Body/Sm"         font-family="Geist" font-size="15" font-weight="400" line-height="23" />
    <text-style name="Nav"             font-family="Geist" font-size="15" font-weight="500" line-height="20" />
    <text-style name="Label/UI"        font-family="Geist" font-size="14" font-weight="600" line-height="18" letter-spacing="0.3" />
    <text-style name="Mono/Eyebrow"    font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="16" letter-spacing="2.5" />
    <text-style name="Mono/Index"      font-family="JetBrains Mono" font-size="14" font-weight="500" line-height="20" letter-spacing="1" />
    <text-style name="Mono/Tag"        font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="16" letter-spacing="0.5" />
  </styles>

  <fonts>
    <font family="Bricolage Grotesque" source="google" weights="400 500 600 700 800" styles="normal" />
    <font family="Geist" source="google" weights="400 500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="400 500" styles="normal" />
  </fonts>

  <components />

  <!-- Root Canvas: Web Desktop Standard (Width: 1440px) -->
  <col w="1440" fill="$bg">

    <!-- ============================ NAVIGATION ============================ -->
    <row role="top-navigation-bar" w="fill" p="26 64" gap="auto" align="middle-center" border-bottom="1 $border">
      <row gap="10" align="middle-center">
        <text font-family="Bricolage Grotesque" font-size="22" font-weight="700" letter-spacing="-0.5" value="Cascade" color="$text" />
        <text font-family="Bricolage Grotesque" font-size="20" font-weight="700" value="✸" color="$accent" />
      </row>
      <row gap="40" align="middle-center">
        <text text-style="Nav" value="Lineup" color="$text" />
        <text text-style="Nav" value="Themes" color="$text-2" />
        <text text-style="Nav" value="Schedule" color="$text-2" />
        <text text-style="Nav" value="Passes" color="$text-2" />
      </row>
      <row p="12 22" fill="$accent" radius="999" align="middle-center" gap="8">
        <text text-style="Label/UI" value="Register Now" color="$on-accent" />
        <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23eff3ef" w="14" h="14" />
      </row>
    </row>

    <!-- ============================ CENTERED HERO SECTION ============================ -->
    <col w="fill" p="100 64 80" gap="40" fill="$bg" align="top-center">
      <!-- Eyebrow -->
      <row gap="12" align="middle-center">
        <text text-style="Mono/Eyebrow" text-case="uppercase" value="Kyoto Design &amp; Code Festival" color="$accent" />
        <text text-style="Mono/Eyebrow" text-case="uppercase" value="·" color="$text-3" />
        <text text-style="Mono/Eyebrow" text-case="uppercase" value="Nov 12-14, 2026 · Kyoto, Japan" color="$text-3" />
      </row>

      <!-- Headline -->
      <text font-family="Bricolage Grotesque" font-size="96" font-weight="800" line-height="92" letter-spacing="-3" w="1100" align="center" value="Where interface meets engineering craft." color="$text" />
      
      <!-- Description -->
      <text text-style="Lead" w="700" align="center" value="Cascade is a single-track boutique gathering of 350 designers, developers, and interface technologists. Three days of keynotes, workshops, and deep conversations in the heart of Kyoto." color="$text-2" />
      
      <!-- Pill Actions -->
      <row gap="16" align="middle-center" pt="8">
        <row role="button" p="18 36" fill="$ink" radius="999" align="middle-center" gap="8">
          <text text-style="Label/UI" value="Claim your pass" color="$inv-text" />
          <img src="https://api.iconify.design/lucide/ticket.svg?color=%23ebf2ed" w="16" h="16" />
        </row>
        <row role="button" p="18 32" fill="none" border="2 $text" radius="999" align="middle-center" gap="8">
          <text text-style="Label/UI" value="See selected sessions" color="$text" />
          <img src="https://api.iconify.design/lucide/calendar.svg?color=%23111612" w="16" h="16" />
        </row>
      </row>
    </col>

    <!-- ============================ HERO IMAGE SHOWCASE ============================ -->
    <row role="gallery" w="fill" p="0 64 80" gap="32" align="top-center" fill="$bg">
      <!-- Visual Card 1: Kyoto Temple -->
      <col w="416" gap="16" align="top-left">
        <img w="416" h="280" fit="cover" src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=800&amp;q=80&amp;auto=format&amp;fit=crop" border="1 $border" />
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/map-pin.svg?color=%237e8880" w="14" h="14" />
          <text text-style="Mono/Tag" value="THE VENUE · OKAZAKI" color="$text-3" />
        </row>
      </col>
      <!-- Visual Card 2: Interactive Interface -->
      <col w="416" gap="16" align="top-left">
        <img w="416" h="280" fit="cover" src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=800&amp;q=80&amp;auto=format&amp;fit=crop" border="1 $border" />
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/layout.svg?color=%237e8880" w="14" h="14" />
          <text text-style="Mono/Tag" value="THE WORKSHOPS · INTERACTIVE" color="$text-3" />
        </row>
      </col>
      <!-- Visual Card 3: Tea Ceremony -->
      <col w="416" gap="16" align="top-left">
        <img w="416" h="280" fit="cover" src="https://images.unsplash.com/photo-1572021335469-31706a17aaef?w=800&amp;q=80&amp;auto=format&amp;fit=crop" border="1 $border" />
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/sparkles.svg?color=%237e8880" w="14" h="14" />
          <text text-style="Mono/Tag" value="THE EXPERIENCE · TACTILE" color="$text-3" />
        </row>
      </col>
    </row>

    <!-- ============================ KEYNOTE SPEAKERS GRID ============================ -->
    <row w="fill" p="100 64 56" gap="auto" fill="$bg-2" align="bottom-left" border-top="1 $border">
      <col gap="16">
        <text text-style="Mono/Eyebrow" text-case="uppercase" value="The Lineup  /  02" color="$accent" />
        <text text-style="Display/H2" value="Keynote Speakers." color="$text" />
      </col>
      <row gap="6" align="middle-center">
        <text text-style="Label/UI" value="All speakers" color="$text" />
        <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23111612" w="16" h="16" />
      </row>
    </row>
    
    <!-- 3-Column Grid -->
    <row w="fill" p="0 64 100" gap="32" fill="$bg-2" align="top-center">
      <!-- Speaker Card 1 -->
      <col role="card" w="416" gap="20" fill="$surface" border="1 $border" p="24" align="top-left">
        <img w="368" h="280" fit="cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&amp;q=80&amp;auto=format&amp;fit=crop" />
        <line fill="$border" />
        <col gap="8" align="top-left" w="fill">
          <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="Elena Rostova" color="$text" />
          <row gap="6" align="middle-left" w="fill">
            <text text-style="Body/Sm" value="Design Systems Lead" color="$text-2" />
            <text font-family="JetBrains Mono" font-size="11" font-weight="500" value="at" color="$text-3" />
            <text font-family="Bricolage Grotesque" font-size="15" font-weight="700" value="Linear" color="$accent" />
          </row>
        </col>
      </col>
      
      <!-- Speaker Card 2 -->
      <col role="card" w="416" gap="20" fill="$surface" border="1 $border" p="24" align="top-left">
        <img w="368" h="280" fit="cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=800&amp;q=80&amp;auto=format&amp;fit=crop" />
        <line fill="$border" />
        <col gap="8" align="top-left" w="fill">
          <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="Kei Yoshimi" color="$text" />
          <row gap="6" align="middle-left" w="fill">
            <text text-style="Body/Sm" value="Interface Architect" color="$text-2" />
            <text font-family="JetBrains Mono" font-size="11" font-weight="500" value="at" color="$text-3" />
            <text font-family="Bricolage Grotesque" font-size="15" font-weight="700" value="Figma" color="$accent" />
          </row>
        </col>
      </col>
      
      <!-- Speaker Card 3 -->
      <col role="card" w="416" gap="20" fill="$surface" border="1 $border" p="24" align="top-left">
        <img w="368" h="280" fit="cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=800&amp;q=80&amp;auto=format&amp;fit=crop" />
        <line fill="$border" />
        <col gap="8" align="top-left" w="fill">
          <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="Marcus Chen" color="$text" />
          <row gap="6" align="middle-left" w="fill">
            <text text-style="Body/Sm" value="Creative Technologist" color="$text-2" />
            <text font-family="JetBrains Mono" font-size="11" font-weight="500" value="at" color="$text-3" />
            <text font-family="Bricolage Grotesque" font-size="15" font-weight="700" value="Vercel" color="$accent" />
          </row>
        </col>
      </col>
    </row>

    <!-- ============================ CURATED THEMES (2-COLUMN) ============================ -->
    <row w="fill" p="100 64" gap="72" fill="$bg" align="top-left" border-top="1 $border">
      <!-- Left side details -->
      <col w="480" gap="24" align="top-left">
        <text text-style="Mono/Eyebrow" text-case="uppercase" value="Focus Areas  /  03" color="$accent" />
        <text text-style="Display/H2" value="Bespoke topics." color="$text" />
        <text text-style="Lead" w="fill" value="We focus entirely on interface fidelity and development craft. Zero high-level corporate slide decks." color="$text-2" />
      </col>
      
      <!-- Right side stacked theme cards -->
      <col w="fill" gap="24" align="top-left">
        <!-- Theme 1 -->
        <col role="card" w="fill" p="28" fill="$surface" border="1 $border" gap="12" align="top-left">
          <row gap="10" align="middle-left">
            <text text-style="Mono/Index" value="01" color="$accent" />
            <img src="https://api.iconify.design/lucide/layout.svg?color=%231a5e3e" w="20" h="20" />
            <text text-style="Display/Card" value="Crafting the Canvas" color="$text" />
          </row>
          <text text-style="Body/Base" w="fill" value="Building layout systems from scratch, custom viewport rendering, and responsive typography scales that adapt to human reading habits." color="$text-2" />
        </col>
        <!-- Theme 2 -->
        <col role="card" w="fill" p="28" fill="$surface" border="1 $border" gap="12" align="top-left">
          <row gap="10" align="middle-left">
            <text text-style="Mono/Index" value="02" color="$accent" />
            <img src="https://api.iconify.design/lucide/database.svg?color=%231a5e3e" w="20" h="20" />
            <text text-style="Display/Card" value="Local-First Tech" color="$text" />
          </row>
          <text text-style="Body/Base" w="fill" value="Optimistic state replication, offline CRDT sync layers, and caching strategies for interfaces that respond instantly without network delays." color="$text-2" />
        </col>
        <!-- Theme 3 -->
        <col role="card" w="fill" p="28" fill="$surface" border="1 $border" gap="12" align="top-left">
          <row gap="10" align="middle-left">
            <text text-style="Mono/Index" value="03" color="$accent" />
            <img src="https://api.iconify.design/lucide/sparkles.svg?color=%231a5e3e" w="20" h="20" />
            <text text-style="Display/Card" value="Expressive Motion" color="$text" />
          </row>
          <text text-style="Body/Base" w="fill" value="Spring physics, choreographing layout morphing, and micro-interactions that make interfaces feel physical and alive." color="$text-2" />
        </col>
      </col>
    </row>

    <!-- ============================ 3-COLUMN SCHEDULE GRID ============================ -->
    <row w="fill" p="100 64 56" gap="auto" fill="$bg" align="bottom-left" border-top="1 $border">
      <col gap="16">
        <text text-style="Mono/Eyebrow" text-case="uppercase" value="Schedule  /  04" color="$accent" />
        <text text-style="Display/H2" value="The daily logs." color="$text" />
      </col>
      <row gap="6" align="middle-center">
        <text text-style="Label/UI" value="Full timeline" color="$text" />
        <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23111612" w="16" h="16" />
      </row>
    </row>
    
    <!-- 3-Column Schedule Grid -->
    <row w="fill" p="0 64 100" gap="32" fill="$bg" align="top-center">
      <!-- Day 1 Column -->
      <col w="416" gap="24" align="top-left">
        <row gap="8" align="middle-left" pb="8" border-bottom="1 $border" w="fill">
          <img src="https://api.iconify.design/lucide/calendar.svg?color=%231a5e3e" w="16" h="16" />
          <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="Nov 12 · Day 1" color="$text" />
        </row>
        <col gap="16" w="fill">
          <!-- Session A -->
          <col gap="6" w="fill">
            <row gap="6" align="middle-left">
              <img src="https://api.iconify.design/lucide/clock.svg?color=%231a5e3e" w="12" h="12" />
              <text font-family="JetBrains Mono" font-size="12" font-weight="500" value="09:00 - 10:00" color="$accent" />
            </row>
            <text font-family="Bricolage Grotesque" font-size="18" font-weight="700" value="The Architecture of Joy" color="$text" />
            <text text-style="Body/Sm" w="fill" value="Elena Rostova (Linear)" color="$text-2" />
          </col>
          <!-- Session B -->
          <col gap="6" w="fill" pt="8" border-top="1 $border">
            <row gap="6" align="middle-left">
              <img src="https://api.iconify.design/lucide/clock.svg?color=%237e8880" w="12" h="12" />
              <text font-family="JetBrains Mono" font-size="12" font-weight="500" value="11:30 - 12:30" color="$text-3" />
            </row>
            <text font-family="Bricolage Grotesque" font-size="18" font-weight="700" value="Sensory Kinetics" color="$text" />
            <text text-style="Body/Sm" w="fill" value="Workshop Kickoff" color="$text-2" />
          </col>
        </col>
      </col>
      
      <!-- Day 2 Column -->
      <col w="416" gap="24" align="top-left">
        <row gap="8" align="middle-left" pb="8" border-bottom="1 $border" w="fill">
          <img src="https://api.iconify.design/lucide/calendar.svg?color=%231a5e3e" w="16" h="16" />
          <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="Nov 13 · Day 2" color="$text" />
        </row>
        <col gap="16" w="fill">
          <!-- Session A -->
          <col gap="6" w="fill">
            <row gap="6" align="middle-left">
              <img src="https://api.iconify.design/lucide/clock.svg?color=%231a5e3e" w="12" h="12" />
              <text font-family="JetBrains Mono" font-size="12" font-weight="500" value="10:00 - 11:30" color="$accent" />
            </row>
            <text font-family="Bricolage Grotesque" font-size="18" font-weight="700" value="The Death of Mockups" color="$text" />
            <text text-style="Body/Sm" w="fill" value="Marcus Chen (Vercel)" color="$text-2" />
          </col>
          <!-- Session B -->
          <col gap="6" w="fill" pt="8" border-top="1 $border">
            <row gap="6" align="middle-left">
              <img src="https://api.iconify.design/lucide/clock.svg?color=%237e8880" w="12" h="12" />
              <text font-family="JetBrains Mono" font-size="12" font-weight="500" value="14:00 - 15:30" color="$text-3" />
            </row>
            <text font-family="Bricolage Grotesque" font-size="18" font-weight="700" value="Offline Sync Engine" color="$text" />
            <text text-style="Body/Sm" w="fill" value="Technical deep dive" color="$text-2" />
          </col>
        </col>
      </col>
      
      <!-- Day 3 Column -->
      <col w="416" gap="24" align="top-left">
        <row gap="8" align="middle-left" pb="8" border-bottom="1 $border" w="fill">
          <img src="https://api.iconify.design/lucide/calendar.svg?color=%231a5e3e" w="16" h="16" />
          <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="Nov 14 · Day 3" color="$text" />
        </row>
        <col gap="16" w="fill">
          <!-- Session A -->
          <col gap="6" w="fill">
            <row gap="6" align="middle-left">
              <img src="https://api.iconify.design/lucide/clock.svg?color=%231a5e3e" w="12" h="12" />
              <text font-family="JetBrains Mono" font-size="12" font-weight="500" value="09:30 - 11:00" color="$accent" />
            </row>
            <text font-family="Bricolage Grotesque" font-size="18" font-weight="700" value="Tactile Web Canvas" color="$text" />
            <text text-style="Body/Sm" w="fill" value="Kei Yoshimi (Figma)" color="$text-2" />
          </col>
          <!-- Session B -->
          <col gap="6" w="fill" pt="8" border-top="1 $border">
            <row gap="6" align="middle-left">
              <img src="https://api.iconify.design/lucide/clock.svg?color=%237e8880" w="12" h="12" />
              <text font-family="JetBrains Mono" font-size="12" font-weight="500" value="16:00 - 18:00" color="$text-3" />
            </row>
            <text font-family="Bricolage Grotesque" font-size="18" font-weight="700" value="Kyoto Hacking Session" color="$text" />
            <text text-style="Body/Sm" w="fill" value="Closing Ceremony" color="$text-2" />
          </col>
        </col>
      </col>
    </row>

    <!-- ============================ STATS COUNTER STRIP ============================ -->
    <row w="fill" p="80 64" gap="auto" fill="$bg" align="top-left" border-top="1 $border" border-bottom="1 $border">
      <col gap="10">
        <row gap="2" align="bottom-left">
          <text text-style="Stat/Numeral" value="350" color="$text" />
          <text text-style="Stat/Numeral" value="✸" color="$accent" />
        </row>
        <text text-style="Body/Sm" value="Attendees limit" color="$text-3" />
      </col>
      <col gap="10">
        <text text-style="Stat/Numeral" value="18" color="$text" />
        <text text-style="Body/Sm" value="Speakers" color="$text-3" />
      </col>
      <col gap="10">
        <text text-style="Stat/Numeral" value="3 days" color="$text" />
        <text text-style="Body/Sm" value="In Kyoto" color="$text-3" />
      </col>
      <col gap="10">
        <row gap="2" align="bottom-left">
          <text text-style="Stat/Numeral" value="100%" color="$text" />
        </row>
        <text text-style="Body/Sm" value="Craft-focused" color="$text-3" />
      </col>
    </row>

    <!-- ============================ TICKET PASSES (3-TIER ROW) ============================ -->
    <col w="fill" p="116 64" gap="56" fill="$bg">
      <row w="fill" gap="auto" align="bottom-left">
        <col gap="22">
          <text text-style="Mono/Eyebrow" text-case="uppercase" value="Registration  /  05" color="$accent" />
          <text text-style="Display/H2" value="Choose your pass." color="$text" />
        </col>
      </row>

      <!-- Three passes side-by-side with varying visual weight -->
      <row w="fill" p="0 64 100" gap="32" fill="$bg" align="top-center">
        <!-- Pass 1: Student Pass (White background) -->
        <col role="card" w="416" p="36" gap="28" fill="$surface" border="1 $border" radius="0" align="top-left">
          <col gap="10" align="top-left" w="fill">
            <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="Student Pass" color="$text" />
            <text text-style="Body/Sm" w="fill" h="44" value="For actively enrolled university students and indie researchers." color="$text-2" />
          </col>
          <row gap="6" align="bottom-left">
            <text font-family="Bricolage Grotesque" font-size="44" font-weight="700" line-height="40" letter-spacing="-1" value="$249" color="$text" />
            <text text-style="Mono/Tag" value="USD" color="$text-3" pb="4" />
          </row>
          
          <line fill="$border" />
          
          <col gap="14" align="top-left" w="fill">
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%231a5e3e" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Full access to 18 keynote talks" color="$text" />
            </row>
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%231a5e3e" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Entry to the opening party" color="$text" />
            </row>
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%231a5e3e" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Official gift bag &amp; publications" color="$text" />
            </row>
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%231a5e3e" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Access to student channels" color="$text" />
            </row>
          </col>
          
          <row w="fill" p="14 0" fill="$ink" radius="999" align="middle-center" pt="4" gap="8">
            <text text-style="Label/UI" value="Register as Student" color="$inv-text" />
            <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23ebf2ed" w="14" h="14" />
          </row>
        </col>
        
        <!-- Pass 2: General Conference Pass (Cream background matching dark-cream token) -->
        <col role="card" w="416" p="36" gap="28" fill="$bg-2" border="1 $border" radius="0" align="top-left">
          <col gap="10" align="top-left" w="fill">
            <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="Conference Pass" color="$text" />
            <text text-style="Body/Sm" w="fill" h="44" value="Complete access to all 3 days of keynotes, discussions, and the after-party." color="$text-2" />
          </col>
          <row gap="6" align="bottom-left">
            <text font-family="Bricolage Grotesque" font-size="44" font-weight="700" line-height="40" letter-spacing="-1" value="$549" color="$text" />
            <text text-style="Mono/Tag" value="USD" color="$text-3" pb="4" />
          </row>
          
          <line fill="$border" />
          
          <col gap="14" align="top-left" w="fill">
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%231a5e3e" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Full access to 18 keynote talks" color="$text" />
            </row>
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%231a5e3e" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Entry to the opening party" color="$text" />
            </row>
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%231a5e3e" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Official gift bag &amp; publications" color="$text" />
            </row>
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%231a5e3e" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Complimentary artisan coffee" color="$text" />
            </row>
          </col>
          
          <row w="fill" p="14 0" fill="$accent" radius="999" align="middle-center" pt="4" gap="8">
            <text text-style="Label/UI" value="Purchase Pass" color="$on-accent" />
            <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23eff3ef" w="14" h="14" />
          </row>
        </col>
        
        <!-- Pass 3: All-Access VIP Pass (Dark Ink background) -->
        <col role="card" w="416" p="36" gap="28" fill="$ink" border="1 $border" radius="0" align="top-left">
          <col gap="10" align="top-left" w="fill">
            <row gap="12" align="middle-center" w="fill">
              <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="All-Access Pass" color="$inv-text" />
              <row p="4 8" fill="$accent" radius="999" align="middle-center" gap="4">
                <img src="https://api.iconify.design/lucide/sparkles.svg?color=%23eff3ef" w="12" h="12" />
                <text text-style="Mono/Tag" value="LIMITED" color="$on-accent" />
              </row>
            </row>
            <text text-style="Body/Sm" w="fill" h="44" value="The complete experience, including hands-on workshops and speaker dinner." color="$inv-text-2" />
          </col>
          <row gap="6" align="bottom-left">
            <text font-family="Bricolage Grotesque" font-size="44" font-weight="700" line-height="40" letter-spacing="-1" value="$899" color="$inv-text" />
            <text text-style="Mono/Tag" value="USD" color="$inv-text-2" pb="4" />
          </row>
          
          <line fill="$inv-border" />
          
          <col gap="14" align="top-left" w="fill">
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23d2e6dc" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Everything in the Conference Pass" color="$inv-text" />
            </row>
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23d2e6dc" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Access to 1 full-day workshop (Theme 1/2/3)" color="$inv-text" />
            </row>
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23d2e6dc" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="Invitation to the private Speaker Dinner" color="$inv-text" />
            </row>
            <row gap="10" align="middle-left" w="fill">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23d2e6dc" w="16" h="16" />
              <text text-style="Body/Sm" w="fill" value="VIP lounge workspace access with tea pairing" color="$inv-text" />
            </row>
          </col>
          
          <row w="fill" p="14 0" fill="$accent" radius="999" align="middle-center" pt="4" gap="8">
            <text text-style="Label/UI" value="Purchase All-Access" color="$on-accent" />
            <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23eff3ef" w="14" h="14" />
          </row>
        </col>
      </row>
    </col>

    <!-- ============================ FOOTER (DARK) ============================ -->
    <col w="fill" p="80 64 40" gap="64" fill="$ink">
      <row w="fill" gap="auto" align="top-left">
        <col w="420" gap="18" align="top-left">
          <row gap="10" align="middle-center">
            <text font-family="Bricolage Grotesque" font-size="26" font-weight="700" letter-spacing="-0.5" value="Cascade" color="$inv-text" />
            <text font-family="Bricolage Grotesque" font-size="24" font-weight="700" value="✸" color="$accent" />
          </row>
          <text text-style="Body/Sm" w="360" value="A craft-focused interface design &amp; engineering conference held in Kyoto, Japan. Dedicated to building software that lasts." color="$inv-text-2" />
        </col>
        <row gap="72" align="top-left">
          <col gap="14" align="top-left">
            <text text-style="Mono/Eyebrow" text-case="uppercase" value="Event" color="$text-3" />
            <text text-style="Nav" value="Lineup" color="$inv-text" />
            <text text-style="Nav" value="Themes" color="$inv-text" />
            <text text-style="Nav" value="Schedule" color="$inv-text" />
          </col>
          <col gap="14" align="top-left">
            <text text-style="Mono/Eyebrow" text-case="uppercase" value="Information" color="$text-3" />
            <text text-style="Nav" value="FAQ" color="$inv-text" />
            <text text-style="Nav" value="Code of Conduct" color="$inv-text" />
            <text text-style="Nav" value="Venue" color="$inv-text" />
          </col>
          <col gap="14" align="top-left">
            <text text-style="Mono/Eyebrow" text-case="uppercase" value="Elsewhere" color="$text-3" />
            <text text-style="Nav" value="Twitter / X" color="$inv-text" />
            <text text-style="Nav" value="YouTube" color="$inv-text" />
            <text text-style="Nav" value="GitHub" color="$inv-text" />
          </col>
        </row>
      </row>
      <row w="fill" gap="auto" align="middle-left" pt="32" border-top="1 $inv-border">
        <text text-style="Mono/Tag" value="© 2026 Cascade Conference  ·  Designed for the Web" color="$text-3" />
        <row gap="8" align="middle-left">
          <img src="https://api.iconify.design/lucide/mail.svg?color=%23a0b2a6" w="14" h="14" />
          <text text-style="Mono/Tag" value="kyoto@cascade.design" color="$inv-text-2" />
        </row>
      </row>
    </col>

  </col>
</gui>

```