Style System

30 frozen shorthand keys for rapid styling. Any CSS property via escape hatch.

Shorthand Reference

Complete table of all 30 shorthands organized by category.

Spacing

Shorthand	CSS Property	Example
p	padding	{p:16}
m	margin	{m:8}
pt	paddingTop	{pt:12}
pb	paddingBottom	{pb:12}
pl	paddingLeft	{pl:24}
pr	paddingRight	{pr:24}
mt	marginTop	{mt:16}
mb	marginBottom	{mb:16}
ml	marginLeft	{ml:8}
mr	marginRight	{mr:8}

Sizing

Shorthand	CSS Property	Example
w	width	{w:full}
h	height	{h:64}
f	flex	{f:1}

Colors

Shorthand	CSS Property	Example
bg	backgroundColor	{bg:#18181b}
c	color	{c:#fff}
bc	borderColor	{bc:#f97316}

Typography

Shorthand	CSS Property	Example
fs	fontSize	{fs:24}
fw	fontWeight	{fw:bold}
ta	textAlign	{ta:center}

Borders

Shorthand	CSS Property	Example
br	borderRadius	{br:8}
bw	borderWidth	{bw:1}

Layout

Shorthand	CSS Property	Example
jc	justifyContent	{jc:sb}
ai	alignItems	{ai:center}
fd	flexDirection	{fd:row}

Effects

Shorthand	CSS Property	Example
shadow	boxShadow	{shadow:"0 4px 12px rgba(0,0,0,0.3)"}

Usage

Styles attach to any node with curly braces. Comma-separated key:value pairs.

text value="Hello" {fs:24,fw:bold,c:#fff,bg:#18181b,p:16,br:8}

Value Shorthands

Common values have aliases so you never type the full string.

Shorthand	Expands to
sb	space-between
sa	space-around
se	space-evenly
center	center
start	flex-start
end	flex-end
stretch	stretch
bold	font-weight: 700
full	100%

CSS Escape Hatch

Any CSS property not in the shorthand map can be used with quoted keys.

button {"transition":"all 0.2s ease","box-shadow":"0 4px 12px rgba(0,0,0,0.3)"}

Pseudo-selectors

Colon prefix for hover and press states. The compiler maps these to the target framework's interaction model.

button {bg:#f97316,:hover:bg:#ea580c,:press:bg:#c2410c}

Theme References

Define reusable styles with theme nodes and reference them with $.

theme primary {bg:#f97316,c:#fff,br:8,p:12}

button text="Save" $primary

Responsive Styles

In the Tailwind target, responsive prefixes apply automatically. The compiler translates style shorthands into Tailwind utility classes with the appropriate breakpoint prefixes.