Color Palette

All colors in snaps (accent, progress bar, bar chart) are specified as named palette colors, not hex values. The client maps each name to a hex value appropriate for its current light/dark mode. This ensures visual consistency across the feed and guarantees readability in both modes.

The palette has 8 colors:

Name	Light	Dark
`gray`	`#6E6A86`	`#908CAA`
`blue`	`#286983`	`#9CCFD8`
`red`	`#B4637A`	`#EB6F92`
`amber`	`#EA9D34`	`#F6C177`
`green`	`#3E8F8F`	`#56D4A4`
`teal`	`#56949F`	`#3E8FB0`
`purple`	`#907AA9`	`#C4A7E7`
`pink`	`#D7827E`	`#EBBCBA`

The snap specifies a name (e.g. "blue"). The client resolves it to the correct hex for the current mode.

Where Palette Colors Are Used

page.theme.accent — one of the 8 palette names (default: "purple").

{
  "theme": { "accent": "blue" }
}

progress.color — "accent" (uses theme accent) or any palette name.

{ "type": "progress", "value": 72, "max": 100, "color": "green" }

bar_chart.color — "accent" or any palette name (default bar fill).

bar_chart.bars[].color — any palette name (per-bar override).

Exception: grid.cells[].color accepts free hex (#RRGGBB). Games and pixel canvases need arbitrary colors for content like Wordle tiles and pixel art.

{
  "type": "bar_chart",
  "bars": [
    { "label": "Yes", "value": 62, "color": "green" },
    { "label": "No", "value": 38, "color": "red" }
  ]
}

Where the accent color appears on UI surfaces is documented on Theme & Styling.

Grid Cell Colors (Exception)

Each cell can specify an arbitrary hex color via cells[].color (see exception above). This is necessary for game boards, pixel art, and other visual applications where the color IS the content.

{
  "type": "cell_grid",
  "cols": 5,
  "rows": 6,
  "cells": [
    { "row": 0, "col": 0, "color": "#22C55E", "content": "C" },
    { "row": 0, "col": 1, "color": "#6B7280", "content": "R" },
    { "row": 0, "col": 2, "color": "#CA8A04", "content": "A" }
  ]
}

Global styling limits (fonts, spacing, light/dark mode, etc.) are on Theme & Styling.