Tinyrack

Spacing

Choose spacing by relationship: details stay close, components breathe, and sections mark task boundaries.

Start with relationships

Spacing explains which elements belong together. Choose the relationship before the number, and use one repeated gap for peers.

  • Detail spacing (xs–sm): icon and label, label and value, or lines inside one compact group.
  • Component spacing (md–lg): fields, actions, rows, and padding inside a bounded component.
  • Section spacing (xl–2xl): task groups, page regions, and major changes in subject.

Visual scale

3xs0.0625rem
xs0.25rem
sm0.5rem
md0.75rem
lg1rem
xl1.5rem
2xl2rem
3xl3rem

Layout rhythm

Build from the inside out: group label and value with xs, separate peer rows with sm or md, pad the component with lg, then separate it from the next task with xl or 2xl. Avoid a different gap for every pair; repeated relationships should look repeated.

Rackrack-a
StatusHealthy

Rhythm

Detail gaps bind each label and value. Component gaps separate rows. Section gaps separate tasks.

Implementation and reference

.rack-card { display: grid; gap: var(--tinyrack-space-md); padding: var(--tinyrack-space-lg); }
TokenValueTypical relationshipTailwindTypeScript
3xs0.0625remDetailgap-tinyrack-3xstinyrackSpacing['3xs']
xs0.25remDetailgap-tinyrack-xstinyrackSpacing['xs']
sm0.5remDetailgap-tinyrack-smtinyrackSpacing['sm']
md0.75remComponentgap-tinyrack-mdtinyrackSpacing['md']
lg1remComponentgap-tinyrack-lgtinyrackSpacing['lg']
xl1.5remSectiongap-tinyrack-xltinyrackSpacing['xl']
2xl2remSectiongap-tinyrack-2xltinyrackSpacing['2xl']
3xl3remSectiongap-tinyrack-3xltinyrackSpacing['3xl']

See the Tailwind spacing mappings.