Instagram Brand Manual

Resources

Methodology

How this manual — and this website — were built, what was scoped out and why, and exactly how confident each claim is.

Architecture

Three token layers, one direction of authorship

1 · Foundation

--fds-* --web-always-* --system-*

Shared Meta-wide infrastructure. Not Instagram-specific.

2 · Semantic

--ig-*

Instagram's own naming of roles on top of the foundation. Write new work against this layer.

3 · Compiled atomic

._a8y9 ._x8exfn3

Auto-generated build output. Never hand-author.

Evidence

Source confidence tiers

High

Fully read, small, about-page-specific file; selector and full rule context available.

The 72.44deg hero gradient, the rolling-chevron keyframes, the type-tester structure.

Medium

The same value appears independently in both an about-page file and a production bundle.

#FFD600 matching --gradient-yellow; the brand gradient's hues matching --ig-subscribers-only.

Low

Found only via pattern search in a ~950 KB production bundle, without surrounding selector context.

The 'alt' gradient family, some light/dark token pairings, the literal --squircle-polygon coordinates.

Components

Component evidence badges stay visible

Documented

19 pages

A selector, class, or custom property in /ig backs the component directly, with the finding cited on the page.

Buttons, Search Fields, Toggles, Tab Bars, Action Sheets, and Stories Progress.

Partially evidenced

18 pages

The specification is derived from established Instagram tokens and neighbouring confirmed patterns rather than a component-specific captured selector.

Sliders borrow Toggle's 28px thumb; Alerts borrow the modal radius, backdrop, and destructive colour.

Not found in /ig

10 pages

A native OS category sits outside Instagram's web-product surface, so the page stays as a scope note and points to the nearest Instagram pattern when one exists.

Dock Menus, Menu Bar, Virtual Keyboards, Activity Rings, Gauges, and Rating Indicators.

Inferred pages are written confidently because the implementation is derived from established system tokens — spacing, radius, colour, type, motion, and neighbouring confirmed components — but the badge still tells readers that the component is token-derived. Not-found pages stay short and describe the product boundary rather than expanding a native-platform pattern into Instagram chrome.

Inference method

How inferred specifications are derived

When a component has no captured selector, its specification is built by triangulating three sources — never by assumption:

  1. Confirmed token values from the same system. Every colour, radius, spacing step, and easing curve used on an inferred page is a token already confirmed in the /ig evidence — the same --radius-xl: 16px that backs the modal is the value cited for alerts, popovers, and sheets because they share the same elevated-surface radius tier.
  2. Genus matching to neighbouring confirmed components. Controls in the same functional genus share implementation details. Toggle is fully documented — selector, thumb diameter, track dimensions, state colours. Slider is the same genus of binary-or-graduated control, so its 28 px thumb, 4 px track, and thumb shadow carry over directly. The same logic applies to pairing Action Sheets with Alerts (both are modal-layer interruptions) and Sliders with Page Controls.
  3. Observable product behaviour. Where the live product renders a component and the value is unambiguous — a pill badge always wraps tightly, a separator always sits on --ig-separator, a primary button is always #0095F6 — the observed value is cited as inferred even without a captured selector, because the token system makes a different value implausible.

The badge doesn’t warn that the values are wrong — it tells you where the evidence sits. An inferred specification that triangulates from three confirmed sources is more reliable than a single captured selector that might be component-specific override noise.

Scope

What was scoped out, and why

  • Legacy Facebook-platform utility classes (.uiContextualLayer, #facebook .hidden_elem, .fb_logo) inherited from Meta’s shared static-asset pipeline — out of scope.
  • Ads-manager and business-suite chrome — out of scope.
  • Locale-specific fallback font stacks for scripts Instagram Sans/Optimistic don’t cover directly — cited as evidence of internationalization commitment, not documented as Instagram-authored typefaces.
  • Thousands of one-off component breakpoints — only values recurring across multiple unrelated components were promoted into the tier table on Layout & Grid.

Open questions

Unresolved, and exactly where

Which exact surfaces use the 'primary' vs. 'alt' brand gradient family?See color →What does --ig-link's pale-blue value actually back?See color →What are the literal coordinates behind --squircle-polygon?See shape →Is outline: none on one rule safely superseded elsewhere, or a real focus risk?See accessibility →Instagram Squeeze is confirmed as a standalone family (atomic class x1ro8mou) — but which product surface uses it?See typography →Instagram Sans UI is confirmed as a distinct named family (atomic class x17y0mf4) — but which product surface applies it?See typography →

This website

Built the same way, with one addition

The site at site/ is a Next.js app composed from the reusable component library documented throughout this manual. Every visual demo — the easing playground, the contrast checker, the Stories progress bar — runs real CSS and real WCAG math, not a screenshot. Component pages use the same badge system shown above: documented pages cite direct findings, partially evidenced pages derive from confirmed tokens, and not-found pages keep native OS concepts separate from Instagram product patterns.