vamp.cssDesign systemv1
How to design with vamp.css
vamp.css is not one look. It is a multi-skin system — kawaii, portfolio, ocean, cyber, sakura, minimal, and more — so you can build anything you would with free CSS, without being locked into a single “horror” purple shell.
Free canvas by default
chrome = "none" removes the VampCode topbar and forced card. Set
skin = "portfolio" (or kawaii, ocean, …) for the vibe you want — same widgets, different world.
1. Mental model
| Layer | File | Role |
|---|---|---|
| Tokens & CSS | styles/vamp.css | Colors, glass, layout, buttons, badges |
| Link functions | styles/vamp.vamp | color(), btn(), cls(), … |
| Your UI | app/page.vamp | import "vamp.css" + widgets with class: / color: |
| Web preview | embedded + /vamp.css | Always injects the full sheet |
2. Import the design system
import "vamp.css" // same as: // import "styles/vamp" // import "styles/vamp.css"
That import resolves to styles/vamp.vamp (functions) and the runtime links the
vamp.css stylesheet into the web preview automatically.
3. Skins — infinite looks
Set state skin = "…". Tokens (primary, card, radius, gradients) all remapped. Widgets stay the same.
| skin | Feel |
|---|---|
default | Neutral dark — no forced orbs |
portfolio / lavender | Polished dark portfolio (soft purple) |
kawaii | Soft cute pink cream (light) |
sakura | Spring pink on white |
horror | Classic gothic pink/purple + orbs (opt-in) |
ocean | Teal / sky blue |
cyber | Neon cyan + lime |
sunset | Orange → pink |
forest | Greens |
candy | Bright multi-gradient |
minimal / mono | Black & white pro |
clean | Light professional blue |
soft | Muted pastel dark |
state theme = "dark" state skin = "portfolio" // or kawaii, ocean, cyber, … state chrome = "none" // free canvas — no app chrome
4. Start from a free canvas
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]")
}
}
}chrome = "none"— pure design surface (like free CSS).chrome = "app"— optional VampCode topbar + card frame.horrorskin is optional — not the only style.
5. Link functions onto widgets
Design helpers return strings. Pass them into props:
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"))
}
}Props you can link
| Prop | Typical value | Effect |
|---|---|---|
class: | btn("nav"), glass(), "v-col" | CSS classes from vamp.css |
color: | color("pink") | Inline color: var(--v-pink) |
bg: | bg("card") | Inline background token |
style: | "opacity:0.8" | Raw CSS fragment |
variant: | "soft", "nav" | Shortcut class map (no import needed) |
size: | "sm", "lg", "block" | Button size utilities |
6. Color tokens (semantic — follow the skin)
Prefer semantic names so colors adapt when you switch skins:
| Name | Maps to | Use for |
|---|---|---|
primary / secondary | skin accent pair | Brand, CTAs, titles |
fg / bg / muted | text & page | Body copy |
card / surface / glass (bg) | panels | Cards & chips |
success / danger / warning | status | Feedback |
pink / violet / blue / … | fixed hues | When you want a hard color |
Text("Accent", color: color("primary"))
Text("Muted line", color: color("muted"))
Text("On surface", bg: bg("surface"), class: cls("panel"))7. Portfolio-style patterns
Classes for layouts like free CSS portfolios — not horror-only:
// 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")8. Buttons
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"))Or without helpers: variant: "soft" / variant: "nav".
7. Layout widgets
| Widget | Default class | Notes |
|---|---|---|
Column | v-col | Vertical stack (default page root) |
Row | v-row | Wraps; all-buttons → nav pills |
Nav | v-nav-row | Explicit nav bar of buttons |
Grid | v-grid | cols: "2" / "3" / "4" |
Split | v-split | Sidebar + main on desktop |
Hero | v-hero | Centered intro block |
Section | v-section | Content grouping |
Card / Panel | glass / panel | Nested surfaces |
// 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") }
}
}8. Typography
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")9. Badges & lists
// 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
}10. Class helpers (cls / shortcuts)
| Call | Returns |
|---|---|
cls("glass") / glass() | v-glass |
cls("card") | v-card |
cls("nav") / nav() | v-nav-row |
cls("hero") | v-hero |
gradient() | v-title v-gradient-text |
lead_cls() / muted_cls() | type helpers |
join_cls(a, b) | combine two class strings |
design(a, b, c) | up to three cls() names |
11. Add your own designs
- Edit
styles/vamp.css— add tokens or classes (e.g..v-btn-kawaii). - Edit
styles/vamp.vamp— add a link function:
// 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())Ready-made community Designs (copy-paste layouts) will appear under Designs once we finish experimenting — marked soon for now.
12. Web · desktop · mobile
| kind | How design shows |
|---|---|
web | Browser + full vamp.css (best fidelity) |
desktop | Native window, vamp palette (egui) |
mobile | Mobile-sized native window, same palette |
vampcode run app/page.vamp # surface from vamp.toml kind # web also serves: http://127.0.0.1:5173/vamp.css
13. Cheatsheet
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" ... }
Next
Read UI & surfaces for components and product kinds, or
Getting started to scaffold an app.