Foundations

Color

Semantic, brand and odds tokens, in light and dark, with their contrast.

Every color is a token with a light and a dark value, defined in src/styles/global.css and mapped in tailwind.config.js. Never use a hex value or a Tailwind palette color (green-500): the tests fail on them. Switch the theme in Settings to see the dark values.

Tokens

  • AabackgroundPage background (warm paper)
  • AaforegroundText (ink)
  • AacardPanels and cards
  • AamutedQuiet fills, note panels
  • Aamuted-foregroundSecondary text
  • AaprimaryLinks, actions, the dice that make a game
  • borderBorders and dividers
  • AadestructiveDestructive actions
  • AafeltThe table
  • AadiceThe dice
  • AapopPencils, the Hammer’s call, the headline
  • odds-safeOdds: you’re safe
  • odds-coinOdds: it could go either way
  • odds-loseOdds: you take the pencil

Contrast, measured live

Body text needs 4.5:1 (AA); large text and UI parts need 3:1.

TextOnSampleRatioWCAG

Using color

Do

  • Use semantic tokens: bg-background, text-foreground, text-muted-foreground, bg-primary, border-border.
  • Use the odds tokens only for what an outcome means for the player: safe, either way, lose.
  • Keep felt, dice and pop for play and delight.
  • Pair every color with words or a shape (a status chip says “In the cup”, not just green).

Don’t

  • Give data a traffic-light color unless it means good or bad for the player.
  • Write hex values, inline style colors or Tailwind palette colors.
  • Rely on color alone to say anything.