---
id: capability.design.whynot-system
name: Whynot Design System
summary: 'Framework-agnostic visual language for whynot prototype/market-signal artefacts: design tokens,
  drop-in CSS, Lit-based web components usable from React/Django/Vue/plain HTML, and Django template adapters.'
owner: whynot-design
status: draft
domain: consumer
tags:
- design-system
- web-components
- frontend
maturity:
  discovery:
    current: D3
    target: D4
    confidence: medium
    rationale: README documents a clear three-layer architecture (tokens, CSS, Lit web components) plus
      a companion DesignSystemIntroduction.md describing propagation pipeline, versioning, and A1 staging
      relative to whynot-control.
  availability:
    current: A2
    target: A3
    confidence: high
    rationale: 'Published as `@whynot/design` (not private: `"private": false` in package.json), ships
      a CLI (`whynot-design` bin), tokens/CSS/JS source, and Django adapters — genuinely consumable across
      frameworks today, not just planned.'
external_evidence:
  completeness:
    level: C2
    confidence: low
    basis: scope_vs_intent_and_consumer_expectations
    satisfied_expectations:
    - framework-agnostic Lit web components (same `<wn-button>` usable in React/Django/Vue/plain HTML)
    - design tokens as source of truth
    - Django adapter partials
    - package is publicly consumable (not private)
    broken_expectations: []
    out_of_scope_expectations: []
  reliability:
    level: R1
    confidence: low
    basis: consumer_quality_signals
    known_reliability_risks:
    - cross-framework consumption claims not independently verified in every target framework during this
      sweep
discovery:
  intent: Give whynot's prototype and market-signal artefacts a consistent, deliberately-unfinished visual
    language, consumable identically across any framework via framework-agnostic web components rather
    than per-framework reimplementation.
  includes:
  - design tokens (tokens/*.json)
  - drop-in CSS (src/styles/*.css)
  - Lit-based web components (src/elements/*.js)
  - Django adapter partials
  excludes:
  - whynot-control's product/business logic itself (see whynot-control)
  assumptions: []
  use_cases: []
  research_memos: []
availability:
  current_level: A2
  target_level: A3
  current_artifacts:
  - '`@whynot/design` npm package (public)'
  - '`whynot-design` CLI'
  target_artifacts: []
  consumption_modes:
  - library import (npm)
  - cli
  - django template adapter
relations:
  depends_on: []
  supports: []
  related_to: []
evidence:
  documentation:
  - README.md
  - DesignSystemIntroduction.md
  tests:
  - tests/
  - test-results/
  consumer_feedback: []
  bug_reports: []
  incidents: []
consumer_guidance:
  recommended_for:
  - whynot-family apps needing a consistent, framework-agnostic visual language across React/Django/Vue/plain
    HTML
  not_recommended_for:
  - consumers wanting a themed (non-neutral) visual language, or needing whynot-control's business logic
    itself
  known_limitations:
  - cross-framework consumption not independently re-verified in every target framework this sweep
promotion_history: []
---

# Whynot Design System

## Overview

`@whynot/design` is the framework-agnostic visual language for whynot's prototype and market-signal artefacts: design tokens as source of truth, drop-in CSS, and Lit-based web components that work identically across React, Django, Vue, and plain HTML, plus Django adapter partials — publicly published, not a private/internal-only package.

## Assessment notes

### Discovery

README documents a clear three-layer architecture (tokens, CSS, Lit web components) plus a companion DesignSystemIntroduction.md describing propagation pipeline, versioning, and A1 staging relative to whynot-control.

### Availability

Published as `@whynot/design` (not private: `"private": false` in package.json), ships a CLI (`whynot-design` bin), tokens/CSS/JS source, and Django adapters — genuinely consumable across frameworks today, not just planned.

### Completeness

First-pass honest assessment from the REUSE-WP-0017 coverage campaign
(reuse-surface). No external consumer feedback exists yet; levels reflect
scope-vs-intent documentation quality, not internal code quality.

### Reliability

No production consumer telemetry exists yet; reliability level is
intentionally conservative pending REUSE-WP-0019 reuse-telemetry evidence.

## Promotion checklist

- [x] ID follows `capability.<domain>.<name>` pattern
- [x] Maturity enums match `specs/CapabilityMaturityStandard.md`
- [x] `external_evidence` is populated separately from `maturity`
- [ ] Relations reference valid capability IDs (none yet)
- [x] Index entry added in `registry/indexes/capabilities.yaml`