Cards

    site "Glass cards"
  colors deep #120E2B, violet #7B5CFF, rose #FF7AC6, aqua #4DE1FF
  fonts "General Sans"
  style background deep, color white

let plans = [
  { icon: "☁️", name: "Sync", text: "Every device, always up to date." },
  { icon: "🔒", name: "Vault", text: "End-to-end encrypted, by default." },
  { icon: "⚡", name: "Boost", text: "Ten times faster on any network." }
]

style glass-card
  glass, radius 28, padding 30, gap 10, border 1 #FFFFFF2E, color white
  hover lift 8, background #FFFFFF26
  text color #FFFFFFB3

page "/"
  section fullscreen, center, mesh violet rose aqua
    grid 3 columns, gap 20
      for p in plans
        column glass-card
          icon p.icon
          subtitle p.name, level 3, size 26
          text p.text
          enters from bottom
    ```

    site "Brutalist product"
  colors paper #F2F0E9, ink #111111, acid #D7FF3A, pink #FF4FA3, sky #7CC4FA
  fonts "Space Grotesk"
  style background paper, color ink

let items = [
  { name: "Chair Nº1", price: "CHF 340", color: "#D7FF3A", tag: "NEW" },
  { name: "Lamp Arc", price: "CHF 180", color: "#FF4FA3", tag: "-20%" },
  { name: "Vase Blob", price: "CHF 65", color: "#7CC4FA", tag: "LAST ONE" }
]

style brutal-card
  background white, border 3 ink, radius 0, padding 0, gap 0, shadow hard ink
  hover move -4 -4

style swatch
  height 170, width 100%, border-bottom 3 ink, center

style label
  background ink, color paper, padding 4 10, font "mono", size 12, weight 700

page "/"
  section fullscreen, center
    grid 3 columns, gap 28
      for p in items
        column brutal-card
          box swatch, background p.color
            text p.tag, label
          row padding 16, gap 8
            text p.name, weight 800, size 20, uppercase
            text p.price, font "mono", margin 0 0 0 auto
    ```

    site "Profile"
  colors ink #18181B, paper #F4F4F5, blue #3B5BFF
  fonts "Satoshi"
  style background paper, color ink

state following = false

style profile
  background white, radius 28, padding 32, gap 18, shadow medium, width 360, center

style avatar
  width 96, height 96, round, gradient blue #9F7BFF, center
  text color white, size 40, weight 800

style stat
  gap 0, center
  text size 13, color #18181B88

page "/"
  section fullscreen, center
    column profile
      row avatar
        text "M"
      column gap 2, center
        subtitle "Mira Okafor", level 3, size 24
        text "Product designer · Lagos", color #18181B88
      row gap 32, center
        column stat
          text "128", size 22, weight 800, color ink
          text "projects"
        column stat
          text "14k", size 22, weight 800, color ink
          text "followers"
        column stat
          text "4.9", size 22, weight 800, color ink
          text "rating"
      button (if following then "Following ✓" else "Follow"), large -> following = not following
    ```

    site "Neon pricing"
  colors night #07060D, pink #FF2E88, cyan #2EF2FF, violet #9B5CFF
  fonts "Satoshi", "Clash Display"
  style background night, color white

style neon-card
  background #FFFFFF08, border 1 #FFFFFF1F, radius 24, padding 32, gap 14, width 320
  hover glow violet 24, lift 6
  current border 1 pink, glow pink 30

style price
  font "titles", size 56, weight 600, line-height 1

page "/"
  section fullscreen, center
    row gap 22, center
      column neon-card
        text "Starter", uppercase, tracking 3, size 12, color cyan
        text "€9", price
        text "For side projects.", color #FFFFFF99
        button "Choose", background transparent, color white, border 1 #FFFFFF33
      column neon-card, current true
        text "Pro — most loved", uppercase, tracking 3, size 12, color pink
        text "€29", price, text-glow pink 14
        text "For teams that ship every day.", color #FFFFFF99
        button "Start now", background pink, color night, glow pink 18
    ```

    site "Bento"
  colors ink #141218, cream #FAF7F2, grape #6C3BFF, sun #FFC94D, mint #4DDFA8, coral #FF6B5B
  fonts "Satoshi", "Cabinet Grotesk"
  style background cream, color ink

style tile
  radius 28, padding 28, gap 8, clip
  hover grow 1.02

style huge
  font "titles", size 64, weight 800, line-height 1, tracking -2

page "/"
  section fullscreen
    grid columns 2 1 1, gap 16
      column tile, background grape, color white, min-height 420
        text "Your week", bold
        text "38 h", huge
        text "of deep work. +12% vs last week.", color #FFFFFFB3
        object "torus", color sun, metal, height 200
          spin slow
      column gap 16
        column tile, background sun, min-height 202
          text "Streak 🔥", bold
          text "21", huge
        column tile, background mint, min-height 202
          text "Focus", bold
          text "92%", huge
      column gap 16
        column tile, background coral, color ink, min-height 202
          text "Meetings", bold
          text "4", huge
        column tile, background ink, color cream, min-height 202
          text "Next up", bold
          text "Design review · 14:00", size 20, weight 700
    ```

    site "Big quote"
  colors ink #1A1714, paper #F3EEE6, clay #B5502E
  fonts "Satoshi", "Gambetta"
  style background paper, color ink

style quote-card
  background white, radius 4, padding 56 64, gap 28, max-width 820, shadow soft

style quote
  font "titles", size 38, line-height 1.2, tracking -1

page "/"
  section fullscreen, center
    column quote-card
      text "“", font "titles", size 120, color clay, line-height 0.5
      text "They did not redesign our website. They redesigned how people *feel* when they find us.", quote
      row gap 14
        row width 52, height 52, round, background clay, center
          text "É", color white, weight 700, size 22
        column gap 0
          text "Élise Marchand", weight 700
          text "Founder, Atelier Marchand", color #1A171499, size 15
    ```