Have more questions? Join our

BWSS page styling

BWSS (Boardweaver Style System) is a strict, structured subset of CSS. It is the style language for the two compiled page surfaces a game ships alongside its client: rules pages (/src/rules/*.bwss) and the marketing page (/src/marketing/*.bwss). Those are JSON documents the platform validates and serializes to safe HTML at commit time. Raw CSS strings are never accepted.

This section is the style-object reference. For the node sets each surface allows — both add Anchor, and the marketing page adds PlayButton, RulesButton and ThemeToggle on top of it — see v2-build-rules-instructions and v2-build-marketing-instructions.

BWSS does not apply to your game client. /src/frontend.tsx is a real React app: style it with ordinary CSS, inline styles, or whatever you import. Nothing here constrains it.

const node = {
  type: "Box",
  style: {
    width: 120,
    height: 80,
    padding: 8,
    borderRadius: 6,
    backgroundColor: "$colors.surface.canvas",          // theme-token ref
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: "#222",
  },
  children: [
    "Turn order",                                       // text is a string child
    { type: "Image", src: "TrophyIcon", style: { width: 16, height: 16 } },
  ],
};

Node types

Shared by both page surfaces:

`type`	Notes
`"Box"`	Generic container. Children: BWSS nodes or strings (text).
`"Image"`	`{ src: GameImageKey, alt?, style? }`. Resolved through the game's images map; unknown keys render nothing.
`"Svg"`	`{ viewBox: {width,height}, paths: [{d, fill?, stroke?, ...}], style? }`. Only `<svg>` + `<path>` are emitted.

There is no Text node — text is a plain string in a Box's children array.

`Box`

type BoxNode = { type: "Box"; style?: BwssStyle; children?: (BwssNode | string)[] };

On the rules surface Box also takes an id, the target of a #fragment link.

`Image`

type ImageNode = { type: "Image"; src: GameImageKey; alt?: string; style?: BwssStyle };

src is a GameImageKey — a key for media already uploaded to the game. You don't invent keys; reference ones the game has. Unknown keys render nothing.

`Svg`

type SvgNode = {
  type: "Svg";
  viewBox: { width: number; height: number };
  paths: SvgPathChild[];
  style?: BwssStyle;
};
type SvgPathChild = {
  d: string;                                            // SVG path-data string
  fill?: string;
  stroke?: string;
  strokeWidth?: number | string;
  fillRule?: "nonzero" | "evenodd";
  strokeLinecap?: "butt" | "round" | "square";
  strokeLinejoin?: "miter" | "round" | "bevel";
  opacity?: number | string;
};

Only <svg> and <path> are emitted. No <g>, <defs>, <linearGradient>, <use>, <foreignObject>, <script>, <text>, <image>.
d is a character-class-validated string: digits, command letters (MLHVCSQTAZmlhvcsqtaz), whitespace, +-.eE,. Anything else (incl. <>"'();) is rejected.
Caps: max 16 paths per Svg; max 4000 chars per d; max 16,000 chars total across paths; viewBox sides ≤ 10,000.

`BwssStyle` — the allow-list

Strict (unknown properties throw). Categories below; values are typed.

Layout

display, flexDirection, flexWrap, justifyContent, alignItems, gap,
flex, flexBasis, flexGrow, flexShrink,
width, height, minWidth, maxWidth, minHeight, maxHeight,
padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft,
margin,  marginX,  marginY,  marginTop,  marginRight,  marginBottom,  marginLeft,
position, top, right, bottom, left,
overflow

Typography

fontSize, lineHeight, letterSpacing,
fontWeight, fontStyle, fontFamily,
textAlign, textTransform, whiteSpace, textOverflow,
textDecorationLine, textDecorationStyle, textDecorationColor,
textDecorationThickness, textUnderlineOffset,
color, textGradient

A text decoration draws in currentColor, and textGradient sets that to transparent. On a node that uses both, set textDecorationColor explicitly or the line is drawn but never visible.

Background

backgroundColor, backgroundImage, backgroundGradient,
backgroundSize, backgroundPosition, backgroundRepeat

backgroundGradient is a structured linear | radial array (max 4 layers). No raw CSS linear-gradient(...) strings.

Border

borderRadius,
borderWidth, borderStyle, borderColor,
borderTopWidth, borderTopStyle, borderTopColor,
borderRightWidth, borderRightStyle, borderRightColor,
borderBottomWidth, borderBottomStyle, borderBottomColor,
borderLeftWidth, borderLeftStyle, borderLeftColor

borderStyle (and per-side): "none" | "solid" | "dashed" | "dotted". There is no border / borderTop shorthand — split into width / style / color.

Effects

boxShadow, opacity, filter, clipPath, transform

boxShadow: "none" OR an array of structured layers { offsetX, offsetY, blur?, spread?, color, inset? }.
opacity: number in [0, 1] or "0%"–"100%".
filter: array of single-key function objects: { blur }, { brightness }, { contrast }, { grayscale }, { hueRotate }, { invert }, { saturate }, { sepia }, { dropShadow: {...} }. Max 8 entries.
clipPath: a single-key object: { polygon }, { circle }, { ellipse }, or { inset }.
transform: array of single-key function objects: { rotate }, { translateX }, { translateY }, { scale }. Max 4 entries.

Value types

Color (`color`, `backgroundColor`, `borderColor`, `boxShadow[*].color`, `dropShadow.color`, `Svg` `fill` / `stroke`)

One of:

"#abc" / "#abcdef" / "#abcdef12" (hex, 3/6/8 digits)
"rgb(r, g, b)" / "rgba(r, g, b, a)" with numeric args
a named CSS color
a theme-token ref: "$colors.surface.canvas", "$semanticTokens.fg.muted", etc. (lt;segment>(.<segment>)+, alphanumerics + _)

No url(), var(), calc().

Length (`width`, `padding`, `top`, `borderRadius`, ...)

One of:

a number (treated as px)
a unit string: <number>(px|%|em|rem)
a $theme-token ref

No calc(), no vh / vw / vmin / vmax / ch / ex.

A length is a single value. Multi-value shorthands such as "padding": "12px 28px" or "margin": "0 0 16px 0" are rejected; use paddingX / paddingY (or marginX / marginY) or the per-side properties instead.

Theme tokens

A theme token ref starts with $, has at least two dotted segments, and only contains alphanumerics, _, and .:

$colors.surface.canvas        // OK
$semanticTokens.fg.muted      // OK
$spacing.lg                   // OK
$linear-gradient(...)         // REJECTED — parens disallowed
$colors                       // REJECTED — needs ≥ 2 segments

The resolver returns values that have already been validated as colors / lengths. An unknown token resolves to nothing.

Gotchas

Style validation is .strict(): an unknown style property (e.g. transform typoed as tranform, or background shorthand) is REJECTED, not silently dropped.
No CSS shorthand parsing anywhere — border, background, font, transition, animation etc. are absent by design.
Image.src is a GameImageKey string — unknown keys render nothing.
Svg.paths[*].d is character-class restricted: digits, MLHVCSQTAZmlhvcsqtaz, whitespace, +-.eE, only. URLs, parens, and quote marks throw.
Text inside a Box is a plain string child — there's no Text node. To style text, set typography style fields on the enclosing Box.