Brand Board Viewer

Getting started

  1. See it working: click Load sample above. The sample deliberately omits a few elements so you can see the dashed ⊘ "not defined" failure mode.
  2. Convert your tokens: copy the prompt below into any coding assistant along with your design token source (Figma variables, Style Dictionary, Tailwind config, brand PDF, screenshots). It will return a JSON file in the viewer's schema.
  3. Load it: use the file picker above. Anything your tokens don't define shows as a neutral "not defined" notice — never as invented brand content.
Privacy: token files are read locally in your browser via FileReader and never uploaded. The only network request this page ever makes is an optional Google Fonts stylesheet for families flagged "googleFont": true.
Coding-agent prompt (includes the full schema)