---
name: whynot-design
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.
user-invocable: true
---

Read the `README.md` file within this skill, and explore the other available files. Pay particular attention to:

- `DesignSystemIntroduction.md` — three-layer architecture, propagation pipeline, A1 pragmatic staging.
- `MultiFrameworkSupport.md` — how to consume from React, Django, HTMX, Vue, plain HTML.
- `examples/showcase/index.html` — every component on one page; copy-paste-able.
- `examples/whynot-control/index.html` — full app composition.

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.

## Architecture in one paragraph

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.**

## Available components (v0.2.0)

| Group | Tags |
|---|---|
| Atoms | `<wn-button>`, `<wn-tag>`, `<wn-eyebrow>`, `<wn-stamp>`, `<wn-stage-dot>`, `<wn-phase-dot>`, `<wn-icon>` |
| Form | `<wn-input>`, `<wn-textarea>`, `<wn-select>`, `<wn-search-input>`, `<wn-field-row>` |
| Layout | `<wn-card>`, `<wn-modal>`, `<wn-table>` + `<wn-table-row>` + `<wn-table-cell>`, `<wn-banner>`, `<wn-toast>` + `<wn-toast-region>`, `<wn-empty-state>`, `<wn-breadcrumb>` |
| Chrome | `<wn-top-nav>`, `<wn-sidebar>` + `<wn-sidebar-group>` + `<wn-sidebar-item>`, `<wn-page-header>`, `<wn-pipeline>`, `<wn-prototype-card>` |

## House rules (do not violate)

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.
3. **No gradients. Anywhere.**
4. **Wireframe vibes.** 1px hairlines, generous whitespace, monospace eyebrow labels in margins. Engineering graph-paper, not SaaS dashboard.
5. **Square corners on big things.** 0–4px radii for cards/sheets; 8px reserved for large modals; pill only for tag capsules.
6. **No shadows on cards.** Elevation is intentionally near-zero; only popovers / modals get a soft 4–12px shadow.
7. **No fake illustrations.** Use the logo, use `<wn-icon>`, use placeholders. Never hand-roll SVG icons or emoji.
8. **Lowercase organisation name** in body: `whynot`. The logo wordmark may use `WhyWhyNot` for legacy reasons.
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.

## When in doubt

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.