Source-backed brand identity manual
This is how Instagram actually builds Instagram.
Every documented rule on this site is traced to Instagram’s own production CSS — ten source files, from a 4 KB about-page stylesheet to two 950 KB web-app bundles — and cross-checked against about.instagram.com/brand. Derived component guidance is marked as partially evidenced, and native platform concepts are marked not found in /ig as product-scope boundaries.
Tokens, visualized — not listed
Every value on this site renders as itself.
The hero gradient
Instagram’s own framing
“We created a custom typeface, updated our gradient and color palette, and refined our approach to layout and design.”
— about.instagram.com/brand
A custom typeface, for global scale
Instagram Sans for brand storytelling, Optimistic for the product itself — each shipping dedicated optical cuts down to specific scripts, not just a Latin alphabet with fallbacks bolted on.
Explore TypographyColour designed to illuminate and inspire
One fully-saturated five-stop gradient, sliced into every brand moment, sitting on top of a near-monochrome semantic colour system built for both light and dark.
Explore ColourLayouts built to showcase community
A 14-unit fluid grid measured in viewport width, full-bleed 100vh storytelling chapters, and an asymmetric mosaic for creator photography.
Explore Layout & GridEverything in this manual