Layout And Organization
Labels
Compact, secondary-weight text that names a value or piece of metadata — the --ig-secondary-text / --ig-tertiary-text pair at system-12.
Findings
What's actually in /ig
- --ig-secondary-text and --ig-tertiary-text share light-mode value 115,115,115 but diverge in dark mode (168,168,168 vs 199,199,199) — the hierarchy exists but is subtle, see Colour.
- Labels run at the 10px or 12px system sizes almost universally.
Usage
When to use it
Use when
Use for metadata annotations on content, including timestamps, follower counts, view counts, privacy notes, and compact explanatory labels.
Avoid when
Avoid for primary titles, action text, or body copy; Labels intentionally sit below the primary reading hierarchy.
Anatomy
Anatomy
- 01
Label text
- 02
Optional icon
- 03
Colour role (secondary or tertiary)
Specification
Spacing, colour, type, and motion
- Font size
- var(--system-12-font-size) or var(--system-14-font-size), with 10px reserved for the quietest metadata
- Colour
- rgb(var(--ig-secondary-text)) or rgb(var(--ig-tertiary-text))
- Background
- None by default; only count badges use a pill background
- Overflow
- Single line with ellipsis when space is constrained
States
States
| State | Behaviour |
|---|---|
| Default | Secondary or tertiary text labels metadata without background or decoration. |
| Truncated | The label stays on one line and clips with text-overflow: ellipsis. |
| Count badge | Numerical metadata can move into a pill background while keeping compact label sizing. |
Examples
Real interface compositions
Creator insights
Professional dashboard metric label
The number '24.8K' stays primary while 'Accounts reached · Last 7 days' sits below at system-12 in secondary text, keeping the statistic scannable without competing with the value.
system-10/12 labels, --ig-secondary-text, --ig-tertiary-text
Guidance
Usage guidance
- Use --ig-secondary-text for the more prominent metadata tier, --ig-tertiary-text for the quieter one — they're deliberately close in light mode and diverge in dark mode.
Do / Don't
Do / Don't
Do
- Keep labels at 10–12px — the established label range.
Don’t
- Use --ig-primary-text for a label — labels are secondary/tertiary by definition in every instance found.