Brand style guide viewer — outfit + templating definitions rendered live

[koad]

Summary

Build a UI that renders our brand style guide and templating definitions live — so we can see what the outfit system and design tokens look like in practice.

Context

• koad's outfit is the source of truth: { "h": 222, "s": 22 } — muted steel-blue, desaturated
• Muse maintains the design system (~/.muse/DESIGN-SYSTEM.md) with full token sets (colors, typography, spacing)
• The templating package (~/.koad-io/packages/templating) uses CSS custom properties that should derive from outfit values
• The theme-engine package (~/.koad-io/packages/theme-engine/) handles runtime theming — this is where h/s → CSS vars conversion should live
• Muse has a new image prompt composition system (~/.muse/design-system/image-prompts.md) with style/type/palette/param fragments

What to build

A page (or route in an existing koad:io app) that shows:

1. Outfit origin — the h/s pair, and how it expands into the full palette
2. Color tokens — all CSS custom properties rendered as swatches (dark + light mode)
3. Typography — font stack, sizes, weights as rendered samples
4. Component examples — cards, buttons, panels, badges using the actual templating + theme-engine packages
5. Image prompt preview — the fragment library from image-prompts.md displayed with example compositions
6. Outfit LOD levels — show what each level provides (h/s → palette → personality → full 3D)

Technical notes

• Meteor/Blaze stack — uses koad:io-templating and koad:io-theme-engine packages directly
• Should read outfit from passenger.json (h/s pair) and derive everything from there
• CSS custom properties generated from h/s at runtime via theme-engine, proving the outfit contract works
• This is both a reference tool for the team AND a demo of the outfit system for customers

Related

• koad/juno#71 — outfit LOD schema definition
• koad/juno#72 — templating package outfit rendering helpers
• ~/.muse/DESIGN-SYSTEM.md — source of truth for tokens
• ~/.muse/design-system/image-prompts.md — prompt composition system
• ~/.koad-io/packages/theme-engine/ — runtime theming from outfit values

🤖 Generated with Claude Code

[koad]

Addendum: theme-engine state derivation

The theme-engine should derive multiple rendering states from the same h/s outfit origin. Currently toggleDarkMode() just flips brightness — this should be expanded to named presets.

From a single outfit { h: 222, s: 22 }, the engine derives:

State	Brightness	Saturation	Contrast Threshold	Use case
dark	10	22	80%	Default — dark mode
light	90	18	80%	Light mode
high-contrast	5	30	95%	Accessibility
muted	15	12	80%	Background/ambient contexts
print	95	8	80%	Print stylesheets

Same hue. Same origin. The templating components don't change — they just consume the CSS vars that the theme-engine sets for each state.

The style guide viewer should show all states side by side so you can see the same components rendered across every derivation.

API shape (suggestion):

koad.theme.set.state('dark')     // switch preset
koad.theme.set.hue(222)          // override hue
koad.theme.states                // list available states

🤖 Generated with Claude Code