Design Tokens

Gradient — Yellow

Gradient — Orange

Gradient — Rose

Gradient — Magenta

Gradient — Purple

Primary background

Secondary background

Elevated background

Secondary elevated bg

Primary text

Secondary text

Tertiary text

Primary icon

Secondary icon

Highlight / hover fill

Separator

Stroke

Focus stroke

Primary button

#0095F6

Primary button hover

Secondary button background

Secondary button label

Secondary button hover

Error / destructive

Success

Live badge

Close Friends

Subscribers only

Outgoing DM bubble

Incoming DM bubble

Always white

Always black

Code keyword

Code string

Code comment

Code number

Code type (CSS custom property)

HUD text

HUD background

rgba(0, 0, 0, 0.55)

Bar track background

rgba(255, 255, 255, 0.18)

Product UI

Optimistic VF / Montserrat fallback

Brand — main

Instagram Sans local cuts

Brand — headline optical cut

Instagram Sans Headline

Brand — condensed cut

Instagram Sans Condensed → Instagram Sans

Brand — script cut

Instagram Sans Script → Instagram Sans

Brand — UI variant

Instagram Sans UI → var(--font-family-system)

Brand — squeeze (standalone)

Instagram Squeeze → var(--font-family-system)

Extralight

200

Light

300

Regular

400

Medium

500

Semibold

600

Bold

700

Extrabold

800

System 10

System 12

System 14

System 16

System 18

System 22

System 24

System 28

System 32

Space 1 — Micro

4px

Space 2 — XS

8px

Space 3 — SM

12px

Space 4 — Base

16px

Space 5 — MD

24px

Space 6 — LG

32px

Space 7 — XL

40px

Space 8 — 2XL

48px

Space 9 — 3XL

64px

Space 10 — 4XL

96px

Icon SM — Inline/badge

16px

Icon MD — Nav/action

20px

Icon LG — Primary action

24px

Icon XL — Hero/empty state

32px

Shadow inset

0 0 0 1px rgba(0,0,0,.08) inset

Shadow card

0 1px 4px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.06)

Shadow list

0 2px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.10)

Shadow elevated

0 2px 26px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.10)

Shadow sheet

0 -6px 16px rgba(0,0,0,.18)

Layer 1 — Card

10

Layer 2 — List

20

Layer 8 — Modal

80

Layer 10 — Focus

100

Grid unit ×1

7.142vw

Grid unit ×2

14.285vw

Grid unit ×3

21.428vw

Grid unit ×5

35.714vw

Grid unit ×9

64.285vw

Radius xs

2

Radius sm

4

Radius md

8

Radius lg / input

6

Radius xl / modal

12

Radius pill

999

Ease Standard

cubic-bezier(0.33, 0, 0.67, 1)

Ease Confident

cubic-bezier(0.7, 0, 0.3, 1)

Ease Glide

cubic-bezier(0, 0, 0.1, 1)

Ease Settle

cubic-bezier(0, 0.61, 0.28, 0.92)

Ease Anticipate

cubic-bezier(0.4, 0, 0.1, 1)

Micro-feedback

150ms

Reveal

666ms

Narrative beat

2000ms