Labs · Lab Two
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
Takt grid: see it on this page
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
What takt means here
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-reviewReview 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.
Open field check- Dimensions
- 8
- Holds
- 8
- Open tensions
- 4
- Reviewed
- 2026-07-13
- Method
- Kit One v0.1