Components

Buttons

A three-tier hierarchy, not a binary primary/secondary split — production tokens confirm primary, secondary, and tertiary backgrounds, borders, hover, and text colours all exist as distinct, named roles.

Live

Hover and click — these are real

Every state below is the actual CSS hover/disabled behaviour, not a screenshot.

Variant markup

<button class="ig-button" data-variant="primary">Follow</button>
<button class="ig-button" data-variant="secondary">Following</button>
<button class="ig-button" data-variant="tertiary">Learn more</button>

Tokens

Token values from /ig

Primary

--ig-primary-button

Hover: --ig-primary-button-hover (24, 119, 242)

0, 149, 246

Secondary background

--ig-secondary-button-background

Hover: --ig-secondary-button-hover (219, 219, 219 / 38, 38, 38)

239, 239, 23954, 54, 54

Secondary label

--ig-secondary-button

Used by /ig as the secondary button's text colour

38, 38, 38250, 250, 250

Tertiary background

--ig-tertiary-button-background

Same value in both /ig theme scopes. Hover: --ig-tertiary-button-hover (245, 245, 245)

255, 255, 255

Tertiary border

--ig-tertiary-button-border

Same value in both /ig theme scopes. Text: --ig-tertiary-button-text (38, 38, 38)

219, 219, 219

Usage

Do / Don't

Do

Use primary for the single most important action on a surface — there should usually be one.
Keep hover state to a flat background-colour shift — no shape, shadow, or layout change.
Use var(--input-radius) (6px) for the corner radius — it's a token, not a magic number.

Don’t

Add a fourth button tier — primary/secondary/tertiary covers every observed case, including on dark backgrounds.
Combine colour change + shape change + shadow change on hover — no observed instance does this.
Lower disabled opacity below 0.5 or remove the cursor: not-allowed affordance.