whynot-design/SKILL.md

name, description, user-invocable

name	description	user-invocable
whynot-design	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. Contains essential design guidelines, neutral colour system, IBM Plex type stack, the LEGO-brick logo, and a click-through UI kit recreating the whynot-control surface.	true

Read the README.md file within this skill, and explore the other available files.

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.

Quick orientation

• README.md — full design system: company context, content rules (voice, casing, person, tone), visual foundations (color, type, spacing, animation, hover, borders, shadows, cards, imagery), and iconography.
• colors_and_type.css — drop-in CSS with every CSS variable and semantic element style. Import this on every artefact.
• assets/ — whynot-logo.png (LEGO brick + ?!).
• preview/ — 23 reference cards (palettes, type specimens, components, motifs) you can read to understand any single concept in isolation.
• ui_kits/whynot-control/ — React kit recreating the whynot-control web app. Use these components when building prototype dashboards, signal records, decision documents.

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. The aesthetic is 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 get a soft 4–12px shadow.
7. No fake illustrations. Use the logo, use Lucide icons at 1.5px stroke, 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.

When in doubt

Read README.md and the closest matching card in preview/. If still unsure, ask the user — whynot prefers explicit uncertainty over confident guesses.