Foundation
Company-wide tokens — spacing, typography roles, status semantics. Never fork per app.
Spacing
4pt grid · Swift: IntrinsicSpacing · CSS: --intrinsic-space-*
xxs4pxxs8pxsm12pxmd16pxlg20pxxl24pxsection32pxTypography
Semantic roles · Swift: IntrinsicTypography · Web: .iv-* from foundation.utilities.css · ADR-011
Acceptance specimen — list row hierarchy
Chicken Tikka Masala
Serves 4 · 45 min · Medium spice
Last edited yesterday
Callout — short intro or banner copy at secondary emphasis.
| Role | iOS | Web | Use |
|---|---|---|---|
| largeTitle | .largeTitle | .iv-large-title34px | Rare full-screen hero titles; prefer navigation title for most screens |
| title | .title | .iv-title28px | Primary screen title in content (when not using navigation bar title) |
| headline | .headline | .iv-headline17px | List row primary text, card titles, emphasized inline labels |
| body | .body | .iv-body17px | Default reading text, descriptions, form values |
| callout | .callout | .iv-callout16px | Secondary emphasis blocks, callout banners, short intros |
| subheadline | .subheadline | .iv-subheadline15px | List row subtitles, supporting sentences under headlines |
| footnote | .footnote | .iv-footnote13px | Timestamps, legal hints, tertiary metadata, error fine print |
| caption | .caption | .iv-caption12px | Image captions, badge text, compact list secondary lines |
| caption2 | .caption2 | .iv-caption211px | Smallest legible metadata; use sparingly |
| label | .subheadline.weight(.medium) | .iv-label15px | Section headers, form field labels, uppercase chrome — not body copy |
Radius
badge · 10px
button · 14px
card · 20px
Status colors
info
Swift .blue · #007aff
warning
Swift .orange · #ff9500
success
Swift .green · #34c759
critical
Swift .red · #ff3b30
neutralSecondary
Swift .secondary · #636366
Motion
- durationFastMs — 150ms
- durationNormalMs — 250ms
- durationSlowMs — 400ms