feat(designbook): technology-neutral IR + stack-adapter pipeline (WHYNOT-WP-0002 T01-T06)
Author the design language once in the canonical React designbook and project it
one-way onto each stack: React -> designbook/ -> ir/ -> adapters/<stack>/.
Phase 0 — contracts & governance (T01-T03):
- ir/SCHEMA.md + ir/schema/{component,tokens}.schema.json — neutral IR contract
(W3C DTCG tokens; React prop -> HTML attribute mapping; non-portable props flagged).
- adapters/ADAPTER_CONTRACT.md — inputs, drift-report + parity-result shapes,
idempotency rules, CI exit codes (0 ok / 2 usage / 3 drift / 4 parity / 5 internal).
- .claude/rules/designbook-propagation.md + DesignSystemIntroduction.md §5.1 —
one-way directionality + drift-resolution workflow.
T04 — canonical React designbook + the missing pull tool:
- The bundled /design-sync skill only PUSHES repo->cloud; it cannot populate
designbook/. Added scripts/designbook_pull.py + `make designbook-pull`, which drives
the local claude binary headless (acceptEdits) so DesignSync fetch+write runs in a
subprocess (contents never hit the orchestrator's context). Pulled 44 files;
excludes the _whynot-design-seed/ self-copy. Corrected the docs that wrongly called
/design-sync the pull.
T05 — IR extractor (scripts/ir-extract.mjs + `make ir`):
- ir/tokens.json (80 tokens, DTCG, var() -> {ref} alias resolution); ir/components/*.json
(10 contracts parsed from .jsx signatures: enum/boolean/number inference, prop->attr
map, style/callback marked non-portable); ir/exemplars/*.
T06 — Lit token adapter (adapters/lit/ + `make adapt-lit`):
- Full-gen tokens into src/styles/colors_and_type.css :root (marker-bounded, idempotent
no-op on re-run; hand-authored type CSS preserved).
NOTE: token regen synced Lit to canonical React — fonts IBM Plex -> system stacks and 8
status tokens added. This is a VISUAL change: review and run `pnpm test:visual:update`
before merge. Remaining: T07 scaffold+drift, T08 parity, T09 runbook, T10 2nd-adapter.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
59
.claude/rules/designbook-propagation.md
Normal file
59
.claude/rules/designbook-propagation.md
Normal file
@@ -0,0 +1,59 @@
|
||||
## Designbook propagation & adapter governance (WHYNOT-WP-0002)
|
||||
|
||||
The whynot design language is **technology-neutral**. It is authored once and
|
||||
projected onto each UI stack through an intermediate representation. These rules
|
||||
keep that flow one-way and the stacks in sync.
|
||||
|
||||
### Directionality — one way only
|
||||
|
||||
```
|
||||
Claude Design (React, canonical) → designbook/ → ir/ → adapters/<stack>/ → stack source
|
||||
```
|
||||
|
||||
- **Claude Design (the React designbook) is the source of truth** for the *language*.
|
||||
- **Never hand-edit `ir/`** — `ir/tokens.json`, `ir/components/*.json`, and
|
||||
`ir/exemplars/*` are written only by the extractor (`scripts/ir-extract.mjs`,
|
||||
`make ir`). They are committed so blueprint changes show up as a git diff.
|
||||
Authored-by-hand exceptions: `ir/schema/`, `ir/SCHEMA.md`, `ir/README.md`.
|
||||
- **Never back-edit React/Claude Design from a stack.** A Lit (or any stack) change
|
||||
that should alter the shared language must be made in Claude Design and
|
||||
re-propagated. A direct stack→React edit that bypasses Claude Design is a
|
||||
governance violation — it desyncs the canonical source from the implementation.
|
||||
- **Adapters never overwrite hand-authored behaviour.** Tokens regenerate fully;
|
||||
new components get stubs; changed components get a **drift report**, never a
|
||||
rewrite. See `adapters/ADAPTER_CONTRACT.md`.
|
||||
|
||||
### When the cloud designbook moves
|
||||
|
||||
Run the refresh sequence (orchestrated by `make designbook-refresh`, WHYNOT-WP-0002
|
||||
Phase 5); do not shortcut it:
|
||||
|
||||
1. `make designbook-check` — detect the cloud designbook moved ahead.
|
||||
2. `make designbook-pull` — pull the latest React designbook into `designbook/`
|
||||
(drives the local `claude` binary headless via `DesignSync`; stamps freshness
|
||||
itself). The bundled `/design-sync` skill *pushes* repo→cloud and does **not**
|
||||
populate `designbook/` — use `make designbook-pull` for the pull.
|
||||
3. `make designbook-sync` — record the diff in `RecentChanges.md`.
|
||||
4. `make ir` — re-extract the IR; **review the `ir/` git diff** (the blueprint change).
|
||||
5. `make adapt-lit` — regenerate tokens, scaffold new components, emit drift reports.
|
||||
6. **Resolve drift** (human) — fill/adjust Lit behaviour per `adapters/lit/drift/*.md`.
|
||||
7. `make parity-lit` — confirm appearance + contract parity (gate).
|
||||
|
||||
### Drift triage
|
||||
|
||||
A drift report (`adapters/lit/drift/<Name>.md`, command exit code `3`) is resolved
|
||||
by a human, not the adapter:
|
||||
|
||||
- Decide direction: stale stack → fix the stack to match IR; language should change
|
||||
→ edit Claude Design and re-propagate (never patch only the stack).
|
||||
- **Non-portable props** (React objects, render props, callbacks) are surfaced as
|
||||
drift on purpose and must be handled explicitly — never silently dropped.
|
||||
- A report is closed when a fresh `make ir && make adapt-lit` produces no issues
|
||||
for that component and `make parity-lit` passes (exit `0`).
|
||||
|
||||
### Exit codes (CI)
|
||||
|
||||
`0` ok · `2` usage/config error · `3` drift detected (stop for human triage) ·
|
||||
`4` parity failure (fail) · `5` internal error. See `adapters/ADAPTER_CONTRACT.md`.
|
||||
|
||||
Full narrative: `DesignSystemIntroduction.md` §5.1.
|
||||
@@ -28,7 +28,7 @@ There is no unit-test suite — correctness is verified by full-page Playwright
|
||||
|
||||
The **designbook** is the upstream atelier — the **Claude Design project** (cloud, `claude.ai/design`), source of truth for the *language*. Its local mirror lives in-repo at `designbook/` (see `designbook/README.md`). Sync is **agent-driven and incremental** (one component at a time, never a wholesale replace):
|
||||
|
||||
1. **Pull** — run `/design-sync` in Claude Code (the `DesignSync` tool over the claude.ai login); it writes into `designbook/`. Immediately stamp the time: `node scripts/designbook-sync.mjs --mark-synced`. A Makefile cannot invoke the MCP tool, so the pull is always an agent step.
|
||||
1. **Pull** — run `make designbook-pull` (`scripts/designbook_pull.py`). It drives the local `claude` binary headless (`claude --print --permission-mode acceptEdits`), which has the `DesignSync` tool over the claude.ai login, to fetch the React designbook and write it into `designbook/`; the file contents stay in that subprocess, so the pull is cheap regardless of size. Selection is governed by `designbook/.design-pull.json` (it excludes `_whynot-design-seed/**`, the cloud project's copy of this repo). The script stamps freshness itself on success. **Note:** the bundled `/design-sync` skill goes the *other* way — it *pushes* a repo up to Claude Design — so it does **not** populate `designbook/`; use `make designbook-pull` for the pull (see `designbook-propagation.md`).
|
||||
2. **Record** — `make designbook-sync` runs `scripts/designbook-sync.mjs`, writing `RecentChanges.md`: a **snapshot** (not a log) of what changed across `designbook/` + the derived surfaces (`tokens/`, `src/styles/`, `src/elements/`, `examples/`), grouped by layer.
|
||||
|
||||
**Freshness** is tracked in `designbook/.design-sync.json` (`lastSyncAt`, `remoteUpdatedAt`, `projectId`, `projectName`). Every report states **"Last /design-sync: <datetime>"** so it's clear whether the snapshot reflects the latest design. The cloud-ahead check is backed by **llm-connect** (`make designbook-check` → `scripts/check_designbook_staleness.py`): it uses the `claude-code` adapter to ask the local `claude` binary for the project's current `updatedAt` via `DesignSync.list_projects`, then records it with `node scripts/designbook-sync.mjs --remote-updated <iso>`. Only the `claude-code` adapter can reach the user's Claude Design project (Gemini/OpenRouter/OpenAI cannot), and no secret goes in the prompt — DesignSync uses the claude.ai login (see `credential-routing.md`). The check needs `llm_connect` importable; the Makefile auto-selects `~/llm-connect/.venv/bin/python`. Use `--remote-updated <iso>` to run the comparison offline/manually, or `--fail-if-stale` (exit 3) in automation. When `remoteUpdatedAt` is newer than `lastSyncAt`, the report and stdout **warn that the local mirror is OUTDATED** until the next `/design-sync`. If no sync was ever recorded, it warns that `/design-sync` has not run. The reporter is deterministic (built from `git status`/`git diff`), only writes the working tree, never commits, and never edits `designbook/` content. Fold notable entries into `CHANGELOG.md` under `## [Unreleased]` before releasing — `RecentChanges.md` is overwritten every run and is **not** the CI-enforced artifact.
|
||||
|
||||
29
CHANGELOG.md
29
CHANGELOG.md
@@ -6,7 +6,34 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). Version
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
_Nothing yet. Add entries above the next `[vX.Y.Z]` block as PRs land._
|
||||
### Added
|
||||
|
||||
- **Technology-neutral IR + stack-adapter pipeline** (WHYNOT-WP-0002, Phase 0–3). The
|
||||
design language is now authored once in the canonical React designbook and projected
|
||||
one-way onto each stack: `React → designbook/ → ir/ → adapters/<stack>/`.
|
||||
- `ir/` — committed, diffable blueprint: `ir/SCHEMA.md`, JSON Schemas
|
||||
(`ir/schema/{component,tokens}.schema.json`), and the extractor's output
|
||||
(`ir/tokens.json` in W3C DTCG format, `ir/components/*.json`, `ir/exemplars/*`).
|
||||
- `adapters/ADAPTER_CONTRACT.md` — the contract every stack adapter implements
|
||||
(inputs, drift report + parity result shapes, idempotency, CI exit codes).
|
||||
- `scripts/designbook_pull.py` + `make designbook-pull` — pulls the React designbook
|
||||
from Claude Design into `designbook/` (the bundled `/design-sync` skill only
|
||||
*pushes*, so it cannot populate `designbook/`).
|
||||
- `scripts/ir-extract.mjs` + `make ir` — extracts the IR from the `.jsx` ui-kit,
|
||||
manifest, and previews.
|
||||
- `adapters/lit/` + `make adapt-lit` — Lit reference adapter; tokens fully generated
|
||||
into `src/styles/colors_and_type.css` (marker-bounded, idempotent).
|
||||
- `.claude/rules/designbook-propagation.md` + `DesignSystemIntroduction.md` §5.1 —
|
||||
one-way governance and drift-resolution workflow.
|
||||
|
||||
### Changed
|
||||
|
||||
- `src/styles/colors_and_type.css` — token `:root` block is now **generated** by
|
||||
`make adapt-lit` from `ir/tokens.json` (between `@generated tokens` markers). This
|
||||
synced the Lit token layer to the canonical React designbook: font stacks switched
|
||||
from IBM Plex to system-font stacks, and the functional-status tokens
|
||||
(`--status-error/warn/success/info` + `-bg`) were added. **Visual change — Playwright
|
||||
baselines need review + `pnpm test:visual:update`.**
|
||||
|
||||
## [0.2.0] — 2026-05-25
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
@.claude/rules/first-session.md
|
||||
@.claude/rules/workplan-convention.md
|
||||
@.claude/rules/stack-and-commands.md
|
||||
@.claude/rules/designbook-propagation.md
|
||||
@.claude/rules/architecture.md
|
||||
@.claude/rules/repo-boundary.md
|
||||
@.claude/rules/credential-routing.md
|
||||
|
||||
@@ -217,6 +217,59 @@ The end-to-end flow for a single design change:
|
||||
|
||||
The whole loop, warm, takes minutes. **Automation works only because every step has a deterministic check** — visual regression on both sides, semver, changelogs. Skip those and the pipeline is a slow manual process with extra tools.
|
||||
|
||||
### 5.1 The IR pivot — technology-neutral propagation (WHYNOT-WP-0002)
|
||||
|
||||
Claude Design's `/design-sync` produces a **React-bound** designbook. To keep the
|
||||
language portable across UI stacks (Lit today, others later) without forking it
|
||||
per stack, an **intermediate representation (IR)** sits between the atelier and
|
||||
each stack's source:
|
||||
|
||||
```
|
||||
Claude Design (React) ──/design-sync──▶ designbook/ ──make ir──▶ ir/ ──make adapt-lit──▶ src/ (Lit)
|
||||
canonical authoring React mirror neutral blueprint per-stack adapter
|
||||
```
|
||||
|
||||
**Directionality is one-way: React → IR → stacks.**
|
||||
|
||||
- The **React designbook in Claude Design is canonical.** The shared language is
|
||||
authored there; nothing downstream is the source of truth.
|
||||
- `ir/` is the **committed, diffable blueprint** (tokens in W3C DTCG format,
|
||||
per-component contracts, reference exemplars). Only the extractor writes it —
|
||||
never hand-edit `ir/tokens.json`, `ir/components/`, or `ir/exemplars/`. See
|
||||
`ir/SCHEMA.md`.
|
||||
- Each stack has an **adapter** (`adapters/<stack>/`, contract in
|
||||
`adapters/ADAPTER_CONTRACT.md`). Adapters are **scaffold + drift-detect**:
|
||||
tokens fully generated, new components stubbed, changed components reported as
|
||||
**drift** — the hand-authored source is never overwritten. Lit is the reference
|
||||
adapter.
|
||||
- **Lit-side changes do not flow back automatically.** A change to the shared
|
||||
language must be made in Claude Design (React) and re-propagated through the IR.
|
||||
A Lit→React back-edit that bypasses Claude Design is a governance violation: it
|
||||
silently desyncs the canonical source from the implementation.
|
||||
|
||||
**Drift resolution workflow.** When `make adapt-lit` reports drift
|
||||
(`adapters/lit/drift/<Name>.md`, exit code `3`):
|
||||
|
||||
1. **Triage** — read the drift report. Each issue is one of: prop missing,
|
||||
attribute mismatch, variant added/removed, prop removed, or a **non-portable
|
||||
prop** (a React object/render-prop/callback that has no clean attribute).
|
||||
2. **Decide the direction.** If the IR is right and Lit is stale, a human adjusts
|
||||
the Lit element's contract/behaviour to match. If the *language itself* should
|
||||
change, that edit goes to Claude Design (React) and re-propagates — not into Lit.
|
||||
3. **Behaviour is filled by a human**, guided by the stub's `TODO` and the drift
|
||||
report. The adapter never authors behaviour.
|
||||
4. **Close** — re-run `make adapt-lit` until drift clears, then `make parity-lit`
|
||||
(exit `0`) confirms contract + visual parity. A drift report is "closed" when
|
||||
the next extract+adapt produces no issues for that component.
|
||||
|
||||
This **extends** the five-hop pipeline above rather than replacing it: hops 3–5
|
||||
(tag → publish → consumer) are unchanged; the IR pivot is inserted between the
|
||||
atelier and the Lit source so the same change can later be projected onto a second
|
||||
stack without re-authoring it. The full operational sequence is the
|
||||
`make designbook-refresh` runbook (WHYNOT-WP-0002 Phase 5). Governance for this
|
||||
flow is restated as an enforceable rule in
|
||||
`.claude/rules/designbook-propagation.md`.
|
||||
|
||||
---
|
||||
|
||||
## 6. Versioning discipline
|
||||
|
||||
13
Makefile
13
Makefile
@@ -10,13 +10,16 @@ NODE ?= node
|
||||
PYTHON ?= $(shell [ -x $(HOME)/llm-connect/.venv/bin/python ] && echo $(HOME)/llm-connect/.venv/bin/python || echo python3)
|
||||
|
||||
.DEFAULT_GOAL := help
|
||||
.PHONY: help designbook-sync designbook-check recent-changes sync-styles test
|
||||
.PHONY: help designbook-pull designbook-sync designbook-check ir adapt-lit recent-changes sync-styles test
|
||||
|
||||
help: ## Show this help.
|
||||
@grep -hE '^[a-zA-Z_-]+:.*?## ' $(MAKEFILE_LIST) \
|
||||
| awk 'BEGIN{FS=":.*?## "}{printf " \033[1m%-16s\033[0m %s\n", $$1, $$2}'
|
||||
|
||||
designbook-sync: ## After a /design-sync pull, record what changed + last-sync time into RecentChanges.md.
|
||||
designbook-pull: ## Pull the React designbook from Claude Design into designbook/ (cloud -> local mirror).
|
||||
$(PYTHON) scripts/designbook_pull.py $(ARGS)
|
||||
|
||||
designbook-sync: ## After a designbook pull, record what changed + last-sync time into RecentChanges.md.
|
||||
@echo "Pull the designbook first (in Claude Code): /design-sync"
|
||||
@echo " then record the pull time: node scripts/designbook-sync.mjs --mark-synced"
|
||||
@echo "This reports the diff + last /design-sync time (and warns if the cloud is newer):"
|
||||
@@ -25,6 +28,12 @@ designbook-sync: ## After a /design-sync pull, record what changed + last-sync t
|
||||
designbook-check: ## Ask Claude Design (via llm-connect) if the cloud is newer; warn if the mirror is stale.
|
||||
$(PYTHON) scripts/check_designbook_staleness.py $(ARGS)
|
||||
|
||||
ir: ## Extract the technology-neutral IR (ir/) from the designbook mirror. One-way: React -> IR.
|
||||
$(NODE) scripts/ir-extract.mjs
|
||||
|
||||
adapt-lit: ## Project the IR onto the Lit stack: regen tokens (full gen), scaffold + drift (T07).
|
||||
$(NODE) adapters/lit/adapt.mjs
|
||||
|
||||
recent-changes: ## Regenerate RecentChanges.md (alias of the reporter; --range supported).
|
||||
$(NODE) scripts/designbook-sync.mjs $(ARGS)
|
||||
|
||||
|
||||
@@ -2,13 +2,9 @@
|
||||
|
||||
Snapshot of the last designbook integration. Regenerated by `make designbook-sync`.
|
||||
|
||||
- Generated: 2026-06-22T20:02:58Z
|
||||
- Generated: 2026-06-23T19:25:28Z
|
||||
- Compared: working tree (uncommitted)
|
||||
- Last /design-sync: never recorded
|
||||
|
||||
> WARNING — no /design-sync has been recorded, so the local designbook/ may not
|
||||
> reflect the Claude Design project. Run `/design-sync` in Claude Code, then
|
||||
> `node scripts/designbook-sync.mjs --mark-synced`.
|
||||
- Last /design-sync: 2026-06-23T19:25:28Z
|
||||
|
||||
> This file is overwritten on every run — a snapshot, not a log. Fold notable entries
|
||||
> into `CHANGELOG.md` under `## [Unreleased]` before releasing; that is the file CI
|
||||
@@ -17,4 +13,45 @@ Snapshot of the last designbook integration. Regenerated by `make designbook-syn
|
||||
## Changed files
|
||||
|
||||
### Designbook
|
||||
- `ADDED ` designbook/README.md (+70 / -0)
|
||||
- `ADDED ` designbook/_ds_bundle.js (+1396 / -0)
|
||||
- `ADDED ` designbook/_ds_manifest.json (+1 / -0)
|
||||
- `ADDED ` designbook/.design-pull.json (+18 / -0)
|
||||
- `ADDED ` designbook/colors_and_type.css (+293 / -0)
|
||||
- `ADDED ` designbook/preview/brand-iconography.html (+36 / -0)
|
||||
- `ADDED ` designbook/preview/brand-lockups.html (+26 / -0)
|
||||
- `ADDED ` designbook/preview/brand-logo.html (+21 / -0)
|
||||
- `ADDED ` designbook/preview/brand-wireframe-motif.html (+43 / -0)
|
||||
- `ADDED ` designbook/preview/colors-accent.html (+33 / -0)
|
||||
- `ADDED ` designbook/preview/colors-borders.html (+25 / -0)
|
||||
- `ADDED ` designbook/preview/colors-neutrals.html (+36 / -0)
|
||||
- `ADDED ` designbook/preview/colors-signal.html (+25 / -0)
|
||||
- `ADDED ` designbook/preview/colors-status-functional.html (+31 / -0)
|
||||
- `ADDED ` designbook/preview/comp-buttons.html (+40 / -0)
|
||||
- `ADDED ` designbook/preview/comp-empty-placeholder.html (+38 / -0)
|
||||
- `ADDED ` designbook/preview/comp-inputs.html (+30 / -0)
|
||||
- `ADDED ` designbook/preview/comp-labels-tags.html (+44 / -0)
|
||||
- `ADDED ` designbook/preview/comp-left-nav.html (+85 / -0)
|
||||
- `ADDED ` designbook/preview/comp-pipeline.html (+30 / -0)
|
||||
- `ADDED ` designbook/preview/comp-prototype-card.html (+46 / -0)
|
||||
- `ADDED ` designbook/preview/comp-topnav.html (+37 / -0)
|
||||
- `ADDED ` designbook/preview/page-beta-invitation.html (+104 / -0)
|
||||
- `ADDED ` designbook/preview/page-landing-auth.html (+224 / -0)
|
||||
- `ADDED ` designbook/preview/page-prototype-detail.html (+158 / -0)
|
||||
- `ADDED ` designbook/preview/page-signals-dashboard.html (+135 / -0)
|
||||
- `ADDED ` designbook/preview/spacing-elevation.html (+26 / -0)
|
||||
- `ADDED ` designbook/preview/spacing-radii.html (+24 / -0)
|
||||
- `ADDED ` designbook/preview/spacing-scale.html (+28 / -0)
|
||||
- `ADDED ` designbook/preview/type-body.html (+23 / -0)
|
||||
- `ADDED ` designbook/preview/type-display.html (+23 / -0)
|
||||
- `ADDED ` designbook/preview/type-headings.html (+20 / -0)
|
||||
- `ADDED ` designbook/preview/type-mono-eyebrows.html (+42 / -0)
|
||||
- `ADDED ` designbook/preview/type-serif-quote.html (+17 / -0)
|
||||
- `ADDED ` designbook/REACT_CANONICAL_DECISION.md (+60 / -0)
|
||||
- `ADDED ` designbook/styles.css (+9 / -0)
|
||||
- `ADDED ` designbook/ui_kits/whynot-control/Atoms.jsx (+102 / -0)
|
||||
- `ADDED ` designbook/ui_kits/whynot-control/Chrome.jsx (+163 / -0)
|
||||
- `ADDED ` designbook/ui_kits/whynot-control/data.jsx (+71 / -0)
|
||||
- `ADDED ` designbook/ui_kits/whynot-control/DocView.jsx (+102 / -0)
|
||||
- `ADDED ` designbook/ui_kits/whynot-control/index.html (+77 / -0)
|
||||
- `ADDED ` designbook/ui_kits/whynot-control/README.md (+31 / -0)
|
||||
- `ADDED ` designbook/ui_kits/whynot-control/Screens.jsx (+274 / -0)
|
||||
|
||||
137
adapters/ADAPTER_CONTRACT.md
Normal file
137
adapters/ADAPTER_CONTRACT.md
Normal file
@@ -0,0 +1,137 @@
|
||||
# Adapter Contract
|
||||
|
||||
> The contract **every** whynot stack adapter implements, so a new stack
|
||||
> (Vue, Angular, Svelte, plain-CSS, …) is a drop-in. Part of WHYNOT-WP-0002.
|
||||
> Lit (`adapters/lit/`) is the reference implementation. Django
|
||||
> (`adapters/django/`) predates the IR and is a hand-authored Layer-3 partial
|
||||
> set, not an IR adapter — it is exempt until/unless migrated.
|
||||
|
||||
An adapter is **scaffold + drift-detect**, not full behavioural codegen:
|
||||
|
||||
- **tokens** → fully generated (deterministic, re-run is a no-op when unchanged),
|
||||
- **new component** → a stub is generated (skeleton + typed inputs + a behaviour TODO),
|
||||
- **changed component** → a **drift report** is emitted; the hand-authored source is
|
||||
**never overwritten**,
|
||||
- **appearance** → verified against the designbook's own exemplars (parity).
|
||||
|
||||
Behaviour stays hand-authored per stack. The adapter keeps each component's
|
||||
*contract and appearance* aligned; it does not own its behaviour.
|
||||
|
||||
---
|
||||
|
||||
## Inputs
|
||||
|
||||
The sole input is the committed IR (`ir/`, produced one-way from the React
|
||||
designbook — see `ir/SCHEMA.md`):
|
||||
|
||||
| Input | What the adapter reads it for |
|
||||
|---|---|
|
||||
| `ir/tokens.json` | Token generation (W3C DTCG → stack-native token form). |
|
||||
| `ir/components/<Name>.json` | Per-component contract: props, prop→attribute map, slots, events, variants. |
|
||||
| `ir/exemplars/<Name>.{html,png}` | Reference render for visual parity. |
|
||||
| `ir/schema/` | The schemas the adapter may re-validate inputs against. |
|
||||
|
||||
An adapter **MUST NOT** write to `ir/`. Flow is one-way: React → IR → stacks.
|
||||
|
||||
## Outputs
|
||||
|
||||
An adapter produces exactly three kinds of output:
|
||||
|
||||
1. **Generated artifacts** into the stack's own source tree.
|
||||
- Tokens: fully generated, deterministic (e.g. Lit → `src/styles/colors_and_type.css`).
|
||||
- New-component stubs: written to the stack's component tree, marked generated,
|
||||
with a behaviour `TODO`. A stub is created **only** when no hand-authored
|
||||
counterpart exists.
|
||||
|
||||
2. **A machine-readable drift report** — one file per drifted component plus a
|
||||
roll-up. Lit writes these to `adapters/lit/drift/<Name>.md` (human view) backed
|
||||
by a machine-readable summary. The report enumerates, per component:
|
||||
- props present in IR but missing on the element (and vice-versa),
|
||||
- prop→attribute mismatches,
|
||||
- missing / extra / renamed variants,
|
||||
- removed props,
|
||||
- **non-portable props** (`portable:false`) surfaced explicitly — never dropped.
|
||||
|
||||
3. **A parity result** — a single structured outcome per `make parity-<stack>`
|
||||
covering (a) **contract parity** (observed attributes/properties vs IR) and
|
||||
(b) **visual parity** (rendered component diffed against `ir/exemplars/<Name>`).
|
||||
|
||||
### Drift report — minimal machine shape
|
||||
|
||||
```json
|
||||
{
|
||||
"stack": "lit",
|
||||
"generatedAt": "<iso8601>",
|
||||
"irRef": "<git-sha-or-mtime of ir/>",
|
||||
"components": [
|
||||
{
|
||||
"name": "Button",
|
||||
"status": "drift", // "ok" | "new" | "drift" | "removed"
|
||||
"issues": [
|
||||
{ "kind": "prop-missing", "prop": "tone", "detail": "in IR, absent on <wn-button>" },
|
||||
{ "kind": "attribute-mismatch","prop": "iconEnd", "expected": "icon-end", "actual": "iconend" },
|
||||
{ "kind": "non-portable", "prop": "renderLabel", "detail": "type=function; cannot map to attribute" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Parity result — minimal machine shape
|
||||
|
||||
```json
|
||||
{
|
||||
"stack": "lit",
|
||||
"generatedAt": "<iso8601>",
|
||||
"components": [
|
||||
{ "name": "Button", "contract": "pass", "visual": "pass", "diffRatio": 0.0009 }
|
||||
],
|
||||
"summary": { "total": 1, "contractFail": 0, "visualFail": 0 }
|
||||
}
|
||||
```
|
||||
|
||||
## Idempotency rules
|
||||
|
||||
1. **Tokens regenerate fully.** Running token generation twice on an unchanged
|
||||
`ir/tokens.json` yields a byte-identical file (no-op diff).
|
||||
2. **Stubs are write-once.** A stub is generated only when no hand-authored source
|
||||
exists. Once a human has touched a component, the adapter never re-writes it —
|
||||
it emits drift instead.
|
||||
3. **Behaviour is never overwritten.** No adapter output replaces hand-authored
|
||||
behaviour. The strongest action against an existing component is a drift report.
|
||||
4. **Reports are overwritten, not appended.** Drift and parity outputs are
|
||||
snapshots of the current IR-vs-source state; each run replaces the previous.
|
||||
5. **No network, no `ir/` writes.** Adapters are pure functions of `ir/` + the
|
||||
stack source tree.
|
||||
|
||||
## Exit codes (for CI)
|
||||
|
||||
Every adapter command (`make adapt-<stack>`, `make parity-<stack>`) follows the
|
||||
same convention so pipelines can branch uniformly:
|
||||
|
||||
| Code | Meaning |
|
||||
|---|---|
|
||||
| `0` | Success. Tokens/stubs generated; no drift; parity passed. |
|
||||
| `2` | Usage / configuration error (bad args, missing `ir/`, malformed input). |
|
||||
| `3` | **Drift detected.** Generation succeeded but one or more components drifted from the IR. Non-fatal by default; use to gate a review. |
|
||||
| `4` | **Parity failure.** A contract or visual parity check failed. |
|
||||
| `5` | Internal adapter error (unexpected exception). |
|
||||
|
||||
Codes are additive in spirit but a command returns the **highest applicable**
|
||||
code (e.g. drift + parity failure → `4`). `make designbook-refresh` (T09) treats
|
||||
`3` as "stop for human drift triage" and `4` as "fail".
|
||||
|
||||
## Implementing a new adapter — checklist
|
||||
|
||||
1. Create `adapters/<stack>/` with a `README.md` pointing back to this contract.
|
||||
2. Implement token generation from `ir/tokens.json` → the stack's token form
|
||||
(full gen, deterministic).
|
||||
3. Implement stub generation from `ir/components/<Name>.json` using the
|
||||
**prop→attribute map** (respect `attribute:false` and `portable:false`).
|
||||
4. Implement drift detection against existing hand-authored sources → the drift
|
||||
report shape above.
|
||||
5. Implement `make parity-<stack>` → the parity result shape above, reusing the
|
||||
Playwright harness where the stack renders to HTML.
|
||||
6. Wire `make adapt-<stack>` and `make parity-<stack>`; honour the exit codes.
|
||||
|
||||
See `adapters/lit/` for the reference implementation.
|
||||
45
adapters/lit/README.md
Normal file
45
adapters/lit/README.md
Normal file
@@ -0,0 +1,45 @@
|
||||
# Lit reference adapter
|
||||
|
||||
Projects the technology-neutral IR (`ir/`) onto the Lit stack. This is the
|
||||
**reference** adapter — the contract every stack adapter implements lives in
|
||||
[`adapters/ADAPTER_CONTRACT.md`](../ADAPTER_CONTRACT.md).
|
||||
|
||||
Run it with **`make adapt-lit`** (`adapters/lit/adapt.mjs`).
|
||||
|
||||
## What it does
|
||||
|
||||
Per the contract, an adapter is **scaffold + drift-detect**, never a rewrite:
|
||||
|
||||
| Concern | Behaviour | Status |
|
||||
|---|---|---|
|
||||
| **Tokens** | **Fully generated** from `ir/tokens.json` into the `:root` block of `src/styles/colors_and_type.css`, between `@generated tokens` markers. Deterministic — re-running with an unchanged IR is a byte-identical no-op. The hand-authored type/utility CSS after the block is preserved. | **done (T06)** |
|
||||
| **New component** | Generate a `<wn-*>` Lit stub from the IR contract's prop→attribute map + a behaviour `TODO`. | T07 |
|
||||
| **Changed component** | Emit a **drift report** (`adapters/lit/drift/<Name>.md`) — never overwrite the hand-authored element. | T07 |
|
||||
|
||||
## Directionality
|
||||
|
||||
One-way: **React → `ir/` → Lit**. This adapter is downstream of the IR; it never
|
||||
writes back to `ir/` or to the React designbook. A change to the shared language is
|
||||
made in Claude Design and re-propagated (`make designbook-pull && make ir &&
|
||||
make adapt-lit`). See `.claude/rules/designbook-propagation.md`.
|
||||
|
||||
## Token regeneration is a visual change
|
||||
|
||||
Because tokens are fully generated, regenerating them can change rendered
|
||||
appearance when the canonical React designbook has moved (e.g. a font-stack or
|
||||
colour change). That makes the Playwright baselines diverge **by design** — it is a
|
||||
human review point, not an error:
|
||||
|
||||
```
|
||||
make adapt-lit # regenerates tokens
|
||||
pnpm test:visual # will fail where appearance changed
|
||||
# review the change, then if correct:
|
||||
pnpm test:visual:update # accept new baselines
|
||||
```
|
||||
|
||||
Never run `test:visual:update` to silence a token change without reviewing it — that
|
||||
defeats the parity gate (T08).
|
||||
|
||||
## Exit codes
|
||||
|
||||
`0` ok · `2` usage/config · `3` drift detected · `4` parity failure · `5` internal.
|
||||
94
adapters/lit/adapt.mjs
Normal file
94
adapters/lit/adapt.mjs
Normal file
@@ -0,0 +1,94 @@
|
||||
#!/usr/bin/env node
|
||||
// =============================================================
|
||||
// adapters/lit/adapt.mjs — the Lit reference adapter (WHYNOT-WP-0002)
|
||||
//
|
||||
// Projects the technology-neutral IR (ir/) onto the Lit stack. Per
|
||||
// adapters/ADAPTER_CONTRACT.md this is scaffold + drift-detect, never a rewrite:
|
||||
//
|
||||
// • tokens (T06) → FULLY generated, deterministic (this file, today)
|
||||
// • new component → stub (T07)
|
||||
// • changed component → drift report (T07), never an overwrite
|
||||
//
|
||||
// Exit codes: 0 ok · 2 usage/config · 3 drift · 4 parity · 5 internal.
|
||||
//
|
||||
// Run via `make adapt-lit`. Tokens regenerate the :root block of
|
||||
// src/styles/colors_and_type.css between generated markers; the hand-authored
|
||||
// type/utility CSS after it is preserved untouched. Re-running with an unchanged
|
||||
// ir/tokens.json is a no-op (byte-identical output).
|
||||
// =============================================================
|
||||
import { readFileSync, writeFileSync, existsSync } from "node:fs";
|
||||
import { join, dirname } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const REPO = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
|
||||
const TOKENS_JSON = join(REPO, "ir", "tokens.json");
|
||||
const TOKEN_CSS = join(REPO, "src", "styles", "colors_and_type.css");
|
||||
|
||||
const BEGIN = "/* @generated tokens — regenerated by `make adapt-lit` from ir/tokens.json. DO NOT EDIT. */";
|
||||
const END = "/* @end generated tokens */";
|
||||
|
||||
// ---------- tokens: ir/tokens.json (DTCG) → CSS custom properties ----------
|
||||
function refToVar(value) {
|
||||
// {group.key} alias → var(--key). Literals pass through unchanged.
|
||||
const m = /^\{[A-Za-z0-9]+\.([A-Za-z0-9-]+)\}$/.exec(String(value).trim());
|
||||
return m ? `var(--${m[1]})` : value;
|
||||
}
|
||||
|
||||
function renderRootBlock(tokens) {
|
||||
const lines = [BEGIN, ":root {"];
|
||||
for (const [group, entries] of Object.entries(tokens)) {
|
||||
lines.push(` /* ${group} */`);
|
||||
for (const [key, tok] of Object.entries(entries)) {
|
||||
if (key === "$type") continue;
|
||||
lines.push(` --${key}: ${refToVar(tok.$value)};`);
|
||||
}
|
||||
}
|
||||
lines.push("}", END);
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
// Replace the current :root token region with the freshly generated block.
|
||||
// First run (no markers): replace the first `:root { … }` via brace matching.
|
||||
// Later runs: replace strictly between the @generated markers.
|
||||
function spliceTokenBlock(css, block) {
|
||||
const b = css.indexOf(BEGIN);
|
||||
if (b !== -1) {
|
||||
const e = css.indexOf(END, b);
|
||||
if (e === -1) throw new Error("Found @generated marker without its @end — refusing to guess.");
|
||||
return css.slice(0, b) + block + css.slice(e + END.length);
|
||||
}
|
||||
const rootAt = css.indexOf(":root");
|
||||
if (rootAt === -1) throw new Error("No :root block in colors_and_type.css to replace.");
|
||||
let i = css.indexOf("{", rootAt), depth = 0;
|
||||
for (; i < css.length; i++) {
|
||||
if (css[i] === "{") depth++;
|
||||
else if (css[i] === "}" && --depth === 0) break;
|
||||
}
|
||||
return css.slice(0, rootAt) + block + css.slice(i + 1);
|
||||
}
|
||||
|
||||
function generateTokens() {
|
||||
if (!existsSync(TOKENS_JSON)) {
|
||||
console.error("No ir/tokens.json — run `make ir` first.");
|
||||
process.exit(2);
|
||||
}
|
||||
const tokens = JSON.parse(readFileSync(TOKENS_JSON, "utf8"));
|
||||
const block = renderRootBlock(tokens);
|
||||
const before = existsSync(TOKEN_CSS) ? readFileSync(TOKEN_CSS, "utf8") : `${block}\n`;
|
||||
const after = existsSync(TOKEN_CSS) ? spliceTokenBlock(before, block) : `${block}\n`;
|
||||
const count = block.split("\n").filter((l) => l.trim().startsWith("--")).length;
|
||||
if (after === before) {
|
||||
console.log(`tokens: up to date (${count} custom properties, no change).`);
|
||||
return;
|
||||
}
|
||||
writeFileSync(TOKEN_CSS, after);
|
||||
console.log(`tokens: regenerated ${count} custom properties → src/styles/colors_and_type.css`);
|
||||
}
|
||||
|
||||
function main() {
|
||||
generateTokens();
|
||||
// T07 will add: component stub scaffolding + drift reports here.
|
||||
console.log("adapt-lit: tokens done. (component scaffold + drift: T07)");
|
||||
}
|
||||
|
||||
main();
|
||||
18
designbook/.design-pull.json
Normal file
18
designbook/.design-pull.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"comment": "Globs (over Claude Design project paths) that designbook_pull.py mirrors into designbook/. Exclude _whynot-design-seed/** \u2014 it is a copy of THIS repo living in the cloud project and must not shadow the real source.",
|
||||
"include": [
|
||||
"ui_kits/**",
|
||||
"preview/**",
|
||||
"_ds_manifest.json",
|
||||
"_ds_bundle.js",
|
||||
"styles.css",
|
||||
"colors_and_type.css"
|
||||
],
|
||||
"exclude": [
|
||||
"_whynot-design-seed/**",
|
||||
"uploads/**",
|
||||
"_check/**",
|
||||
".thumbnail",
|
||||
"assets/**"
|
||||
]
|
||||
}
|
||||
6
designbook/.design-sync.json
Normal file
6
designbook/.design-sync.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"lastSyncAt": "2026-06-23T19:25:28Z",
|
||||
"remoteUpdatedAt": "2026-06-23T19:25:28Z",
|
||||
"projectId": "fb2eef8c-c1fc-4c75-bff4-3782552e5511",
|
||||
"projectName": "WhyNot Design System"
|
||||
}
|
||||
63
designbook/REACT_CANONICAL_DECISION.md
Normal file
63
designbook/REACT_CANONICAL_DECISION.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# Decision: the canonical React designbook (WHYNOT-WP-0002 · T04)
|
||||
|
||||
> **Status: RESOLVED.** The canonical React designbook **already exists** — it is
|
||||
> the **"WhyNot Design System"** project in Claude Design
|
||||
> (`fb2eef8c-c1fc-4c75-bff4-3782552e5511`, owner Bernd). The remaining concrete
|
||||
> action is the first `/design-sync` pull into `designbook/`.
|
||||
|
||||
## Correction to the earlier premise
|
||||
|
||||
An earlier draft of this doc assumed the Claude Design project held only the
|
||||
hand-authored **Lit** experiment, and therefore proposed *authoring* a new React
|
||||
designbook. That premise was wrong. Inspecting the project
|
||||
(`DesignSync.list_files` / `get_file`) shows it already contains a real React
|
||||
source:
|
||||
|
||||
- `ui_kits/whynot-control/*.jsx` — **React function components**: `Atoms.jsx`
|
||||
(`Eyebrow`, `Tag`, `Button`, `StageDot`, `Stamp`, `Icon`), `Chrome.jsx`,
|
||||
`Screens.jsx`, `DocView.jsx`, `data.jsx`. Props are expressed as JSX function
|
||||
parameters with defaults (e.g. `Button({ variant = 'secondary', icon, … })`).
|
||||
- `preview/comp-*.html` — per-component preview cards (the exemplar renders).
|
||||
- `styles.css`, `colors_and_type.css`, `_ds_manifest.json`, `_ds_bundle.js` —
|
||||
token/style layers + the grouping manifest.
|
||||
- `_whynot-design-seed/` — a full copy of this Lit repo that seeded the project.
|
||||
|
||||
So Claude Design is genuinely canonical today, and `/design-sync` provides the
|
||||
React origin from which Lit (and any future stack) is generated. This is the
|
||||
directionality the workplan already assumes: **React → IR → stacks.**
|
||||
|
||||
## Resolution
|
||||
|
||||
- **Canonical source:** the existing "WhyNot Design System" Claude Design project.
|
||||
No new designbook is authored; nothing is adopted from a foreign kit.
|
||||
- **How it reaches `designbook/`:** run **`make designbook-pull`**
|
||||
(`scripts/designbook_pull.py`) — it drives the local `claude` binary headless
|
||||
(`claude --print --permission-mode acceptEdits`) so the `DesignSync` fetch+write
|
||||
happens in a subprocess, and stamps freshness on success. (The bundled
|
||||
`/design-sync` skill goes the other way — it *pushes* repo→cloud — so it does not
|
||||
populate `designbook/`.) **Done 2026-06-23:** 44 files pulled (the `.jsx` ui-kit,
|
||||
`_ds_manifest.json`, style layers, and `preview/*.html` exemplars);
|
||||
`_whynot-design-seed/**` excluded.
|
||||
|
||||
## Consequence for the extractor (T05)
|
||||
|
||||
The React source is a **bundled `.jsx` ui-kit** (several components per file),
|
||||
**not** the per-component `.d.ts` + `.prompt.md` layout the T01 schema notes
|
||||
assumed. The neutral IR **contract schema is unaffected** (it describes the
|
||||
*output* shape), but `scripts/ir-extract.mjs` (T05) must:
|
||||
|
||||
- read component **props/defaults from the JSX function signatures** in
|
||||
`ui_kits/whynot-control/*.jsx` (not `.d.ts`),
|
||||
- take **grouping** from `_ds_manifest.json`,
|
||||
- take **exemplars** from `preview/comp-*.html`,
|
||||
- take **tokens** from the project's `styles.css` / `colors_and_type.css` (and/or
|
||||
the seed `tokens/*.json`), normalising to W3C DTCG.
|
||||
|
||||
This is recorded so T05 is designed against the real source layout.
|
||||
|
||||
## What unblocks the rest of the pipeline
|
||||
|
||||
1. Run `/design-sync` → `designbook/` receives the React mirror (more than README).
|
||||
2. Stamp + `make designbook-sync`.
|
||||
3. `make ir` (T05) extracts the IR from the `.jsx` ui-kit + previews + manifest.
|
||||
4. T06–T08 (Lit adapter + parity) then run against real data.
|
||||
1396
designbook/_ds_bundle.js
Normal file
1396
designbook/_ds_bundle.js
Normal file
File diff suppressed because it is too large
Load Diff
1
designbook/_ds_manifest.json
Normal file
1
designbook/_ds_manifest.json
Normal file
File diff suppressed because one or more lines are too long
293
designbook/colors_and_type.css
Normal file
293
designbook/colors_and_type.css
Normal file
@@ -0,0 +1,293 @@
|
||||
/* ============================================================
|
||||
WhyNot Design System — Colors & Type
|
||||
------------------------------------------------------------
|
||||
Neutral, mostly black/white. Color is used SPARINGLY — only
|
||||
one warm accent (annotation yellow) borrowed from the LEGO
|
||||
brick in the logo. The system favours light grey wireframe
|
||||
artefacts over heavy fills.
|
||||
============================================================ */
|
||||
|
||||
/* ---------- Fonts ----------
|
||||
System-font stacks: zero CDN dependency, zero offline issues, no CSP
|
||||
headaches, no FOUC. macOS gets SF Pro / SF Mono; Windows gets Segoe UI
|
||||
/ Cascadia; Linux falls through to its own ui-* alias. All three stacks
|
||||
ship as "quiet, document-quality" out of the box, which matches the
|
||||
system's intent (wireframe-leaning, not branded display type). */
|
||||
|
||||
:root {
|
||||
/* ---------- Base palette: neutrals ---------- */
|
||||
--ink: #0A0A0A; /* near-black, the only "fill" most of the time */
|
||||
--ink-2: #1F1F1F;
|
||||
--ink-3: #5C5C5C;
|
||||
--ink-4: #8A8A8A;
|
||||
--ink-5: #B5B5B3; /* placeholder text, wireframe labels */
|
||||
--line: #E5E5E2; /* default 1px wireframe rule */
|
||||
--line-strong: #C9C9C5; /* dividers between sections */
|
||||
--line-soft: #F0F0EC; /* hairline within a card */
|
||||
--paper: #FFFFFF; /* canvas */
|
||||
--paper-2: #FAFAF7; /* sheet, dim canvas */
|
||||
--paper-3: #F4F4EF; /* recessed surface, code block bg */
|
||||
|
||||
/* ---------- Foreground / background semantic ---------- */
|
||||
--fg-1: var(--ink);
|
||||
--fg-2: var(--ink-3);
|
||||
--fg-3: var(--ink-4);
|
||||
--fg-mute: var(--ink-5);
|
||||
--fg-on-dark: #FAFAF7;
|
||||
|
||||
--bg-1: var(--paper);
|
||||
--bg-2: var(--paper-2);
|
||||
--bg-3: var(--paper-3);
|
||||
--bg-invert: var(--ink);
|
||||
|
||||
--border: var(--line);
|
||||
--border-strong: var(--line-strong);
|
||||
--border-soft: var(--line-soft);
|
||||
|
||||
/* ---------- The single accent: annotation yellow ---------- */
|
||||
/* Lifted from the LEGO brick. Used as highlighter, "draft"
|
||||
stamp, signal-marker. Never as a button fill. */
|
||||
--hi: #FFE14A;
|
||||
--hi-2: #FFD400;
|
||||
--hi-ink: #1A1500; /* text on yellow */
|
||||
|
||||
/* ---------- Status (for prototype lifecycle, signal strength) ---------- */
|
||||
/* Kept deliberately desaturated so they read as labels, not UI. */
|
||||
--status-raw: #B5B5B3; /* S0 — no signal */
|
||||
--status-weak: #8A8A8A; /* S1 — weak signal */
|
||||
--status-medium: #5C5C5C; /* S2 — medium signal */
|
||||
--status-strong: #0A0A0A; /* S3 — strong signal */
|
||||
--status-commercial: #FFD400; /* S4 — commercial */
|
||||
|
||||
/* ---------- Functional status (for UI feedback: errors, warnings, success, info) ----------
|
||||
Distinct from signal strength above. Used as 2px borders, small dots, and icon tints —
|
||||
NEVER as fills or button backgrounds. Tints (e.g. --status-error-bg) are barely-saturated
|
||||
paper tones for banner backgrounds when the message must really attract the eye.
|
||||
If even this feels too colourful, set the *-fg tokens to var(--ink) — the system still
|
||||
reads correctly with the dots/borders alone. */
|
||||
--status-error: #B33A2E; /* muted brick red */
|
||||
--status-error-bg: #FCF3F1;
|
||||
--status-warn: #C28000; /* deep mustard — keeps lineage with --hi */
|
||||
--status-warn-bg: #FFFCEB;
|
||||
--status-success: #2F6B3A; /* muted forest */
|
||||
--status-success-bg: #F2F7F2;
|
||||
--status-info: #2E5C8A; /* muted ink-blue */
|
||||
--status-info-bg: #F2F5FA;
|
||||
|
||||
/* ---------- Type families ---------- */
|
||||
--ff-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* @kind font */
|
||||
--ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* @kind font */
|
||||
--ff-serif: ui-serif, Georgia, "Times New Roman", serif; /* @kind font */
|
||||
|
||||
/* ---------- Type scale (modular, ~1.2) ---------- */
|
||||
--fs-xs: 11px;
|
||||
--fs-sm: 13px;
|
||||
--fs-base: 15px;
|
||||
--fs-md: 17px;
|
||||
--fs-lg: 20px;
|
||||
--fs-xl: 24px;
|
||||
--fs-2xl: 32px;
|
||||
--fs-3xl: 44px;
|
||||
--fs-4xl: 64px;
|
||||
--fs-5xl: 96px;
|
||||
|
||||
--lh-tight: 1.05; /* @kind font */
|
||||
--lh-snug: 1.25; /* @kind font */
|
||||
--lh-base: 1.5; /* @kind font */
|
||||
--lh-loose: 1.7; /* @kind font */
|
||||
|
||||
--tr-tight: -0.02em;
|
||||
--tr-snug: -0.01em;
|
||||
--tr-base: 0em;
|
||||
--tr-mono: 0.02em;
|
||||
--tr-label: 0.08em; /* uppercase eyebrow labels */
|
||||
|
||||
/* ---------- Spacing (4px base) ---------- */
|
||||
--sp-1: 4px;
|
||||
--sp-2: 8px;
|
||||
--sp-3: 12px;
|
||||
--sp-4: 16px;
|
||||
--sp-5: 24px;
|
||||
--sp-6: 32px;
|
||||
--sp-7: 48px;
|
||||
--sp-8: 64px;
|
||||
--sp-9: 96px;
|
||||
--sp-10: 128px;
|
||||
|
||||
/* ---------- Radii — small, mostly square ---------- */
|
||||
--r-0: 0px;
|
||||
--r-1: 2px;
|
||||
--r-2: 4px;
|
||||
--r-3: 8px;
|
||||
--r-pill: 999px;
|
||||
|
||||
/* ---------- Elevation — almost none. This is a wireframe system. ---------- */
|
||||
--shadow-0: none;
|
||||
--shadow-1: 0 1px 0 var(--line);
|
||||
--shadow-2: 0 1px 0 var(--line-strong);
|
||||
--shadow-3: 0 4px 12px -6px rgba(10,10,10,0.10);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Semantic element styles
|
||||
============================================================ */
|
||||
|
||||
html {
|
||||
font-family: var(--ff-sans);
|
||||
font-size: var(--fs-base);
|
||||
line-height: var(--lh-base);
|
||||
color: var(--fg-1);
|
||||
background: var(--bg-1);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-feature-settings: "ss01", "cv11";
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
/* ---------- Headings ---------- */
|
||||
h1, .h1 {
|
||||
font: 600 var(--fs-3xl)/var(--lh-tight) var(--ff-sans);
|
||||
letter-spacing: var(--tr-tight);
|
||||
margin: 0 0 var(--sp-5);
|
||||
color: var(--fg-1);
|
||||
}
|
||||
h2, .h2 {
|
||||
font: 500 var(--fs-2xl)/var(--lh-snug) var(--ff-sans);
|
||||
letter-spacing: var(--tr-snug);
|
||||
margin: 0 0 var(--sp-4);
|
||||
}
|
||||
h3, .h3 {
|
||||
font: 500 var(--fs-xl)/var(--lh-snug) var(--ff-sans);
|
||||
letter-spacing: var(--tr-snug);
|
||||
margin: 0 0 var(--sp-3);
|
||||
}
|
||||
h4, .h4 {
|
||||
font: 500 var(--fs-lg)/var(--lh-snug) var(--ff-sans);
|
||||
margin: 0 0 var(--sp-2);
|
||||
}
|
||||
h5, .h5 {
|
||||
font: 500 var(--fs-md)/var(--lh-snug) var(--ff-sans);
|
||||
margin: 0 0 var(--sp-2);
|
||||
}
|
||||
|
||||
/* ---------- Display (for hero / title slides) ---------- */
|
||||
.display-1 {
|
||||
font: 300 var(--fs-5xl)/0.95 var(--ff-sans);
|
||||
letter-spacing: -0.035em;
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.display-2 {
|
||||
font: 400 var(--fs-4xl)/1.0 var(--ff-sans);
|
||||
letter-spacing: var(--tr-tight);
|
||||
}
|
||||
|
||||
/* ---------- Body ---------- */
|
||||
p {
|
||||
margin: 0 0 var(--sp-4);
|
||||
line-height: var(--lh-base);
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.lead {
|
||||
font-size: var(--fs-md);
|
||||
line-height: 1.55;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
small, .small {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
|
||||
/* ---------- Eyebrow / uppercase labels (very common in this system) ---------- */
|
||||
.eyebrow,
|
||||
.label {
|
||||
font: 500 var(--fs-xs)/1.2 var(--ff-mono);
|
||||
letter-spacing: var(--tr-label);
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-3);
|
||||
}
|
||||
|
||||
/* ---------- Code / mono ---------- */
|
||||
code, kbd, samp, pre, .mono {
|
||||
font-family: var(--ff-mono);
|
||||
font-size: 0.92em;
|
||||
letter-spacing: var(--tr-mono);
|
||||
}
|
||||
code {
|
||||
background: var(--bg-3);
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--r-1);
|
||||
color: var(--ink-2);
|
||||
}
|
||||
pre {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--border);
|
||||
padding: var(--sp-4);
|
||||
overflow-x: auto;
|
||||
border-radius: var(--r-2);
|
||||
font-size: var(--fs-sm);
|
||||
line-height: var(--lh-snug);
|
||||
}
|
||||
pre code { background: none; padding: 0; }
|
||||
|
||||
/* ---------- Editorial serif moments ---------- */
|
||||
.serif { font-family: var(--ff-serif); }
|
||||
.serif-quote {
|
||||
font: 400 italic var(--fs-xl)/1.4 var(--ff-serif);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
|
||||
/* ---------- Links ---------- */
|
||||
a {
|
||||
color: var(--fg-1);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--border-strong);
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-thickness: 1px;
|
||||
transition: text-decoration-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration-color: var(--fg-1);
|
||||
}
|
||||
|
||||
/* ---------- HR ---------- */
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: var(--sp-5) 0;
|
||||
}
|
||||
|
||||
/* ---------- Highlighter (the one place yellow appears in body copy) ---------- */
|
||||
mark, .mark {
|
||||
background: var(--hi);
|
||||
color: var(--hi-ink);
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
/* ---------- Tables (used in templates) ---------- */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
th {
|
||||
font-weight: 500;
|
||||
color: var(--fg-2);
|
||||
font-family: var(--ff-mono);
|
||||
font-size: var(--fs-xs);
|
||||
letter-spacing: var(--tr-label);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ---------- Selection ---------- */
|
||||
::selection { background: var(--hi); color: var(--hi-ink); }
|
||||
36
designbook/preview/brand-iconography.html
Normal file
36
designbook/preview/brand-iconography.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Brand" name="Brand · Iconography" subtitle="Lucide · 1.5px stroke · 16 of set" viewport="700x240" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Iconography — Lucide @ 1.5px</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 22px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px 12px; }
|
||||
.cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border-soft); border-radius: 2px; }
|
||||
.cell svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; }
|
||||
.cell .n { font: 500 10px var(--ff-mono); color: var(--fg-3); letter-spacing: 0.04em; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Lucide · stroke-width 1.5 · currentColor</div>
|
||||
<div class="grid">
|
||||
<div class="cell"><i data-lucide="inbox"></i><span class="n">inbox</span></div>
|
||||
<div class="cell"><i data-lucide="lightbulb"></i><span class="n">lightbulb</span></div>
|
||||
<div class="cell"><i data-lucide="flask-conical"></i><span class="n">flask</span></div>
|
||||
<div class="cell"><i data-lucide="activity"></i><span class="n">signal</span></div>
|
||||
<div class="cell"><i data-lucide="users"></i><span class="n">beta</span></div>
|
||||
<div class="cell"><i data-lucide="git-branch"></i><span class="n">branch</span></div>
|
||||
<div class="cell"><i data-lucide="check-square"></i><span class="n">decision</span></div>
|
||||
<div class="cell"><i data-lucide="archive"></i><span class="n">park</span></div>
|
||||
<div class="cell"><i data-lucide="arrow-right"></i><span class="n">promote</span></div>
|
||||
<div class="cell"><i data-lucide="x"></i><span class="n">reject</span></div>
|
||||
<div class="cell"><i data-lucide="search"></i><span class="n">search</span></div>
|
||||
<div class="cell"><i data-lucide="filter"></i><span class="n">filter</span></div>
|
||||
<div class="cell"><i data-lucide="file-text"></i><span class="n">doc</span></div>
|
||||
<div class="cell"><i data-lucide="folder"></i><span class="n">folder</span></div>
|
||||
<div class="cell"><i data-lucide="circle-help"></i><span class="n">question</span></div>
|
||||
<div class="cell"><i data-lucide="circle-alert"></i><span class="n">caveat</span></div>
|
||||
</div>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<script>lucide.createIcons();</script>
|
||||
</body></html>
|
||||
26
designbook/preview/brand-lockups.html
Normal file
26
designbook/preview/brand-lockups.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Brand" name="Brand · Lockups" subtitle="Mark + slug · 3 sizes" viewport="700x260" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Logo Lockups</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 22px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr; gap: 18px; align-content: start; }
|
||||
.lock { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 4px; }
|
||||
.lock img { width: 28px; height: 28px; }
|
||||
.lock .word { font: 500 18px var(--ff-sans); letter-spacing: -0.01em; }
|
||||
.lock .org { font: 400 14px var(--ff-mono); color: var(--fg-3); letter-spacing: 0.02em; }
|
||||
.lock .sep { color: var(--ink-5); }
|
||||
.lock.lg img { width: 36px; height: 36px; }
|
||||
.lock.lg .word { font-size: 22px; }
|
||||
.lock.foot { background: var(--ink); border-color: var(--ink); }
|
||||
.lock.foot img { filter: invert(1); }
|
||||
.lock.foot .word, .lock.foot .org, .lock.foot .sep { color: var(--paper); }
|
||||
.lock.foot .org, .lock.foot .sep { opacity: 0.55; }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Lockups — mark + wordmark + organisation slug</div>
|
||||
<div class="lock lg"><img src="../assets/whynot-logo.png" alt=""><span class="word">whynot</span><span class="sep">/</span><span class="org">control</span></div>
|
||||
<div class="lock"><img src="../assets/whynot-logo.png" alt=""><span class="word">whynot</span><span class="sep">/</span><span class="org">prototypes</span></div>
|
||||
<div class="lock foot"><img src="../assets/whynot-logo.png" alt=""><span class="word">whynot</span><span class="sep">·</span><span class="org">2026 · A1 incubating</span></div>
|
||||
</body></html>
|
||||
21
designbook/preview/brand-logo.html
Normal file
21
designbook/preview/brand-logo.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Brand" name="Brand · Logo" subtitle="Primary · inverted · ?! wordmark" viewport="700x220" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Logo</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 20px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: center; }
|
||||
.cell { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; }
|
||||
.cell.dark { background: var(--ink); border-radius: 4px; }
|
||||
.cell img { width: 120px; height: 120px; object-fit: contain; }
|
||||
.cell.dark img { filter: invert(1); }
|
||||
.cell .lbl { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.cell.dark .lbl { color: var(--fg-on-dark); opacity: 0.55; }
|
||||
.wordmark { font: 600 56px/1 var(--ff-sans); letter-spacing: -0.04em; color: var(--ink); }
|
||||
.wordmark .q { color: var(--ink); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="cell"><img src="../assets/whynot-logo.png" alt="whynot logo"><span class="lbl">Primary · black on white</span></div>
|
||||
<div class="cell dark"><img src="../assets/whynot-logo.png" alt="whynot logo"><span class="lbl">Inverted · white on black</span></div>
|
||||
<div class="cell"><div class="wordmark">?!</div><span class="lbl">Mini · ?! wordmark (favicon size)</span></div>
|
||||
</body></html>
|
||||
43
designbook/preview/brand-wireframe-motif.html
Normal file
43
designbook/preview/brand-wireframe-motif.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Brand" name="Brand · Wireframe Motif" subtitle="Graph paper + draft stamp" viewport="700x240" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Wireframe Motif</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 20px; background: var(--paper); margin: 0; }
|
||||
.frame {
|
||||
background: var(--paper-2);
|
||||
background-image:
|
||||
linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
|
||||
background-size: 16px 16px;
|
||||
border: 1px solid var(--border);
|
||||
padding: 22px 24px;
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 24px;
|
||||
min-height: 200px;
|
||||
}
|
||||
.frame .stamp { background: var(--hi); color: var(--hi-ink); padding: 6px 10px 4px; font: 500 10px/1 var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-1.5deg); display: inline-block; align-self: flex-start; }
|
||||
.frame .col { display: flex; flex-direction: column; gap: 12px; }
|
||||
.frame h4 { font: 500 18px/1.2 var(--ff-sans); margin: 0; }
|
||||
.frame .l { height: 10px; background: var(--ink-5); border-radius: 2px; opacity: 0.6; }
|
||||
.frame .l.s { width: 50% } .frame .l.m { width: 75% }
|
||||
.frame .l.x { width: 30% }
|
||||
.frame .meta { font: 500 11px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<div class="col">
|
||||
<span class="stamp">Draft · WNO-014</span>
|
||||
<span class="meta">Stage 2 · Prototype</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4>A field-notebook for catching weird ideas before they evaporate.</h4>
|
||||
<div class="l m"></div>
|
||||
<div class="l s"></div>
|
||||
<div class="l x"></div>
|
||||
<div class="l m"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
33
designbook/preview/colors-accent.html
Normal file
33
designbook/preview/colors-accent.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Colors" name="Colors · Accent" subtitle="Annotation yellow — highlighter only" viewport="700x200" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Accent — Annotation Yellow</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
|
||||
.sw-row { display: flex; gap: 10px; }
|
||||
.sw { width: 84px; height: 64px; padding: 8px; display: flex; flex-direction: column; justify-content: flex-end; }
|
||||
.sw .name { font: 500 11px var(--ff-mono); }
|
||||
.sw .hex { font: 400 10px var(--ff-mono); color: var(--hi-ink); opacity: 0.6; }
|
||||
.usage { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
|
||||
.usage .row { display: flex; gap: 10px; align-items: baseline; }
|
||||
.stamp { display:inline-block; background: var(--hi); color: var(--hi-ink); padding: 4px 10px; font: 500 10px var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-2deg); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div>
|
||||
<div class="row-label">Accent — used as highlighter, never as button fill</div>
|
||||
<div class="sw-row">
|
||||
<div class="sw" style="background:#FFE14A"><span class="name">--hi</span><span class="hex">#FFE14A</span></div>
|
||||
<div class="sw" style="background:#FFD400"><span class="name">--hi-2</span><span class="hex">#FFD400</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row-label">Usage</div>
|
||||
<div class="usage">
|
||||
<div class="row"><span>Signals are <mark>evidence</mark>, not vibes.</span></div>
|
||||
<div class="row"><span class="stamp">Draft · S2</span></div>
|
||||
<div class="row" style="color: var(--fg-2); font-family: var(--ff-mono); font-size: 11px;">— only for marker / annotation / status</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
25
designbook/preview/colors-borders.html
Normal file
25
designbook/preview/colors-borders.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Colors" name="Colors · Borders" subtitle="Hairline · default · strong" viewport="700x180" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Borders & Lines</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.cell { background: var(--paper); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
|
||||
.cell .name { font: 500 12px var(--ff-mono); }
|
||||
.cell .hex { font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
.demo { height: 32px; display: flex; align-items: center; padding-left: 10px; font-size: 12px; color: var(--fg-2); }
|
||||
.d1 { border: 1px solid var(--border-soft); }
|
||||
.d2 { border: 1px solid var(--border); }
|
||||
.d3 { border: 1px solid var(--border-strong); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Lines — hairline · default · strong</div>
|
||||
<div class="grid">
|
||||
<div class="cell"><div class="demo d1">soft hairline</div><span class="name">--border-soft</span><span class="hex">#F0F0EC · within cards</span></div>
|
||||
<div class="cell"><div class="demo d2">default border</div><span class="name">--border</span><span class="hex">#E5E5E2 · cards, inputs</span></div>
|
||||
<div class="cell"><div class="demo d3">strong divider</div><span class="name">--border-strong</span><span class="hex">#C9C9C5 · sections</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
36
designbook/preview/colors-neutrals.html
Normal file
36
designbook/preview/colors-neutrals.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Colors" name="Colors · Neutrals" subtitle="Ink scale + paper surfaces" viewport="700x290" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Neutrals — Paper & Ink</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); }
|
||||
.group { display: flex; flex-direction: column; gap: 18px; }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
|
||||
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
|
||||
.sw { border: 1px solid var(--border); padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 72px; }
|
||||
.sw .name { font: 500 12px var(--ff-mono); letter-spacing: 0.02em; }
|
||||
.sw .hex { font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="group">
|
||||
<div>
|
||||
<div class="row-label">Ink — text & fills</div>
|
||||
<div class="swatches">
|
||||
<div class="sw" style="background:#0A0A0A;color:#FAFAF7"><span class="name">--ink</span><span class="hex" style="color:#9A9A98">#0A0A0A</span></div>
|
||||
<div class="sw" style="background:#1F1F1F;color:#FAFAF7"><span class="name">--ink-2</span><span class="hex" style="color:#9A9A98">#1F1F1F</span></div>
|
||||
<div class="sw" style="background:#5C5C5C;color:#FAFAF7"><span class="name">--ink-3</span><span class="hex" style="color:#C9C9C5">#5C5C5C</span></div>
|
||||
<div class="sw" style="background:#8A8A8A;color:#FAFAF7"><span class="name">--ink-4</span><span class="hex" style="color:#E5E5E2">#8A8A8A</span></div>
|
||||
<div class="sw" style="background:#B5B5B3"><span class="name">--ink-5</span><span class="hex">#B5B5B3</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row-label">Paper — surfaces</div>
|
||||
<div class="swatches">
|
||||
<div class="sw" style="background:#FFFFFF"><span class="name">--paper</span><span class="hex">#FFFFFF</span></div>
|
||||
<div class="sw" style="background:#FAFAF7"><span class="name">--paper-2</span><span class="hex">#FAFAF7</span></div>
|
||||
<div class="sw" style="background:#F4F4EF"><span class="name">--paper-3</span><span class="hex">#F4F4EF</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
25
designbook/preview/colors-signal.html
Normal file
25
designbook/preview/colors-signal.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Colors" name="Colors · Signal Strength" subtitle="S0–S4 ramp, S4 uses accent" viewport="700x220" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Signal Strength Ramp</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 26px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||||
.ramp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
|
||||
.step { border: 1px solid var(--border); padding: 12px 12px 14px; min-height: 96px; display: flex; flex-direction: column; gap: 6px; }
|
||||
.step .dot { width: 14px; height: 14px; border-radius: 999px; }
|
||||
.step .lvl { font: 500 11px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.step .name { font: 500 13px var(--ff-sans); color: var(--fg-1); }
|
||||
.step .meaning { font: 400 11px/1.35 var(--ff-sans); color: var(--fg-2); margin-top: auto; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Signal strength — desaturated, S4 only uses the accent</div>
|
||||
<div class="ramp">
|
||||
<div class="step"><span class="dot" style="background:#B5B5B3"></span><span class="lvl">S0</span><span class="name">No signal</span><span class="meaning">No observable interest or usefulness.</span></div>
|
||||
<div class="step"><span class="dot" style="background:#8A8A8A"></span><span class="lvl">S1</span><span class="name">Weak</span><span class="meaning">Some curiosity or informal interest.</span></div>
|
||||
<div class="step"><span class="dot" style="background:#5C5C5C"></span><span class="lvl">S2</span><span class="name">Medium</span><span class="meaning">Repeated interest, specific feedback.</span></div>
|
||||
<div class="step"><span class="dot" style="background:#0A0A0A"></span><span class="lvl">S3</span><span class="name">Strong</span><span class="meaning">Action, return, referral, contribution.</span></div>
|
||||
<div class="step"><span class="dot" style="background:#FFD400"></span><span class="lvl">S4</span><span class="name">Commercial</span><span class="meaning">Payment, pre-order, budget commit.</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
31
designbook/preview/colors-status-functional.html
Normal file
31
designbook/preview/colors-status-functional.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Colors" name="Colors · Functional Status" subtitle="Error / warn / success / info — borders & dots only" viewport="700x280" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Functional Status Colours</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
|
||||
.sw { padding: 12px 12px 14px; min-height: 92px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); border-left: 2px solid; position: relative; }
|
||||
.sw .dot { width: 10px; height: 10px; border-radius: 999px; position: absolute; right: 12px; top: 12px; }
|
||||
.sw .name { font: 500 13px var(--ff-sans); color: var(--fg-1); }
|
||||
.sw .tok { font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
.sw .hex { font: 400 11px var(--ff-mono); color: var(--fg-3); margin-top: auto; }
|
||||
.e { border-color: var(--status-error); } .e .dot { background: var(--status-error); }
|
||||
.w { border-color: var(--status-warn); background: var(--status-warn-bg); }
|
||||
.w .dot { background: var(--status-warn); }
|
||||
.s { border-color: var(--status-success); } .s .dot { background: var(--status-success); }
|
||||
.i { border-color: var(--status-info); } .i .dot { background: var(--status-info); }
|
||||
.caveat { font: 400 11px/1.45 var(--ff-mono); color: var(--fg-3); margin-top: 4px; max-width: 64ch; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Functional status — borders + dots only, never fills</div>
|
||||
<div class="grid">
|
||||
<div class="sw e"><span class="dot"></span><span class="name">Error</span><span class="tok">--status-error</span><span class="hex">#B33A2E · brick red</span></div>
|
||||
<div class="sw w"><span class="dot"></span><span class="name">Warning</span><span class="tok">--status-warn</span><span class="hex">#C28000 · deep mustard</span></div>
|
||||
<div class="sw s"><span class="dot"></span><span class="name">Success</span><span class="tok">--status-success</span><span class="hex">#2F6B3A · muted forest</span></div>
|
||||
<div class="sw i"><span class="dot"></span><span class="name">Info</span><span class="tok">--status-info</span><span class="hex">#2E5C8A · muted ink-blue</span></div>
|
||||
</div>
|
||||
<p class="caveat">Distinct from S0–S4 signal strength. Use sparingly: a 2px left-border on banners, a small dot next to status text, or as <code class="mono">currentColor</code> on an icon. If even this feels too colourful for a context, fall back to ink and the existing yellow accent — the system still parses without these.</p>
|
||||
</body></html>
|
||||
40
designbook/preview/comp-buttons.html
Normal file
40
designbook/preview/comp-buttons.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Buttons" subtitle="Primary · secondary · ghost" viewport="700x240" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Buttons</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 28px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(4, max-content); gap: 12px 14px; align-items: center; }
|
||||
.col-h { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.row-h { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.btn { font: 500 13px var(--ff-sans); letter-spacing: -0.005em; padding: 9px 16px; border-radius: var(--r-2); border: 1px solid transparent; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
|
||||
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.btn.primary.hover { background: var(--ink-2); border-color: var(--ink-2); }
|
||||
.btn.primary.disabled { background: var(--ink-5); border-color: var(--ink-5); color: var(--paper); cursor: not-allowed; }
|
||||
.btn.secondary { background: var(--paper); color: var(--ink); border-color: var(--border); }
|
||||
.btn.secondary.hover { border-color: var(--ink); }
|
||||
.btn.secondary.disabled { color: var(--ink-5); border-color: var(--border); cursor: not-allowed; }
|
||||
.btn.ghost { background: transparent; color: var(--ink); border-color: transparent; padding-left: 8px; padding-right: 8px; }
|
||||
.btn.ghost.hover { background: var(--paper-3); }
|
||||
.btn.ghost.disabled { color: var(--ink-5); cursor: not-allowed; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Buttons — primary · secondary · ghost</div>
|
||||
<div class="grid">
|
||||
<div></div><div class="col-h">Default</div><div class="col-h">Hover</div><div class="col-h">Disabled</div>
|
||||
<div class="row-h">Primary</div>
|
||||
<button class="btn primary">Promote prototype</button>
|
||||
<button class="btn primary hover">Promote prototype</button>
|
||||
<button class="btn primary disabled">Promote prototype</button>
|
||||
<div class="row-h">Secondary</div>
|
||||
<button class="btn secondary">Park</button>
|
||||
<button class="btn secondary hover">Park</button>
|
||||
<button class="btn secondary disabled">Park</button>
|
||||
<div class="row-h">Ghost</div>
|
||||
<button class="btn ghost">View signal</button>
|
||||
<button class="btn ghost hover">View signal</button>
|
||||
<button class="btn ghost disabled">View signal</button>
|
||||
</div>
|
||||
</body></html>
|
||||
38
designbook/preview/comp-empty-placeholder.html
Normal file
38
designbook/preview/comp-empty-placeholder.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Empty State" subtitle="Dashed border · wireframe lines" viewport="700x220" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Empty / Placeholder State</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
|
||||
.empty { border: 1px dashed var(--border-strong); padding: 24px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--fg-3); }
|
||||
.empty .ttl { font: 500 13px var(--ff-sans); color: var(--fg-2); }
|
||||
.empty .sub { font: 400 12px/1.4 var(--ff-mono); color: var(--fg-3); }
|
||||
.empty .cta { font: 500 12px var(--ff-mono); color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }
|
||||
.wire { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border); }
|
||||
.wire .l { height: 10px; background: var(--paper-3); border-radius: 2px; }
|
||||
.wire .l.s { width: 60% }
|
||||
.wire .l.m { width: 80% }
|
||||
.wire .l.x { width: 40% }
|
||||
</style></head>
|
||||
<body>
|
||||
<div>
|
||||
<div class="row-label">Empty — dashed border + caption</div>
|
||||
<div class="empty">
|
||||
<div class="ttl">No signals yet.</div>
|
||||
<div class="sub">Lack of signal is also information.</div>
|
||||
<a href="#" class="cta">Record a signal →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row-label">Wireframe — placeholder content</div>
|
||||
<div class="wire">
|
||||
<div class="l m"></div>
|
||||
<div class="l s"></div>
|
||||
<div class="l x"></div>
|
||||
<div class="l m"></div>
|
||||
<div class="l s"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
30
designbook/preview/comp-inputs.html
Normal file
30
designbook/preview/comp-inputs.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Inputs" subtitle="Default · focus · error" viewport="700x280" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Inputs & Form Fields</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 26px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
|
||||
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
|
||||
.field label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.input { font: 400 14px var(--ff-sans); padding: 10px 12px; border: 1px solid var(--border); background: var(--paper); border-radius: var(--r-1); color: var(--fg-1); outline: none; }
|
||||
.input.focus { border-color: var(--ink); }
|
||||
.input.error { border-color: var(--ink); border-bottom-width: 2px; }
|
||||
.input::placeholder { color: var(--ink-5); }
|
||||
.help { font-size: 11px; color: var(--fg-3); font-family: var(--ff-mono); }
|
||||
.err { font-size: 11px; color: var(--ink); font-family: var(--ff-mono); }
|
||||
textarea.input { resize: none; min-height: 64px; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div>
|
||||
<div class="row-label">Text · Default / Focus</div>
|
||||
<div class="field"><label>Prototype name</label><input class="input" placeholder="e.g. relevant-coronapolitics-timeline" /></div>
|
||||
<div class="field"><label>One-line pitch</label><input class="input focus" value="Discover the weird and the useful." /><span class="help">120 char limit · plain sentence</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row-label">Textarea · Error</div>
|
||||
<div class="field"><label>Learning question</label><textarea class="input">What would we need to learn to know whether this idea deserves another step?</textarea></div>
|
||||
<div class="field"><label>Smallest useful test</label><input class="input error" value="" /><span class="err">Required — describe in one sentence.</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
44
designbook/preview/comp-labels-tags.html
Normal file
44
designbook/preview/comp-labels-tags.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Labels & Tags" subtitle="Stage tags · signal dots" viewport="700x200" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Labels & Tags</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||||
.stack { display: flex; flex-direction: column; gap: 18px; }
|
||||
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
||||
.tag { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--fg-2); background: var(--paper); }
|
||||
.tag.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
|
||||
.tag.draft { background: var(--hi); color: var(--hi-ink); border-color: transparent; }
|
||||
.stage { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; }
|
||||
.stage .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
|
||||
.stage.s0 .dot { background: #B5B5B3 } .stage.s1 .dot { background: #8A8A8A }
|
||||
.stage.s2 .dot { background: #5C5C5C } .stage.s3 .dot { background: #0A0A0A }
|
||||
.stage.s4 .dot { background: #FFD400 }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="stack">
|
||||
<div>
|
||||
<div class="row-label">Tags — default · active · draft</div>
|
||||
<div class="row">
|
||||
<span class="tag">Raw Idea</span>
|
||||
<span class="tag">Prototype Candidate</span>
|
||||
<span class="tag active">Experiment</span>
|
||||
<span class="tag">Promotion Candidate</span>
|
||||
<span class="tag">Parked</span>
|
||||
<span class="tag draft">Draft</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row-label">Signal dots — inline indicator</div>
|
||||
<div class="row">
|
||||
<span class="stage s0"><span class="dot"></span>S0 · No signal</span>
|
||||
<span class="stage s1"><span class="dot"></span>S1 · Weak</span>
|
||||
<span class="stage s2"><span class="dot"></span>S2 · Medium</span>
|
||||
<span class="stage s3"><span class="dot"></span>S3 · Strong</span>
|
||||
<span class="stage s4"><span class="dot"></span>S4 · Commercial</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
85
designbook/preview/comp-left-nav.html
Normal file
85
designbook/preview/comp-left-nav.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Left Navigation" subtitle="Grouped sidebar · active state · minimal variant" viewport="700x420" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Left Navigation</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 20px; background: var(--paper); display: flex; gap: 28px; align-items: stretch; }
|
||||
.frame { display: flex; flex-direction: column; gap: 8px; }
|
||||
.frame > .cap { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; }
|
||||
.leftnav {
|
||||
width: 220px; box-sizing: border-box;
|
||||
display: flex; flex-direction: column; gap: 28px;
|
||||
padding: 24px 8px 24px 12px;
|
||||
border-right: 1px solid var(--line-soft);
|
||||
min-height: 360px;
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
|
||||
.brand img { width: 20px; height: 20px; }
|
||||
.brand .nm { font: 500 14px var(--ff-sans); color: var(--fg-1); }
|
||||
.brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
|
||||
.body { display: flex; flex-direction: column; gap: 28px; flex: 1; }
|
||||
.section { display: flex; flex-direction: column; gap: 8px; }
|
||||
.section .lbl { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; opacity: 0.7; }
|
||||
.items { display: flex; flex-direction: column; gap: 1px; }
|
||||
.item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 10px; border-left: 2px solid transparent;
|
||||
color: var(--fg-3); font: 400 13px var(--ff-sans); cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.item .ic { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }
|
||||
.item .t { flex: 1; }
|
||||
.item .n { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--ink-5); }
|
||||
.item.active { color: var(--fg-1); font-weight: 500; border-left-color: var(--ink); }
|
||||
.item.active .n { color: var(--fg-3); }
|
||||
.item.doc { font: 400 12px var(--ff-mono); }
|
||||
.footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 400 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.footer .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<span class="cap">Default · grouped, with active state</span>
|
||||
<nav class="leftnav">
|
||||
<div class="brand"><img src="../assets/whynot-logo.png" alt=""><span class="nm">whynot</span><span class="slug">/ control</span></div>
|
||||
<div class="body">
|
||||
<div class="section">
|
||||
<span class="lbl">Work</span>
|
||||
<div class="items">
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg><span class="t">Inbox</span><span class="n">7</span></a>
|
||||
<a class="item active"><svg class="ic" viewBox="0 0 24 24"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg><span class="t">Prototypes</span><span class="n">4</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.5.5 0 0 1-.96 0L9.24 2.18a.5.5 0 0 0-.96 0l-2.35 8.36A2 2 0 0 1 4 12H2"/></svg><span class="t">Signals</span><span class="n">12</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg><span class="t">Betas</span><span class="n">1</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg><span class="t">Decisions</span><span class="n">3</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<span class="lbl">Control docs</span>
|
||||
<div class="items">
|
||||
<a class="item doc"><span class="t">INTENT.md</span></a>
|
||||
<a class="item doc"><span class="t">SCOPE.md</span></a>
|
||||
<a class="item doc"><span class="t">OPERATING_MODEL.md</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer"><span class="dot"></span><span>A1 · Incubating</span></div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="frame">
|
||||
<span class="cap">Minimal · no brand, no icons</span>
|
||||
<nav class="leftnav" style="min-height: 360px;">
|
||||
<div class="body">
|
||||
<div class="section">
|
||||
<span class="lbl">Navigate</span>
|
||||
<div class="items">
|
||||
<a class="item active"><span class="t">Overview</span></a>
|
||||
<a class="item"><span class="t">Prototypes</span><span class="n">4</span></a>
|
||||
<a class="item"><span class="t">Signals</span><span class="n">12</span></a>
|
||||
<a class="item"><span class="t">Settings</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</body></html>
|
||||
30
designbook/preview/comp-pipeline.html
Normal file
30
designbook/preview/comp-pipeline.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Pipeline" subtitle="Lifecycle stage tracker" viewport="700x180" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Pipeline / Lifecycle</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 28px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 22px; }
|
||||
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
|
||||
.stage { padding: 10px 12px 14px; border-top: 2px solid var(--border); display: flex; flex-direction: column; gap: 4px; position: relative; }
|
||||
.stage.done { border-top-color: var(--ink); }
|
||||
.stage.active { border-top-color: var(--hi-2); }
|
||||
.stage .num { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.stage.done .num, .stage.active .num { color: var(--fg-1); }
|
||||
.stage .name { font: 500 14px/1.25 var(--ff-sans); color: var(--fg-1); }
|
||||
.stage.pending .name { color: var(--fg-3); }
|
||||
.stage .meta { font: 400 11px/1.35 var(--ff-mono); color: var(--fg-3); }
|
||||
.arrow { position: absolute; top: -8px; right: -7px; font: 400 14px var(--ff-mono); color: var(--ink-5); }
|
||||
.stage.active .arrow, .stage.done .arrow { color: var(--ink); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Pipeline — Raw → Candidate → Experiment → Signal → Decision</div>
|
||||
<div class="pipeline">
|
||||
<div class="stage done"><span class="num">Stage 0</span><span class="name">Raw idea</span><span class="meta">inbox/</span></div>
|
||||
<div class="stage done"><span class="num">Stage 1</span><span class="name">Triage</span><span class="meta">2026-02-12</span><span class="arrow">→</span></div>
|
||||
<div class="stage done"><span class="num">Stage 2</span><span class="name">Prototype card</span><span class="meta">prototypes/</span><span class="arrow">→</span></div>
|
||||
<div class="stage active"><span class="num">Stage 3</span><span class="name">Experiment</span><span class="meta">ends 2026-04-01</span><span class="arrow">→</span></div>
|
||||
<div class="stage pending"><span class="num">Stage 4</span><span class="name">Signal review</span><span class="meta">— pending</span><span class="arrow">→</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
46
designbook/preview/comp-prototype-card.html
Normal file
46
designbook/preview/comp-prototype-card.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Prototype Card" subtitle="Default + hover (black left bar)" viewport="700x290" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Prototype Card</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper-2); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-2); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; }
|
||||
.card.hover::before { content:""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--ink); }
|
||||
.head { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.meta { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.head .stage { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; }
|
||||
.head .stage .dot { width: 8px; height: 8px; border-radius: 999px; background: #5C5C5C; }
|
||||
.pitch { font: 500 17px/1.35 var(--ff-sans); margin: 4px 0 8px; }
|
||||
.qrow { display: flex; gap: 8px; font-size: 13px; color: var(--fg-2); }
|
||||
.qrow .k { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; min-width: 96px; flex: none; padding-top: 2px; }
|
||||
.qrow .v { color: var(--fg-1); }
|
||||
.foot { display: flex; justify-content: space-between; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--fg-3); font-family: var(--ff-mono); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Prototype card — default · hover</div>
|
||||
<div class="grid">
|
||||
<article class="card">
|
||||
<div class="head">
|
||||
<span class="meta">WNO-014 · Prototype</span>
|
||||
<span class="stage"><span class="dot"></span>Experiment</span>
|
||||
</div>
|
||||
<h3 class="pitch">A pocket field-notebook for catching weird ideas before they evaporate.</h3>
|
||||
<div class="qrow"><span class="k">Learning q.</span><span class="v">Do people return to capture more than once?</span></div>
|
||||
<div class="qrow"><span class="k">Smallest test</span><span class="v">One-page landing + email capture, 14 days.</span></div>
|
||||
<div class="foot"><span>→ Coulomb</span><span>S1 · weak</span></div>
|
||||
</article>
|
||||
<article class="card hover">
|
||||
<div class="head">
|
||||
<span class="meta" style="color: var(--fg-1)">WNO-017 · Prototype</span>
|
||||
<span class="stage"><span class="dot" style="background:#0A0A0A"></span>Signal review</span>
|
||||
</div>
|
||||
<h3 class="pitch">A LEGO-brick mood board for engineers who don't think in mood boards.</h3>
|
||||
<div class="qrow"><span class="k">Learning q.</span><span class="v">Will engineers attach metaphors to their tickets?</span></div>
|
||||
<div class="qrow"><span class="k">Smallest test</span><span class="v">Slack bot, three teams, two weeks.</span></div>
|
||||
<div class="foot"><span>→ Helix</span><span>S3 · strong</span></div>
|
||||
</article>
|
||||
</div>
|
||||
</body></html>
|
||||
37
designbook/preview/comp-topnav.html
Normal file
37
designbook/preview/comp-topnav.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Top Navigation" subtitle="56px · 1px hairline · ⌘K search" viewport="900x160" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Top Navigation</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; background: var(--paper-2); font-family: var(--ff-sans); min-height: 200px; }
|
||||
.nav { height: 56px; background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 32px; padding: 0 24px; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; font: 500 14px var(--ff-sans); }
|
||||
.brand img { width: 22px; height: 22px; }
|
||||
.brand .org { font-family: var(--ff-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }
|
||||
.links { display: flex; gap: 22px; }
|
||||
.links a { font: 500 13px var(--ff-sans); color: var(--fg-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
|
||||
.links a.active { color: var(--fg-1); border-bottom-color: var(--ink); }
|
||||
.right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
|
||||
.right .search { font: 400 12px var(--ff-mono); color: var(--fg-3); border: 1px solid var(--border); padding: 6px 10px; border-radius: var(--r-1); display: flex; align-items: center; gap: 8px; min-width: 200px; }
|
||||
.right .kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--border); border-radius: 2px; font-size: 10px; }
|
||||
.right .btn { font: 500 12px var(--ff-sans); padding: 7px 12px; border-radius: var(--r-2); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
|
||||
.body-preview { padding: 32px 24px; color: var(--fg-3); font: 400 13px var(--ff-mono); }
|
||||
</style></head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="brand"><img src="../assets/whynot-logo.png" alt=""><span>whynot</span><span class="org">/ control</span></div>
|
||||
<div class="links">
|
||||
<a class="active" href="#">Inbox</a>
|
||||
<a href="#">Prototypes</a>
|
||||
<a href="#">Signals</a>
|
||||
<a href="#">Betas</a>
|
||||
<a href="#">Decisions</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="search"><span>Search…</span><span class="kbd">⌘ K</span></div>
|
||||
<button class="btn">+ New idea</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="body-preview">// 56px height · 1px hairline · rgba(255,255,255,0.92) when scrolled</div>
|
||||
</body></html>
|
||||
104
designbook/preview/page-beta-invitation.html
Normal file
104
designbook/preview/page-beta-invitation.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Pages" name="Pages · Closed-beta invitation" subtitle="Invitation-only · seats, dates, accept / decline" viewport="1280x860" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>You're invited · whynot closed beta</title>
|
||||
<link rel="icon" href="../assets/whynot-logo.png">
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--fg-1); }
|
||||
.page { min-height: 100vh; display: flex; flex-direction: column; }
|
||||
|
||||
.nav { height: 60px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 40px; border-bottom: 1px solid var(--line); }
|
||||
.nav .brand { display: flex; align-items: center; gap: 10px; }
|
||||
.nav .brand img { width: 22px; height: 22px; }
|
||||
.nav .brand .nm { font: 500 15px var(--ff-sans); letter-spacing: -0.01em; }
|
||||
.nav .brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
|
||||
.nav .pill { margin-left: auto; font: 500 11px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; }
|
||||
|
||||
.wrap {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center;
|
||||
padding: 48px 24px;
|
||||
background:
|
||||
linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
|
||||
linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
|
||||
var(--paper-2);
|
||||
}
|
||||
|
||||
.invite {
|
||||
width: 100%; max-width: 560px; background: var(--paper);
|
||||
border: 1px solid var(--line-strong); border-radius: var(--r-3);
|
||||
padding: 40px 44px 36px; position: relative;
|
||||
}
|
||||
.stamp {
|
||||
position: absolute; top: -14px; right: 28px;
|
||||
background: var(--hi); color: var(--hi-ink);
|
||||
font: 500 10px/1 var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase;
|
||||
padding: 7px 12px 5px; transform: rotate(-2deg);
|
||||
}
|
||||
.invite .eyebrow { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.invite h1 { font: 400 30px/1.2 var(--ff-sans); letter-spacing: -0.02em; margin: 12px 0 0; max-width: 18ch; }
|
||||
.invite .lede { font: 400 16px/1.6 var(--ff-sans); color: var(--fg-2); margin: 14px 0 0; max-width: 46ch; }
|
||||
|
||||
.specs { margin: 28px 0 0; border-top: 1px solid var(--line); }
|
||||
.spec { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
|
||||
.spec .k { font: 500 11px/1.4 var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.spec .v { font: 400 14px/1.5 var(--ff-sans); color: var(--fg-1); }
|
||||
.spec .v .mono { font-family: var(--ff-mono); }
|
||||
|
||||
.actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
|
||||
.btn { font: 500 14px var(--ff-sans); padding: 12px 20px; border-radius: var(--r-2); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
|
||||
.btn:hover { background: var(--ink-2); }
|
||||
.btn.ghost { background: transparent; color: var(--fg-2); border-color: transparent; padding: 12px 10px; }
|
||||
.btn.ghost:hover { color: var(--fg-1); background: var(--paper-3); }
|
||||
.actions .seats { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
|
||||
.note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); font: 400 12px/1.6 var(--ff-mono); color: var(--fg-3); }
|
||||
.note b { color: var(--fg-2); font-weight: 500; }
|
||||
|
||||
.footer { flex: none; padding: 18px 40px; border-top: 1px solid var(--line); display: flex; gap: 14px; font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
.footer .sp { margin-left: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<nav class="nav">
|
||||
<div class="brand"><img src="../assets/whynot-logo.png" alt=""><span class="nm">whynot</span><span class="slug">/ betas</span></div>
|
||||
<span class="pill">Closed beta · invitation only</span>
|
||||
</nav>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="invite">
|
||||
<span class="stamp">Invitation · WNO-021</span>
|
||||
<span class="eyebrow">You’re invited</span>
|
||||
<h1>Concierge prototype triage</h1>
|
||||
<p class="lede">A one-hour call where we take one of your half-formed ideas and turn it into a testable prototype card — learning question, smallest useful test, and all.</p>
|
||||
|
||||
<div class="specs">
|
||||
<div class="spec"><span class="k">Learning question</span><span class="v">Will three founders pay a listed price for a single triage call?</span></div>
|
||||
<div class="spec"><span class="k">What you do</span><span class="v">Bring one idea. Leave with a prototype card and a next step.</span></div>
|
||||
<div class="spec"><span class="k">Seats</span><span class="v">5 · <span class="mono">2 remaining</span></span></div>
|
||||
<div class="spec"><span class="k">Window</span><span class="v"><span class="mono">2026-04-01 → 2026-04-14</span></span></div>
|
||||
<div class="spec"><span class="k">Cost</span><span class="v">Listed price. No refunds, no obligations after.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn">Accept invitation</button>
|
||||
<button class="btn ghost">Not now</button>
|
||||
<span class="seats">Expires in 6 days</span>
|
||||
</div>
|
||||
|
||||
<p class="note"><b>Invitation only.</b> This is a prototype, not a product — it may be parked after the beta regardless of how it goes. Accepting reserves a seat; it is not a commitment to continue.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<span>whynot · betas</span>
|
||||
<span>·</span>
|
||||
<span>BETA_MODEL.md</span>
|
||||
<span class="sp">try($idea) until success;</span>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
224
designbook/preview/page-landing-auth.html
Normal file
224
designbook/preview/page-landing-auth.html
Normal file
@@ -0,0 +1,224 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Pages" name="Pages · Landing — Login & Registration" subtitle="Public landing · log in / request access toggle" viewport="1280x820" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>whynot — landing</title>
|
||||
<link rel="icon" href="../assets/whynot-logo.png">
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; background: var(--paper); color: var(--fg-1); }
|
||||
|
||||
/* faint engineering-graph backdrop, very subtle */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- top nav ---- */
|
||||
.nav {
|
||||
height: 60px; flex: none;
|
||||
display: flex; align-items: center; gap: 24px;
|
||||
padding: 0 40px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.nav .brand { display: flex; align-items: center; gap: 10px; }
|
||||
.nav .brand img { width: 24px; height: 24px; }
|
||||
.nav .brand .nm { font: 500 15px var(--ff-sans); letter-spacing: -0.01em; }
|
||||
.nav .brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
|
||||
.nav .links { margin-left: auto; display: flex; align-items: center; gap: 24px; }
|
||||
.nav .links a { font: 500 13px var(--ff-sans); color: var(--fg-2); text-decoration: none; }
|
||||
.nav .links a:hover { color: var(--fg-1); }
|
||||
.nav .pill {
|
||||
font: 500 11px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase;
|
||||
color: var(--fg-3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px;
|
||||
}
|
||||
|
||||
/* ---- hero split ---- */
|
||||
.hero {
|
||||
flex: 1; display: grid; grid-template-columns: 1.15fr 0.85fr;
|
||||
align-items: stretch;
|
||||
}
|
||||
.pitch {
|
||||
padding: 72px 56px 56px 40px;
|
||||
display: flex; flex-direction: column; gap: 24px;
|
||||
border-right: 1px solid var(--line);
|
||||
background:
|
||||
linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
|
||||
linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
|
||||
var(--paper-2);
|
||||
}
|
||||
.eyebrow-lg { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.pitch h1 {
|
||||
font: 300 64px/0.98 var(--ff-sans); letter-spacing: -0.035em;
|
||||
margin: 4px 0 0; color: var(--ink);
|
||||
max-width: 13ch;
|
||||
}
|
||||
.pitch h1 .q { font-weight: 500; }
|
||||
.pitch .lede { font: 400 18px/1.55 var(--ff-sans); color: var(--fg-2); margin: 0; max-width: 42ch; }
|
||||
.codeline {
|
||||
font: 500 14px var(--ff-mono); color: var(--fg-1);
|
||||
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2);
|
||||
padding: 12px 16px; align-self: flex-start;
|
||||
}
|
||||
.codeline .c { color: var(--ink-4); }
|
||||
.codeline mark { background: var(--hi); color: var(--hi-ink); padding: 0 3px; }
|
||||
|
||||
.principles { margin-top: auto; display: flex; flex-direction: column; gap: 0; }
|
||||
.principles .p {
|
||||
display: grid; grid-template-columns: 28px 1fr; gap: 14px;
|
||||
padding: 16px 0; border-top: 1px solid var(--line);
|
||||
align-items: baseline;
|
||||
}
|
||||
.principles .p .k { font: 500 12px var(--ff-mono); color: var(--fg-3); }
|
||||
.principles .p .v { font: 400 14px/1.5 var(--ff-sans); color: var(--fg-2); }
|
||||
.principles .p .v b { color: var(--fg-1); font-weight: 500; }
|
||||
|
||||
/* ---- auth panel ---- */
|
||||
.auth {
|
||||
padding: 72px 40px 56px 56px;
|
||||
display: flex; flex-direction: column;
|
||||
max-width: 480px;
|
||||
}
|
||||
.auth .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
|
||||
.auth .tab {
|
||||
font: 500 13px var(--ff-sans); color: var(--fg-3); background: none; border: 0;
|
||||
padding: 0 0 12px; margin-right: 28px; cursor: pointer;
|
||||
border-bottom: 2px solid transparent; margin-bottom: -1px;
|
||||
}
|
||||
.auth .tab.active { color: var(--fg-1); border-bottom-color: var(--ink); }
|
||||
|
||||
.form { display: flex; flex-direction: column; gap: 18px; }
|
||||
.form.hidden { display: none; }
|
||||
.field { display: flex; flex-direction: column; gap: 7px; }
|
||||
.field label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.field input, .field textarea {
|
||||
font: 400 14px var(--ff-sans); color: var(--fg-1);
|
||||
padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-1);
|
||||
background: var(--paper); outline: none; transition: border-color 120ms ease;
|
||||
}
|
||||
.field input:focus, .field textarea:focus { border-color: var(--ink); }
|
||||
.field input::placeholder, .field textarea::placeholder { color: var(--ink-5); }
|
||||
.field textarea { resize: none; min-height: 76px; font-family: var(--ff-sans); }
|
||||
.field .row { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.field .row a { font: 400 11px var(--ff-mono); color: var(--fg-3); text-decoration: none; }
|
||||
.field .row a:hover { color: var(--fg-1); text-decoration: underline; }
|
||||
|
||||
.btn {
|
||||
font: 500 14px var(--ff-sans); padding: 12px 18px; border-radius: var(--r-2);
|
||||
border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
|
||||
cursor: pointer; transition: background 120ms ease; margin-top: 4px;
|
||||
}
|
||||
.btn:hover { background: var(--ink-2); }
|
||||
|
||||
.note {
|
||||
font: 400 12px/1.5 var(--ff-mono); color: var(--fg-3);
|
||||
margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft);
|
||||
}
|
||||
.note b { color: var(--fg-2); font-weight: 500; }
|
||||
|
||||
.footer {
|
||||
flex: none; padding: 18px 40px; border-top: 1px solid var(--line);
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
font: 400 11px var(--ff-mono); color: var(--fg-3); letter-spacing: 0.04em;
|
||||
}
|
||||
.footer .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4); }
|
||||
.footer .sp { margin-left: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
<nav class="nav">
|
||||
<div class="brand">
|
||||
<img src="../assets/whynot-logo.png" alt="">
|
||||
<span class="nm">whynot</span>
|
||||
<span class="slug">/ prototypes</span>
|
||||
</div>
|
||||
<div class="links">
|
||||
<span class="pill">A1 · Incubating</span>
|
||||
<a href="#" onclick="show('login');return false;">Log in</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero">
|
||||
|
||||
<!-- left: pitch -->
|
||||
<section class="pitch">
|
||||
<span class="eyebrow-lg">Prototype & market-signal space</span>
|
||||
<h1>why<span class="q">?</span> why not<span class="q">!</span></h1>
|
||||
<p class="lede">A quiet workshop for discovering the weird and the useful — building, testing, and reviewing prototypes before they ever pretend to be products.</p>
|
||||
<div class="codeline"><span class="c">$</span> try(<mark>$idea</mark>) until success<span class="c">;</span></div>
|
||||
|
||||
<div class="principles">
|
||||
<div class="p"><span class="k">01</span><span class="v"><b>A prototype is a question made tangible.</b> Not a promise.</span></div>
|
||||
<div class="p"><span class="k">02</span><span class="v"><b>Signal beats enthusiasm.</b> Evidence, not vibes.</span></div>
|
||||
<div class="p"><span class="k">03</span><span class="v"><b>Capture is not commitment.</b> A good idea can still be parked.</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- right: auth -->
|
||||
<section class="auth">
|
||||
<div class="tabs">
|
||||
<button class="tab active" id="tab-login" onclick="show('login')">Log in</button>
|
||||
<button class="tab" id="tab-register" onclick="show('register')">Request access</button>
|
||||
</div>
|
||||
|
||||
<form class="form" id="form-login" onsubmit="return false;">
|
||||
<div class="field">
|
||||
<label for="li-email">Email</label>
|
||||
<input id="li-email" type="email" placeholder="you@example.com" autocomplete="username">
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="row">
|
||||
<label for="li-pw">Password</label>
|
||||
<a href="#" onclick="return false;">Forgot?</a>
|
||||
</div>
|
||||
<input id="li-pw" type="password" placeholder="••••••••" autocomplete="current-password">
|
||||
</div>
|
||||
<button class="btn" type="submit">Log in</button>
|
||||
<p class="note">Access is limited to current contributors and invited beta participants. <b>No public sign-ups.</b></p>
|
||||
</form>
|
||||
|
||||
<form class="form hidden" id="form-register" onsubmit="return false;">
|
||||
<div class="field">
|
||||
<label for="rg-name">Name</label>
|
||||
<input id="rg-name" type="text" placeholder="What should we call you?">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="rg-email">Email</label>
|
||||
<input id="rg-email" type="email" placeholder="you@example.com">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="rg-build">What would you want to build or test?</label>
|
||||
<textarea id="rg-build" placeholder="One sentence is plenty. The weirder the better."></textarea>
|
||||
</div>
|
||||
<button class="btn" type="submit">Request invite</button>
|
||||
<p class="note"><b>Closed beta. Invitation only.</b> Requests are read, not auto-approved — silence is also an answer.</p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<span class="dot"></span>
|
||||
<span>whynot · 2026</span>
|
||||
<span>·</span>
|
||||
<span>Prereleases & prototypes only</span>
|
||||
<span class="sp">try($idea) until success;</span>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function show(which) {
|
||||
var isLogin = which === 'login';
|
||||
document.getElementById('form-login').classList.toggle('hidden', !isLogin);
|
||||
document.getElementById('form-register').classList.toggle('hidden', isLogin);
|
||||
document.getElementById('tab-login').classList.toggle('active', isLogin);
|
||||
document.getElementById('tab-register').classList.toggle('active', !isLogin);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
158
designbook/preview/page-prototype-detail.html
Normal file
158
designbook/preview/page-prototype-detail.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Pages" name="Pages · Prototype detail" subtitle="Single prototype · pipeline, learning question, signal sidebar" viewport="1280x860" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WNO-017 · Prototype</title>
|
||||
<link rel="icon" href="../assets/whynot-logo.png">
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
html, body { margin: 0; background: var(--paper); color: var(--fg-1); }
|
||||
a { color: inherit; }
|
||||
|
||||
.nav { height: 60px; display: flex; align-items: center; gap: 24px; padding: 0 40px; border-bottom: 1px solid var(--line); }
|
||||
.nav .brand { display: flex; align-items: center; gap: 10px; }
|
||||
.nav .brand img { width: 22px; height: 22px; }
|
||||
.nav .brand .nm { font: 500 15px var(--ff-sans); letter-spacing: -0.01em; }
|
||||
.nav .brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
|
||||
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
|
||||
.nav .search { font: 400 12px var(--ff-mono); color: var(--fg-3); border: 1px solid var(--line); border-radius: var(--r-1); padding: 6px 10px; min-width: 220px; display: flex; gap: 8px; }
|
||||
.nav .search .kbd { margin-left: auto; border: 1px solid var(--line); border-radius: 2px; padding: 0 5px; font-size: 10px; }
|
||||
|
||||
.app { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 60px); }
|
||||
|
||||
/* left nav */
|
||||
.leftnav { display: flex; flex-direction: column; gap: 28px; padding: 28px 8px 24px 16px; border-right: 1px solid var(--line-soft); }
|
||||
.leftnav .section { display: flex; flex-direction: column; gap: 8px; }
|
||||
.leftnav .lbl { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; opacity: 0.7; }
|
||||
.leftnav .items { display: flex; flex-direction: column; gap: 1px; }
|
||||
.leftnav .item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-left: 2px solid transparent; color: var(--fg-3); font: 400 13px var(--ff-sans); text-decoration: none; }
|
||||
.leftnav .item .ic { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }
|
||||
.leftnav .item .n { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--ink-5); }
|
||||
.leftnav .item.active { color: var(--fg-1); font-weight: 500; border-left-color: var(--ink); }
|
||||
.leftnav .item.doc { font: 400 12px var(--ff-mono); }
|
||||
.leftnav .footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 400 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.leftnav .footer .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4); }
|
||||
|
||||
/* main */
|
||||
.main { padding: 40px 56px 80px; max-width: 980px; }
|
||||
.crumb { font: 400 12px/1.5 var(--ff-mono); color: var(--fg-3); margin-bottom: 22px; display: flex; gap: 7px; }
|
||||
.crumb a { text-decoration: none; color: var(--fg-2); }
|
||||
.crumb .sep { color: var(--ink-5); }
|
||||
.crumb .cur { color: var(--fg-1); }
|
||||
|
||||
.head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
|
||||
.head .eyebrow { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.head .row { display: flex; align-items: flex-start; gap: 24px; }
|
||||
.head h1 { font: 400 32px/1.2 var(--ff-sans); letter-spacing: -0.02em; margin: 0; flex: 1; max-width: 22ch; }
|
||||
.head .actions { display: flex; gap: 8px; flex: none; padding-top: 4px; }
|
||||
.btn { font: 500 13px var(--ff-sans); padding: 9px 15px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
|
||||
.btn:hover { border-color: var(--ink); }
|
||||
.btn .ic { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }
|
||||
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.btn.primary:hover { background: var(--ink-2); }
|
||||
|
||||
/* pipeline */
|
||||
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 40px; }
|
||||
.pstage { padding: 10px 12px 14px; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px; position: relative; }
|
||||
.pstage.done { border-top-color: var(--ink); }
|
||||
.pstage.active { border-top-color: var(--hi-2); }
|
||||
.pstage .num { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.pstage.done .num, .pstage.active .num { color: var(--fg-1); }
|
||||
.pstage .nm { font: 500 13px/1.25 var(--ff-sans); color: var(--fg-1); }
|
||||
.pstage.pending .nm { color: var(--fg-3); }
|
||||
.pstage .meta { font: 400 11px/1.3 var(--ff-mono); color: var(--fg-3); }
|
||||
.pstage .arrow { position: absolute; top: -8px; right: -7px; font: 400 14px var(--ff-mono); color: var(--ink-5); }
|
||||
.pstage.done .arrow, .pstage.active .arrow { color: var(--ink); }
|
||||
|
||||
.body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }
|
||||
.col { display: flex; flex-direction: column; gap: 24px; }
|
||||
.field { display: flex; flex-direction: column; gap: 7px; }
|
||||
.field .k { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.field .v { font: 400 15px/1.6 var(--ff-sans); color: var(--fg-1); max-width: 56ch; }
|
||||
|
||||
.aside { display: flex; flex-direction: column; gap: 20px; }
|
||||
.arow { display: flex; flex-direction: column; gap: 7px; }
|
||||
.arow .k { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.arow .v { font: 400 14px/1.5 var(--ff-sans); color: var(--fg-1); }
|
||||
.tag { align-self: flex-start; font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); }
|
||||
.dot { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--ff-mono); letter-spacing: 0.06em; color: var(--fg-2); }
|
||||
.dot .b { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
|
||||
.mono { font-family: var(--ff-mono); }
|
||||
.caveat { border: 1px dashed var(--line-strong); border-radius: var(--r-2); padding: 16px; margin-top: 4px; }
|
||||
.caveat .k { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 8px; }
|
||||
.caveat .v { font: 400 13px/1.55 var(--ff-sans); color: var(--fg-2); margin: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="brand"><img src="../assets/whynot-logo.png" alt=""><span class="nm">whynot</span><span class="slug">/ control</span></div>
|
||||
<div class="right">
|
||||
<div class="search"><span>Search…</span><span class="kbd">⌘ K</span></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="app">
|
||||
<nav class="leftnav">
|
||||
<div class="section">
|
||||
<span class="lbl">Work</span>
|
||||
<div class="items">
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg><span>Inbox</span><span class="n">7</span></a>
|
||||
<a class="item active"><svg class="ic" viewBox="0 0 24 24"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg><span>Prototypes</span><span class="n">4</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.5.5 0 0 1-.96 0L9.24 2.18a.5.5 0 0 0-.96 0l-2.35 8.36A2 2 0 0 1 4 12H2"/></svg><span>Signals</span><span class="n">12</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg><span>Betas</span><span class="n">1</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg><span>Decisions</span><span class="n">3</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<span class="lbl">Control docs</span>
|
||||
<div class="items">
|
||||
<a class="item doc"><span>INTENT.md</span></a>
|
||||
<a class="item doc"><span>OPERATING_MODEL.md</span></a>
|
||||
<a class="item doc"><span>PROTOTYPE_PIPELINE.md</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer"><span class="dot"></span><span>A1 · Incubating</span></div>
|
||||
</nav>
|
||||
|
||||
<main class="main">
|
||||
<div class="crumb"><a href="#">whynot</a><span class="sep">/</span><a href="#">Prototypes</a><span class="sep">/</span><span class="cur">WNO-017</span></div>
|
||||
|
||||
<div class="head">
|
||||
<span class="eyebrow">WNO-017 · Prototype</span>
|
||||
<div class="row">
|
||||
<h1>A LEGO-brick mood board for engineers who don’t think in mood boards.</h1>
|
||||
<div class="actions">
|
||||
<button class="btn"><svg class="ic" viewBox="0 0 24 24"><path d="M21 8v13H3V8"/><path d="M1 3h22v5H1z"/><path d="M10 12h4"/></svg>Park</button>
|
||||
<button class="btn primary"><svg class="ic" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>Promote → Helix</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pipeline">
|
||||
<div class="pstage done"><span class="num">Stage 0</span><span class="nm">Raw idea</span><span class="meta">inbox/</span></div>
|
||||
<div class="pstage done"><span class="num">Stage 1</span><span class="nm">Triage</span><span class="meta">2026-02-15</span><span class="arrow">→</span></div>
|
||||
<div class="pstage done"><span class="num">Stage 2</span><span class="nm">Prototype card</span><span class="meta">prototypes/</span><span class="arrow">→</span></div>
|
||||
<div class="pstage done"><span class="num">Stage 3</span><span class="nm">Experiment</span><span class="meta">closed 2026-03-04</span><span class="arrow">→</span></div>
|
||||
<div class="pstage active"><span class="num">Stage 4</span><span class="nm">Signal review</span><span class="meta">in progress</span><span class="arrow">→</span></div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<div class="col">
|
||||
<div class="field"><span class="k">Learning question</span><span class="v">Will engineers attach metaphors to their tickets, and do those metaphors help anyone else read the work later?</span></div>
|
||||
<div class="field"><span class="k">Smallest useful test</span><span class="v">A Slack bot in three teams for two weeks. One command attaches a “brick” — a one-line metaphor — to any ticket.</span></div>
|
||||
<div class="field"><span class="k">Expected signal</span><span class="v">At least one team voluntarily keeps using the bricks after the two weeks, or references a brick in a review without being prompted.</span></div>
|
||||
<div class="field"><span class="k">Risks</span><span class="v">Cute but unused after a week. Or: engineers treat it as a chore rather than a shortcut.</span></div>
|
||||
</div>
|
||||
<aside class="aside">
|
||||
<div class="arow"><span class="k">Stage</span><span class="tag">Signal review</span></div>
|
||||
<div class="arow"><span class="k">Signal</span><span class="dot"><span class="b"></span>S3 · Strong</span></div>
|
||||
<div class="arow"><span class="k">Promotion target</span><span class="v mono">→ Helix</span></div>
|
||||
<div class="arow"><span class="k">Audience</span><span class="v">Engineering teams already writing terse tickets.</span></div>
|
||||
<div class="caveat"><span class="k">Caveat</span><p class="v">Strong signal is not a decision. Promotion to Helix still requires an explicit record in <span class="mono">DECISIONS.md</span>.</p></div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
135
designbook/preview/page-signals-dashboard.html
Normal file
135
designbook/preview/page-signals-dashboard.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Pages" name="Pages · Signals dashboard" subtitle="Market-signal log · filter by strength · evidence rows" viewport="1280x860" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Signals · whynot-control</title>
|
||||
<link rel="icon" href="../assets/whynot-logo.png">
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
html, body { margin: 0; background: var(--paper); color: var(--fg-1); }
|
||||
|
||||
.nav { height: 60px; display: flex; align-items: center; gap: 24px; padding: 0 40px; border-bottom: 1px solid var(--line); }
|
||||
.nav .brand { display: flex; align-items: center; gap: 10px; }
|
||||
.nav .brand img { width: 22px; height: 22px; }
|
||||
.nav .brand .nm { font: 500 15px var(--ff-sans); letter-spacing: -0.01em; }
|
||||
.nav .brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
|
||||
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
|
||||
.nav .search { font: 400 12px var(--ff-mono); color: var(--fg-3); border: 1px solid var(--line); border-radius: var(--r-1); padding: 6px 10px; min-width: 220px; display: flex; gap: 8px; }
|
||||
.nav .search .kbd { margin-left: auto; border: 1px solid var(--line); border-radius: 2px; padding: 0 5px; font-size: 10px; }
|
||||
|
||||
.app { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 60px); }
|
||||
|
||||
.leftnav { display: flex; flex-direction: column; gap: 28px; padding: 28px 8px 24px 16px; border-right: 1px solid var(--line-soft); }
|
||||
.leftnav .section { display: flex; flex-direction: column; gap: 8px; }
|
||||
.leftnav .lbl { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; opacity: 0.7; }
|
||||
.leftnav .items { display: flex; flex-direction: column; gap: 1px; }
|
||||
.leftnav .item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-left: 2px solid transparent; color: var(--fg-3); font: 400 13px var(--ff-sans); text-decoration: none; }
|
||||
.leftnav .item .ic { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }
|
||||
.leftnav .item .n { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--ink-5); }
|
||||
.leftnav .item.active { color: var(--fg-1); font-weight: 500; border-left-color: var(--ink); }
|
||||
.leftnav .item.doc { font: 400 12px var(--ff-mono); }
|
||||
.leftnav .footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 400 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.leftnav .footer .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4); }
|
||||
|
||||
.main { padding: 40px 56px 80px; max-width: 1040px; }
|
||||
.head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
|
||||
.head .eyebrow { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.head .row { display: flex; align-items: flex-end; gap: 24px; }
|
||||
.head h1 { font: 400 32px/1.2 var(--ff-sans); letter-spacing: -0.02em; margin: 0; flex: 1; }
|
||||
.head .lede { font: 400 16px/1.6 var(--ff-sans); color: var(--fg-2); margin: 4px 0 0; max-width: 58ch; }
|
||||
.btn { font: 500 13px var(--ff-sans); padding: 9px 15px; border-radius: var(--r-2); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
|
||||
.btn .ic { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }
|
||||
|
||||
/* distribution strip */
|
||||
.dist { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; margin-bottom: 28px; }
|
||||
.dist .cell { flex: 1; padding: 14px 16px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
|
||||
.dist .cell:last-child { border-right: 0; }
|
||||
.dist .cell .lv { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.dist .cell .lv .b { width: 8px; height: 8px; border-radius: 999px; }
|
||||
.dist .cell .ct { font: 300 28px/1 var(--ff-sans); color: var(--fg-1); }
|
||||
.b0 { background: var(--status-raw); } .b1 { background: var(--status-weak); } .b2 { background: var(--status-medium); } .b3 { background: var(--status-strong); } .b4 { background: var(--status-commercial); }
|
||||
|
||||
.filters { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
||||
.chip { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); background: var(--paper); cursor: pointer; }
|
||||
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.filters .count { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
|
||||
.rows { display: flex; flex-direction: column; }
|
||||
.srow { display: grid; grid-template-columns: 90px 90px 1fr; gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
|
||||
.srow .id { font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
.srow .pr { font: 400 11px var(--ff-mono); color: var(--fg-2); }
|
||||
.srow .dot { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--ff-mono); letter-spacing: 0.06em; color: var(--fg-2); }
|
||||
.srow .dot .b { width: 8px; height: 8px; border-radius: 999px; }
|
||||
.srow .what { grid-column: 1 / -1; margin: 4px 0 0; font: 400 14px/1.55 var(--ff-sans); color: var(--fg-1); max-width: 64ch; }
|
||||
.srow .src { grid-column: 1 / -1; font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="brand"><img src="../assets/whynot-logo.png" alt=""><span class="nm">whynot</span><span class="slug">/ control</span></div>
|
||||
<div class="right"><div class="search"><span>Search…</span><span class="kbd">⌘ K</span></div></div>
|
||||
</nav>
|
||||
|
||||
<div class="app">
|
||||
<nav class="leftnav">
|
||||
<div class="section">
|
||||
<span class="lbl">Work</span>
|
||||
<div class="items">
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg><span>Inbox</span><span class="n">7</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg><span>Prototypes</span><span class="n">4</span></a>
|
||||
<a class="item active"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.5.5 0 0 1-.96 0L9.24 2.18a.5.5 0 0 0-.96 0l-2.35 8.36A2 2 0 0 1 4 12H2"/></svg><span>Signals</span><span class="n">12</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg><span>Betas</span><span class="n">1</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg><span>Decisions</span><span class="n">3</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<span class="lbl">Control docs</span>
|
||||
<div class="items">
|
||||
<a class="item doc"><span>MARKET_SIGNAL.md</span></a>
|
||||
<a class="item doc"><span>OPERATING_MODEL.md</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer"><span class="dot"></span><span>A1 · Incubating</span></div>
|
||||
</nav>
|
||||
|
||||
<main class="main">
|
||||
<div class="head">
|
||||
<span class="eyebrow">whynot-control / signals</span>
|
||||
<div class="row">
|
||||
<h1>Signals</h1>
|
||||
<button class="btn"><svg class="ic" viewBox="0 0 24 24"><path d="M12 5v14"/><path d="M5 12h14"/></svg>Record signal</button>
|
||||
</div>
|
||||
<p class="lede">A signal is evidence, not a vibe. Record what happened, who did it, and how strong the evidence is. Lack of signal is also information.</p>
|
||||
</div>
|
||||
|
||||
<div class="dist">
|
||||
<div class="cell"><span class="lv"><span class="b b0"></span>S0</span><span class="ct">1</span></div>
|
||||
<div class="cell"><span class="lv"><span class="b b1"></span>S1</span><span class="ct">2</span></div>
|
||||
<div class="cell"><span class="lv"><span class="b b2"></span>S2</span><span class="ct">2</span></div>
|
||||
<div class="cell"><span class="lv"><span class="b b3"></span>S3</span><span class="ct">1</span></div>
|
||||
<div class="cell"><span class="lv"><span class="b b4"></span>S4</span><span class="ct">0</span></div>
|
||||
</div>
|
||||
|
||||
<div class="filters">
|
||||
<span class="chip active">All</span>
|
||||
<span class="chip">S0</span>
|
||||
<span class="chip">S1</span>
|
||||
<span class="chip">S2</span>
|
||||
<span class="chip">S3</span>
|
||||
<span class="chip">S4</span>
|
||||
<span class="count">6 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="rows">
|
||||
<div class="srow"><span class="id">SIG-031</span><span class="pr">WNO-017</span><span class="dot"><span class="b b3"></span>S3</span><p class="what">Two teams shipped public README sections labelled “brick: scope” after using the bot for a week.</p><span class="src">usage log · 2026-03-04</span></div>
|
||||
<div class="srow"><span class="id">SIG-030</span><span class="pr">WNO-017</span><span class="dot"><span class="b b2"></span>S2</span><p class="what">Three engineers DM’d asking for an export-to-Notion option.</p><span class="src">Slack · 2026-03-03</span></div>
|
||||
<div class="srow"><span class="id">SIG-029</span><span class="pr">WNO-014</span><span class="dot"><span class="b b1"></span>S1</span><p class="what">Landing page: 34 visits, 7 emails, 0 returns in week 1.</p><span class="src">Plausible · 2026-03-01</span></div>
|
||||
<div class="srow"><span class="id">SIG-028</span><span class="pr">WNO-021</span><span class="dot"><span class="b b2"></span>S2</span><p class="what">First triage call booked at listed price; second declined on price.</p><span class="src">Stripe / email · 2026-02-28</span></div>
|
||||
<div class="srow"><span class="id">SIG-027</span><span class="pr">WNO-021</span><span class="dot"><span class="b b1"></span>S1</span><p class="what">“Interesting but I’d want a free first one” ×2.</p><span class="src">interview · 2026-02-26</span></div>
|
||||
<div class="srow"><span class="id">SIG-026</span><span class="pr">WNO-024</span><span class="dot"><span class="b b0"></span>S0</span><p class="what">Static preview: 12 visits in 30 days, 0 returns.</p><span class="src">Plausible · 2026-02-24</span></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
designbook/preview/spacing-elevation.html
Normal file
26
designbook/preview/spacing-elevation.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Spacing" name="Spacing · Elevation" subtitle="Mostly none · wireframe system" viewport="700x220" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Elevation</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 28px 32px; background: var(--paper-2); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 22px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
||||
.cell { display: flex; flex-direction: column; align-items: center; gap: 12px; }
|
||||
.obj { width: 100%; height: 72px; background: var(--paper); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font: 500 11px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.lbl { font: 500 11px var(--ff-mono); color: var(--fg-1); }
|
||||
.val { font: 400 10px var(--ff-mono); color: var(--fg-3); text-align: center; line-height: 1.4; }
|
||||
.s1 { box-shadow: 0 1px 0 var(--line); }
|
||||
.s2 { box-shadow: 0 1px 0 var(--line-strong); }
|
||||
.s3 { box-shadow: 0 4px 12px -6px rgba(10,10,10,.10); border-color: var(--border-soft); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Elevation — this is a wireframe system, prefer none</div>
|
||||
<div class="grid">
|
||||
<div class="cell"><div class="obj">default</div><span class="lbl">--shadow-0</span><span class="val">none · everywhere</span></div>
|
||||
<div class="cell"><div class="obj s1">+1</div><span class="lbl">--shadow-1</span><span class="val">1px hairline · sticky nav</span></div>
|
||||
<div class="cell"><div class="obj s2">+2</div><span class="lbl">--shadow-2</span><span class="val">1px strong · sticky strong</span></div>
|
||||
<div class="cell"><div class="obj s3">float</div><span class="lbl">--shadow-3</span><span class="val">soft 4–12px · popover only</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
24
designbook/preview/spacing-radii.html
Normal file
24
designbook/preview/spacing-radii.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Spacing" name="Spacing · Radii" subtitle="0 / 2 / 4 / 8 / pill" viewport="700x200" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Radii</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 28px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
|
||||
.cell { display: flex; flex-direction: column; align-items: center; gap: 10px; }
|
||||
.swatch { width: 80px; height: 60px; background: var(--paper); border: 1px solid var(--ink); }
|
||||
.lbl { font: 500 11px/1.2 var(--ff-mono); letter-spacing: 0.04em; color: var(--fg-1); text-align: center; }
|
||||
.val { font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Radii — big things stay square</div>
|
||||
<div class="grid">
|
||||
<div class="cell"><div class="swatch" style="border-radius:0"></div><span class="lbl">--r-0<br><span class="val">0 · documents</span></span></div>
|
||||
<div class="cell"><div class="swatch" style="border-radius:2px"></div><span class="lbl">--r-1<br><span class="val">2 · inputs, tags</span></span></div>
|
||||
<div class="cell"><div class="swatch" style="border-radius:4px"></div><span class="lbl">--r-2<br><span class="val">4 · buttons</span></span></div>
|
||||
<div class="cell"><div class="swatch" style="border-radius:8px"></div><span class="lbl">--r-3<br><span class="val">8 · cards, modals</span></span></div>
|
||||
<div class="cell"><div class="swatch" style="border-radius:999px"></div><span class="lbl">--r-pill<br><span class="val">∞ · label caps only</span></span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
28
designbook/preview/spacing-scale.html
Normal file
28
designbook/preview/spacing-scale.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Spacing" name="Spacing · Scale" subtitle="4px base · 10 steps" viewport="700x280" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Spacing Scale</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||||
.scale { display: grid; grid-template-columns: 80px 1fr 90px; row-gap: 8px; column-gap: 16px; align-items: center; font-family: var(--ff-mono); font-size: 12px; }
|
||||
.name { color: var(--fg-1); }
|
||||
.bar { height: 12px; background: var(--ink); }
|
||||
.val { color: var(--fg-3); text-align: right; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Spacing — 4px base unit</div>
|
||||
<div class="scale">
|
||||
<span class="name">--sp-1</span><div class="bar" style="width:4px"></div><span class="val">4px</span>
|
||||
<span class="name">--sp-2</span><div class="bar" style="width:8px"></div><span class="val">8px</span>
|
||||
<span class="name">--sp-3</span><div class="bar" style="width:12px"></div><span class="val">12px</span>
|
||||
<span class="name">--sp-4</span><div class="bar" style="width:16px"></div><span class="val">16px</span>
|
||||
<span class="name">--sp-5</span><div class="bar" style="width:24px"></div><span class="val">24px</span>
|
||||
<span class="name">--sp-6</span><div class="bar" style="width:32px"></div><span class="val">32px</span>
|
||||
<span class="name">--sp-7</span><div class="bar" style="width:48px"></div><span class="val">48px</span>
|
||||
<span class="name">--sp-8</span><div class="bar" style="width:64px"></div><span class="val">64px</span>
|
||||
<span class="name">--sp-9</span><div class="bar" style="width:96px"></div><span class="val">96px</span>
|
||||
<span class="name">--sp-10</span><div class="bar" style="width:128px"></div><span class="val">128px</span>
|
||||
</div>
|
||||
</body></html>
|
||||
23
designbook/preview/type-body.html
Normal file
23
designbook/preview/type-body.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="Type · Body & Lead" subtitle="Lead 17/1.55 · Body 15/1.5" viewport="700x220" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Body & Lead</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 28px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
|
||||
.col .label { display: block; margin-bottom: 8px; }
|
||||
.col .spec { color: var(--fg-3); font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.04em; margin-top: 6px; display: block; }
|
||||
p { margin: 0; max-width: 56ch; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="col">
|
||||
<span class="label">Lead</span>
|
||||
<p class="lead">A prototype is a question made tangible. The purpose is not to prove an idea is brilliant — it is to learn what is useful, desirable, or irrelevant.</p>
|
||||
<span class="spec">.lead · system-sans 400 · 17 / 1.55 · fg-2</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">Body</span>
|
||||
<p>Signals are evidence, not vibes. Weak signals are useful if clearly labelled. Contradictory signals should be preserved. A signal should be connected to a prototype, audience, or hypothesis. Lack of signal is also information.</p>
|
||||
<span class="spec">p · system-sans 400 · 15 / 1.5 · fg-1</span>
|
||||
</div>
|
||||
</body></html>
|
||||
23
designbook/preview/type-display.html
Normal file
23
designbook/preview/type-display.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="Type · Display" subtitle="PlexSans 300/400 · -.035em tracking" viewport="700x200" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Display Type</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 32px; background: var(--paper); }
|
||||
.row { display: flex; align-items: baseline; gap: 24px; margin-bottom: 18px; }
|
||||
.row .label { width: 80px; flex: none; }
|
||||
.row .spec { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; margin-left: auto; flex: none; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row">
|
||||
<span class="label">Display 1</span>
|
||||
<span class="display-1">try($idea)</span>
|
||||
<span class="spec">system-sans 300 · 96 / .95 · -.035em</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="label">Display 2</span>
|
||||
<span class="display-2">why? why not!</span>
|
||||
<span class="spec">system-sans 400 · 64 / 1.0 · -.02em</span>
|
||||
</div>
|
||||
</body></html>
|
||||
20
designbook/preview/type-headings.html
Normal file
20
designbook/preview/type-headings.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="Type · Headings" subtitle="H1–H5 · PlexSans 500 · tight tracking" viewport="700x320" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Headings</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 28px 32px; background: var(--paper); }
|
||||
.row { display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
|
||||
.row:last-child { border: 0; }
|
||||
.row .label { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
.row h1, .row h2, .row h3, .row h4, .row h5 { margin: 0; }
|
||||
.row .spec { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row"><span class="label">H1</span><h1>Prototype pipeline</h1><span class="spec">500 · 44 / 1.05</span></div>
|
||||
<div class="row"><span class="label">H2</span><h2>Stage 2 — Prototype card</h2><span class="spec">500 · 32 / 1.25</span></div>
|
||||
<div class="row"><span class="label">H3</span><h3>Learning question</h3><span class="spec">500 · 24 / 1.25</span></div>
|
||||
<div class="row"><span class="label">H4</span><h4>Smallest useful test</h4><span class="spec">500 · 20 / 1.25</span></div>
|
||||
<div class="row"><span class="label">H5</span><h5>Expected signal</h5><span class="spec">500 · 17 / 1.25</span></div>
|
||||
</body></html>
|
||||
42
designbook/preview/type-mono-eyebrows.html
Normal file
42
designbook/preview/type-mono-eyebrows.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="Type · Mono & Eyebrows" subtitle="PlexMono · uppercase · .08em tracking" viewport="700x220" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Mono & Eyebrows</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 28px 32px; background: var(--paper); }
|
||||
.group { display: flex; gap: 48px; align-items: flex-start; }
|
||||
.stack { display: flex; flex-direction: column; gap: 10px; }
|
||||
.stack h6 { margin: 0 0 4px; font: 500 11px/1.2 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.eyebrow-row { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.specrow { display: flex; align-items: baseline; gap: 16px; }
|
||||
.specrow code { background: none; padding: 0; color: var(--fg-1); }
|
||||
.tag { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-pill); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="group">
|
||||
<div class="stack" style="flex:1">
|
||||
<h6>Eyebrow labels</h6>
|
||||
<div class="eyebrow-row">
|
||||
<span class="eyebrow">PROTOTYPE</span>
|
||||
<span class="eyebrow">STAGE</span>
|
||||
<span class="eyebrow">SIGNAL · S2</span>
|
||||
<span class="eyebrow">IN BETA</span>
|
||||
<span class="eyebrow">PROMOTION TARGET</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stack" style="flex:1">
|
||||
<h6>Mono inline</h6>
|
||||
<div class="specrow"><code class="mono">whynot-control/INTENT.md</code></div>
|
||||
<div class="specrow"><code class="mono">stage: prototype-candidate</code></div>
|
||||
<div class="specrow"><code class="mono">→ Helix</code></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 28px; display: flex; gap: 10px; align-items: center;">
|
||||
<span class="tag">Raw Idea</span>
|
||||
<span class="tag">Prototype Candidate</span>
|
||||
<span class="tag">Experiment</span>
|
||||
<span class="tag">Promotion Candidate</span>
|
||||
<span class="tag">Parked</span>
|
||||
</div>
|
||||
</body></html>
|
||||
17
designbook/preview/type-serif-quote.html
Normal file
17
designbook/preview/type-serif-quote.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="Type · Serif Quote" subtitle="PlexSerif italic · editorial moments" viewport="700x210" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Serif Quote</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 32px 36px; background: var(--paper); }
|
||||
blockquote { margin: 0; max-width: 60ch; padding-left: 16px; border-left: 1px solid var(--border-strong); }
|
||||
blockquote .q { font: 400 italic 22px/1.4 var(--ff-serif); color: var(--ink); margin: 0 0 12px; }
|
||||
blockquote cite { font: 500 11px/1.2 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); font-style: normal; }
|
||||
</style></head>
|
||||
<body>
|
||||
<blockquote>
|
||||
<p class="q">A prototype is a question made tangible. The purpose is not to prove an idea is brilliant. The purpose is to learn what is actually useful, desirable, feasible, or irrelevant.</p>
|
||||
<cite>— whynot-control / INTENT.md</cite>
|
||||
</blockquote>
|
||||
</body></html>
|
||||
9
designbook/styles.css
Normal file
9
designbook/styles.css
Normal file
@@ -0,0 +1,9 @@
|
||||
/* ============================================================
|
||||
WhyNot Design System — canonical stylesheet entry point
|
||||
------------------------------------------------------------
|
||||
Consumers link ONE file: <link rel="stylesheet" href="styles.css">
|
||||
It pulls in the token + semantic layer. The component utility
|
||||
layer (components.css) ships with the distributable package
|
||||
(see the whynot-design repo seed) and is imported there.
|
||||
============================================================ */
|
||||
@import "colors_and_type.css";
|
||||
102
designbook/ui_kits/whynot-control/Atoms.jsx
Normal file
102
designbook/ui_kits/whynot-control/Atoms.jsx
Normal file
@@ -0,0 +1,102 @@
|
||||
// =============================================================
|
||||
// Atoms — Eyebrow, Tag, Button, StageDot, Stamp, IconBtn
|
||||
// =============================================================
|
||||
|
||||
function Eyebrow({ children, style }) {
|
||||
return (
|
||||
<span style={{
|
||||
font: '500 11px/1.2 var(--ff-mono)',
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
color: 'var(--fg-3)',
|
||||
...style,
|
||||
}}>{children}</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Tag({ children, active, draft, style }) {
|
||||
const base = {
|
||||
font: '500 10px/1 var(--ff-mono)',
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
padding: '5px 10px',
|
||||
borderRadius: 'var(--r-pill)',
|
||||
border: '1px solid var(--border)',
|
||||
color: 'var(--fg-2)',
|
||||
background: 'var(--paper)',
|
||||
display: 'inline-block',
|
||||
};
|
||||
if (active) Object.assign(base, { background: 'var(--ink)', color: 'var(--paper)', borderColor: 'var(--ink)' });
|
||||
if (draft) Object.assign(base, { background: 'var(--hi)', color: 'var(--hi-ink)', borderColor: 'transparent' });
|
||||
return <span style={{ ...base, ...style }}>{children}</span>;
|
||||
}
|
||||
|
||||
function Button({ children, variant = 'secondary', onClick, style, icon }) {
|
||||
const base = {
|
||||
font: '500 13px var(--ff-sans)',
|
||||
letterSpacing: '-0.005em',
|
||||
padding: '9px 14px',
|
||||
borderRadius: 'var(--r-2)',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--paper)',
|
||||
color: 'var(--ink)',
|
||||
cursor: 'pointer',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
whiteSpace: 'nowrap',
|
||||
transition: 'background 120ms ease, border-color 120ms ease',
|
||||
};
|
||||
if (variant === 'primary') Object.assign(base, { background: 'var(--ink)', color: 'var(--paper)', borderColor: 'var(--ink)' });
|
||||
if (variant === 'ghost') Object.assign(base, { background: 'transparent', borderColor: 'transparent', padding: '7px 10px' });
|
||||
return (
|
||||
<button onClick={onClick} style={{ ...base, ...style }}>
|
||||
{icon && <i data-lucide={icon} style={{ width: 14, height: 14, strokeWidth: 1.5 }}></i>}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const STAGE_COLORS = {
|
||||
S0: '#B5B5B3', S1: '#8A8A8A', S2: '#5C5C5C', S3: '#0A0A0A', S4: '#FFD400',
|
||||
};
|
||||
|
||||
function StageDot({ level = 'S2', label, style }) {
|
||||
return (
|
||||
<span style={{
|
||||
font: '500 10px/1 var(--ff-mono)',
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
color: 'var(--fg-2)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
...style,
|
||||
}}>
|
||||
<span style={{ width: 8, height: 8, borderRadius: 999, background: STAGE_COLORS[level] }}></span>
|
||||
{label || level}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Stamp({ children, style }) {
|
||||
return (
|
||||
<span style={{
|
||||
display: 'inline-block',
|
||||
background: 'var(--hi)',
|
||||
color: 'var(--hi-ink)',
|
||||
padding: '5px 10px 3px',
|
||||
font: '500 10px/1 var(--ff-mono)',
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
transform: 'rotate(-1.5deg)',
|
||||
...style,
|
||||
}}>{children}</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Icon({ name, size = 16, style }) {
|
||||
return <i data-lucide={name} style={{ width: size, height: size, strokeWidth: 1.5, ...style }}></i>;
|
||||
}
|
||||
|
||||
Object.assign(window, { Eyebrow, Tag, Button, StageDot, Stamp, Icon, STAGE_COLORS });
|
||||
163
designbook/ui_kits/whynot-control/Chrome.jsx
Normal file
163
designbook/ui_kits/whynot-control/Chrome.jsx
Normal file
@@ -0,0 +1,163 @@
|
||||
// =============================================================
|
||||
// Chrome — TopNav, Sidebar, PageHeader, PipelineStrip
|
||||
// =============================================================
|
||||
|
||||
function TopNav({ onNew }) {
|
||||
return (
|
||||
<nav style={{
|
||||
height: 56,
|
||||
background: 'rgba(255,255,255,0.92)',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 28,
|
||||
padding: '0 24px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<img src="../../assets/whynot-logo.png" alt="" style={{ width: 22, height: 22 }} />
|
||||
<span style={{ font: '500 14px var(--ff-sans)' }}>whynot</span>
|
||||
<span style={{ font: '400 12px var(--ff-mono)', color: 'var(--fg-3)', letterSpacing: '0.04em' }}>/ control</span>
|
||||
</div>
|
||||
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{
|
||||
font: '400 12px var(--ff-mono)',
|
||||
color: 'var(--fg-3)',
|
||||
border: '1px solid var(--border)',
|
||||
padding: '6px 10px',
|
||||
borderRadius: 'var(--r-1)',
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
minWidth: 240,
|
||||
}}>
|
||||
<Icon name="search" size={14} />
|
||||
<span>Search ideas, prototypes, signals…</span>
|
||||
<span style={{ marginLeft: 'auto', padding: '1px 5px', border: '1px solid var(--border)', borderRadius: 2, fontSize: 10 }}>⌘ K</span>
|
||||
</div>
|
||||
<Button variant="primary" icon="plus" onClick={onNew}>New idea</Button>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ key: 'inbox', label: 'Inbox', icon: 'inbox', count: 7 },
|
||||
{ key: 'prototypes', label: 'Prototypes', icon: 'flask-conical', count: 4 },
|
||||
{ key: 'signals', label: 'Signals', icon: 'activity', count: 12 },
|
||||
{ key: 'betas', label: 'Betas', icon: 'users', count: 1 },
|
||||
{ key: 'decisions', label: 'Decisions', icon: 'check-square', count: 3 },
|
||||
];
|
||||
|
||||
const DOC_ITEMS = [
|
||||
{ key: 'intent', label: 'INTENT.md' },
|
||||
{ key: 'scope', label: 'SCOPE.md' },
|
||||
{ key: 'operating', label: 'OPERATING_MODEL.md' },
|
||||
{ key: 'pipeline', label: 'PROTOTYPE_PIPELINE.md' },
|
||||
{ key: 'agent', label: 'AGENT_RULES.md' },
|
||||
];
|
||||
|
||||
function Sidebar({ current, onNav }) {
|
||||
const itemStyle = (active) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
padding: '6px 10px',
|
||||
color: active ? 'var(--fg-1)' : 'var(--fg-3)',
|
||||
background: 'transparent',
|
||||
borderLeft: active ? '2px solid var(--ink)' : '2px solid transparent',
|
||||
paddingLeft: active ? 10 : 12,
|
||||
font: active ? '500 13px var(--ff-sans)' : '400 13px var(--ff-sans)',
|
||||
cursor: 'pointer',
|
||||
textDecoration: 'none',
|
||||
transition: 'color 120ms ease, border-color 120ms ease',
|
||||
});
|
||||
return (
|
||||
<aside style={{
|
||||
width: 200, flex: 'none',
|
||||
background: 'transparent',
|
||||
borderRight: 'none',
|
||||
padding: '32px 0 32px 8px',
|
||||
display: 'flex', flexDirection: 'column', gap: 32,
|
||||
height: 'calc(100vh - 56px)',
|
||||
position: 'sticky', top: 56,
|
||||
overflowY: 'auto',
|
||||
}}>
|
||||
<div>
|
||||
<Eyebrow style={{ paddingLeft: 12, marginBottom: 10, display: 'block', opacity: 0.7 }}>Work</Eyebrow>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{NAV_ITEMS.map(item => (
|
||||
<a key={item.key} onClick={() => onNav(item.key)} style={itemStyle(current === item.key)}>
|
||||
<span>{item.label}</span>
|
||||
<span style={{ marginLeft: 'auto', font: '400 11px var(--ff-mono)', color: 'var(--ink-5)' }}>{item.count}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Eyebrow style={{ paddingLeft: 12, marginBottom: 10, display: 'block', opacity: 0.7 }}>Control docs</Eyebrow>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{DOC_ITEMS.map(item => (
|
||||
<a key={item.key} onClick={() => onNav('doc:' + item.key)} style={{ ...itemStyle(current === 'doc:' + item.key), font: current === 'doc:' + item.key ? '500 12px var(--ff-mono)' : '400 12px var(--ff-mono)' }}>
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 'auto', padding: '0 12px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--ink-4)' }}></span>
|
||||
<span style={{ font: '400 11px var(--ff-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>A1 · Incubating</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function PageHeader({ eyebrow, title, lede, actions }) {
|
||||
return (
|
||||
<header style={{ marginBottom: 48, display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 24 }}>
|
||||
<h1 style={{ font: '400 36px/1.1 var(--ff-sans)', letterSpacing: '-0.02em', margin: 0, flex: 1 }}>{title}</h1>
|
||||
{actions && <div style={{ display: 'flex', gap: 8 }}>{actions}</div>}
|
||||
</div>
|
||||
{lede && <p style={{ font: '400 16px/1.6 var(--ff-sans)', color: 'var(--fg-2)', margin: '4px 0 0', maxWidth: '56ch' }}>{lede}</p>}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function PipelineStrip({ activeIdx = 3 }) {
|
||||
const stages = [
|
||||
{ num: 'Stage 0', name: 'Raw idea', meta: 'inbox/' },
|
||||
{ num: 'Stage 1', name: 'Triage', meta: '2026-02-12' },
|
||||
{ num: 'Stage 2', name: 'Prototype card', meta: 'prototypes/' },
|
||||
{ num: 'Stage 3', name: 'Experiment', meta: 'ends 2026-04-01' },
|
||||
{ num: 'Stage 4', name: 'Signal review', meta: '— pending' },
|
||||
];
|
||||
return (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, position: 'relative', margin: '0 0 32px' }}>
|
||||
{stages.map((s, i) => {
|
||||
const state = i < activeIdx ? 'done' : i === activeIdx ? 'active' : 'pending';
|
||||
const topColor = state === 'done' ? 'var(--ink)' : state === 'active' ? 'var(--hi-2)' : 'var(--border)';
|
||||
return (
|
||||
<div key={i} style={{
|
||||
padding: '10px 12px 14px',
|
||||
borderTop: `2px solid ${topColor}`,
|
||||
display: 'flex', flexDirection: 'column', gap: 4,
|
||||
position: 'relative',
|
||||
}}>
|
||||
<span style={{ font: '500 10px/1 var(--ff-mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: state === 'pending' ? 'var(--fg-3)' : 'var(--fg-1)' }}>{s.num}</span>
|
||||
<span style={{ font: '500 14px/1.25 var(--ff-sans)', color: state === 'pending' ? 'var(--fg-3)' : 'var(--fg-1)' }}>{s.name}</span>
|
||||
<span style={{ font: '400 11px/1.35 var(--ff-mono)', color: 'var(--fg-3)' }}>{s.meta}</span>
|
||||
{i > 0 && (
|
||||
<span style={{ position: 'absolute', top: -8, right: -7, font: '400 14px var(--ff-mono)', color: state === 'pending' ? 'var(--ink-5)' : 'var(--ink)' }}>→</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { TopNav, Sidebar, PageHeader, PipelineStrip, NAV_ITEMS, DOC_ITEMS });
|
||||
102
designbook/ui_kits/whynot-control/DocView.jsx
Normal file
102
designbook/ui_kits/whynot-control/DocView.jsx
Normal file
@@ -0,0 +1,102 @@
|
||||
// =============================================================
|
||||
// Document viewer — renders one of the control docs
|
||||
// =============================================================
|
||||
|
||||
const DOC_CONTENT = {
|
||||
intent: {
|
||||
title: 'INTENT.md',
|
||||
eyebrow: 'whynot-control · control document',
|
||||
sections: [
|
||||
{ h: 'Purpose', p: 'whynot-control exists to serve as the control repository for the whynot organisation: a prototype, feedback, and market-signal space for discovering the weird and the useful.' },
|
||||
{ h: 'Primary utility', list: [
|
||||
'capture unusual but potentially useful ideas;',
|
||||
'distinguish curiosity from commitment;',
|
||||
'shape rough ideas into testable prototypes;',
|
||||
'collect early feedback and market signals;',
|
||||
'run closed beta concepts in a controlled way;',
|
||||
'identify which ideas should move toward Helix, Coulomb, Sloppers, Plenitude, Binky, or Tegwick;',
|
||||
'prevent premature productisation.',
|
||||
]},
|
||||
{ h: 'Operating principle', quote: 'A prototype is a question made tangible. The purpose of a prototype is not to prove that an idea is brilliant. The purpose is to learn what is actually useful, desirable, feasible, or irrelevant.' },
|
||||
],
|
||||
},
|
||||
scope: {
|
||||
title: 'SCOPE.md',
|
||||
eyebrow: 'whynot-control · control document',
|
||||
sections: [
|
||||
{ h: 'Current reality', p: 'whynot-control is the control repository for organising prototype exploration and early market-signal capture.' },
|
||||
{ h: 'In scope', list: ['Prototype idea capture.', 'Prototype classification.', 'Early user feedback notes.', 'Market-signal tracking.', 'Closed beta planning.', 'Experiment records.', 'Promotion recommendations.', 'Agent-assisted drafting and analysis.'] },
|
||||
{ h: 'Out of scope', list: ['Production implementation.', 'Long-term product maintenance.', 'Payment processing.', 'Legal investment documentation.', 'Public launch operations.', 'Binding financial, legal, or tax conclusions.'] },
|
||||
{ h: 'Scope guardrail', quote: 'whynot-control explores and validates. It does not absorb all product development.' },
|
||||
],
|
||||
},
|
||||
operating: {
|
||||
title: 'OPERATING_MODEL.md',
|
||||
eyebrow: 'whynot-control · control document',
|
||||
sections: [
|
||||
{ h: 'Core rules', list: [
|
||||
'Prototypes are questions. Each prototype should express a question about usefulness, desirability, feasibility, or willingness to pay.',
|
||||
'Signal beats enthusiasm. An idea should not be promoted only because it is exciting.',
|
||||
'Low-cost learning first. Prefer sketches, mockups, demos, landing pages, conversations.',
|
||||
'Closed beta before broad launch.',
|
||||
'Promotion requires criteria.',
|
||||
]},
|
||||
{ h: 'Burnout guardrail', quote: 'A prototype can be interesting and still be parked. whynot exists to reduce uncertainty, not to create more obligations.' },
|
||||
],
|
||||
},
|
||||
pipeline: {
|
||||
title: 'PROTOTYPE_PIPELINE.md',
|
||||
eyebrow: 'whynot-control · control document',
|
||||
sections: [
|
||||
{ h: 'Stage 0 — Raw capture', p: 'Capture ideas without judging them immediately. Located in inbox/. Done when the idea is saved and no longer needs to be held in memory.' },
|
||||
{ h: 'Stage 1 — Triage', p: 'Decide whether an idea deserves a prototype card. Outcomes: create card, park, merge, reject.' },
|
||||
{ h: 'Stage 2 — Prototype card', p: 'Turn the idea into a structured prototype candidate. Located in prototypes/.' },
|
||||
{ h: 'Stage 3 — Experiment', p: 'Test the idea with minimal cost: concept note, landing page, clickable mockup, CLI/demo script, Wizard-of-Oz, manual concierge test, closed conversation, private beta.' },
|
||||
{ h: 'Stage 4 — Signal review', p: 'Evaluate what was learned. Interest, usefulness, retention, referral, payment, contribution, strategic fit.' },
|
||||
{ h: 'Stage 5 — Decision', p: 'Park, iterate, promote, reject, or merge. Promotion requires an explicit record in DECISIONS.md.' },
|
||||
],
|
||||
},
|
||||
agent: {
|
||||
title: 'AGENT_RULES.md',
|
||||
eyebrow: 'whynot-control · control document',
|
||||
sections: [
|
||||
{ h: 'General principle', p: 'Agents may help clarify, structure, draft, compare, and analyse prototype ideas. They must not silently turn experiments into product commitments.' },
|
||||
{ h: 'Allowed', list: ['draft prototype cards', 'classify ideas by lifecycle stage', 'propose smallest useful tests', 'summarise feedback', 'compare prototype candidates', 'improve wording and structure'] },
|
||||
{ h: 'Forbidden', list: ['create artificial urgency', 'treat all prototype ideas as products', 'infer willingness to pay without evidence', 'present weak signals as strong validation', 'create legal, financial, or investment commitments'] },
|
||||
{ h: 'Preferred output style', quote: 'Agent outputs should be concise, evidence-oriented, explicit about uncertainty, and careful to separate idea, hypothesis, signal, and decision.' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
function DocView({ docKey }) {
|
||||
const doc = DOC_CONTENT[docKey];
|
||||
if (!doc) return <div>Doc not found.</div>;
|
||||
return (
|
||||
<article style={{ maxWidth: 680 }}>
|
||||
<Eyebrow>{doc.eyebrow}</Eyebrow>
|
||||
<h1 style={{ font: '600 36px/1.1 var(--ff-mono)', letterSpacing: '-0.01em', margin: '12px 0 28px' }}>{doc.title}</h1>
|
||||
{doc.sections.map((s, i) => (
|
||||
<section key={i} style={{ marginBottom: 36 }}>
|
||||
<h2 style={{ font: '500 22px/1.25 var(--ff-sans)', letterSpacing: '-0.005em', margin: '0 0 14px' }}>{s.h}</h2>
|
||||
{s.p && <p style={{ margin: 0, font: '400 15px/1.65 var(--ff-sans)', color: 'var(--fg-1)' }}>{s.p}</p>}
|
||||
{s.list && (
|
||||
<ul style={{ margin: 0, paddingLeft: 18, color: 'var(--fg-1)', font: '400 15px/1.7 var(--ff-sans)' }}>
|
||||
{s.list.map((li, j) => <li key={j} style={{ marginBottom: 6 }}>{li}</li>)}
|
||||
</ul>
|
||||
)}
|
||||
{s.quote && (
|
||||
<blockquote style={{ margin: 0, paddingLeft: 16, borderLeft: '1px solid var(--border-strong)' }}>
|
||||
<p style={{ margin: 0, font: '400 italic 17px/1.55 var(--ff-serif)', color: 'var(--fg-2)' }}>{s.quote}</p>
|
||||
</blockquote>
|
||||
)}
|
||||
</section>
|
||||
))}
|
||||
<div style={{ marginTop: 48, padding: '14px 0', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>
|
||||
<span>whynot-control / {doc.title}</span>
|
||||
<span>A1 · Incubating · 2026</span>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { DocView, DOC_CONTENT });
|
||||
31
designbook/ui_kits/whynot-control/README.md
Normal file
31
designbook/ui_kits/whynot-control/README.md
Normal file
@@ -0,0 +1,31 @@
|
||||
# whynot-control UI kit
|
||||
|
||||
A click-through high-fidelity recreation of the `whynot-control` repository — rendered not as a folder of Markdown files, but as the lightweight web application it implies.
|
||||
|
||||
This kit demonstrates the WhyNot Design System applied to its primary use case: a prototype-and-signal control surface. Everything here is **cosmetic** — there's no backend, no persistence, no real router. Each screen is a working visual artefact you can drop into a design review.
|
||||
|
||||
## Screens
|
||||
|
||||
| Screen | Source doc(s) | Component |
|
||||
|---|---|---|
|
||||
| Inbox | `inbox/` | `Inbox.jsx` |
|
||||
| Prototypes (index) | `prototypes/` + `PROTOTYPE_PIPELINE.md` | `PrototypesIndex.jsx` |
|
||||
| Prototype (detail) | `templates/prototype-card.md` + `example-prototype-card.md` | `PrototypeDetail.jsx` |
|
||||
| Signals | `signals/` + `MARKET_SIGNAL.md` | `SignalsIndex.jsx` |
|
||||
| Document viewer | `INTENT.md`, `OPERATING_MODEL.md` | `DocView.jsx` |
|
||||
|
||||
## Components
|
||||
|
||||
- `TopNav.jsx` — sticky 56px hairline top bar (search + new-idea action).
|
||||
- `Sidebar.jsx` — left rail with org slug, repo nav, activation indicator.
|
||||
- `PrototypeCard.jsx` — the card from `preview/comp-prototype-card.html`, factored.
|
||||
- `PipelineStrip.jsx` — the 5-stage progress strip from `preview/comp-pipeline.html`.
|
||||
- `SignalRow.jsx` — one row in the signals table.
|
||||
- `Tag.jsx`, `Eyebrow.jsx`, `Button.jsx`, `StageDot.jsx`, `Stamp.jsx` — atoms used everywhere.
|
||||
|
||||
## Conventions
|
||||
|
||||
- All components are flat function components, no hooks beyond `useState` for screen routing.
|
||||
- Components export themselves onto `window` so each `<script type="text/babel">` file can find them.
|
||||
- Style objects are inline or scoped (e.g. `cardStyles`, `navStyles`) to avoid name collisions.
|
||||
- Icons are Lucide via CDN, rendered as `<i data-lucide="…">` and hydrated by `lucide.createIcons()`.
|
||||
274
designbook/ui_kits/whynot-control/Screens.jsx
Normal file
274
designbook/ui_kits/whynot-control/Screens.jsx
Normal file
@@ -0,0 +1,274 @@
|
||||
// =============================================================
|
||||
// Screens — Inbox, PrototypesIndex, PrototypeDetail, SignalsIndex, DocView, BetasIndex, DecisionsIndex
|
||||
// =============================================================
|
||||
|
||||
function Inbox({ onCapture }) {
|
||||
const [draft, setDraft] = React.useState('');
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="whynot-control / inbox"
|
||||
title="Inbox"
|
||||
lede="Temporary capture for rough ideas, weird observations, user comments, market hints, and product fragments. Capture is not commitment."
|
||||
/>
|
||||
<div style={{
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--r-2)',
|
||||
padding: 16,
|
||||
background: 'var(--paper)',
|
||||
marginBottom: 28,
|
||||
display: 'flex', flexDirection: 'column', gap: 10,
|
||||
}}>
|
||||
<Eyebrow>Capture</Eyebrow>
|
||||
<textarea
|
||||
value={draft}
|
||||
onChange={e => setDraft(e.target.value)}
|
||||
placeholder="An idea, an observation, a fragment. No filter, no judgement, no commitment."
|
||||
style={{
|
||||
font: '400 14px/1.5 var(--ff-sans)',
|
||||
border: 'none', outline: 'none', resize: 'none',
|
||||
minHeight: 64, padding: 0, background: 'transparent', color: 'var(--fg-1)',
|
||||
}}
|
||||
/>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ font: '400 11px var(--ff-mono)', color: 'var(--fg-3)', marginRight: 'auto' }}>
|
||||
⌘ ↵ to capture · stored in <code className="mono">inbox/</code>
|
||||
</span>
|
||||
<Button variant="ghost" onClick={() => setDraft('')}>Discard</Button>
|
||||
<Button variant="primary" icon="inbox" onClick={() => { onCapture && onCapture(draft); setDraft(''); }}>Capture</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
|
||||
<Eyebrow>Recent · 7</Eyebrow>
|
||||
<div style={{ flex: 1, borderTop: '1px solid var(--border-soft)' }}></div>
|
||||
<span style={{ font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>↓ newest first</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{INBOX.map(item => (
|
||||
<div key={item.id} style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '120px 1fr',
|
||||
gap: '4px 24px',
|
||||
padding: '20px 0',
|
||||
borderBottom: '1px solid var(--border-soft)',
|
||||
alignItems: 'baseline',
|
||||
}}>
|
||||
<span style={{ font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>{item.ts}</span>
|
||||
<span style={{ font: '500 10px/1 var(--ff-mono)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{item.from}</span>
|
||||
<p style={{ gridColumn: '1 / -1', margin: '4px 0 0', font: '400 15px/1.6 var(--ff-sans)', color: 'var(--fg-1)', maxWidth: '60ch' }}>{item.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PrototypeListCard({ p, onOpen }) {
|
||||
const [hover, setHover] = React.useState(false);
|
||||
return (
|
||||
<article
|
||||
onClick={() => onOpen(p.id)}
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
style={{
|
||||
background: 'var(--paper)',
|
||||
borderTop: '1px solid var(--border-soft)',
|
||||
padding: '24px 0 28px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 12,
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
transition: 'background 120ms ease',
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
||||
<Eyebrow style={{ color: hover ? 'var(--fg-1)' : 'var(--fg-3)' }}>{p.id} · Prototype</Eyebrow>
|
||||
<StageDot level={p.signal} label={p.stageLabel} />
|
||||
</div>
|
||||
<h3 style={{ font: '400 22px/1.3 var(--ff-sans)', letterSpacing: '-0.01em', margin: '2px 0 8px', color: 'var(--fg-1)', maxWidth: '52ch' }}>{p.pitch}</h3>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: '10px 16px', fontSize: 14, color: 'var(--fg-2)', maxWidth: '60ch' }}>
|
||||
<span style={{ font: '500 11px/1.7 var(--ff-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>Learning q.</span>
|
||||
<span style={{ lineHeight: 1.55 }}>{p.learning}</span>
|
||||
<span style={{ font: '500 11px/1.7 var(--ff-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>Smallest test</span>
|
||||
<span style={{ lineHeight: 1.55 }}>{p.test}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 24, marginTop: 4, font: '500 11px var(--ff-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
|
||||
<span>→ {p.target}</span>
|
||||
<span>{p.signal} signal</span>
|
||||
<span style={{ marginLeft: 'auto', color: hover ? 'var(--fg-1)' : 'var(--fg-3)' }}>Open →</span>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function PrototypesIndex({ onOpen }) {
|
||||
const [filter, setFilter] = React.useState('All');
|
||||
const filters = ['All', 'Experiment', 'Signal review', 'Parked'];
|
||||
const list = filter === 'All' ? PROTOTYPES : PROTOTYPES.filter(p => p.stageLabel === filter);
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="whynot-control / prototypes"
|
||||
title="Prototypes"
|
||||
lede="Structured prototype cards. A prototype card defines a learning question and the smallest useful test."
|
||||
actions={<Button variant="primary" icon="plus">New prototype</Button>}
|
||||
/>
|
||||
<div style={{ display: 'flex', gap: 10, marginBottom: 8, alignItems: 'center' }}>
|
||||
{filters.map(f => (
|
||||
<Tag key={f} active={filter === f} style={{ cursor: 'pointer' }} >
|
||||
<span onClick={() => setFilter(f)}>{f}</span>
|
||||
</Tag>
|
||||
))}
|
||||
<span style={{ marginLeft: 'auto', font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>{list.length} of {PROTOTYPES.length}</span>
|
||||
</div>
|
||||
<div>
|
||||
{list.map(p => <PrototypeListCard key={p.id} p={p} onOpen={onOpen} />)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PrototypeDetail({ id, onBack }) {
|
||||
const p = PROTOTYPES.find(p => p.id === id) || PROTOTYPES[0];
|
||||
const stageIdx = { 'parked': 0, 'experiment': 3, 'signal': 4, 'experiment-active': 3 }[p.stage] ?? 3;
|
||||
return (
|
||||
<div>
|
||||
<a onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, font: '400 12px var(--ff-mono)', color: 'var(--fg-2)', textDecoration: 'none', marginBottom: 18, cursor: 'pointer' }}>
|
||||
<Icon name="arrow-left" size={14} /> Back to prototypes
|
||||
</a>
|
||||
<PageHeader
|
||||
eyebrow={`${p.id} · Prototype`}
|
||||
title={p.pitch}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<Button variant="secondary" icon="archive">Park</Button>
|
||||
<Button variant="primary" icon="arrow-right">Promote → {p.target}</Button>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
<PipelineStrip activeIdx={stageIdx} />
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32 }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
|
||||
<Field label="Learning question" value={p.learning} />
|
||||
<Field label="Smallest useful test" value={p.test} />
|
||||
<Field label="Expected signal" value="At least one person asks for a concrete next step, gives specific use-case feedback, or identifies a realistic context where the idea would matter." />
|
||||
<Field label="Risks" value={p.risks} />
|
||||
</div>
|
||||
<aside style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
||||
<SidebarField label="Stage" value={<Tag active>{p.stageLabel}</Tag>} />
|
||||
<SidebarField label="Signal" value={<StageDot level={p.signal} />} />
|
||||
<SidebarField label="Target" value={<code className="mono">→ {p.target}</code>} />
|
||||
<SidebarField label="Audience" value="Potential early users, collaborators, or customers." />
|
||||
<SidebarField label="Agentic suitability" value="Agents may help turn rough notes into a sharper prototype card." />
|
||||
<div style={{ marginTop: 6, border: '1px dashed var(--border-strong)', borderRadius: 4, padding: 14 }}>
|
||||
<Eyebrow style={{ display: 'block', marginBottom: 8 }}>Caveat</Eyebrow>
|
||||
<p style={{ margin: 0, font: '400 13px/1.55 var(--ff-sans)', color: 'var(--fg-2)' }}>
|
||||
A prototype can be interesting and still be parked. <code className="mono">whynot</code> exists to reduce uncertainty, not create more obligations.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, value }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<Eyebrow>{label}</Eyebrow>
|
||||
<p style={{ margin: 0, font: '400 15px/1.55 var(--ff-sans)', color: 'var(--fg-1)' }}>{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarField({ label, value }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<Eyebrow>{label}</Eyebrow>
|
||||
<div style={{ font: '400 13px/1.5 var(--ff-sans)', color: 'var(--fg-1)' }}>{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SignalsIndex() {
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="whynot-control / signals"
|
||||
title="Signals"
|
||||
lede="Market-signal and feedback records. A signal is evidence. Record what happened, who did it, and how strong the evidence is."
|
||||
actions={<Button variant="primary" icon="plus">Record signal</Button>}
|
||||
/>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{SIGNALS.map(s => (
|
||||
<div key={s.id} style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '90px 90px 1fr',
|
||||
gap: '6px 24px',
|
||||
padding: '20px 0',
|
||||
borderBottom: '1px solid var(--border-soft)',
|
||||
alignItems: 'baseline',
|
||||
}}>
|
||||
<code className="mono" style={{ background: 'none', padding: 0, color: 'var(--fg-3)', font: '400 11px var(--ff-mono)' }}>{s.id}</code>
|
||||
<code className="mono" style={{ background: 'none', padding: 0, color: 'var(--fg-2)', font: '400 11px var(--ff-mono)' }}>{s.proto}</code>
|
||||
<StageDot level={s.level} />
|
||||
<p style={{ gridColumn: '1 / -1', margin: '4px 0 0', font: '400 14px/1.55 var(--ff-sans)', color: 'var(--fg-1)', maxWidth: '60ch' }}>{s.what}</p>
|
||||
<span style={{ gridColumn: '1 / -1', font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>{s.source} · {s.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BetasIndex() {
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="whynot-control / betas"
|
||||
title="Betas"
|
||||
lede="Closed beta plans and beta review notes. A beta should have a clear learning question, entry criteria, and exit outcome."
|
||||
/>
|
||||
<div style={{
|
||||
border: '1px dashed var(--border-strong)',
|
||||
padding: 32,
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
|
||||
textAlign: 'center',
|
||||
color: 'var(--fg-3)',
|
||||
borderRadius: 4,
|
||||
}}>
|
||||
<Icon name="users" size={20} />
|
||||
<div style={{ font: '500 14px var(--ff-sans)', color: 'var(--fg-2)' }}>One beta plan in draft.</div>
|
||||
<div style={{ font: '400 12px var(--ff-mono)', color: 'var(--fg-3)' }}>WNO-021 · Concierge triage · pending Binky approval</div>
|
||||
<a href="#" style={{ font: '500 12px var(--ff-mono)', color: 'var(--fg-1)', marginTop: 4 }}>Open draft →</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DecisionsIndex() {
|
||||
const decisions = [
|
||||
{ id: 'DEC-001', title: 'Shorten organisation name from whywhynot to whynot.', status: 'Accepted', date: '2026-01-08' },
|
||||
{ id: 'DEC-002', title: 'Maintain A1 Incubating until first prototype candidates review.', status: 'Open', date: '—' },
|
||||
{ id: 'DEC-003', title: 'Initial promotion targets: Helix, Coulomb, Sloppers, Plenitude, Binky, Tegwick.', status: 'Open', date: '—' },
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<PageHeader eyebrow="whynot-control / decisions" title="Decisions" lede="A promotion record is required before any prototype moves to Helix, Coulomb, Sloppers, Plenitude, Binky, or Tegwick." />
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{decisions.map(d => (
|
||||
<div key={d.id} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 130px 100px', gap: 20, alignItems: 'baseline', padding: '16px 4px', borderBottom: '1px solid var(--border-soft)' }}>
|
||||
<code className="mono" style={{ background: 'none', padding: 0, color: 'var(--fg-1)' }}>{d.id}</code>
|
||||
<span style={{ font: '500 15px var(--ff-sans)', color: 'var(--fg-1)' }}>{d.title}</span>
|
||||
<Tag active={d.status === 'Accepted'} draft={d.status === 'Open'}>{d.status}</Tag>
|
||||
<span style={{ font: '400 12px var(--ff-mono)', color: 'var(--fg-3)', textAlign: 'right' }}>{d.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { Inbox, PrototypesIndex, PrototypeDetail, SignalsIndex, BetasIndex, DecisionsIndex, Field, SidebarField, PrototypeListCard });
|
||||
71
designbook/ui_kits/whynot-control/data.jsx
Normal file
71
designbook/ui_kits/whynot-control/data.jsx
Normal file
@@ -0,0 +1,71 @@
|
||||
// =============================================================
|
||||
// Sample data — prototypes, signals, inbox items
|
||||
// =============================================================
|
||||
|
||||
const PROTOTYPES = [
|
||||
{
|
||||
id: 'WNO-014',
|
||||
pitch: 'A field-notebook for catching weird ideas before they evaporate.',
|
||||
learning: 'Do people return to capture more than once?',
|
||||
test: 'One-page landing + email capture, 14 days.',
|
||||
target: 'Coulomb',
|
||||
stage: 'experiment',
|
||||
stageLabel: 'Experiment',
|
||||
signal: 'S1',
|
||||
risks: 'Confused with note-taking apps.',
|
||||
},
|
||||
{
|
||||
id: 'WNO-017',
|
||||
pitch: 'A LEGO-brick mood board for engineers who don’t think in mood boards.',
|
||||
learning: 'Will engineers attach metaphors to their tickets?',
|
||||
test: 'Slack bot, three teams, two weeks.',
|
||||
target: 'Helix',
|
||||
stage: 'signal',
|
||||
stageLabel: 'Signal review',
|
||||
signal: 'S3',
|
||||
risks: 'Cute but unused after a week.',
|
||||
},
|
||||
{
|
||||
id: 'WNO-021',
|
||||
pitch: 'Concierge-style “prototype triage” for indie hackers.',
|
||||
learning: 'Will three founders pay for a one-hour triage call?',
|
||||
test: 'Offer beta · 3 calls · listed price.',
|
||||
target: 'Plenitude',
|
||||
stage: 'experiment',
|
||||
stageLabel: 'Experiment',
|
||||
signal: 'S2',
|
||||
risks: 'Time-cost outruns signal value.',
|
||||
},
|
||||
{
|
||||
id: 'WNO-024',
|
||||
pitch: 'A relevant-#CoronaPolitics timeline, re-released with one editor.',
|
||||
learning: 'Is there residual demand five years on?',
|
||||
test: 'Static preview page, 30 days, count returns.',
|
||||
target: 'None yet',
|
||||
stage: 'parked',
|
||||
stageLabel: 'Parked',
|
||||
signal: 'S0',
|
||||
risks: 'Topical relevance has clearly faded.',
|
||||
},
|
||||
];
|
||||
|
||||
const INBOX = [
|
||||
{ id: 1, ts: '2026-03-02 14:21', text: 'Idea: “subway map” view of the prototype pipeline. People understand transit maps; they don’t understand kanban boards.', from: 'Tegwick' },
|
||||
{ id: 2, ts: '2026-03-01 09:08', text: 'Weird observation from yesterday’s call: three founders independently asked for “something to capture the half-formed stuff”.', from: 'note-to-self' },
|
||||
{ id: 3, ts: '2026-02-28 23:55', text: 'Could the LEGO-brick metaphor extend to a public “build log” format? One brick = one decision.', from: 'Tegwick' },
|
||||
{ id: 4, ts: '2026-02-27 11:34', text: 'Park idea: realtime sentiment dashboard for prototype landing pages. Probably worse than reading the comments.', from: 'note-to-self' },
|
||||
{ id: 5, ts: '2026-02-26 17:02', text: 'Conversation with R. about closed-beta etiquette. Useful: pre-write the exit email before the beta opens.', from: 'note-to-self' },
|
||||
{ id: 6, ts: '2026-02-25 08:12', text: 'fuerindifferenz shirts: residual interest from old whywhynot.de page. Could a yearly drop work?', from: 'Tegwick' },
|
||||
{ id: 7, ts: '2026-02-24 15:40', text: 'Tiny idea: a “reject log” that publishes the ideas you said no to, with one-sentence reasons.', from: 'note-to-self' },
|
||||
];
|
||||
|
||||
const SIGNALS = [
|
||||
{ id: 'SIG-031', proto: 'WNO-017', level: 'S3', what: 'Two teams shipped public README sections labelled “brick: scope” after using the bot for a week.', source: 'usage log', date: '2026-03-04' },
|
||||
{ id: 'SIG-030', proto: 'WNO-017', level: 'S2', what: 'Three engineers DM’d asking for an export-to-Notion option.', source: 'Slack', date: '2026-03-03' },
|
||||
{ id: 'SIG-029', proto: 'WNO-014', level: 'S1', what: 'Landing page: 34 visits, 7 emails, 0 returns in week 1.', source: 'Plausible', date: '2026-03-01' },
|
||||
{ id: 'SIG-028', proto: 'WNO-021', level: 'S2', what: 'First triage call booked at listed price; second declined on price.', source: 'Stripe / email', date: '2026-02-28' },
|
||||
{ id: 'SIG-027', proto: 'WNO-021', level: 'S1', what: '“Interesting but I’d want a free first one” ×2.', source: 'interview', date: '2026-02-26' },
|
||||
{ id: 'SIG-026', proto: 'WNO-024', level: 'S0', what: 'Static preview: 12 visits in 30 days, 0 returns.', source: 'Plausible', date: '2026-02-24' },
|
||||
];
|
||||
|
||||
Object.assign(window, { PROTOTYPES, INBOX, SIGNALS });
|
||||
77
designbook/ui_kits/whynot-control/index.html
Normal file
77
designbook/ui_kits/whynot-control/index.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Pages" name="Pages · User dashboard" subtitle="Authenticated app · inbox, prototypes, signals, betas, decisions, docs" viewport="1200x740" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>whynot · control</title>
|
||||
<link rel="icon" href="../../assets/whynot-logo.png">
|
||||
<link rel="stylesheet" href="../../colors_and_type.css">
|
||||
<style>
|
||||
html, body { background: var(--paper); }
|
||||
body { min-height: 100vh; }
|
||||
.app { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
|
||||
.main { padding: 56px 64px 96px; max-width: 880px; }
|
||||
/* Lucide icons inherit currentColor */
|
||||
[data-lucide] { stroke-width: 1.5; }
|
||||
/* Cleanup: button reset */
|
||||
button { font-family: inherit; }
|
||||
button:active { transform: none; }
|
||||
a { cursor: pointer; }
|
||||
</style>
|
||||
|
||||
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script type="text/babel" src="Atoms.jsx"></script>
|
||||
<script type="text/babel" src="Chrome.jsx"></script>
|
||||
<script type="text/babel" src="data.jsx"></script>
|
||||
<script type="text/babel" src="Screens.jsx"></script>
|
||||
<script type="text/babel" src="DocView.jsx"></script>
|
||||
|
||||
<script type="text/babel">
|
||||
const { useState, useEffect } = React;
|
||||
|
||||
function App() {
|
||||
const [route, setRoute] = useState('prototypes'); // inbox | prototypes | signals | betas | decisions | proto:<id> | doc:<key>
|
||||
|
||||
useEffect(() => {
|
||||
// re-hydrate lucide icons whenever the route changes
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
}, [route]);
|
||||
|
||||
const onNav = (key) => setRoute(key);
|
||||
const onOpen = (id) => setRoute('proto:' + id);
|
||||
const onBack = () => setRoute('prototypes');
|
||||
|
||||
let screen;
|
||||
if (route === 'inbox') screen = <Inbox onCapture={() => {}} />;
|
||||
else if (route === 'prototypes') screen = <PrototypesIndex onOpen={onOpen} />;
|
||||
else if (route.startsWith('proto:')) screen = <PrototypeDetail id={route.slice(6)} onBack={onBack} />;
|
||||
else if (route === 'signals') screen = <SignalsIndex />;
|
||||
else if (route === 'betas') screen = <BetasIndex />;
|
||||
else if (route === 'decisions') screen = <DecisionsIndex />;
|
||||
else if (route.startsWith('doc:')) screen = <DocView docKey={route.slice(4)} />;
|
||||
else screen = <Inbox />;
|
||||
|
||||
const sidebarKey = route.startsWith('proto:') ? 'prototypes' : route;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopNav onNew={() => setRoute('inbox')} />
|
||||
<div className="app">
|
||||
<Sidebar current={sidebarKey} onNav={onNav} />
|
||||
<main className="main">{screen}</main>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
33
ir/README.md
Normal file
33
ir/README.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# `ir/` — technology-neutral design blueprint
|
||||
|
||||
This directory holds the **intermediate representation (IR)** of the whynot design
|
||||
language: tokens, per-component contracts, and reference exemplars, in a form that
|
||||
carries no framework assumptions.
|
||||
|
||||
## Decision: `ir/` is committed
|
||||
|
||||
`ir/` is **checked into git**, on purpose. The IR is the diffable blueprint of the
|
||||
shared language — committing it means a re-extract (`make ir`) surfaces every
|
||||
blueprint change as a reviewable git diff, and adapters have a stable, versioned
|
||||
input. It is a build *input*, not a throwaway build *output*.
|
||||
|
||||
What is committed:
|
||||
|
||||
- `tokens.json` — all tokens, W3C DTCG format.
|
||||
- `components/<Name>.json` — one contract per component.
|
||||
- `exemplars/<Name>.{png,html}` — reference renders from the designbook preview.
|
||||
- `schema/` + `SCHEMA.md` — the contract definitions (this is what T01 delivered).
|
||||
|
||||
## Direction of flow
|
||||
|
||||
```
|
||||
Claude Design (React) ──/design-sync──▶ designbook/ ──make ir──▶ ir/ ──make adapt-lit──▶ adapters/lit/
|
||||
```
|
||||
|
||||
One-way. The only writer of `tokens.json`, `components/`, and `exemplars/` is the
|
||||
extractor (`scripts/ir-extract.mjs`, T05). **Do not hand-edit those** — change the
|
||||
language in Claude Design and re-propagate. The `schema/` files and these docs are
|
||||
the exception: they are authored here.
|
||||
|
||||
See [`SCHEMA.md`](./SCHEMA.md) for the full contract spec and a worked `Button`
|
||||
exemplar.
|
||||
141
ir/SCHEMA.md
Normal file
141
ir/SCHEMA.md
Normal file
@@ -0,0 +1,141 @@
|
||||
# whynot IR — Schema
|
||||
|
||||
> The **technology-neutral blueprint** for the whynot design language.
|
||||
> Part of WHYNOT-WP-0002. The IR is the pivot between the canonical React
|
||||
> designbook and every per-stack adapter (Lit is the reference adapter).
|
||||
|
||||
## Why an IR exists
|
||||
|
||||
Claude Design's `/design-sync` produces a **React-bound** designbook. A non-React
|
||||
design system "has nothing for the design agent to build with." The IR breaks that
|
||||
binding: React stays the *authoring surface*, but the IR — committed, diffable,
|
||||
framework-free — is the actual contract that adapters project onto each stack.
|
||||
|
||||
**Directionality is one-way: React → IR → stacks.** Nothing writes back to `ir/`
|
||||
except the extractor (`scripts/ir-extract.mjs`, T05). A change to the shared
|
||||
language is made in Claude Design and re-propagated; the IR is never hand-edited.
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
ir/
|
||||
SCHEMA.md ← this file (narrative spec)
|
||||
README.md ← the committed-blueprint decision + workflow
|
||||
schema/
|
||||
tokens.schema.json ← JSON Schema for tokens.json (W3C DTCG)
|
||||
component.schema.json ← JSON Schema for each components/<Name>.json
|
||||
tokens.json ← all design tokens, W3C DTCG format (emitted by T05)
|
||||
components/<Name>.json ← one contract per component (emitted by T05)
|
||||
exemplars/<Name>.{png,html} ← reference render from the designbook (emitted by T05)
|
||||
```
|
||||
|
||||
## Tokens — `ir/tokens.json`
|
||||
|
||||
Adopts the **W3C Design Tokens Community Group** format: every token is an object
|
||||
with `$value` and (optionally inherited) `$type`; groups nest; `$description`
|
||||
carries documentation. This is a published standard rather than a bespoke shape,
|
||||
so the token layer can feed Style Dictionary or any DTCG tool unchanged.
|
||||
|
||||
```json
|
||||
{
|
||||
"color": {
|
||||
"$type": "color",
|
||||
"ink": { "$value": "#0A0A0A", "$description": "Near-black. The only fill most of the time." },
|
||||
"line": { "$value": "#E5E5E2", "$description": "Default 1px wireframe rule." }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> **Migration note.** The repo's current `tokens/*.json` use the older draft shape
|
||||
> (`value`/`type`, no `$` prefix). The extractor (T05) normalises them to the
|
||||
> `$`-prefixed DTCG shape on the way into `ir/tokens.json`. Validate with
|
||||
> `schema/tokens.schema.json`.
|
||||
|
||||
## Component contract — `ir/components/<Name>.json`
|
||||
|
||||
Captures everything an adapter needs to scaffold a stub and detect drift, with no
|
||||
framework assumptions. Validate with `schema/component.schema.json`. Fields:
|
||||
|
||||
| Field | Meaning |
|
||||
|---|---|
|
||||
| `name` | PascalCase canonical name (`Button`). |
|
||||
| `tag` | Advisory custom-element tag (`wn-button`). |
|
||||
| `group` | Designbook group (`atoms`, `chrome`, `form`). |
|
||||
| `description` | Purpose, from the React `.prompt.md`. |
|
||||
| `props[]` | Public inputs — see below. |
|
||||
| `slots[]` | Named/default content slots. |
|
||||
| `events[]` | Emitted events (e.g. `wn-dismiss`). |
|
||||
| `variants[]` | Variant axes — named dimensions with discrete values. |
|
||||
| `docsRef` | Path to source docs under `designbook/`. |
|
||||
| `exemplarRef` | Path to the reference render under `ir/exemplars/`. |
|
||||
|
||||
### The prop → attribute mapping (the crux)
|
||||
|
||||
React props are camelCase properties; Lit/Vue/plain-HTML bind **attributes**
|
||||
(kebab-case). Each prop therefore records **both** identities plus a portability
|
||||
flag:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "iconEnd", // React prop, camelCase
|
||||
"type": "string",
|
||||
"attribute": "icon-end", // HTML attribute an attribute-driven adapter binds
|
||||
"portable": true
|
||||
}
|
||||
```
|
||||
|
||||
- `attribute: false` means the prop is deliberately **not** an attribute
|
||||
(property-only, or non-portable).
|
||||
- `portable: false` marks props that don't map cleanly to an attribute — objects,
|
||||
render props, callbacks. **Adapters MUST surface non-portable props as drift,
|
||||
never silently drop them** (open risk in the workplan). Such props pair with
|
||||
`type` ∈ {`object`, `function`, `node`}.
|
||||
|
||||
This mapping is exactly what the Lit elements already encode, e.g.
|
||||
`iconEnd: { type: String, attribute: "icon-end" }` in `src/elements/atoms.js`.
|
||||
|
||||
## Worked exemplar — `Button`
|
||||
|
||||
Derived from the existing `<wn-button>` (`src/elements/atoms.js`) to show the
|
||||
target shape the React extractor must produce:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "Button",
|
||||
"tag": "wn-button",
|
||||
"group": "atoms",
|
||||
"description": "Primary action control. Renders a <button>, or an <a> when href is set.",
|
||||
"props": [
|
||||
{ "name": "variant", "type": "enum", "attribute": "variant", "enum": ["primary", "secondary", "ghost"], "default": "secondary" },
|
||||
{ "name": "size", "type": "enum", "attribute": "size", "enum": ["sm", "md", "lg"], "default": "md" },
|
||||
{ "name": "icon", "type": "string", "attribute": "icon" },
|
||||
{ "name": "iconEnd", "type": "string", "attribute": "icon-end" },
|
||||
{ "name": "type", "type": "string", "attribute": "type", "default": "button" },
|
||||
{ "name": "disabled", "type": "boolean", "attribute": "disabled", "default": false },
|
||||
{ "name": "href", "type": "string", "attribute": "href" }
|
||||
],
|
||||
"slots": [
|
||||
{ "name": "default", "description": "Button label." }
|
||||
],
|
||||
"events": [],
|
||||
"variants": [
|
||||
{ "axis": "variant", "values": ["primary", "secondary", "ghost"], "default": "secondary" },
|
||||
{ "axis": "size", "values": ["sm", "md", "lg"], "default": "md" }
|
||||
],
|
||||
"docsRef": "designbook/components/atoms/Button/Button.prompt.md",
|
||||
"exemplarRef": "ir/exemplars/Button.html"
|
||||
}
|
||||
```
|
||||
|
||||
> The `enum` values for `variant` are illustrative of the contract shape; the
|
||||
> authoritative values come from the React source at extraction time (T05).
|
||||
|
||||
## Validation
|
||||
|
||||
```bash
|
||||
# once an extractor exists (T05):
|
||||
node scripts/ir-validate.mjs # validates tokens.json + components/*.json against schema/
|
||||
```
|
||||
|
||||
Until then, the schemas are usable with any draft-2020-12 validator (ajv, etc.).
|
||||
The extractor (T05) MUST validate its output against these schemas before writing.
|
||||
63
ir/components/Button.json
Normal file
63
ir/components/Button.json
Normal file
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"name": "Button",
|
||||
"tag": "wn-button",
|
||||
"group": "atoms",
|
||||
"description": "Button — extracted from designbook ui_kits/whynot-control/Atoms.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "variant",
|
||||
"attribute": "variant",
|
||||
"type": "enum",
|
||||
"enum": [
|
||||
"secondary",
|
||||
"primary",
|
||||
"ghost"
|
||||
],
|
||||
"default": "secondary"
|
||||
},
|
||||
{
|
||||
"name": "onClick",
|
||||
"type": "function",
|
||||
"attribute": false,
|
||||
"portable": false,
|
||||
"description": "React callback prop — surface as an event on attribute-driven stacks."
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"type": "object",
|
||||
"attribute": false,
|
||||
"portable": false,
|
||||
"description": "React inline style override — not portable to an attribute."
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"attribute": "icon",
|
||||
"type": "boolean"
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{
|
||||
"name": "default",
|
||||
"description": "Default content."
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "wn-click",
|
||||
"description": "Emitted for onClick."
|
||||
}
|
||||
],
|
||||
"variants": [
|
||||
{
|
||||
"axis": "variant",
|
||||
"values": [
|
||||
"secondary",
|
||||
"primary",
|
||||
"ghost"
|
||||
],
|
||||
"default": "secondary"
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Atoms.jsx",
|
||||
"exemplarRef": "ir/exemplars/Button.html"
|
||||
}
|
||||
23
ir/components/Eyebrow.json
Normal file
23
ir/components/Eyebrow.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "Eyebrow",
|
||||
"tag": "wn-eyebrow",
|
||||
"group": "atoms",
|
||||
"description": "Eyebrow — extracted from designbook ui_kits/whynot-control/Atoms.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "style",
|
||||
"type": "object",
|
||||
"attribute": false,
|
||||
"portable": false,
|
||||
"description": "React inline style override — not portable to an attribute."
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{
|
||||
"name": "default",
|
||||
"description": "Default content."
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Atoms.jsx",
|
||||
"exemplarRef": "ir/exemplars/Eyebrow.html"
|
||||
}
|
||||
27
ir/components/Icon.json
Normal file
27
ir/components/Icon.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "Icon",
|
||||
"tag": "wn-icon",
|
||||
"group": "atoms",
|
||||
"description": "Icon — extracted from designbook ui_kits/whynot-control/Atoms.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "name",
|
||||
"attribute": "name",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"attribute": "size",
|
||||
"type": "number",
|
||||
"default": 16
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"type": "object",
|
||||
"attribute": false,
|
||||
"portable": false,
|
||||
"description": "React inline style override — not portable to an attribute."
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Atoms.jsx"
|
||||
}
|
||||
30
ir/components/PageHeader.json
Normal file
30
ir/components/PageHeader.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "PageHeader",
|
||||
"tag": "wn-page-header",
|
||||
"group": "chrome",
|
||||
"description": "PageHeader — extracted from designbook ui_kits/whynot-control/Chrome.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "eyebrow",
|
||||
"attribute": "eyebrow",
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"attribute": "title",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"name": "lede",
|
||||
"attribute": "lede",
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"name": "actions",
|
||||
"attribute": "actions",
|
||||
"type": "boolean"
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Chrome.jsx",
|
||||
"exemplarRef": "ir/exemplars/PageHeader.html"
|
||||
}
|
||||
16
ir/components/PipelineStrip.json
Normal file
16
ir/components/PipelineStrip.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "PipelineStrip",
|
||||
"tag": "wn-pipeline-strip",
|
||||
"group": "chrome",
|
||||
"description": "PipelineStrip — extracted from designbook ui_kits/whynot-control/Chrome.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "activeIdx",
|
||||
"attribute": "active-idx",
|
||||
"type": "number",
|
||||
"default": 3
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Chrome.jsx",
|
||||
"exemplarRef": "ir/exemplars/PipelineStrip.html"
|
||||
}
|
||||
39
ir/components/Sidebar.json
Normal file
39
ir/components/Sidebar.json
Normal file
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "Sidebar",
|
||||
"tag": "wn-sidebar",
|
||||
"group": "chrome",
|
||||
"description": "Sidebar — extracted from designbook ui_kits/whynot-control/Chrome.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "current",
|
||||
"attribute": "current",
|
||||
"type": "enum",
|
||||
"enum": [
|
||||
"doc:"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "onNav",
|
||||
"type": "function",
|
||||
"attribute": false,
|
||||
"portable": false,
|
||||
"description": "React callback prop — surface as an event on attribute-driven stacks."
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "wn-nav",
|
||||
"description": "Emitted for onNav."
|
||||
}
|
||||
],
|
||||
"variants": [
|
||||
{
|
||||
"axis": "current",
|
||||
"values": [
|
||||
"doc:"
|
||||
]
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Chrome.jsx",
|
||||
"exemplarRef": "ir/exemplars/Sidebar.html"
|
||||
}
|
||||
28
ir/components/StageDot.json
Normal file
28
ir/components/StageDot.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "StageDot",
|
||||
"tag": "wn-stage-dot",
|
||||
"group": "atoms",
|
||||
"description": "StageDot — extracted from designbook ui_kits/whynot-control/Atoms.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "level",
|
||||
"attribute": "level",
|
||||
"type": "string",
|
||||
"default": "S2"
|
||||
},
|
||||
{
|
||||
"name": "label",
|
||||
"attribute": "label",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"type": "object",
|
||||
"attribute": false,
|
||||
"portable": false,
|
||||
"description": "React inline style override — not portable to an attribute."
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Atoms.jsx",
|
||||
"exemplarRef": "ir/exemplars/StageDot.html"
|
||||
}
|
||||
22
ir/components/Stamp.json
Normal file
22
ir/components/Stamp.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "Stamp",
|
||||
"tag": "wn-stamp",
|
||||
"group": "atoms",
|
||||
"description": "Stamp — extracted from designbook ui_kits/whynot-control/Atoms.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "style",
|
||||
"type": "object",
|
||||
"attribute": false,
|
||||
"portable": false,
|
||||
"description": "React inline style override — not portable to an attribute."
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{
|
||||
"name": "default",
|
||||
"description": "Default content."
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Atoms.jsx"
|
||||
}
|
||||
33
ir/components/Tag.json
Normal file
33
ir/components/Tag.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "Tag",
|
||||
"tag": "wn-tag",
|
||||
"group": "atoms",
|
||||
"description": "Tag — extracted from designbook ui_kits/whynot-control/Atoms.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "active",
|
||||
"attribute": "active",
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"name": "draft",
|
||||
"attribute": "draft",
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"type": "object",
|
||||
"attribute": false,
|
||||
"portable": false,
|
||||
"description": "React inline style override — not portable to an attribute."
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{
|
||||
"name": "default",
|
||||
"description": "Default content."
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Atoms.jsx",
|
||||
"exemplarRef": "ir/exemplars/Tag.html"
|
||||
}
|
||||
23
ir/components/TopNav.json
Normal file
23
ir/components/TopNav.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "TopNav",
|
||||
"tag": "wn-top-nav",
|
||||
"group": "chrome",
|
||||
"description": "TopNav — extracted from designbook ui_kits/whynot-control/Chrome.jsx.",
|
||||
"props": [
|
||||
{
|
||||
"name": "onNew",
|
||||
"type": "function",
|
||||
"attribute": false,
|
||||
"portable": false,
|
||||
"description": "React callback prop — surface as an event on attribute-driven stacks."
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "wn-new",
|
||||
"description": "Emitted for onNew."
|
||||
}
|
||||
],
|
||||
"docsRef": "designbook/ui_kits/whynot-control/Chrome.jsx",
|
||||
"exemplarRef": "ir/exemplars/TopNav.html"
|
||||
}
|
||||
40
ir/exemplars/Button.html
Normal file
40
ir/exemplars/Button.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Buttons" subtitle="Primary · secondary · ghost" viewport="700x240" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Buttons</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 28px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(4, max-content); gap: 12px 14px; align-items: center; }
|
||||
.col-h { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.row-h { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.btn { font: 500 13px var(--ff-sans); letter-spacing: -0.005em; padding: 9px 16px; border-radius: var(--r-2); border: 1px solid transparent; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
|
||||
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.btn.primary.hover { background: var(--ink-2); border-color: var(--ink-2); }
|
||||
.btn.primary.disabled { background: var(--ink-5); border-color: var(--ink-5); color: var(--paper); cursor: not-allowed; }
|
||||
.btn.secondary { background: var(--paper); color: var(--ink); border-color: var(--border); }
|
||||
.btn.secondary.hover { border-color: var(--ink); }
|
||||
.btn.secondary.disabled { color: var(--ink-5); border-color: var(--border); cursor: not-allowed; }
|
||||
.btn.ghost { background: transparent; color: var(--ink); border-color: transparent; padding-left: 8px; padding-right: 8px; }
|
||||
.btn.ghost.hover { background: var(--paper-3); }
|
||||
.btn.ghost.disabled { color: var(--ink-5); cursor: not-allowed; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Buttons — primary · secondary · ghost</div>
|
||||
<div class="grid">
|
||||
<div></div><div class="col-h">Default</div><div class="col-h">Hover</div><div class="col-h">Disabled</div>
|
||||
<div class="row-h">Primary</div>
|
||||
<button class="btn primary">Promote prototype</button>
|
||||
<button class="btn primary hover">Promote prototype</button>
|
||||
<button class="btn primary disabled">Promote prototype</button>
|
||||
<div class="row-h">Secondary</div>
|
||||
<button class="btn secondary">Park</button>
|
||||
<button class="btn secondary hover">Park</button>
|
||||
<button class="btn secondary disabled">Park</button>
|
||||
<div class="row-h">Ghost</div>
|
||||
<button class="btn ghost">View signal</button>
|
||||
<button class="btn ghost hover">View signal</button>
|
||||
<button class="btn ghost disabled">View signal</button>
|
||||
</div>
|
||||
</body></html>
|
||||
44
ir/exemplars/Eyebrow.html
Normal file
44
ir/exemplars/Eyebrow.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Labels & Tags" subtitle="Stage tags · signal dots" viewport="700x200" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Labels & Tags</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||||
.stack { display: flex; flex-direction: column; gap: 18px; }
|
||||
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
||||
.tag { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--fg-2); background: var(--paper); }
|
||||
.tag.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
|
||||
.tag.draft { background: var(--hi); color: var(--hi-ink); border-color: transparent; }
|
||||
.stage { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; }
|
||||
.stage .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
|
||||
.stage.s0 .dot { background: #B5B5B3 } .stage.s1 .dot { background: #8A8A8A }
|
||||
.stage.s2 .dot { background: #5C5C5C } .stage.s3 .dot { background: #0A0A0A }
|
||||
.stage.s4 .dot { background: #FFD400 }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="stack">
|
||||
<div>
|
||||
<div class="row-label">Tags — default · active · draft</div>
|
||||
<div class="row">
|
||||
<span class="tag">Raw Idea</span>
|
||||
<span class="tag">Prototype Candidate</span>
|
||||
<span class="tag active">Experiment</span>
|
||||
<span class="tag">Promotion Candidate</span>
|
||||
<span class="tag">Parked</span>
|
||||
<span class="tag draft">Draft</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row-label">Signal dots — inline indicator</div>
|
||||
<div class="row">
|
||||
<span class="stage s0"><span class="dot"></span>S0 · No signal</span>
|
||||
<span class="stage s1"><span class="dot"></span>S1 · Weak</span>
|
||||
<span class="stage s2"><span class="dot"></span>S2 · Medium</span>
|
||||
<span class="stage s3"><span class="dot"></span>S3 · Strong</span>
|
||||
<span class="stage s4"><span class="dot"></span>S4 · Commercial</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
37
ir/exemplars/PageHeader.html
Normal file
37
ir/exemplars/PageHeader.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Top Navigation" subtitle="56px · 1px hairline · ⌘K search" viewport="900x160" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Top Navigation</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; background: var(--paper-2); font-family: var(--ff-sans); min-height: 200px; }
|
||||
.nav { height: 56px; background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 32px; padding: 0 24px; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; font: 500 14px var(--ff-sans); }
|
||||
.brand img { width: 22px; height: 22px; }
|
||||
.brand .org { font-family: var(--ff-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }
|
||||
.links { display: flex; gap: 22px; }
|
||||
.links a { font: 500 13px var(--ff-sans); color: var(--fg-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
|
||||
.links a.active { color: var(--fg-1); border-bottom-color: var(--ink); }
|
||||
.right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
|
||||
.right .search { font: 400 12px var(--ff-mono); color: var(--fg-3); border: 1px solid var(--border); padding: 6px 10px; border-radius: var(--r-1); display: flex; align-items: center; gap: 8px; min-width: 200px; }
|
||||
.right .kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--border); border-radius: 2px; font-size: 10px; }
|
||||
.right .btn { font: 500 12px var(--ff-sans); padding: 7px 12px; border-radius: var(--r-2); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
|
||||
.body-preview { padding: 32px 24px; color: var(--fg-3); font: 400 13px var(--ff-mono); }
|
||||
</style></head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="brand"><img src="../assets/whynot-logo.png" alt=""><span>whynot</span><span class="org">/ control</span></div>
|
||||
<div class="links">
|
||||
<a class="active" href="#">Inbox</a>
|
||||
<a href="#">Prototypes</a>
|
||||
<a href="#">Signals</a>
|
||||
<a href="#">Betas</a>
|
||||
<a href="#">Decisions</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="search"><span>Search…</span><span class="kbd">⌘ K</span></div>
|
||||
<button class="btn">+ New idea</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="body-preview">// 56px height · 1px hairline · rgba(255,255,255,0.92) when scrolled</div>
|
||||
</body></html>
|
||||
30
ir/exemplars/PipelineStrip.html
Normal file
30
ir/exemplars/PipelineStrip.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Pipeline" subtitle="Lifecycle stage tracker" viewport="700x180" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Pipeline / Lifecycle</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 28px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 22px; }
|
||||
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
|
||||
.stage { padding: 10px 12px 14px; border-top: 2px solid var(--border); display: flex; flex-direction: column; gap: 4px; position: relative; }
|
||||
.stage.done { border-top-color: var(--ink); }
|
||||
.stage.active { border-top-color: var(--hi-2); }
|
||||
.stage .num { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.stage.done .num, .stage.active .num { color: var(--fg-1); }
|
||||
.stage .name { font: 500 14px/1.25 var(--ff-sans); color: var(--fg-1); }
|
||||
.stage.pending .name { color: var(--fg-3); }
|
||||
.stage .meta { font: 400 11px/1.35 var(--ff-mono); color: var(--fg-3); }
|
||||
.arrow { position: absolute; top: -8px; right: -7px; font: 400 14px var(--ff-mono); color: var(--ink-5); }
|
||||
.stage.active .arrow, .stage.done .arrow { color: var(--ink); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="row-label">Pipeline — Raw → Candidate → Experiment → Signal → Decision</div>
|
||||
<div class="pipeline">
|
||||
<div class="stage done"><span class="num">Stage 0</span><span class="name">Raw idea</span><span class="meta">inbox/</span></div>
|
||||
<div class="stage done"><span class="num">Stage 1</span><span class="name">Triage</span><span class="meta">2026-02-12</span><span class="arrow">→</span></div>
|
||||
<div class="stage done"><span class="num">Stage 2</span><span class="name">Prototype card</span><span class="meta">prototypes/</span><span class="arrow">→</span></div>
|
||||
<div class="stage active"><span class="num">Stage 3</span><span class="name">Experiment</span><span class="meta">ends 2026-04-01</span><span class="arrow">→</span></div>
|
||||
<div class="stage pending"><span class="num">Stage 4</span><span class="name">Signal review</span><span class="meta">— pending</span><span class="arrow">→</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
85
ir/exemplars/Sidebar.html
Normal file
85
ir/exemplars/Sidebar.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Left Navigation" subtitle="Grouped sidebar · active state · minimal variant" viewport="700x420" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Left Navigation</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 20px; background: var(--paper); display: flex; gap: 28px; align-items: stretch; }
|
||||
.frame { display: flex; flex-direction: column; gap: 8px; }
|
||||
.frame > .cap { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; }
|
||||
.leftnav {
|
||||
width: 220px; box-sizing: border-box;
|
||||
display: flex; flex-direction: column; gap: 28px;
|
||||
padding: 24px 8px 24px 12px;
|
||||
border-right: 1px solid var(--line-soft);
|
||||
min-height: 360px;
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
|
||||
.brand img { width: 20px; height: 20px; }
|
||||
.brand .nm { font: 500 14px var(--ff-sans); color: var(--fg-1); }
|
||||
.brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
|
||||
.body { display: flex; flex-direction: column; gap: 28px; flex: 1; }
|
||||
.section { display: flex; flex-direction: column; gap: 8px; }
|
||||
.section .lbl { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; opacity: 0.7; }
|
||||
.items { display: flex; flex-direction: column; gap: 1px; }
|
||||
.item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 10px; border-left: 2px solid transparent;
|
||||
color: var(--fg-3); font: 400 13px var(--ff-sans); cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.item .ic { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }
|
||||
.item .t { flex: 1; }
|
||||
.item .n { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--ink-5); }
|
||||
.item.active { color: var(--fg-1); font-weight: 500; border-left-color: var(--ink); }
|
||||
.item.active .n { color: var(--fg-3); }
|
||||
.item.doc { font: 400 12px var(--ff-mono); }
|
||||
.footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 400 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
|
||||
.footer .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4); }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<span class="cap">Default · grouped, with active state</span>
|
||||
<nav class="leftnav">
|
||||
<div class="brand"><img src="../assets/whynot-logo.png" alt=""><span class="nm">whynot</span><span class="slug">/ control</span></div>
|
||||
<div class="body">
|
||||
<div class="section">
|
||||
<span class="lbl">Work</span>
|
||||
<div class="items">
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg><span class="t">Inbox</span><span class="n">7</span></a>
|
||||
<a class="item active"><svg class="ic" viewBox="0 0 24 24"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg><span class="t">Prototypes</span><span class="n">4</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.5.5 0 0 1-.96 0L9.24 2.18a.5.5 0 0 0-.96 0l-2.35 8.36A2 2 0 0 1 4 12H2"/></svg><span class="t">Signals</span><span class="n">12</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg><span class="t">Betas</span><span class="n">1</span></a>
|
||||
<a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg><span class="t">Decisions</span><span class="n">3</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<span class="lbl">Control docs</span>
|
||||
<div class="items">
|
||||
<a class="item doc"><span class="t">INTENT.md</span></a>
|
||||
<a class="item doc"><span class="t">SCOPE.md</span></a>
|
||||
<a class="item doc"><span class="t">OPERATING_MODEL.md</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer"><span class="dot"></span><span>A1 · Incubating</span></div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="frame">
|
||||
<span class="cap">Minimal · no brand, no icons</span>
|
||||
<nav class="leftnav" style="min-height: 360px;">
|
||||
<div class="body">
|
||||
<div class="section">
|
||||
<span class="lbl">Navigate</span>
|
||||
<div class="items">
|
||||
<a class="item active"><span class="t">Overview</span></a>
|
||||
<a class="item"><span class="t">Prototypes</span><span class="n">4</span></a>
|
||||
<a class="item"><span class="t">Signals</span><span class="n">12</span></a>
|
||||
<a class="item"><span class="t">Settings</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</body></html>
|
||||
44
ir/exemplars/StageDot.html
Normal file
44
ir/exemplars/StageDot.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Labels & Tags" subtitle="Stage tags · signal dots" viewport="700x200" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Labels & Tags</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||||
.stack { display: flex; flex-direction: column; gap: 18px; }
|
||||
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
||||
.tag { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--fg-2); background: var(--paper); }
|
||||
.tag.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
|
||||
.tag.draft { background: var(--hi); color: var(--hi-ink); border-color: transparent; }
|
||||
.stage { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; }
|
||||
.stage .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
|
||||
.stage.s0 .dot { background: #B5B5B3 } .stage.s1 .dot { background: #8A8A8A }
|
||||
.stage.s2 .dot { background: #5C5C5C } .stage.s3 .dot { background: #0A0A0A }
|
||||
.stage.s4 .dot { background: #FFD400 }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="stack">
|
||||
<div>
|
||||
<div class="row-label">Tags — default · active · draft</div>
|
||||
<div class="row">
|
||||
<span class="tag">Raw Idea</span>
|
||||
<span class="tag">Prototype Candidate</span>
|
||||
<span class="tag active">Experiment</span>
|
||||
<span class="tag">Promotion Candidate</span>
|
||||
<span class="tag">Parked</span>
|
||||
<span class="tag draft">Draft</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row-label">Signal dots — inline indicator</div>
|
||||
<div class="row">
|
||||
<span class="stage s0"><span class="dot"></span>S0 · No signal</span>
|
||||
<span class="stage s1"><span class="dot"></span>S1 · Weak</span>
|
||||
<span class="stage s2"><span class="dot"></span>S2 · Medium</span>
|
||||
<span class="stage s3"><span class="dot"></span>S3 · Strong</span>
|
||||
<span class="stage s4"><span class="dot"></span>S4 · Commercial</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
44
ir/exemplars/Tag.html
Normal file
44
ir/exemplars/Tag.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Labels & Tags" subtitle="Stage tags · signal dots" viewport="700x200" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Labels & Tags</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { padding: 24px 32px; background: var(--paper); }
|
||||
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
||||
.stack { display: flex; flex-direction: column; gap: 18px; }
|
||||
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
||||
.tag { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--fg-2); background: var(--paper); }
|
||||
.tag.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
|
||||
.tag.draft { background: var(--hi); color: var(--hi-ink); border-color: transparent; }
|
||||
.stage { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; }
|
||||
.stage .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
|
||||
.stage.s0 .dot { background: #B5B5B3 } .stage.s1 .dot { background: #8A8A8A }
|
||||
.stage.s2 .dot { background: #5C5C5C } .stage.s3 .dot { background: #0A0A0A }
|
||||
.stage.s4 .dot { background: #FFD400 }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="stack">
|
||||
<div>
|
||||
<div class="row-label">Tags — default · active · draft</div>
|
||||
<div class="row">
|
||||
<span class="tag">Raw Idea</span>
|
||||
<span class="tag">Prototype Candidate</span>
|
||||
<span class="tag active">Experiment</span>
|
||||
<span class="tag">Promotion Candidate</span>
|
||||
<span class="tag">Parked</span>
|
||||
<span class="tag draft">Draft</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row-label">Signal dots — inline indicator</div>
|
||||
<div class="row">
|
||||
<span class="stage s0"><span class="dot"></span>S0 · No signal</span>
|
||||
<span class="stage s1"><span class="dot"></span>S1 · Weak</span>
|
||||
<span class="stage s2"><span class="dot"></span>S2 · Medium</span>
|
||||
<span class="stage s3"><span class="dot"></span>S3 · Strong</span>
|
||||
<span class="stage s4"><span class="dot"></span>S4 · Commercial</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
37
ir/exemplars/TopNav.html
Normal file
37
ir/exemplars/TopNav.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="Components · Top Navigation" subtitle="56px · 1px hairline · ⌘K search" viewport="900x160" -->
|
||||
<html><head>
|
||||
<meta charset="utf-8"><title>Top Navigation</title>
|
||||
<link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body { margin: 0; background: var(--paper-2); font-family: var(--ff-sans); min-height: 200px; }
|
||||
.nav { height: 56px; background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 32px; padding: 0 24px; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; font: 500 14px var(--ff-sans); }
|
||||
.brand img { width: 22px; height: 22px; }
|
||||
.brand .org { font-family: var(--ff-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }
|
||||
.links { display: flex; gap: 22px; }
|
||||
.links a { font: 500 13px var(--ff-sans); color: var(--fg-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
|
||||
.links a.active { color: var(--fg-1); border-bottom-color: var(--ink); }
|
||||
.right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
|
||||
.right .search { font: 400 12px var(--ff-mono); color: var(--fg-3); border: 1px solid var(--border); padding: 6px 10px; border-radius: var(--r-1); display: flex; align-items: center; gap: 8px; min-width: 200px; }
|
||||
.right .kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--border); border-radius: 2px; font-size: 10px; }
|
||||
.right .btn { font: 500 12px var(--ff-sans); padding: 7px 12px; border-radius: var(--r-2); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
|
||||
.body-preview { padding: 32px 24px; color: var(--fg-3); font: 400 13px var(--ff-mono); }
|
||||
</style></head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="brand"><img src="../assets/whynot-logo.png" alt=""><span>whynot</span><span class="org">/ control</span></div>
|
||||
<div class="links">
|
||||
<a class="active" href="#">Inbox</a>
|
||||
<a href="#">Prototypes</a>
|
||||
<a href="#">Signals</a>
|
||||
<a href="#">Betas</a>
|
||||
<a href="#">Decisions</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="search"><span>Search…</span><span class="kbd">⌘ K</span></div>
|
||||
<button class="btn">+ New idea</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="body-preview">// 56px height · 1px hairline · rgba(255,255,255,0.92) when scrolled</div>
|
||||
</body></html>
|
||||
159
ir/schema/component.schema.json
Normal file
159
ir/schema/component.schema.json
Normal file
@@ -0,0 +1,159 @@
|
||||
{
|
||||
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
||||
"$id": "https://whynot.design/ir/schema/component.schema.json",
|
||||
"title": "whynot IR — Component Contract",
|
||||
"description": "Technology-neutral contract for one component in the whynot designbook. Extracted one-way from the canonical React designbook (WHYNOT-WP-0002). Adapters consume this to scaffold stubs and detect drift; they never write back to it.",
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"required": ["name", "group", "description", "props"],
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"description": "Canonical component name in PascalCase (e.g. \"Button\"). The Lit adapter maps this to the <wn-button> tag.",
|
||||
"pattern": "^[A-Z][A-Za-z0-9]*$"
|
||||
},
|
||||
"tag": {
|
||||
"type": "string",
|
||||
"description": "Suggested custom-element tag for web-component adapters (e.g. \"wn-button\"). Advisory; an adapter owns its own naming.",
|
||||
"pattern": "^[a-z][a-z0-9-]*$"
|
||||
},
|
||||
"group": {
|
||||
"type": "string",
|
||||
"description": "Grouping from the designbook manifest (e.g. \"atoms\", \"chrome\", \"form\"). Mirrors src/elements/<group>.js in the Lit adapter."
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"description": "One- or two-sentence purpose, sourced from the React component's .prompt.md docs."
|
||||
},
|
||||
"props": {
|
||||
"type": "array",
|
||||
"description": "Public inputs. Each prop carries its React identity AND its projection onto an HTML attribute, so attribute-driven stacks (Lit, Vue, plain HTML) are first-class.",
|
||||
"items": { "$ref": "#/$defs/prop" }
|
||||
},
|
||||
"slots": {
|
||||
"type": "array",
|
||||
"description": "Named/default content slots.",
|
||||
"items": { "$ref": "#/$defs/slot" }
|
||||
},
|
||||
"events": {
|
||||
"type": "array",
|
||||
"description": "Events the component emits.",
|
||||
"items": { "$ref": "#/$defs/event" }
|
||||
},
|
||||
"variants": {
|
||||
"type": "array",
|
||||
"description": "Variant axes — each axis is a named dimension with discrete values (e.g. axis \"variant\" = [primary, secondary]). Usually derived from an enum prop.",
|
||||
"items": { "$ref": "#/$defs/variantAxis" }
|
||||
},
|
||||
"docsRef": {
|
||||
"type": "string",
|
||||
"description": "Path (relative to repo root) to the source docs in designbook/, e.g. designbook/components/atoms/Button/Button.prompt.md."
|
||||
},
|
||||
"exemplarRef": {
|
||||
"type": "string",
|
||||
"description": "Path (relative to repo root) to the reference render under ir/exemplars/, e.g. ir/exemplars/Button.html. Parity (T08) diffs the adapter's render against this."
|
||||
}
|
||||
},
|
||||
"$defs": {
|
||||
"prop": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"required": ["name", "type", "attribute"],
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"description": "React prop name, camelCase (e.g. \"iconEnd\")."
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"description": "Neutral type. \"enum\" pairs with `enum`. Non-attribute-portable shapes use \"object\", \"function\", or \"node\" and MUST set portable:false.",
|
||||
"enum": ["string", "number", "boolean", "enum", "object", "function", "node"]
|
||||
},
|
||||
"attribute": {
|
||||
"description": "HTML attribute name an attribute-driven adapter binds this prop to (kebab-case), e.g. \"icon-end\". `false` means the prop is intentionally not exposed as an attribute (property-only or non-portable).",
|
||||
"oneOf": [
|
||||
{ "type": "string", "pattern": "^[a-z][a-z0-9-]*$" },
|
||||
{ "type": "boolean", "const": false }
|
||||
]
|
||||
},
|
||||
"enum": {
|
||||
"type": "array",
|
||||
"description": "Allowed values when type is \"enum\".",
|
||||
"items": { "type": "string" }
|
||||
},
|
||||
"default": {
|
||||
"description": "Default value as authored in the React source. Type matches `type`."
|
||||
},
|
||||
"required": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Whether the consumer must supply this prop."
|
||||
},
|
||||
"portable": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "False marks props that do not map cleanly to an HTML attribute (objects, render props, callbacks). Adapters MUST surface non-portable props as drift, never silently drop them (see open risks)."
|
||||
},
|
||||
"description": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"allOf": [
|
||||
{
|
||||
"if": { "properties": { "type": { "const": "enum" } } },
|
||||
"then": { "required": ["enum"] }
|
||||
}
|
||||
]
|
||||
},
|
||||
"slot": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"required": ["name"],
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"description": "Slot name; use \"default\" for the unnamed default slot."
|
||||
},
|
||||
"description": { "type": "string" },
|
||||
"required": { "type": "boolean", "default": false }
|
||||
}
|
||||
},
|
||||
"event": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"required": ["name"],
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"description": "Emitted event name as dispatched by the component, e.g. \"wn-dismiss\"."
|
||||
},
|
||||
"description": { "type": "string" },
|
||||
"detail": {
|
||||
"type": "string",
|
||||
"description": "Free-text description of the event's detail payload shape."
|
||||
}
|
||||
}
|
||||
},
|
||||
"variantAxis": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"required": ["axis", "values"],
|
||||
"properties": {
|
||||
"axis": {
|
||||
"type": "string",
|
||||
"description": "Name of the variant dimension, usually the driving prop name (e.g. \"variant\", \"size\")."
|
||||
},
|
||||
"values": {
|
||||
"type": "array",
|
||||
"minItems": 1,
|
||||
"items": { "type": "string" },
|
||||
"description": "Discrete values along this axis."
|
||||
},
|
||||
"default": {
|
||||
"type": "string",
|
||||
"description": "Default value for the axis."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
ir/schema/tokens.schema.json
Normal file
60
ir/schema/tokens.schema.json
Normal file
@@ -0,0 +1,60 @@
|
||||
{
|
||||
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
||||
"$id": "https://whynot.design/ir/schema/tokens.schema.json",
|
||||
"title": "whynot IR — Design Tokens (W3C DTCG)",
|
||||
"description": "ir/tokens.json adopts the W3C Design Tokens Community Group format ($value/$type) so the token layer is a standard, not a bespoke shape. NOTE: the repo's existing tokens/*.json use the older draft shape (value/type, no $); the IR extractor (T05) normalises to $-prefixed DTCG.",
|
||||
"type": "object",
|
||||
"$ref": "#/$defs/group",
|
||||
"$defs": {
|
||||
"token": {
|
||||
"type": "object",
|
||||
"required": ["$value"],
|
||||
"properties": {
|
||||
"$value": {
|
||||
"description": "The token value. For type=color this is a hex/colour string; for dimension a CSS length; aliases use {group.token} reference syntax."
|
||||
},
|
||||
"$type": {
|
||||
"type": "string",
|
||||
"description": "DTCG type. May be inherited from an ancestor group.",
|
||||
"enum": [
|
||||
"color",
|
||||
"dimension",
|
||||
"fontFamily",
|
||||
"fontWeight",
|
||||
"duration",
|
||||
"cubicBezier",
|
||||
"number",
|
||||
"string",
|
||||
"shadow",
|
||||
"border",
|
||||
"typography",
|
||||
"transition",
|
||||
"gradient"
|
||||
]
|
||||
},
|
||||
"$description": {
|
||||
"type": "string",
|
||||
"description": "Human-readable note. Carries over the `comment` field from the legacy token files."
|
||||
}
|
||||
},
|
||||
"$comment": "A token is any object carrying $value. Properties beyond the $-prefixed ones are disallowed at token level via the group dispatch below."
|
||||
},
|
||||
"group": {
|
||||
"type": "object",
|
||||
"description": "A DTCG group: a map of names to sub-groups or tokens. $-prefixed keys are group metadata; every other key is a child node.",
|
||||
"properties": {
|
||||
"$type": { "type": "string" },
|
||||
"$description": { "type": "string" }
|
||||
},
|
||||
"patternProperties": {
|
||||
"^[^$].*$": {
|
||||
"oneOf": [
|
||||
{ "$ref": "#/$defs/token" },
|
||||
{ "$ref": "#/$defs/group" }
|
||||
]
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
||||
}
|
||||
}
|
||||
266
ir/tokens.json
Normal file
266
ir/tokens.json
Normal file
@@ -0,0 +1,266 @@
|
||||
{
|
||||
"color": {
|
||||
"$type": "color",
|
||||
"ink": {
|
||||
"$value": "#0A0A0A"
|
||||
},
|
||||
"ink-2": {
|
||||
"$value": "#1F1F1F"
|
||||
},
|
||||
"ink-3": {
|
||||
"$value": "#5C5C5C"
|
||||
},
|
||||
"ink-4": {
|
||||
"$value": "#8A8A8A"
|
||||
},
|
||||
"ink-5": {
|
||||
"$value": "#B5B5B3"
|
||||
},
|
||||
"line": {
|
||||
"$value": "#E5E5E2"
|
||||
},
|
||||
"line-strong": {
|
||||
"$value": "#C9C9C5"
|
||||
},
|
||||
"line-soft": {
|
||||
"$value": "#F0F0EC"
|
||||
},
|
||||
"paper": {
|
||||
"$value": "#FFFFFF"
|
||||
},
|
||||
"paper-2": {
|
||||
"$value": "#FAFAF7"
|
||||
},
|
||||
"paper-3": {
|
||||
"$value": "#F4F4EF"
|
||||
},
|
||||
"fg-1": {
|
||||
"$value": "{color.ink}"
|
||||
},
|
||||
"fg-2": {
|
||||
"$value": "{color.ink-3}"
|
||||
},
|
||||
"fg-3": {
|
||||
"$value": "{color.ink-4}"
|
||||
},
|
||||
"fg-mute": {
|
||||
"$value": "{color.ink-5}"
|
||||
},
|
||||
"fg-on-dark": {
|
||||
"$value": "#FAFAF7"
|
||||
},
|
||||
"bg-1": {
|
||||
"$value": "{color.paper}"
|
||||
},
|
||||
"bg-2": {
|
||||
"$value": "{color.paper-2}"
|
||||
},
|
||||
"bg-3": {
|
||||
"$value": "{color.paper-3}"
|
||||
},
|
||||
"bg-invert": {
|
||||
"$value": "{color.ink}"
|
||||
},
|
||||
"border": {
|
||||
"$value": "{color.line}"
|
||||
},
|
||||
"border-strong": {
|
||||
"$value": "{color.line-strong}"
|
||||
},
|
||||
"border-soft": {
|
||||
"$value": "{color.line-soft}"
|
||||
},
|
||||
"hi": {
|
||||
"$value": "#FFE14A"
|
||||
},
|
||||
"hi-2": {
|
||||
"$value": "#FFD400"
|
||||
},
|
||||
"hi-ink": {
|
||||
"$value": "#1A1500"
|
||||
},
|
||||
"status-raw": {
|
||||
"$value": "#B5B5B3"
|
||||
},
|
||||
"status-weak": {
|
||||
"$value": "#8A8A8A"
|
||||
},
|
||||
"status-medium": {
|
||||
"$value": "#5C5C5C"
|
||||
},
|
||||
"status-strong": {
|
||||
"$value": "#0A0A0A"
|
||||
},
|
||||
"status-commercial": {
|
||||
"$value": "#FFD400"
|
||||
},
|
||||
"status-error": {
|
||||
"$value": "#B33A2E"
|
||||
},
|
||||
"status-error-bg": {
|
||||
"$value": "#FCF3F1"
|
||||
},
|
||||
"status-warn": {
|
||||
"$value": "#C28000"
|
||||
},
|
||||
"status-warn-bg": {
|
||||
"$value": "#FFFCEB"
|
||||
},
|
||||
"status-success": {
|
||||
"$value": "#2F6B3A"
|
||||
},
|
||||
"status-success-bg": {
|
||||
"$value": "#F2F7F2"
|
||||
},
|
||||
"status-info": {
|
||||
"$value": "#2E5C8A"
|
||||
},
|
||||
"status-info-bg": {
|
||||
"$value": "#F2F5FA"
|
||||
}
|
||||
},
|
||||
"fontFamily": {
|
||||
"$type": "fontFamily",
|
||||
"ff-sans": {
|
||||
"$value": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
|
||||
},
|
||||
"ff-mono": {
|
||||
"$value": "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace"
|
||||
},
|
||||
"ff-serif": {
|
||||
"$value": "ui-serif, Georgia, \"Times New Roman\", serif"
|
||||
}
|
||||
},
|
||||
"fontSize": {
|
||||
"$type": "dimension",
|
||||
"fs-xs": {
|
||||
"$value": "11px"
|
||||
},
|
||||
"fs-sm": {
|
||||
"$value": "13px"
|
||||
},
|
||||
"fs-base": {
|
||||
"$value": "15px"
|
||||
},
|
||||
"fs-md": {
|
||||
"$value": "17px"
|
||||
},
|
||||
"fs-lg": {
|
||||
"$value": "20px"
|
||||
},
|
||||
"fs-xl": {
|
||||
"$value": "24px"
|
||||
},
|
||||
"fs-2xl": {
|
||||
"$value": "32px"
|
||||
},
|
||||
"fs-3xl": {
|
||||
"$value": "44px"
|
||||
},
|
||||
"fs-4xl": {
|
||||
"$value": "64px"
|
||||
},
|
||||
"fs-5xl": {
|
||||
"$value": "96px"
|
||||
}
|
||||
},
|
||||
"lineHeight": {
|
||||
"$type": "number",
|
||||
"lh-tight": {
|
||||
"$value": "1.05"
|
||||
},
|
||||
"lh-snug": {
|
||||
"$value": "1.25"
|
||||
},
|
||||
"lh-base": {
|
||||
"$value": "1.5"
|
||||
},
|
||||
"lh-loose": {
|
||||
"$value": "1.7"
|
||||
}
|
||||
},
|
||||
"letterSpacing": {
|
||||
"$type": "dimension",
|
||||
"tr-tight": {
|
||||
"$value": "-0.02em"
|
||||
},
|
||||
"tr-snug": {
|
||||
"$value": "-0.01em"
|
||||
},
|
||||
"tr-base": {
|
||||
"$value": "0em"
|
||||
},
|
||||
"tr-mono": {
|
||||
"$value": "0.02em"
|
||||
},
|
||||
"tr-label": {
|
||||
"$value": "0.08em"
|
||||
}
|
||||
},
|
||||
"space": {
|
||||
"$type": "dimension",
|
||||
"sp-1": {
|
||||
"$value": "4px"
|
||||
},
|
||||
"sp-2": {
|
||||
"$value": "8px"
|
||||
},
|
||||
"sp-3": {
|
||||
"$value": "12px"
|
||||
},
|
||||
"sp-4": {
|
||||
"$value": "16px"
|
||||
},
|
||||
"sp-5": {
|
||||
"$value": "24px"
|
||||
},
|
||||
"sp-6": {
|
||||
"$value": "32px"
|
||||
},
|
||||
"sp-7": {
|
||||
"$value": "48px"
|
||||
},
|
||||
"sp-8": {
|
||||
"$value": "64px"
|
||||
},
|
||||
"sp-9": {
|
||||
"$value": "96px"
|
||||
},
|
||||
"sp-10": {
|
||||
"$value": "128px"
|
||||
}
|
||||
},
|
||||
"radius": {
|
||||
"$type": "dimension",
|
||||
"r-0": {
|
||||
"$value": "0px"
|
||||
},
|
||||
"r-1": {
|
||||
"$value": "2px"
|
||||
},
|
||||
"r-2": {
|
||||
"$value": "4px"
|
||||
},
|
||||
"r-3": {
|
||||
"$value": "8px"
|
||||
},
|
||||
"r-pill": {
|
||||
"$value": "999px"
|
||||
}
|
||||
},
|
||||
"shadow": {
|
||||
"$type": "shadow",
|
||||
"shadow-0": {
|
||||
"$value": "none"
|
||||
},
|
||||
"shadow-1": {
|
||||
"$value": "0 1px 0 var(--line)"
|
||||
},
|
||||
"shadow-2": {
|
||||
"$value": "0 1px 0 var(--line-strong)"
|
||||
},
|
||||
"shadow-3": {
|
||||
"$value": "0 4px 12px -6px rgba(10,10,10,0.10)"
|
||||
}
|
||||
}
|
||||
}
|
||||
226
scripts/designbook_pull.py
Normal file
226
scripts/designbook_pull.py
Normal file
@@ -0,0 +1,226 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Pull the canonical React designbook from Claude Design into ``designbook/``.
|
||||
|
||||
WHYNOT-WP-0002 needs a one-way flow: the React designbook in Claude Design is the
|
||||
source of truth, and ``make ir`` extracts the technology-neutral blueprint from a
|
||||
*local mirror* of it (``designbook/``). The bundled ``/design-sync`` skill only goes
|
||||
the other way (it *pushes* a repo up to Claude Design), so it cannot populate
|
||||
``designbook/``. This script is the missing **pull** half.
|
||||
|
||||
The only thing that can read your Claude Design project is the local ``claude``
|
||||
binary, which has the DesignSync tool over your claude.ai login. This script drives
|
||||
it directly in headless mode (``claude --print --permission-mode acceptEdits``): the
|
||||
subprocess fetches AND writes the files itself, in *its* context, and returns only a
|
||||
small JSON manifest. The (potentially large) file contents never pass through the
|
||||
orchestrating agent's context, so the pull is cheap no matter how many files it
|
||||
moves. ``acceptEdits`` is required because a plain ``claude --print`` (e.g. the
|
||||
llm-connect claude-code adapter used by check_designbook_staleness.py) auto-denies
|
||||
``Write`` in non-interactive mode — fine for that read-only check, but this pull must
|
||||
write. No secret goes in the prompt — DesignSync authenticates through the local
|
||||
login (see .claude/rules/credential-routing.md).
|
||||
|
||||
python scripts/designbook_pull.py # pull, then stamp freshness
|
||||
python scripts/designbook_pull.py --project <uuid> # override the target project
|
||||
python scripts/designbook_pull.py --dry-run # print the plan; fetch nothing
|
||||
python scripts/designbook_pull.py --no-stamp # skip the --mark-synced step
|
||||
|
||||
What is pulled is governed by ``designbook/.design-pull.json`` (created with sane
|
||||
defaults on first run): ``include``/``exclude`` glob lists over the project's paths.
|
||||
The defaults take the React ui-kit, the preview/exemplar cards, the manifest and the
|
||||
style/token layers, and deliberately EXCLUDE ``_whynot-design-seed/**`` (a copy of
|
||||
this very repo that lives in the cloud project and must not shadow the real repo).
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import argparse
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
import subprocess
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
REPO = Path(__file__).resolve().parent.parent
|
||||
DESIGNBOOK = REPO / "designbook"
|
||||
MARKER = DESIGNBOOK / ".design-sync.json"
|
||||
PIN = REPO / ".design-sync" / "config.json" # the /design-sync skill's pin
|
||||
PULL_CONFIG = DESIGNBOOK / ".design-pull.json" # what this script mirrors
|
||||
|
||||
# Sane first-run defaults. Editable; committed so the pull is reproducible.
|
||||
DEFAULT_PULL_CONFIG = {
|
||||
"comment": "Globs (over Claude Design project paths) that designbook_pull.py mirrors "
|
||||
"into designbook/. Exclude _whynot-design-seed/** — it is a copy of THIS "
|
||||
"repo living in the cloud project and must not shadow the real source.",
|
||||
"include": [
|
||||
"ui_kits/**",
|
||||
"preview/**",
|
||||
"_ds_manifest.json",
|
||||
"_ds_bundle.js",
|
||||
"styles.css",
|
||||
"colors_and_type.css",
|
||||
],
|
||||
"exclude": [
|
||||
"_whynot-design-seed/**",
|
||||
"uploads/**",
|
||||
"_check/**",
|
||||
".thumbnail",
|
||||
"assets/**",
|
||||
],
|
||||
}
|
||||
|
||||
# Strict output contract for the headless claude call. The subprocess does ALL the
|
||||
# fetching and writing; it returns only a manifest so file bytes never reach us.
|
||||
PROMPT = """\
|
||||
You have the DesignSync tool (claude.ai/design) and Write/Bash tools. Mirror selected
|
||||
files from a Claude Design project into a local directory. Do NOT modify the remote
|
||||
project (no write_files/delete_files/create_project/finalize_plan). Do not request any
|
||||
secret or API key.
|
||||
|
||||
Target project: pick projectId {project_id!r} if non-null, else the writable project
|
||||
whose name best matches {project_name!r} (use DesignSync "list_projects").
|
||||
|
||||
Local destination root (absolute): {dest_root!r}
|
||||
|
||||
Selection — mirror every project path that matches ANY of these include globs:
|
||||
{include}
|
||||
…and matches NONE of these exclude globs:
|
||||
{exclude}
|
||||
(`**` matches any depth, `*` matches within one path segment.)
|
||||
|
||||
Steps:
|
||||
1. DesignSync "list_files" on the chosen project.
|
||||
2. Compute the selected set per the include/exclude globs above.
|
||||
3. For each selected path: DesignSync "get_file", then Write its content to
|
||||
{dest_root!r} + "/" + path (create parent dirs; preserve the relative path exactly;
|
||||
for base64/binary files decode before writing).
|
||||
4. Output ONLY a single JSON object, no prose, no code fence:
|
||||
{{"projectId": "<id>", "name": "<name>", "updatedAt": "<ISO-8601>",
|
||||
"written": ["<relpath>", ...], "skipped": ["<relpath>", ...]}}
|
||||
On failure output {{"error": "<short reason>"}}.
|
||||
"""
|
||||
|
||||
|
||||
def load_json(path: Path) -> dict:
|
||||
return json.loads(path.read_text()) if path.exists() else {}
|
||||
|
||||
|
||||
def ensure_pull_config() -> dict:
|
||||
if not PULL_CONFIG.exists():
|
||||
DESIGNBOOK.mkdir(parents=True, exist_ok=True)
|
||||
PULL_CONFIG.write_text(json.dumps(DEFAULT_PULL_CONFIG, indent=2) + "\n")
|
||||
print(f"Wrote default pull config: {PULL_CONFIG.relative_to(REPO)}")
|
||||
return load_json(PULL_CONFIG)
|
||||
|
||||
|
||||
def target_project(cli_project: str | None) -> tuple[str | None, str]:
|
||||
"""Resolve (projectId, projectName) from CLI > marker > skill pin."""
|
||||
marker, pin = load_json(MARKER), load_json(PIN)
|
||||
project_id = cli_project or marker.get("projectId") or pin.get("projectId")
|
||||
project_name = marker.get("projectName") or pin.get("projectName") or "WhyNot Design System"
|
||||
return project_id, project_name
|
||||
|
||||
|
||||
def extract_json(text: str) -> dict:
|
||||
match = re.search(r"\{.*\}", text, re.DOTALL)
|
||||
if not match:
|
||||
sys.exit(f"Could not parse a JSON object from the model reply:\n{text[:600]}")
|
||||
return json.loads(match.group(0))
|
||||
|
||||
|
||||
def resolve_claude_cli() -> str:
|
||||
"""Mirror the llm-connect adapter's resolution: env override, else ~/.local/bin."""
|
||||
configured = os.environ.get("CLAUDE_CLI_PATH")
|
||||
if configured:
|
||||
return configured
|
||||
local_cli = Path.home() / ".local" / "bin" / "claude"
|
||||
return str(local_cli) if local_cli.exists() else "claude"
|
||||
|
||||
|
||||
def run_pull(project_id: str | None, project_name: str, cfg: dict) -> dict:
|
||||
prompt = PROMPT.format(
|
||||
project_id=project_id,
|
||||
project_name=project_name,
|
||||
dest_root=str(DESIGNBOOK),
|
||||
include="\n".join(f" - {g}" for g in cfg.get("include", [])),
|
||||
exclude="\n".join(f" - {g}" for g in cfg.get("exclude", [])),
|
||||
)
|
||||
# acceptEdits auto-approves the subprocess's Write calls (it creates parent dirs);
|
||||
# DesignSync reads are already permitted under default policy. cwd=REPO so any
|
||||
# relative reasoning stays inside the repo, though dest paths are absolute.
|
||||
cmd = [resolve_claude_cli(), "--print", "--permission-mode", "acceptEdits"]
|
||||
try:
|
||||
result = subprocess.run(
|
||||
cmd, input=prompt, cwd=REPO,
|
||||
capture_output=True, text=True, timeout=1800,
|
||||
)
|
||||
except FileNotFoundError:
|
||||
sys.exit("Could not find the `claude` CLI. Set CLAUDE_CLI_PATH or add it to PATH.")
|
||||
except subprocess.TimeoutExpired:
|
||||
sys.exit("claude CLI timed out after 1800s during the pull.")
|
||||
if result.returncode != 0:
|
||||
sys.exit(f"claude CLI exited {result.returncode}:\n{result.stderr[:600]}")
|
||||
return extract_json(result.stdout)
|
||||
|
||||
|
||||
def stamp(project_id: str | None, project_name: str, updated_at: str | None) -> None:
|
||||
cmd = ["node", "scripts/designbook-sync.mjs", "--mark-synced"]
|
||||
if project_id:
|
||||
cmd += ["--project", project_id]
|
||||
if project_name:
|
||||
cmd += ["--project-name", project_name]
|
||||
if updated_at:
|
||||
cmd += ["--remote-updated", updated_at]
|
||||
# Flags match designbook-sync.mjs --mark-synced [--remote-updated] [--project] [--project-name].
|
||||
subprocess.run(cmd, cwd=REPO, check=False)
|
||||
|
||||
|
||||
def main() -> int:
|
||||
ap = argparse.ArgumentParser(description=__doc__,
|
||||
formatter_class=argparse.RawDescriptionHelpFormatter)
|
||||
ap.add_argument("--project", metavar="UUID", help="Override the target project id.")
|
||||
ap.add_argument("--dry-run", action="store_true",
|
||||
help="Print the resolved target + selection plan; fetch nothing.")
|
||||
ap.add_argument("--no-stamp", action="store_true",
|
||||
help="Do not run designbook-sync.mjs --mark-synced afterwards.")
|
||||
args = ap.parse_args()
|
||||
|
||||
cfg = ensure_pull_config()
|
||||
project_id, project_name = target_project(args.project)
|
||||
|
||||
print(f"Target : {project_name} ({project_id or 'by name match'})")
|
||||
print(f"Dest : {DESIGNBOOK.relative_to(REPO)}/")
|
||||
print(f"Include: {', '.join(cfg.get('include', [])) or '(none)'}")
|
||||
print(f"Exclude: {', '.join(cfg.get('exclude', [])) or '(none)'}")
|
||||
|
||||
if args.dry_run:
|
||||
print("\n(--dry-run: no DesignSync calls made, nothing written)")
|
||||
return 0
|
||||
|
||||
result = run_pull(project_id, project_name, cfg)
|
||||
if "error" in result:
|
||||
print(f"\nPull failed: {result['error']}")
|
||||
return 1
|
||||
|
||||
written = result.get("written", [])
|
||||
skipped = result.get("skipped", [])
|
||||
print(f"\nPulled {len(written)} file(s) into {DESIGNBOOK.relative_to(REPO)}/"
|
||||
f" (skipped {len(skipped)}).")
|
||||
for path in written[:40]:
|
||||
print(f" + {path}")
|
||||
if len(written) > 40:
|
||||
print(f" … and {len(written) - 40} more")
|
||||
|
||||
if not written:
|
||||
print("Nothing was written — check the include/exclude globs or the project.")
|
||||
return 1
|
||||
|
||||
if not args.no_stamp:
|
||||
stamp(result.get("projectId") or project_id,
|
||||
result.get("name") or project_name,
|
||||
result.get("updatedAt"))
|
||||
print("Stamped freshness. Next: review the designbook/ diff, then `make ir`.")
|
||||
return 0
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
raise SystemExit(main())
|
||||
271
scripts/ir-extract.mjs
Normal file
271
scripts/ir-extract.mjs
Normal file
@@ -0,0 +1,271 @@
|
||||
#!/usr/bin/env node
|
||||
// =============================================================
|
||||
// ir-extract.mjs — the pivot (WHYNOT-WP-0002 · T05)
|
||||
//
|
||||
// Reads the local React designbook mirror (designbook/) and emits the
|
||||
// technology-neutral IR (ir/): tokens, per-component contracts, and exemplars.
|
||||
// One-way only: React → IR. Never hand-edit ir/tokens.json, ir/components/*,
|
||||
// or ir/exemplars/* — they are regenerated here (`make ir`) and committed so a
|
||||
// blueprint change shows up as a git diff. See ir/SCHEMA.md and
|
||||
// .claude/rules/designbook-propagation.md.
|
||||
//
|
||||
// Source layout (a bundled .jsx ui-kit, not per-component .d.ts — see
|
||||
// designbook/REACT_CANONICAL_DECISION.md):
|
||||
// designbook/_ds_manifest.json → structured tokens[] + preview cards[]
|
||||
// designbook/ui_kits/<kit>/Atoms.jsx → component fn signatures (props/defaults)
|
||||
// designbook/ui_kits/<kit>/Chrome.jsx → component fn signatures
|
||||
// designbook/preview/comp-*.html → exemplar renders
|
||||
// =============================================================
|
||||
import { readFileSync, writeFileSync, mkdirSync, copyFileSync, rmSync, existsSync, readdirSync } from "node:fs";
|
||||
import { join, dirname } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const REPO = join(dirname(fileURLToPath(import.meta.url)), "..");
|
||||
const DESIGNBOOK = join(REPO, "designbook");
|
||||
const IR = join(REPO, "ir");
|
||||
const KIT = "whynot-control";
|
||||
|
||||
// Which ui-kit files hold reusable design-system components (NOT app screens/demo data).
|
||||
const COMPONENT_SOURCES = ["Atoms.jsx", "Chrome.jsx"];
|
||||
|
||||
const log = (...a) => console.log(...a);
|
||||
const kebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
||||
|
||||
// ---------- Tokens: _ds_manifest.json tokens[] → W3C DTCG ----------
|
||||
// Each manifest token: { name:"--ink", value:"#0A0A0A", kind:"color", definedIn }.
|
||||
// Group + DTCG $type are decided by name prefix (kind is a fallback hint).
|
||||
const GROUP_BY_PREFIX = [
|
||||
["--ff-", "fontFamily", "fontFamily"],
|
||||
["--fs-", "fontSize", "dimension"],
|
||||
["--lh-", "lineHeight", "number"],
|
||||
["--tr-", "letterSpacing", "dimension"],
|
||||
["--sp-", "space", "dimension"],
|
||||
["--r-", "radius", "dimension"],
|
||||
["--shadow-", "shadow", "shadow"],
|
||||
];
|
||||
|
||||
function classify(name) {
|
||||
for (const [prefix, group, type] of GROUP_BY_PREFIX) {
|
||||
if (name.startsWith(prefix)) return { group, type };
|
||||
}
|
||||
return { group: "color", type: "color" }; // every remaining token is a colour
|
||||
}
|
||||
|
||||
function extractTokens() {
|
||||
const manifest = JSON.parse(readFileSync(join(DESIGNBOOK, "_ds_manifest.json"), "utf8"));
|
||||
const tokens = manifest.tokens || [];
|
||||
// First pass: map each css var → its DTCG reference path {group.key}.
|
||||
const refOf = new Map();
|
||||
for (const t of tokens) {
|
||||
const { group } = classify(t.name);
|
||||
refOf.set(t.name, `${group}.${t.name.slice(2)}`);
|
||||
}
|
||||
// Second pass: build the nested DTCG tree.
|
||||
const out = {};
|
||||
for (const t of tokens) {
|
||||
const { group, type } = classify(t.name);
|
||||
const key = t.name.slice(2);
|
||||
out[group] ||= { $type: type };
|
||||
// Resolve `var(--x)` aliases to DTCG references; literals pass through.
|
||||
const aliasMatch = /^var\(\s*(--[A-Za-z0-9-]+)\s*\)$/.exec(t.value.trim());
|
||||
let value = t.value.replace(/\s+/g, " ").trim();
|
||||
if (aliasMatch && refOf.has(aliasMatch[1])) value = `{${refOf.get(aliasMatch[1])}}`;
|
||||
out[group][key] = { $value: value };
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
// ---------- Components: parse .jsx function signatures ----------
|
||||
// Matches: function Name({ a, b = 'x', children, onClick, style }) { … }
|
||||
const FN_RE = /function\s+([A-Z][A-Za-z0-9]*)\s*\(\s*\{([^}]*)\}\s*\)\s*\{/g;
|
||||
|
||||
function parseParams(raw) {
|
||||
// Split top-level commas (defaults here have no nested commas/objects).
|
||||
return raw.split(",").map((s) => s.trim()).filter(Boolean).map((p) => {
|
||||
const eq = p.indexOf("=");
|
||||
if (eq === -1) return { name: p.trim(), default: undefined };
|
||||
return { name: p.slice(0, eq).trim(), default: p.slice(eq + 1).trim() };
|
||||
});
|
||||
}
|
||||
|
||||
// Collect enum values from `name === 'x'` / `name !== 'x'` comparisons in the body.
|
||||
function enumValuesFor(name, body) {
|
||||
const re = new RegExp(`${name}\\s*[=!]==\\s*'([^']+)'`, "g");
|
||||
const vals = new Set();
|
||||
let m;
|
||||
while ((m = re.exec(body))) vals.add(m[1]);
|
||||
return [...vals];
|
||||
}
|
||||
|
||||
function usedAsBoolean(name, body) {
|
||||
return new RegExp(`(if\\s*\\(\\s*${name}\\b|\\b${name}\\s*\\?|\\b${name}\\s*&&)`).test(body)
|
||||
&& !new RegExp(`${name}\\s*===`).test(body);
|
||||
}
|
||||
|
||||
function defaultLiteral(raw) {
|
||||
if (raw === undefined) return undefined;
|
||||
if (/^'[^']*'$/.test(raw) || /^"[^"]*"$/.test(raw)) return raw.slice(1, -1);
|
||||
if (/^-?\d+(\.\d+)?$/.test(raw)) return Number(raw);
|
||||
if (raw === "true" || raw === "false") return raw === "true";
|
||||
return raw; // expression default; keep verbatim
|
||||
}
|
||||
|
||||
function propFor(param, body) {
|
||||
const { name, default: dflt } = param;
|
||||
const def = defaultLiteral(dflt);
|
||||
// children → slot, handled by caller. style/object & callbacks → non-portable.
|
||||
if (name === "style") {
|
||||
return { name, type: "object", attribute: false, portable: false,
|
||||
description: "React inline style override — not portable to an attribute." };
|
||||
}
|
||||
if (/^on[A-Z]/.test(name)) {
|
||||
return { name, type: "function", attribute: false, portable: false,
|
||||
description: "React callback prop — surface as an event on attribute-driven stacks." };
|
||||
}
|
||||
const prop = { name, attribute: kebab(name) };
|
||||
const enums = enumValuesFor(name, body);
|
||||
if (typeof def === "string" && enums.length) {
|
||||
prop.type = "enum";
|
||||
prop.enum = [...new Set([def, ...enums])];
|
||||
} else if (enums.length) {
|
||||
prop.type = "enum";
|
||||
prop.enum = enums;
|
||||
} else if (typeof def === "number") {
|
||||
prop.type = "number";
|
||||
} else if (typeof def === "boolean" || usedAsBoolean(name, body)) {
|
||||
prop.type = "boolean";
|
||||
} else {
|
||||
prop.type = "string";
|
||||
}
|
||||
if (def !== undefined) prop.default = def;
|
||||
return prop;
|
||||
}
|
||||
|
||||
function bodyOf(src, startIdx) {
|
||||
// Return the balanced { … } body beginning at the first { at/after startIdx.
|
||||
let depth = 0, i = src.indexOf("{", startIdx);
|
||||
const begin = i;
|
||||
for (; i < src.length; i++) {
|
||||
if (src[i] === "{") depth++;
|
||||
else if (src[i] === "}" && --depth === 0) return src.slice(begin, i + 1);
|
||||
}
|
||||
return src.slice(begin);
|
||||
}
|
||||
|
||||
// Map a component to a preview exemplar via the manifest cards (best-effort).
|
||||
function buildExemplarIndex() {
|
||||
const manifest = JSON.parse(readFileSync(join(DESIGNBOOK, "_ds_manifest.json"), "utf8"));
|
||||
return (manifest.cards || []).filter((c) => c.group === "Components");
|
||||
}
|
||||
|
||||
function matchExemplar(name, cards) {
|
||||
const n = name.toLowerCase();
|
||||
// direct hints: Button→comp-buttons, Tag/StageDot→comp-labels-tags, etc.
|
||||
const hint = { stagedot: "labels-tags", tag: "labels-tags", eyebrow: "labels-tags",
|
||||
pipelinestrip: "pipeline", topnav: "topnav", sidebar: "left-nav",
|
||||
pageheader: "topnav", button: "buttons" }[n];
|
||||
const want = hint || n;
|
||||
return cards.find((c) => c.path.includes(want)) || null;
|
||||
}
|
||||
|
||||
function extractComponents() {
|
||||
const cards = buildExemplarIndex();
|
||||
const components = [];
|
||||
for (const file of COMPONENT_SOURCES) {
|
||||
const path = join(DESIGNBOOK, "ui_kits", KIT, file);
|
||||
if (!existsSync(path)) { log(` (skip ${file} — not present)`); continue; }
|
||||
const src = readFileSync(path, "utf8");
|
||||
const group = file.replace(".jsx", "").toLowerCase();
|
||||
let m;
|
||||
FN_RE.lastIndex = 0;
|
||||
while ((m = FN_RE.exec(src))) {
|
||||
const name = m[1];
|
||||
const params = parseParams(m[2]);
|
||||
// FN_RE ends at the function body's opening brace; start the body scan there
|
||||
// (not at m.index, whose first `{` is the param-destructuring brace).
|
||||
const body = bodyOf(src, m.index + m[0].length - 1);
|
||||
const props = [];
|
||||
const slots = [];
|
||||
for (const p of params) {
|
||||
if (p.name === "children") { slots.push({ name: "default", description: "Default content." }); continue; }
|
||||
props.push(propFor(p, body));
|
||||
}
|
||||
const events = props.filter((p) => /^on[A-Z]/.test(p.name))
|
||||
.map((p) => ({ name: kebab(p.name.replace(/^on/, "wn-")), description: `Emitted for ${p.name}.` }));
|
||||
const variants = props.filter((p) => p.type === "enum")
|
||||
.map((p) => ({ axis: p.name, values: p.enum, ...(p.default ? { default: p.default } : {}) }));
|
||||
const card = matchExemplar(name, cards);
|
||||
const contract = {
|
||||
name,
|
||||
tag: `wn-${kebab(name)}`,
|
||||
group,
|
||||
description: `${name} — extracted from designbook ui_kits/${KIT}/${file}.`,
|
||||
props,
|
||||
...(slots.length ? { slots } : {}),
|
||||
...(events.length ? { events } : {}),
|
||||
...(variants.length ? { variants } : {}),
|
||||
docsRef: `designbook/ui_kits/${KIT}/${file}`,
|
||||
...(card ? { exemplarRef: `ir/exemplars/${name}.html` } : {}),
|
||||
};
|
||||
components.push({ contract, card });
|
||||
}
|
||||
}
|
||||
return components;
|
||||
}
|
||||
|
||||
// ---------- Lightweight contract validation (invariants from ir/schema) ----------
|
||||
function validateContract(c) {
|
||||
const errs = [];
|
||||
if (!/^[A-Z][A-Za-z0-9]*$/.test(c.name)) errs.push(`bad name ${c.name}`);
|
||||
if (!c.group || !c.description) errs.push(`${c.name}: missing group/description`);
|
||||
for (const p of c.props) {
|
||||
if (!p.name) errs.push(`${c.name}: prop without name`);
|
||||
if (p.type === "enum" && !(p.enum && p.enum.length)) errs.push(`${c.name}.${p.name}: enum without values`);
|
||||
if (!("attribute" in p)) errs.push(`${c.name}.${p.name}: missing attribute mapping`);
|
||||
}
|
||||
return errs;
|
||||
}
|
||||
|
||||
// ---------- Emit ----------
|
||||
function resetDir(dir) {
|
||||
if (existsSync(dir)) for (const f of readdirSync(dir)) rmSync(join(dir, f), { recursive: true, force: true });
|
||||
else mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
|
||||
function main() {
|
||||
if (!existsSync(join(DESIGNBOOK, "_ds_manifest.json"))) {
|
||||
console.error("No designbook/_ds_manifest.json — run `make designbook-pull` first.");
|
||||
process.exit(2);
|
||||
}
|
||||
mkdirSync(IR, { recursive: true });
|
||||
|
||||
log("Tokens → ir/tokens.json");
|
||||
const tokens = extractTokens();
|
||||
writeFileSync(join(IR, "tokens.json"), JSON.stringify(tokens, null, 2) + "\n");
|
||||
const tokenCount = Object.values(tokens).reduce((n, g) => n + Object.keys(g).filter((k) => k !== "$type").length, 0);
|
||||
log(` ${tokenCount} tokens in ${Object.keys(tokens).length} groups`);
|
||||
|
||||
log("Components → ir/components/<Name>.json");
|
||||
const comps = extractComponents();
|
||||
resetDir(join(IR, "components"));
|
||||
resetDir(join(IR, "exemplars"));
|
||||
const allErrs = [];
|
||||
for (const { contract, card } of comps) {
|
||||
allErrs.push(...validateContract(contract));
|
||||
writeFileSync(join(IR, "components", `${contract.name}.json`), JSON.stringify(contract, null, 2) + "\n");
|
||||
if (card) {
|
||||
const srcHtml = join(DESIGNBOOK, card.path);
|
||||
if (existsSync(srcHtml)) copyFileSync(srcHtml, join(IR, "exemplars", `${contract.name}.html`));
|
||||
}
|
||||
}
|
||||
log(` ${comps.length} components, ${comps.filter((c) => c.card).length} with exemplars`);
|
||||
|
||||
if (allErrs.length) {
|
||||
console.error("\nContract validation errors:");
|
||||
for (const e of allErrs) console.error(" - " + e);
|
||||
process.exit(5);
|
||||
}
|
||||
log("\nIR extracted. Review the ir/ git diff (the blueprint change).");
|
||||
}
|
||||
|
||||
main();
|
||||
@@ -10,104 +10,98 @@
|
||||
/* ---------- Webfonts (Google Fonts, see /fonts for offline) ---------- */
|
||||
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&display=swap");
|
||||
|
||||
/* @generated tokens — regenerated by `make adapt-lit` from ir/tokens.json. DO NOT EDIT. */
|
||||
:root {
|
||||
/* ---------- Base palette: neutrals ---------- */
|
||||
--ink: #0A0A0A; /* near-black, the only "fill" most of the time */
|
||||
--ink-2: #1F1F1F;
|
||||
--ink-3: #5C5C5C;
|
||||
--ink-4: #8A8A8A;
|
||||
--ink-5: #B5B5B3; /* placeholder text, wireframe labels */
|
||||
--line: #E5E5E2; /* default 1px wireframe rule */
|
||||
--line-strong: #C9C9C5; /* dividers between sections */
|
||||
--line-soft: #F0F0EC; /* hairline within a card */
|
||||
--paper: #FFFFFF; /* canvas */
|
||||
--paper-2: #FAFAF7; /* sheet, dim canvas */
|
||||
--paper-3: #F4F4EF; /* recessed surface, code block bg */
|
||||
|
||||
/* ---------- Foreground / background semantic ---------- */
|
||||
--fg-1: var(--ink);
|
||||
--fg-2: var(--ink-3);
|
||||
--fg-3: var(--ink-4);
|
||||
--fg-mute: var(--ink-5);
|
||||
--fg-on-dark: #FAFAF7;
|
||||
|
||||
--bg-1: var(--paper);
|
||||
--bg-2: var(--paper-2);
|
||||
--bg-3: var(--paper-3);
|
||||
--bg-invert: var(--ink);
|
||||
|
||||
--border: var(--line);
|
||||
/* color */
|
||||
--ink: #0A0A0A;
|
||||
--ink-2: #1F1F1F;
|
||||
--ink-3: #5C5C5C;
|
||||
--ink-4: #8A8A8A;
|
||||
--ink-5: #B5B5B3;
|
||||
--line: #E5E5E2;
|
||||
--line-strong: #C9C9C5;
|
||||
--line-soft: #F0F0EC;
|
||||
--paper: #FFFFFF;
|
||||
--paper-2: #FAFAF7;
|
||||
--paper-3: #F4F4EF;
|
||||
--fg-1: var(--ink);
|
||||
--fg-2: var(--ink-3);
|
||||
--fg-3: var(--ink-4);
|
||||
--fg-mute: var(--ink-5);
|
||||
--fg-on-dark: #FAFAF7;
|
||||
--bg-1: var(--paper);
|
||||
--bg-2: var(--paper-2);
|
||||
--bg-3: var(--paper-3);
|
||||
--bg-invert: var(--ink);
|
||||
--border: var(--line);
|
||||
--border-strong: var(--line-strong);
|
||||
--border-soft: var(--line-soft);
|
||||
|
||||
/* ---------- The single accent: annotation yellow ---------- */
|
||||
/* Lifted from the LEGO brick. Used as highlighter, "draft"
|
||||
stamp, signal-marker. Never as a button fill. */
|
||||
--hi: #FFE14A;
|
||||
--hi-2: #FFD400;
|
||||
--hi-ink: #1A1500; /* text on yellow */
|
||||
|
||||
/* ---------- Status (for prototype lifecycle, signal strength) ---------- */
|
||||
/* Kept deliberately desaturated so they read as labels, not UI. */
|
||||
--status-raw: #B5B5B3; /* S0 — no signal */
|
||||
--status-weak: #8A8A8A; /* S1 — weak signal */
|
||||
--status-medium: #5C5C5C; /* S2 — medium signal */
|
||||
--status-strong: #0A0A0A; /* S3 — strong signal */
|
||||
--status-commercial: #FFD400; /* S4 — commercial */
|
||||
|
||||
/* ---------- Type families ---------- */
|
||||
--ff-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
|
||||
--ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--ff-serif: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
|
||||
|
||||
/* ---------- Type scale (modular, ~1.2) ---------- */
|
||||
--fs-xs: 11px;
|
||||
--fs-sm: 13px;
|
||||
--fs-base: 15px;
|
||||
--fs-md: 17px;
|
||||
--fs-lg: 20px;
|
||||
--fs-xl: 24px;
|
||||
--fs-2xl: 32px;
|
||||
--fs-3xl: 44px;
|
||||
--fs-4xl: 64px;
|
||||
--fs-5xl: 96px;
|
||||
|
||||
--lh-tight: 1.05;
|
||||
--lh-snug: 1.25;
|
||||
--lh-base: 1.5;
|
||||
--lh-loose: 1.7;
|
||||
|
||||
--tr-tight: -0.02em;
|
||||
--tr-snug: -0.01em;
|
||||
--tr-base: 0em;
|
||||
--tr-mono: 0.02em;
|
||||
--tr-label: 0.08em; /* uppercase eyebrow labels */
|
||||
|
||||
/* ---------- Spacing (4px base) ---------- */
|
||||
--sp-1: 4px;
|
||||
--sp-2: 8px;
|
||||
--sp-3: 12px;
|
||||
--sp-4: 16px;
|
||||
--sp-5: 24px;
|
||||
--sp-6: 32px;
|
||||
--sp-7: 48px;
|
||||
--sp-8: 64px;
|
||||
--sp-9: 96px;
|
||||
--border-soft: var(--line-soft);
|
||||
--hi: #FFE14A;
|
||||
--hi-2: #FFD400;
|
||||
--hi-ink: #1A1500;
|
||||
--status-raw: #B5B5B3;
|
||||
--status-weak: #8A8A8A;
|
||||
--status-medium: #5C5C5C;
|
||||
--status-strong: #0A0A0A;
|
||||
--status-commercial: #FFD400;
|
||||
--status-error: #B33A2E;
|
||||
--status-error-bg: #FCF3F1;
|
||||
--status-warn: #C28000;
|
||||
--status-warn-bg: #FFFCEB;
|
||||
--status-success: #2F6B3A;
|
||||
--status-success-bg: #F2F7F2;
|
||||
--status-info: #2E5C8A;
|
||||
--status-info-bg: #F2F5FA;
|
||||
/* fontFamily */
|
||||
--ff-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||||
--ff-serif: ui-serif, Georgia, "Times New Roman", serif;
|
||||
/* fontSize */
|
||||
--fs-xs: 11px;
|
||||
--fs-sm: 13px;
|
||||
--fs-base: 15px;
|
||||
--fs-md: 17px;
|
||||
--fs-lg: 20px;
|
||||
--fs-xl: 24px;
|
||||
--fs-2xl: 32px;
|
||||
--fs-3xl: 44px;
|
||||
--fs-4xl: 64px;
|
||||
--fs-5xl: 96px;
|
||||
/* lineHeight */
|
||||
--lh-tight: 1.05;
|
||||
--lh-snug: 1.25;
|
||||
--lh-base: 1.5;
|
||||
--lh-loose: 1.7;
|
||||
/* letterSpacing */
|
||||
--tr-tight: -0.02em;
|
||||
--tr-snug: -0.01em;
|
||||
--tr-base: 0em;
|
||||
--tr-mono: 0.02em;
|
||||
--tr-label: 0.08em;
|
||||
/* space */
|
||||
--sp-1: 4px;
|
||||
--sp-2: 8px;
|
||||
--sp-3: 12px;
|
||||
--sp-4: 16px;
|
||||
--sp-5: 24px;
|
||||
--sp-6: 32px;
|
||||
--sp-7: 48px;
|
||||
--sp-8: 64px;
|
||||
--sp-9: 96px;
|
||||
--sp-10: 128px;
|
||||
|
||||
/* ---------- Radii — small, mostly square ---------- */
|
||||
--r-0: 0px;
|
||||
--r-1: 2px;
|
||||
--r-2: 4px;
|
||||
--r-3: 8px;
|
||||
/* radius */
|
||||
--r-0: 0px;
|
||||
--r-1: 2px;
|
||||
--r-2: 4px;
|
||||
--r-3: 8px;
|
||||
--r-pill: 999px;
|
||||
|
||||
/* ---------- Elevation — almost none. This is a wireframe system. ---------- */
|
||||
/* shadow */
|
||||
--shadow-0: none;
|
||||
--shadow-1: 0 1px 0 var(--line);
|
||||
--shadow-2: 0 1px 0 var(--line-strong);
|
||||
--shadow-3: 0 4px 12px -6px rgba(10,10,10,0.10);
|
||||
}
|
||||
/* @end generated tokens */
|
||||
|
||||
/* ============================================================
|
||||
Semantic element styles
|
||||
|
||||
@@ -78,7 +78,7 @@ Establish the durable interfaces before any code, so future stacks slot in clean
|
||||
|
||||
```task
|
||||
id: WHYNOT-WP-0002-T01
|
||||
status: todo
|
||||
status: done
|
||||
priority: high
|
||||
state_hub_task_id: "66187d76-3755-4204-ad71-d9fae8ed38ac"
|
||||
```
|
||||
@@ -95,7 +95,7 @@ name, group, description, props (name/type/enum/default/required), **prop→attr
|
||||
|
||||
```task
|
||||
id: WHYNOT-WP-0002-T02
|
||||
status: todo
|
||||
status: done
|
||||
priority: high
|
||||
state_hub_task_id: "6fe8481c-02b3-407d-9b7b-c47f161c0dcd"
|
||||
```
|
||||
@@ -110,7 +110,7 @@ machine-readable **drift report**, a **parity result**), idempotency rules (rege
|
||||
|
||||
```task
|
||||
id: WHYNOT-WP-0002-T03
|
||||
status: todo
|
||||
status: done
|
||||
priority: medium
|
||||
state_hub_task_id: "97aadf8a-4d56-47d0-b841-d664d0676a53"
|
||||
```
|
||||
@@ -128,7 +128,7 @@ triaged/closed), and how this extends the existing atelier→repo pipeline. Upda
|
||||
|
||||
```task
|
||||
id: WHYNOT-WP-0002-T04
|
||||
status: todo
|
||||
status: done
|
||||
priority: high
|
||||
state_hub_task_id: "ed4dd1d4-f649-40f0-83f5-9cbd88622a7b"
|
||||
```
|
||||
@@ -149,7 +149,7 @@ a minimal token-plus-core-components React designbook is enough to prove the pip
|
||||
|
||||
```task
|
||||
id: WHYNOT-WP-0002-T05
|
||||
status: todo
|
||||
status: done
|
||||
priority: high
|
||||
state_hub_task_id: "dcdc0b01-756f-4253-9599-e5d5dfbe1083"
|
||||
```
|
||||
@@ -168,7 +168,7 @@ T01. Add `make ir`. `ir/` is committed so a re-extract surfaces blueprint change
|
||||
|
||||
```task
|
||||
id: WHYNOT-WP-0002-T06
|
||||
status: todo
|
||||
status: done
|
||||
priority: high
|
||||
state_hub_task_id: "a106c673-e849-4d06-91c9-3f7f63fec2ea"
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user