References

Visual references

Visual sources informing the design system, grouped by category. Click any image to open at full size. Every palette below is extracted from the actual image.

Reading from public/references/<category>/. Add a sub-folder, drop in images, run python3 scripts/extract-palettes.py, refresh.

colors

6 images
1

2a37215883e14c7da83f008a8cc42162.jpg

Extracted palette

2

2d82dfdd9fabe0f56d3d6ebaa1ec8df6.jpg

Extracted palette

3

4c4d9bdf5f23573afe038f8fbdaa850b.jpg

Extracted palette

4

71c02353c45edcfa4957653010132340.jpg

Extracted palette

5

8934f524a14d770a736d5e35c0a05852.jpg

Extracted palette

6

b69d56b363d0103f30f0a32c23b201fb.jpg

Extracted palette

Re-extracting palettes

Palettes are pre-computed and stored in lib/extracted-palettes.json. Whenever you add or change images, re-run python3 scripts/extract-palettes.py from the project root to refresh the JSON. The page will then show the new colours on next reload.