# Designesy — /labs/takt Canonical page: https://www.designesy.org/labs/takt --- ## Takt Interface feel: the physical sense of surfaces under your hands. Radius nesting, press feedback, image outlines, hit areas, stagger rhythm. Lab Two studies the small details that make an interface feel built rather than rendered. Rules are compiled from external design intelligence, cross-referenced against the Designesy contract, and verified on designesy.org. ## Live artifact Every interactive surface on designesy.org carries these rules: check-grid cells scale on press, rows have concentric left borders, card hover lifts with a shadow (not a border), and staggered fade-up sections enter ~100ms apart. Scroll this page and watch the section rhythm: that is takt. Correct Tinted ## Thesis Takt is the beat: the rhythm an interface keeps when you touch it. Where Poise covers motion design, takt covers the physical feel of radius nesting that looks right, press feedback that feels alive, hit areas that never miss, and enter animations that breathe in sequence. Takt is what separates a surface that feels assembled from one that feels poured. ## Principle ### Concentric border radius Outer radius = inner radius + padding. Mismatched nested radii are the most common "feels off" cause. If a card has 6px radius and 4px padding, the image inside needs exactly 2px. ### Scale on press Always scale(0.96) on press, never below 0.95. The difference between "this feels alive" and "this feels broken" is 0.01. Provide a static escape hatch when the element is not a control. ### Image outlines instead of borders 1px outline at 0.1 opacity: pure black in light mode, pure white in dark mode. Never tinted neutrals (slate, zinc) which read as dirt against a clean surface. ### Minimum hit area 44×44px for touch, 40×40px for desktop. Extend with a pseudo-element when the visual target is smaller. Two elements’ hit areas must never overlap. ### Stagger enter, soften exit Break content into semantic chunks with ~100ms stagger delay. Exits are softer than enters: a small fixed translateY in place of a full-height collapse. Skip animation entirely on page load. ## Portable contract Rules agents can cite when proposing or reviewing interface changes. Each rule has an exact value. Check a rule off as your surface adopts it. ** **0** / 8 adopted ## Implementation notes ``` You are working with Designesy Lab Two: Takt. Authority: designesy.org is the canonical public source for Designesy open design intelligence. Takt is Lab Two: interface feel as portable rules with exact values. Permission: read-only by default. Inspect, review, and report. Do not edit files, deploy changes, or claim write authority the operator did not grant. Goal: Review the target interface for takt (the physical feel of surfaces under your hands). Check every rule below and report which pass, which fail, and which are not applicable. Rules (each with an exact value): 1. Concentric radii: outerRadius = innerRadius + padding on every nested pair 2. Press scale: scale(0.96) on active, never below 0.95, static escape hatch 3. Image outlines: 1px at 0.1 opacity, pure black/white, never tinted neutrals 4. Hit area floor: 44×44px touch, 40×40px desktop, pseudo-element extension 5. Stagger enters: ~100ms per semantic chunk, skip on page load 6. Soften exits: small fixed translateY, softer than enter, no full collapse 7. No transition: all; every transition names its properties 8. Spare will-change: only transform/opacity/filter, only when stutter observed Output format: For each rule, provide a Before/After table: | Rule | Current | Fix (if needed) | Group by rule heading. Omit rules that have no findings. Express all fixes in the target project's styling system. Provenance: rules compiled from external design intelligence (Amicro, Jakub Krehel /better-ui, Emil Kowalski /emil-design-eng, /apple-design, /find-animation-opportunities, /animate), cross-referenced against contract v0.1.1, and adopted into design system contract v0.1.2. Primary lab page: https://www.designesy.org/labs/takt Design system contract: https://www.designesy.org/contracts/design-system Design Review kit: https://www.designesy.org/kits/design-review ``` ## Review checklist ## Provenance ## Anti-patterns ## Remix notes These rules are system-agnostic: express them in Tailwind, plain CSS, CSS-in-JS, or any other styling system. The values are exact; the syntax is yours to adapt. When a rule conflicts with an existing design system, name the tension explicitly rather than silently overriding it. ## Lab anatomy coverage ## Verification ## Field check ### Field check · Takt Lab Two reviewed with Use Kit One · Design Review Eight-dimension inspection of takt rules on designesy.org. Evidence for contract adoption. - [Lab One · Poise — Restrained interaction: motion, sound, reduced motion](https://www.designesy.org/labs/poise) - [Design system contract — Tokens, interaction, takt, cadence, acoustics, verification](https://www.designesy.org/contracts/design-system) - [Use Kit One · Design Review — Eight dimensions, portable agent prompt](https://www.designesy.org/kits/design-review) - [Field check · Poise — Lab One reviewed with Kit One](https://www.designesy.org/review/poise) - [Lab Three · Cadence — Text rhythm: scale, leading, tracking, measure](https://www.designesy.org/labs/cadence) - [Lab Four · Acoustics — Interaction sound: nineteen cues, nineteen roles, Cuelume v0.2.2](https://www.designesy.org/labs/acoustics)