# Designesy — /graph Canonical page: https://www.designesy.org/graph --- ## Provenance chain How sources become shipped work. The living knowledge tree: how sources become shipped work through the Designesy pipeline. The Graph prevents design knowledge from becoming anonymous taste — every shipped artifact should trace backwards through this chain to a source. ## The chain Ten stages from source to shipped work. Each stage has public examples — real evidence, not abstract theory. ### Source Observed material — external design intelligence, prior work, real artifacts. - External design intelligence research (W3C DTCG, Apple HIG, Material 3) - Cuelume interaction sound library - Transitions.dev motion reference - Better-ui and better-typography agent skills ### Observation What was noticed. The raw finding before it becomes a claim. - No existing tool compiles principles into verifiable contracts - W3C DTCG 2025.10 does not define acoustic tokens - Press feedback at scale(0.97) feels physical; scale(0) feels broken ### Claim A stated position derived from observation. - Motion is structural communication, not ornament - Acoustic tokens should be first-class design contract material - If the response is louder than the action, it fails ### Tension An open problem or unresolved conflict. - Block-axis logical properties not yet migrated - Dual-source risk: human page and machine export can drift - Font-synthesis, logical properties, underline-from-font open tensions ### Principle A working rule that resolves a tension. - Purpose earns form - Economy is intelligence - Responsibility is a design material ### Pattern A reusable approach derived from principles. - Labs compile into contracts: experiment, review, adopt, version - Field checks verify live CSS against contract rules - Case studies document shipped work with outcomes, including underperformance ### Contract Rule An enforceable, tokenized rule adopted into the design system. - Press settle: scale(0.97) at ~160ms with ease-out - Concentric border radius: outerRadius = innerRadius + padding - Rem-based scale: every text size is a rem multiple of the 16px root ### Token / Component / Behavior The machine-readable expression of a contract rule. - --ease-out: cubic-bezier(0.23, 1, 0.32, 1) - --cue:action: press (Cuelume engine) - shape.radius.default: 6px ### Verification Artifact Proof that the rule is live and working. - Field check · Poise (pass with notes) - Field check · Takt (pass with notes, 47,680 bytes CSS audited) - Field check · Cadence (pass with notes, 48,755 bytes CSS audited) - Keyboard path verification ### Shipped Work Real artifacts produced using the contract. - designesy.org (live, v0.4.0, 23 packages, 10 machine exports) - Tile — interactive series composer (617 views on X) - Compile — principle compiler (built, pending hosting) - Continuity — founder narrative (shipped, underperformed, failure documented) ## What this is The Graph is the internal knowledge tree of Designesy. This public surface shows the chain with real examples — but without internal paths, control-plane naming, or private doctrine. It is the provenance layer: a visitor can trace how a source became a principle, a principle became a contract, a contract became a token, a token became a verification, and a verification became shipped work. ## Boundaries - A knowledge graph of design concepts — curated, versioned, and read-only. - Examples are selected, not live-streamed from production. - Companion to the contract and review surfaces, not a substitute. - Internal paths and control-plane naming stay private. ## Related - [Design system contract v0.4.0 — Contract rules and tokens](https://www.designesy.org/contracts/design-system) - [Review surface — Verification artifacts](https://www.designesy.org/review) - [Work — case studies — Shipped work](https://www.designesy.org/work) - [Machine export — graph.json](https://www.designesy.org/graph.json) - [Docs — Architecture and seven layers](https://www.designesy.org/docs)