# Designesy — /review/cadence Canonical page: https://www.designesy.org/review/cadence --- ## Cadence Lab Three reviewed with Use Kit One · Design Review. This packet applies the public Design Review kit to a live experiment — not the whole site. Outcome leads with consequences: what holds, what stays open, and what to do next. ## Summary Cadence is a considered lab. The live CSS audit confirms 12 of 13 verifiable typography rules: font smoothing on root, rem-based scale, line-height by role, tracking by size, measure cap, text-wrap balance and pretty, tabular numbers, ::selection with signal blue, user-select on UI chrome, 16px input floor, font-synthesis: none, and text-underline-position: from-font. Two rules identified in the initial field check have been resolved in globals.css. One rule remains open: block-axis logical properties are not yet migrated (inline-axis is done). Typography rules are adopted into design system contract v0.1.3. Remaining work is block-axis migration and synchronization — not re-arguing adoption. ## Inputs used ## Dimension findings Each dimension: observation, judgment, action — Kit One format. ### Purpose **Observation.** Cadence states a single job: make text feel composed, not placed. The live artifact (this page), thesis, principles, portable rules, builder prompt, checklist, provenance, and anti-patterns all serve that job. **Judgment.** Purpose is clear and earns the form. The lab is an inspectable set of rules with exact values verified on live CSS. Action · Keep. Do not add decorative typography demos that dilute the rules. ### Clarity **Observation.** Primary path is immediate: Lab Three eyebrow, title Cadence, lede, then the live artifact note (this page is the demo). Every rule is expressed with an exact value, not a preference. **Judgment.** Primary value proposition is discoverable. Form suggests use. Each principle pairs explanation with concrete CSS values. Action · Keep. Preserve exact-value callouts next to every rule. ### Context **Observation.** Built for the public designesy.org surface — dark foundation, system font stack, shared topbar. The lab assumes desktop and mobile browsers; long anatomy sections still ask for scroll patience on small screens. **Judgment.** Context fits a public lab. Dense doctrine below the fold is acceptable; the live artifact is the page itself, so the demo is always visible. Action · Document. Keep demo-first on narrow widths. No decorative font demos until contracted. ### Inclusion **Observation.** Rem-based scale respects user font-size preferences. 16px input floor prevents iOS auto-zoom. text-wrap: pretty improves readability across viewports. font-synthesis: none is now set on :root — prevents fake browser weights. text-underline-position: from-font and text-decoration-skip-ink: auto are set — underlines align to font metrics and skip descenders. **Judgment.** Structural inclusion is strong. The font-synthesis and underline-position gaps identified in the initial field check have been resolved in globals.css. Remaining inclusion work is block-axis logical property migration. Action · Document the fixes. Keep font-synthesis: none and text-underline-position: from-font in :root. Migrate block-axis logical properties when safe. ### System coherence **Observation.** Values cite contract tokens: --signal for ::selection, --maxw for measure, system stack for body. The typography block in the contract already documents the scale. Cadence extends the system without inventing a second font family. **Judgment.** Strong coherence. Cadence refines the existing typography block without introducing new tokens or fonts. Adoption is explicit. Action · Keep lab demo, contract.typography, and live CSS synchronized after adoption. ### Durability **Observation.** Full lab anatomy is present. Builder prompt is remixable. Rules are system-agnostic — express in any styling system. The system stack is the contract; no web font dependency to maintain. **Judgment.** Durable as a lab package and as contract material. Risk is dual-source drift if contract.typography and live CSS diverge later. Action · When any typography value changes, update live CSS, lab notes, and contract.typography together. ### Delight **Observation.** text-wrap: balance on headings and pretty on body add quiet polish — the browser handles line breaking without JavaScript. ::selection styled with signal blue makes every selection feel intentional. Tabular numbers make data feel precise. **Judgment.** Delight is earned through composition, not decoration. The cadence of text is the delight — no glow, animation, or spectacle needed. Action · Keep restraint. Reject decorative typography proposals that fail the thesis. ### Responsibility **Observation.** No dark pattern in typography. Rem-based scale respects user preferences. 16px input floor is a real accessibility protection. Open tensions are documented: block-axis logical properties remain physical. font-synthesis: none and text-underline-position: from-font have been resolved in globals.css and removed from open tensions. **Judgment.** Status is explicit: live experiment whose rules are now contract material. Two of three original tensions are resolved; one remains (logical properties). Status accuracy is a standing hold. Action · Keep status language accurate. Future rule changes require a new contract version, not silent edits. ## Holds ## Tensions ## Resolved tensions ## Corrections ## Verification performed ## Sources used - [Lab Three · Cadence — Artifact under review](https://www.designesy.org/labs/cadence) - [Use Kit One · Design Review — Method and output format](https://www.designesy.org/kits/design-review) - [Design system contract v0.4.0 — Governing tokens · typography block (Cadence adopted in v0.1.3)](https://www.designesy.org/contracts/design-system) - [Krehel /better-typography — 18 typography principles (MIT) — source material](https://github.com/jakubkrehel/skills) - [Field check · Poise — Prior field check pattern (Lab One)](https://www.designesy.org/review/poise) - [Review surface — Eight dimensions doctrine](https://www.designesy.org/review) ## Related - [Open Lab Three · Cadence — Live artifact](https://www.designesy.org/labs/cadence) - [Lab Two · Takt — Prior field check pattern](https://www.designesy.org/labs/takt) - [Use Kit One · Design Review — Run the same method on your work](https://www.designesy.org/kits/design-review)