Design Tokens

Visual language for fishbowl web presence. All tokens prefixed --site-*.

Color Swatches

Contrast ratios computed against --site-bg for each mode. Text tokens require 4.5:1 (WCAG AA).

warm: mutable layer

overlayFS — writable extension layer with copy-on-write

cool: frozen layer

rootFS — sealed base image, read-only

accent: interactive

/bin/sh — active process, selected path

The quick brown fox jumps over the lazy dog

$ echo "hello, world" | wc -c

user@fishbowl:/home $

Stack: --site-font-mono

The quick brown fox jumps over the lazy dog

A Unix-inspired shell environment for JavaScript runtimes

Interactive documentation and live demos

Stack: --site-font-sans

Click each box to toggle. With prefers-reduced-motion: reduce, all transitions are instant.

200ms

fast

300ms

normal

600ms

slow

Components alias --site-* to their own namespace at the component root.

Global Token	V1 Tree	V2 Badge	V3 Layer	V4 Box	Usage
--site-accent	--tree-accent	--badge-accent	--layer-active	--box-highlight	Active path, badge, prompt
--site-warm	—	—	--layer-warm	--box-warm	Overlay label, container border
--site-warm-subtle	—	—	--layer-warm-bg	--box-warm-bg	Extension layer bg, container box bg
--site-cool	—	—	--layer-cool	--box-cool	Frozen label, root image border
--site-cool-subtle	—	—	--layer-cool-bg	--box-cool-bg	Frozen layer bg, root image bg
--site-dim	--tree-dim	—	--layer-dim	—	Inactive rows, annotations
--site-fg	--tree-fg	--badge-fg	--layer-fg	--box-fg	Body text, labels
--site-bg	—	—	—	—	Page background
--site-surface	—	--card-bg	--layer-bg	--box-bg	Cards, layers, boxes
--site-border	--tree-border	--card-border	--layer-border	--box-border	All structural borders