How to design with vamp.css

import "styles/app.css"
component MyPage {
  state chrome = "none"
  state name = ""
  state message = ""
  fn save() { message = name }
  view {
    Main(class: "my-layout") {
      Label("Name", for: "name")
      Input(name: "name", value: name, id: "name", class: "my-input")
      Button("Save", onClick: save, class: "my-button")
      Text(message, class: "my-result")
    }
  }
}

import "vamp.css"
// Additional custom stylesheet:
import "styles/app.css"

state theme = "dark"
state skin = "portfolio"   // or kawaii, ocean, cyber, …
state chrome = "none"      // free canvas - no app chrome

import "vamp.css"

component HomePage {
  state theme = "dark"
  state skin = "portfolio"
  state chrome = "none"

  fn use_kawaii() {
    theme = "light"
    skin = "kawaii"
  }

  view {
    Column {
      Title("VAMPELIUM", class: hero_logo())
      Text("Any skin. Same language.", color: color("muted"))
      Row {
        Button("Kawaii", onClick: use_kawaii, class: btn("soft"))
      }
      // chips, skills, features, terminal…
      Text("[she/her] [Full-Stack Dev] [Gamer]")
    }
  }
}

view {
  Column {
    class: cls("col")
    Title("Hello", class: gradient())
    Text("Muted line", color: color("muted"))
    Nav {
      class: nav()
      Button("Home", onClick: go_home, class: btn("nav"))
      Button("Save", onClick: save, class: btn("soft"))
      Button("Ghost", onClick: save, class: btn("ghost"))
    }
    Text("Accent text", color: color("pink"))
  }
}

Text("Accent", color: color("primary"))
Text("Muted line", color: color("muted"))
Text("On surface", bg: bg("surface"), class: cls("panel"))

// Big logo
Title("VAMPELIUM", class: hero_logo())

// Chip row (or [bracket] auto-badges)
Text("[she/her] [Canada → Japan] [Full-Stack Dev]")

// Skill tiles
Row {
  class: cls("skill-grid")
  Skill("HTML")
  Skill("CSS")
  Skill("React")
}

// Feature / connection cards
Grid {
  cols: "2"
  Feature {
    Subtitle("Chat with Me")
    Text("AI portal…")
    Button("START CHATTING →", onClick: go, class: btn("primary"))
  }
}

// Terminal mock
Terminal("whoami.sh\nNAME=Vampelium")

Button("Primary", onClick: save, class: btn("primary"))
Button("Soft", onClick: save, class: btn("soft"))
Button("Ghost", onClick: save, class: btn("ghost"))
Button("Outline", onClick: save, class: btn("outline"))
Button("Danger", onClick: del, class: btn("danger"))
Button("Nav pill", onClick: go, class: btn("nav"))
Button("Full width", onClick: go, class: btn("block"))

// Props on containers go inside the brace block:
Column {
  class: cls("col")
  Hero {
    class: cls("hero")
    Title("Welcome", class: gradient())
    Lead("Build something beautiful.")
  }
  Grid {
    cols: "2"
    Panel { Text("A") }
    Panel { Text("B") }
  }
}

Title("Page title", class: gradient())
Subtitle("Section heading", color: color("pink"))
Lead("Larger intro copy", class: lead_cls())
Text("Body paragraph")
Muted("Secondary text", class: muted_cls())
Caption("Fine print")
Quote("A stylish pull quote.")
Code("irm https://vampcode.dev/install.ps1 | iex")

// Explicit badges
Badge("Calgary", class: badge())
Badge("VampCode", class: badge("violet"))
Badge("Soft", class: badge("soft"))

// Auto-split [bracket] tags on Text lines
Text("[Calgary, Canada] [VampCode Author]")

List {
  Text(lines)   // each body line becomes a list card
}

// styles/vamp.vamp
fn btn_kawaii() {
  return "v-btn v-btn-soft v-rounded-full"
}

// app/page.vamp
Button("Cute", onClick: go, class: btn_kawaii())

vampcode run app/page.vamp   # surface from vamp.toml kind
# web also serves: http://127.0.0.1:5173/vamp.css

import "vamp.css"

// theme
state theme = "light"   // or "dark"

// classes
class: btn("nav"|"soft"|"ghost"|"outline"|"danger"|"block")
class: badge("violet"|"soft")
class: glass() | gradient() | nav() | cls("hero")

// colors
color: color("pink"|"fuchsia"|"violet"|"muted"|"fg"|"accent"|"danger")
bg: bg("glass"|"card"|"pink"|"violet")

// structure
Column { class: cls("col")  ... }
Nav { class: nav()  Button(..., class: btn("nav")) }
Grid { cols: "2"  ... }