Rules and presentation

Shared framework reference

Design a game theme

/theme.json gives the board, the rules pages and the game page one look. It works the same in every framework major. You may also keep a free-form visual reference at /src/theme.html. Boardweaver does not read it.

1. Choose the look

Read the game's mood and voice with get_game. Choose the fonts, a palette and a background that fit them. Give headings, body text, actions and quiet surfaces each a clear role, and keep every control readable.

2. Write the theme

Write /theme.json with write_file, in the Game theme format. Put the literal colors in palettes. Define semantic tokens for roles such as text and surfaces, each with a light and a dark value that refers to a palette color. write_file checks the theme and refuses a bad one with INVALID_THEME_JSON or INVALID_THEME. Write it again until it is accepted.

3. Check every surface

Look at the board, the rules pages and the game page at a wide and a phone width, in light and dark mode. Check that the board takes its colors from the theme: a React client through useGameTheme(), and BWSS through $ tokens such as $semanticTokens.text.primary. Check that text, actions and selected states stay readable.

4. Commit

Run validate_code until it reports no errors, then call commit with the theme and the source changes that use it.

Need a hand with this?

Join our Discord