Foundations
Shape
Every rounded form in the system resolves to one of three primitives — circle, rounded square (including a true tokenized squircle), or pill. There is no fourth shape language.
Shape grammar
Three primitives, no exceptions
The squircle approximation below uses a generic superellipse — the literal --squircle-polygon coordinates weren't captured in the source excerpts analyzed, only its declaration and usage site.
Circle
border-radius: 50% — avatars, icon buttons, dismiss controls
Squircle
clip-path: var(--squircle-polygon) — brand-forward tiles
Rounded square
border-radius: 8–16px — cards, containers
Pill
border-radius: 999px — tags, segmented progress
Radius scale
A token, not a magic number
Even one-off components reach for var(--input-border-radius) (6px) or var(--modal-border-radius) (12px) rather than a hard-coded pixel value.
Content shape
Aspect ratios are product, not art direction
The ratios used for imagery map directly to product surfaces — the about-page documents the product, even in its own photography.
1:1
Feed grid, avatars
4:5
Standard portrait post
9:16
Stories, Reels
16:9
Landscape video, mosaic rows
3:4
About-page editorial cards
Functional cuts
Organic clip-paths serve one purpose: function
clip-path: path("M 24 0 Q 19.5 0 18 2.571 Q 16.5 6 12 6 Q 7.5 6 6 2.571 Q 4.5 0 0 0 Z");
/* 24 units wide, 6 tall, symmetric — see Components → Messaging */clip-path: inset(0 0 0 0 round var(--dialog-corner-radius));
/* clips to rounded corners without overflow: hidden's scrollbar-gutter and repaint cost */Usage
Do / Don't
Do
- Pick one of the three primitives for any new component — circle, rounded-square-or-squircle, or pill.
- Use --squircle-polygon instead of a plain border-radius when a tile should read as distinctly 'Instagram.'
- Use a fixed-pixel radius only when no token exists — most components in source reach for one.
Don’t
- Introduce a fourth shape family.
- Hand-roll a new decorative clip-path SVG path — every organic path in source serves a specific functional purpose.
- Assume a generic superellipse formula matches Instagram's literal squircle coordinates — verify against the live site before shipping.