Foundations

Theme playground

Try new colors, fonts, type sizes and radius live, without a rebuild.

Try a change without rebuilding the site. Edits show at once on every design system page, and stay in this browser until you reset them. Colors change for the theme you’re in now (switch it in Settings to edit the other); fonts, sizes and radius change for both.

Start from a preset

Color

Primary

Links, actions, the dice that make a game

On primary
Background
Text
Card
Muted
Muted text
Border

Brand

Felt

The table

Text on felt
Pop

Pencils, the Hammer’s call, the headline

Dice

Odds

Odds: safe
Odds: either way
Odds: lose

Type

Text font
Heading font
Display

The home headline

Title

Each page’s h1

Section

Headings between panels

Heading

Panel titles

Subheading

Shape

Corner radius

Preview

How to play

2–8 players · 5 dice each · about 30 minutes

Your roll plays it

A question from the table

10-2 High, tied at a kicker of 12 on your last roll.

10-2High kicker 12
Take the tie50.0%
Roll31.7%

Exact over every roll. A link in running text.

49.1%
Made on one roll
exact

Note panel

An aside, a tip or a rule of thumb.

You
🔨 Hammer
10-3High kicker 10Calls 10-3 High

Contrast

TextOnSampleRatioWCAG

Keep it, or throw it away

/* No changes: the draft matches the site */

To make it real, put these values in src/styles/global.css on a branch, check every page in both themes, and open a pull request (Proposing a pattern explains the rest).