Selection And Input
Color Wells
A circular swatch previewing a chosen colour before a picker opens — built from the same circle primitive as every avatar and icon button.
Findings
What's actually in /ig
- Every fixed semantic colour this pattern would preview (--ig-error, --ig-success, --ig-close-friends, --ig-subscribers-only) is confirmed real, and the circle shape matches the avatar/icon-button primitive.
Rationale
Why this component exists
Instagram's colour system is semantic, not freeform: most colour choices in the system are fixed tokens (Close Friends green, Live red) rather than user-selected. A colour well in this language previews one of those fixed tokens, not an open palette.
Usage
When to use it
Use when
Confirming a selection from a small, fixed set of semantic colours (a label colour, a note background) before committing.
Avoid when
The product needs a true freeform colour picker — that moves outside the semantic-token model that gives Instagram colour its consistency.
Anatomy
Anatomy
- 01
Circular swatch (current value)
- 02
Border (--ig-stroke)
- 03
Tap target (44px minimum)
Specification
Spacing, colour, type, and motion
- Swatch shape
- Circle, border-radius: 50%
- Swatch size
- 24–32px, matching small avatar scale
- Border
- 1px rgb(var(--ig-stroke))
- Tap target
- 44px minimum hit area regardless of visual size
States
States
| State | Behaviour |
|---|---|
| Default | Circular swatch previews the current semantic colour inside a 44px minimum hit area with a 1px stroke. |
| Hover | The hit area receives rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)) while the swatch colour remains unchanged. |
| Pressed/Active | The well uses an overlay slightly deeper than hover overlay while the picker trigger is pressed. |
| Focused | The focused well uses a 2px var(--ig-stop-magenta) outline with a --radius-xs offset around the hit area. |
| Selected | The committed semantic colour fills the swatch and remains visible before the picker opens. |
| Disabled | Disabled wells have opacity reduced and pointer-events none while still showing the current colour. |
Examples
Real interface compositions
Audience settings
Close Friends colour preview
A circular green well previews the Close Friends token beside the audience label, confirming a semantic colour choice rather than opening a freeform HSB picker.
--ig-close-friends, 24–32px circle, avatar/icon-button primitive
Do / Don't
Do / Don't
Do
- Restrict the underlying value set to documented semantic tokens rather than an open colour space.
Don’t
- Build a full HSB/RGB picker UI — that scope of control sits outside the semantic-token colour model.