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`	`#8F8F8F`	`#8F8F8F`
`blue`	`#006BFF`	`#006FFE`
`red`	`#FC0036`	`#F13342`
`amber`	`#FFAE00`	`#FFAE00`
`green`	`#28A948`	`#00AC3A`
`teal`	`#00AC96`	`#00AA96`
`purple`	`#8B5CF6`	`#A78BFA`
`pink`	`#F32782`	`#F12B82`

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": "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.