description: Use this skill to generate well-branded interfaces and assets for whynot — Tegwick's prototype-and-market-signal organisation that discovers the weird and the useful — either for production or throwaway prototypes, mocks, signal records, beta plans, and decision documents. The system is framework-agnostic — its canonical components are Lit-based web components consumable from React, Django, HTMX, Vue, plain HTML, or anywhere a custom element runs.
If creating visual artefacts (slides, mocks, throwaway prototypes, signal records, beta plans, etc.), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artefacts *or* production code, depending on the need.
The system is delivered as three stacked layers. **Layer 1** is tokens + CSS (`colors_and_type.css` + `components.css`) — framework-agnostic, consumable from any HTML. **Layer 2** is Lit-based web components (`<wn-button>`, `<wn-card>`, etc.) that render to light DOM so Layer 1's CSS styles them — work identically in React JSX, Django templates, Vue, plain HTML, HTMX-swapped fragments. **Layer 3** is optional framework adapters (currently: Django `{% include %}` partials). When generating code or markup, **prefer Layer 2** — `<wn-button>` works everywhere; do not write a `<Button>` React component or a Django partial unless asked specifically. **Never re-implement a component per framework.**
1.**Quiet voice.** No marketing language, no hype, no emoji. Sentence case everywhere. Distinguish idea / hypothesis / signal / decision.
2.**Mostly black & white.** Color is one warm yellow accent (`--hi: #FFE14A`) used only as highlighter / draft stamp / S4 signal indicator. Never as a button fill, never as a hero background, never as a gradient.
9.**No re-implementing Layer 2 components in framework code.** Use `<wn-*>` tags directly. If a component doesn't fit, propose extending Layer 2 upstream — do not fork it locally.
Read `README.md` and the closest matching component in `examples/showcase/index.html`. If still unsure, ask the user — `whynot` prefers explicit uncertainty over confident guesses.
