Layout And Organization
Lockups
Avatar/icon + title + secondary text bound into one scannable row — the exact anatomy of every search result and identity row in /ig.
Findings
What's actually in /ig
- The search result row pattern (--search-result-height:50px) is structurally a lockup: a leading well, a primary text line, and a secondary/metadata line.
- Secondary text in lockups consistently uses --ig-secondary-text or --ig-tertiary-text, never --ig-primary-text.
Usage
When to use it
Use when
Use for any identity row: follow list entries, notification actors, search results, story-ring identities, and compact account references.
Avoid when
Avoid when the leading visual is decorative rather than identifying; use Labels or Lists And Tables for plain metadata rows.
Anatomy
Anatomy
- 01
Leading icon/avatar well
- 02
Primary text (name/title)
- 03
Secondary text (metadata)
- 04
Optional trailing action
Specification
Spacing, colour, type, and motion
- Avatar
- 32–40px fixed leading well
- Primary label
- var(--system-14-font-size), semibold weight
- Subtext
- var(--system-12-font-size), rgb(var(--ig-secondary-text))
- Gap
- var(--space-2) between avatar and text stack
- Overflow
- Primary and secondary lines truncate independently
States
States
| State | Behaviour |
|---|---|
| Default | Avatar or icon, primary label, and secondary text sit in a fixed row. |
| Hover | Interactive lockups receive the row hover overlay while text hierarchy stays unchanged. |
| Pressed | The row applies a pressed overlay while opening the profile or taking the row action. |
| Verified | A blue tick appears inline immediately after the primary label without changing row height. |
Examples
Real interface compositions
Messaging
DM participant row
A round avatar, bold display name, muted last-message preview, and timestamp stay bound as one scannable row, with the subtitle truncating before the time is displaced.
fixed leading well, system-14 title, --ig-secondary-text subtitle, 50px row logic
Guidance
Usage guidance
- Keep the leading well a fixed size regardless of content length — search rows don't resize the avatar well for longer names.
- Truncate the primary line before wrapping; truncate the secondary line independently.
Do / Don't
Do / Don't
Do
- Use --ig-secondary-text for the subtitle line, matching every identity row found.
Don’t
- Let a long primary line push the secondary line or trailing action out of the fixed row height.