← ClaudeAtlas

spacing-systemlisted

Use when layout rhythm, density, or gaps feel arbitrary or inconsistent, or when one product needs different reading pressures without splitting into unrelated spacing systems.
KyaniteLabs/tastecheck · ★ 7 · Web & Frontend · score 71
Install: claude install-skill KyaniteLabs/tastecheck
# Spacing System (the scale nobody owns) Every gap uses one `--space-*` scale; named semantic relationships create composition instead of arbitrary margins. ## The decision order 1. Publish one 4px-base ladder: `4/8/12/16/24/32/48/64/96px` as `--space-1` through `--space-9`, plus `--space-section: clamp(48px, 32px + 4vw, 96px)`. 2. Map attachment, control, task, group, region, and chapter relationships to visibly different steps (roughly ≥1.5× between levels). 3. Choose metronomic or intentional syncopated section rhythm from content pressure. 4. Use `gap` and one-direction logical margins; do not stack arbitrary margins. ## Let content set the rhythm Map repeated operational tasks to compact predictability and editorial/narrative content to deliberate breathing room; retain one system and state why named roles differ. Use the role map before picking a value: | Relationship | Shared token | Compact operational rhythm | Long-form editorial rhythm | | --- | --- | --- | --- | | attachment | `--space-1` (4px) | icon/state to its label | inline metadata pair | | control | `--space-2/3` (8/12px) | label-to-control / inside a control | claim-to-citation / tight evidence pair | | task | `--space-4` (16px) | repeated queue item | adjacent paragraph or evidence group | | group | `--space-5` (24px) | task-group break | discrete finding | | region | `--space-6/7/8` (32/48/64px) | console-region break | narrative subsection or causal pivot | | chapter | `--space-section` (flui