Foundations
Spacing
A shared rhythm for padding, margins, and the space between.
5xl → xs
A 4-pt grid and a 2-pt hairline shape padding, margins, and gaps. Values are unitless density-independent points on native and render as pixels on web. Choose an existing step; never add or multiply tokens to invent another value.
import { View } from "react-native";
import { spacing } from "swshd/tokens";
<View style={{ padding: spacing.lg, gap: spacing.sm }}>{children}</View>3xs2px2xs4pxxs8pxsm12pxmd16pxlg20pxxl24px2xl32px3xl40px4xl48px5xl64px| Token | Value | Scale | Use |
|---|---|---|---|
| 2px | Hairline stacking and icon-to-label micro gaps. | ||
| 4px | Tight inline gaps. | ||
| 8px | Icon gaps and compact padding. | ||
| 12px | List-row vertical padding and input padding. | ||
| 16px | Default card and screen padding. | ||
| 20px | Comfortable padding and screen horizontal margin. | ||
| 24px | Section gaps. | ||
| 32px | Group separation. | ||
| 40px | Large section gaps. | ||
| 48px | Hero and empty-state spacing. | ||
| 64px | Maximum breathing room. |
Add photos
spacing.3xs2pxMicro · 3xs–xs
Icon-to-label gaps and compact internal rhythm.
R
Riverside
Shared album
spacing.md16pxspacing.sm12pxComponent · sm–lg
Rows, cards, and control padding.
Your people
Keep the weekend close.
spacing.xl24pxSection · xl–5xl
Separation between groups and sections.
Padding · 20px
Gap · 12px
Padding
Gap
MC
Maya Chen
Riverside weekend
Shared
spacing.lgDo
Choose an existing step for padding, margins, and gaps.
spacing.md + spacing.xsDon't
Do not add or multiply tokens to invent a new value.