> ## Documentation Index > Fetch the complete documentation index at: https://smithers.sh/llms.txt > Use this file to discover all available pages before exploring further. # Workflow UI Design Principles > The shared visual language every smithers ui workflow UI should follow, so each .smithers/ui/.tsx looks like one product instead of a different app per workflow. [Custom Workflow UIs](/guides/custom-workflow-ui) covers the *plumbing*: how a `.smithers/ui/.tsx` bundle boots, talks to the Gateway, streams events, and stays stale-data-free. This guide covers the *look*: the visual language that makes every workflow UI read as one product. The reference implementation is the Smithers product UI; the rules below are extracted from it. Adopt these tokens and principles verbatim, not a one-off palette, so a workflow UI feels native and shares the same shape, depth, motion, and focus decisions. Most reference UIs in this repo (`.smithers/ui/vcs.tsx`, `grill-me.tsx`, `ultragrill.tsx`) ship a single inline `

Workflow

{runId ?? "no run"} {run.data?.status ?? "idle"}

); } createGatewayReactRoot(); ``` ## Checklist before you ship a UI * [ ] Colors, tints, and shadow alphas come from tokens or `color-mix`, never raw hex inline. * [ ] Light and dark both look right (the token block handles both; spot-check by toggling `data-theme`). * [ ] Type is Inter, antialiased, with heavy weights on labels and tight tracking on headings. * [ ] Radii come from the 6/10/12/16/pill scale; nothing arbitrary. * [ ] Elevated surfaces are glass with a two-layer, `--shadow-rgb`-tinted shadow. * [ ] Primary action is the inverse surface; brand is reserved for focus and progress. * [ ] Every interactive control has a visible `:focus-visible` (or `:focus-within`) treatment. * [ ] Motion is 120 to 260ms with `both` fill; the shared reduced-motion safety net is present. * [ ] Run state maps to brand/success/danger the same way it does in every other UI. ## Reference * **Guide:** [Custom Workflow UIs](/guides/custom-workflow-ui) for the Gateway wiring, hooks, boot config, and stale-data-free model. * **Reference bundles in this repo:** `.smithers/ui/vcs.tsx`, `.smithers/ui/grill-me.tsx`, `.smithers/ui/ultragrill.tsx`, `.smithers/ui/workflow-skill.tsx`. * **Examples:** [Workflow UI (React)](/examples/workflow-ui-react), [Workflow UI (Vanilla)](/examples/workflow-ui-vanilla).