Instagram Brand Manual

Resources

Platform Guidance

How to apply this system beyond instagram.com — to native mobile, dashboards, developer products, and games. Every platform shares the same token base; the extensions are additive, never breaking.

Principle

One token base, five deployment targets

The --ig-* semantic tokens, spacing scale, radius scale, motion curves, and typography system are the shared foundation. Platform guidance tells you what to use as-is, what to adapt, and what new tokens to add for each context.

Web App

Ready · 90%

The system was built from web evidence — every token, radius, shadow, and motion value is directly applicable.

Use as-is

  • Use the full token set as-is.
  • Spacing, elevation, typography, and colour require zero adaptation.
  • Add breakpoint overrides for viewports outside Instagram's documented 375–1440px range.

Skip or replace

  • The fluid grid (--ig-grid-unit in vw) should be converted to a fixed-max-width grid for product UIs that don't need full-bleed storytelling.

Native Mobile

Adapt · 65%

Tokens map directly; interaction model and navigation grammar need platform-specific translation.

Use as-is

  • --space-* maps directly to native dp/pt units (8dp = --space-2, 16dp = --space-4).
  • Colour tokens (--ig-primary-background, --ig-primary-text etc.) map to native semantic colour roles.
  • Motion: Ease Settle (~spring) maps to iOS UISpringTimingParameters; Ease Confident maps to Android Emphasized Decelerate.
  • Border radii: --radius-lg (12pt) is native card radius; --radius-pill is native pill.

Skip or replace

  • Do not port the CSS flex/grid layout — use UIStackView (iOS) or ConstraintLayout (Android).
  • Replace web focus rings with native accessibility focus indicators.
  • Navigation: replace Sidebars and Tab Bars with UITabBarController / BottomNavigationView.

Dashboard

Extend · 45%

Instagram's system is content-first and spacious. Dashboards are data-first and dense. Several extensions are needed.

Use as-is

  • Typography: system-12 and system-14 become primary display sizes (Instagram uses them for captions — dashboards use them for body).
  • --ig-secondary-text is the dominant label colour for dense data.
  • Colour: --ig-success / --ig-error / --ig-primary-button are valid for KPI delta states.
  • Charts: the Charts page documents the colour system and gradient tokens — apply directly.

Skip or replace

  • Do not use the brand gradient in data-encoding contexts — the five gradient stops are visual, not semantic.
  • Avoid --space-9/10 (64–96px) for row heights — dashboard rows live at --space-6/7 (32–40px).

Extend with

  • Add a --density-compact mode that halves --space-4 and --space-5 for table rows and sidebar nav.
  • Add data-table-specific tokens: row-height, header-height, cell-padding, sticky-column-background.
  • Monospace type: --font-mono is defined. Add a --system-mono-12 and --system-mono-14 scale entry.

Developer Product

Extend · 50%

API docs, SDKs, and developer tools share the visual aesthetic. Syntax-highlighting tokens now exist — this manual's own CodeBlock component uses them — but terminal and API-status colours are still prose recommendations to extend.

Use as-is

  • --font-mono is already defined — use it for all code samples, terminal output, and variable names.
  • --code-keyword/--code-string/--code-comment/--code-number/--code-type are real, implemented tokens — see this manual's own code samples for a working reference, or /tokens to inspect the values.
  • --ig-error / --ig-success / --ig-primary-button map directly to terminal stderr / stdout / interactive prompt colours.

Skip or replace

  • Do not use Instagram Sans for code samples — monospace only.
  • Do not use the brand gradient in syntax highlighting — reserve it for UI chrome only.

Extend with

  • Add terminal-prompt colours: --terminal-bg (dark-scope --ig-primary-background, 12, 16, 20), --terminal-prompt (--ig-stop-magenta), --terminal-output (--ig-primary-text).
  • Add API status colour tokens: --status-2xx (--ig-success), --status-4xx (--ig-error), --status-5xx (deep red), --status-3xx (--ig-stop-orange).

Game / Real-time UI

Extend · 45%

The Instagram system provides the aesthetic vocabulary — gradient, radius, type weight, motion curves. HUD tokens (--hud-*, --bar-*, --feedback-duration-*) are now real and implemented — see HUD Elements for a live health/XP bar — though broader real-time composition patterns beyond that are still prose recommendations.

Use as-is

  • --hud-z-index/--hud-bg/--hud-text and --bar-*/--feedback-duration-* are real, implemented tokens — see HUD Elements for a working health bar, XP bar, and score badge, or /tokens to inspect the values.
  • Brand gradient: --ig-gradient-hero works for score overlays, achievement banners, and progress fills.
  • Motion: --ease-confident (0.7,0,0.3,1) maps to game UI snap/settle; --ease-settle (spring-like) maps to reward animations.
  • Colour: --ig-success for positive feedback, --ig-error for damage.

Skip or replace

  • Do not use Instagram's navigation components (Sidebars, Tab Bars) — HUDs use overlay layers, not navigational grids.

Extend with

  • Add a radial vignette pattern behind HUD elements using --ig-shadow-rgb at high alpha, for legibility over bright game content.
  • Add inventory/loadout grid patterns — beyond bars and badges, most games need item-slot grids, which this system has no precedent for at all.

Token portability

How tokens translate across runtimes

CSS → iOS (Swift) — token mapping example
// CSS token            iOS equivalent
// --space-4: 16px  →  spacing: 16 (CGFloat)
// --radius-lg       →  cornerRadius: 12
// --ig-primary-background   →  UIColor(dynamicProvider: ...)
// --ease-settle     →  UISpringTimingParameters(mass:1,stiffness:300,damping:28)
// --duration-micro  →  UIViewPropertyAnimator(duration: 0.15, ...)
CSS → Android (Kotlin) — token mapping example
// CSS token              Android equivalent
// --space-4: 16px    →  16.dp
// --radius-lg         →  ShapeDefaults.Medium (12.dp corners)
// --ig-primary-background     →  MaterialTheme.colorScheme.background
// --ease-confident    →  EmphasizedDecelerateEasing
// --duration-reveal   →  666  // milliseconds

Density modes

Adapting spacing for dense UIs

Dashboards and developer products need a compact mode. The base system is comfortable at --space-4 (16px) body padding; dense UIs drop to --space-3 (12px) or even --space-2 (8px) for table rows. The cleanest approach is a single CSS class that overrides the spacing tokens:

Compact density override
[data-density="compact"] {
  /* Row and list spacing tightened */
  --space-4: 12px;   /* was 16px */
  --space-5: 16px;   /* was 24px */
  --space-6: 24px;   /* was 32px */

  /* Typography tightened one step down */
  --system-14-font-size: 12px;
  --system-16-font-size: 14px;
}

/* Usage: <div data-density="compact"> wraps a table or sidebar nav */