Foundations
Colour
One fully-saturated gradient, sliced into every brand moment, sitting on top of a near-monochrome semantic system built for both light and dark.
The brand gradient
A five-stop ramp, cropped a dozen ways
Every gradient on the about-page is a slice of the same underlying spectrum — never an independently-designed one-off.
Full spectrum — 125deg
Hero crop — the about-page default
Hover text fill
Nav link underline
Captured theme tokens
As declared in /ig
Names and values exactly as declared in the light (._aa4c) and dark (._aa4d) theme scopes of the captured product bundle.
Fixed semantics
Some colours never theme-swap
Their meaning depends on consistency, not on matching the surrounding surface.
Overlay & scrim system
Photography never carries text alone
Every text-on-image instance pairs with a directional black-to-transparent scrim, so the image stays partially visible rather than sitting behind a flat box.
Caption text sits here
Depth
Blur at two scales
20px for modal/sheet scrims, 100px for large ambient cover-style backdrops — drag to compare.
Architecture
Three layers, one direction of authorship
1. Foundation
--fds-* --web-always-*Shared Meta-wide infrastructure. Not Instagram-specific.
2. Semantic
--ig-*Instagram's own naming of roles on top of the foundation. Write new code against this layer.
3. Compiled atomic
._a8y9 ._x8exfn3Auto-generated build output. Never hand-author.
Usage
Do / Don't
Do
- Apply the brand gradient as a whole-surface treatment — backgrounds, large text-fills.
- Use rgb(var(--ig-token)) / rgba(var(--ig-token), alpha), never a hard-coded hex, for anything theme-adaptive.
- Pair text over photography with a directional scrim gradient.
Don’t
- Use the gradient as a small UI accent (button fill, icon tint) — it's a whole-surface treatment only.
- Assume every multi-value custom property is comma-separated — some highlight-background tokens use space-separated triplets.
- Invent a sixth gradient stop or a new angle for a one-off brand moment.