ReviewField check
Takt
Lab Two reviewed with Use Kit One · Design Review.
This packet applies the public Design Review kit to Lab Two — interface feel as portable rules with exact values. The live CSS was parsed and every takt rule was verified against the actual stylesheet. Outcome leads with consequences.
Summary
Outcome · pass with notes
Takt is a considered lab. The live CSS confirms every rule: no transition:all, will-change restricted to transform/opacity, press scale 0.96 on cells and 0.985 on larger surfaces, concentric radii holding, stagger at 80ms increments. The lab codifies what the site already does — it is not aspirational. Two rules remain unverified (image outlines — no image surfaces yet; mobile hit area — desktop only). Six rules are promoted into contract v0.1.2. Remaining work is verification and synchronization, not re-argument.
Inputs used
Dimension findings
Each dimension: observation, judgment, action — Kit One format.
Purpose
Observation. Takt states a single job: make interfaces feel built rather than rendered. Five principles with exact values (concentric radii, press scale, image outlines, hit areas, stagger rhythm) all serve that job. The live artifact is the page itself — every interactive surface demonstrates the rules.
Judgment. Purpose is clear and self-demonstrating. The lab is not a showcase of effects; it is an inspectable compilation of interface-feel rules with provenance.
Action · Keep. Do not add decorative demos that dilute the exact-value thesis.
Clarity
Observation. Primary path is immediate: Lab Two eyebrow, title Takt, lede, then principles with exact values. Each principle has a bold title and a one-sentence body with the exact number. Portable contract section lists all 8 rules as toggleable rows. Builder prompt is one-click copyable.
Judgment. Primary action is discoverable. Every rule has its exact value visible — 0.96, 44px, 100ms, 0.1 opacity. No vague language. Hierarchy reduces uncertainty.
Action · Keep. Preserve exact-value callouts in every principle body.
Context
Observation. Built for the public designesy.org surface — dark foundation, shared topbar, institutional voice. Rules are system-agnostic (expressed in values, not framework). Remix notes explicitly state the rules work in Tailwind, plain CSS, or CSS-in-JS.
Judgment. Context fits a public lab with cross-system applicability. The exact-value approach means rules travel — they are not locked to a framework.
Action · Keep system-agnostic framing. Do not tie rules to a specific framework in future versions.
Inclusion
Observation. Hit area rule (44px touch, 40px desktop) is explicit and verified on live nav links. Stagger rule includes "skip on page load" — no unsolicited motion on first render. will-change is restricted to transform/opacity/filter only, preventing GPU layer abuse on low-end devices. Reduced-motion handling exists on the parent site.
Judgment. Structural inclusion is real for touch, performance, and motion sensitivity. The 44px floor is a WCAG-adjacent commitment.
Action · Keep hit area floor explicit. Verify on mobile viewport when a keyboard-path packet is published.
System coherence
Observation. Live CSS confirms: --radius (6px) and --radius-sm (4px) are the only radius tokens. Concentric rule holds — card padding (4px) + inner radius (2px) = outer (6px). Press scales match: scale(0.96) on check-cells, scale(0.985) on pillars and rows (softer for longer surfaces). No transition:all anywhere in the stylesheet. will-change appears only as transform and transform,opacity. Fade-up stagger uses 80ms increments (delay-1 through delay-5). All transitions name specific properties.
Judgment. Strong coherence. Takt rules describe what the live site already does — the lab codifies existing practice, not aspirational behavior. Press scale variants (0.96 for tight controls, 0.985 for larger surfaces) are a deliberate calibration, not inconsistency.
Action · Promote both press-scale variants into contract v0.1.2: 0.96 for cells/buttons, 0.985 for cards/rows.
Durability
Observation. Full lab anatomy is present: thesis, principles, portable contract, builder prompt, review checklist, provenance, anti-patterns, remix notes, anatomy coverage, verification, field check link. Rules have exact values that do not degrade — 0.96 is 0.96 regardless of framework or year. Builder prompt is copyable and self-contained.
Judgment. Durable as a lab package and as contract material. Rules are value-precise, not trend-dependent. Risk is the same dual-source drift as Poise: if contract tables and live CSS diverge.
Action · When any takt value changes, update live CSS, lab notes, and contract.takt together.
Delight
Observation. The page itself is the demonstration — staggered fade-up sections, press feedback on every toggle, check-grid cells that respond. No glow, bounce, or particle effects. Emotional quality comes from precision: exact values, visible numbers, honest provenance.
Judgment. Delight is earned through precision, not decoration. The interface-feel rules produce a surface that feels assembled because the numbers are right.
Action · Keep exact-value framing. Reject proposals that add spectacle to substitute for wrong numbers.
Responsibility
Observation. Provenance is explicit: rules compiled from external sources (Amicro @SubhanHQ, Krehel /better-ui MIT) and cross-referenced against contract v0.1.1. No rule is claimed as original when it is compiled. The lab is honest about its sources. Anti-patterns section prevents the rules from becoming hidden doctrine.
Judgment. Honest about provenance and status: a compilation lab whose rules are now contract material. External sources are credited. The adoption path is public.
Action · Keep provenance current. If new rules are added from external sources, credit them. Future rule changes require a contract bump.