Skip the bullshit
// docs / Language

Styles

Typed CSS-ish styles, checked at compile time, plus things CSS doesn't have.

vcwl
style Card {
padding: 20px
radius: 14px
corner: squircle
background: #1a1a1a
transition: transform 600ms spring
when hover {
transform: translateY(-4px)
}
when viewport < 600px {
padding: 12px
}
}
button("Save") {
style Card
style if busy {
opacity: 0.5
}
style bind width: progress %
}

A typo in a property or value is a compile error with the list of what is accepted. when covers hover, focus, active, dark, light, reduced-motion, viewport and container sizes, and appear for scroll reveals.

Beyond CSS

→

corner: squircle | cut | scoop | round: the shape of rounded corners, and everything (borders, shadows, clipping) follows it.

→

grain: 0.4: film grain, because your landing page needed to feel more analog.

→

sketch: 2px #222: hand-drawn, wobbly borders that stay still between frames.

→

spring and bounce easings: transition: transform 500ms spring.

Fonts

Ship a font file from public/, or take one from Google Fonts. Styles then use the family by name: font: "Space Grotesk", sans-serif.

vcwl
font "Tuffy" from "fonts/tuffy-bold.ttf" weight 700
font "Space Grotesk" from google weight 300..700
font "Inter" from google weight 400 italic