Instagram Brand Manual

Foundations

Empty States

Every list, grid, and feed surface needs a defined empty state — a centered icon, a short headline naming what's missing, one supporting sentence, and (sometimes) a single clear action. Instagram never leaves a surface visually blank.

Anatomy

Four parts, rarely more

An empty state is not an error page and not an illustration showcase. It's a minimal, calm explanation of why a surface is empty, written from the system's existing voice (see Voice & Writing).

1

Icon or illustration

A single outline-style glyph, 48–64px, often inside a soft circular badge using --ig-secondary-background. Never a full illustration — Instagram's empty states are minimal, not decorative.

2

Headline

1 short line, sentence case, --fw-semibold. States what's missing, not an apology ('No posts yet' not 'Oops, nothing here').

3

Supporting text

1 sentence, --ig-secondary-text, system-14. Explains what will appear here and why, written in second person.

4

Optional CTA

A single button or text link — only when there's a clear, single next action. Many empty states are CTA-less by design (no comments yet, no notifications).

No posts yet

When you share photos and videos, they'll appear here.

Catalog

Confirmed empty states across the product

Ten empty states drawn from the surfaces this manual already documents. Use these headline/body pairs verbatim where the surface matches, or as a calibration reference for new surfaces.

No posts yet (own profile)

Profile grid — viewing your own profile

“No posts yet”

When you share photos and videos, they'll appear here.

CTA:Share your first photoCamera or grid outline glyph

No posts yet (other profile)

Profile grid — viewing someone else's profile

“No posts yet”

When they share photos and videos, you'll see them here.

CTA:None — read-only stateCamera or grid outline glyph

Empty feed (new account)

Home feed — account follows nobody

“Welcome to Instagram”

Follow people to see their photos and videos in your feed.

CTA:Find people to followApp icon or stylised welcome illustration

No search results

Search — query with zero matches

“No results found”

Try searching for something else.

CTA:None — text onlyMagnifying glass outline glyph

No notifications

Activity feed

“Activity On Your Posts”

When people like or comment on your posts, you'll see it here.

CTA:None — text onlyHeart outline glyph

No messages

Inbox — first-time DM user

“Your Messages”

Send private photos and messages to a friend or group.

CTA:Send messagePaper plane outline glyph, often with circular badge background

No saved posts

Saved collection — default collection empty

“Save”

Save photos and videos that you want to see again. No one is notified, and only you can see what you've saved.

CTA:None — text onlyBookmark outline glyph

No comments yet

Comments sheet on a fresh post

“No comments yet.”

Start the conversation.

CTA:None — input field is the implicit CTANo icon — comment composer is visible directly below

Empty Explore (rare — new/restricted account)

Explore grid

“We'll be back soon”

Check back later — we're working on bringing you personalised content.

CTA:None — text onlyCompass or sparkle outline glyph

Offline / no connection

Any feed-driven surface, network unreachable

“No Internet Connection”

Check your connection and try again.

CTA:Try AgainCloud-with-slash or signal outline glyph

Implementation

Layout pattern

Empty states are vertically centered within their container, with generous padding so the composition doesn't feel cramped against a mostly-empty surface.

Empty state container — CSS
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-9) var(--space-4);
  min-height: 320px;
}

.empty-state__badge {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: rgb(var(--ig-secondary-background));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--ig-secondary-icon));
}

.empty-state__headline {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: rgb(var(--ig-primary-text));
}

.empty-state__body {
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--ig-secondary-text));
  max-width: 280px;
}

.empty-state__cta {
  margin-top: var(--space-2);
}

Do

  • Name what's missing — 'No posts yet' tells the user what the surface is for. Generic copy like 'Nothing here' doesn't.
  • Keep the icon outline-style and small — 48–64px outline glyph, optionally in a soft circular badge. Never a large illustration — that's heavier than the system's restrained visual language.
  • Match CTA presence to actionability — Only add a button when there's one clear next step (share a photo, send a message). If the state requires someone else's action (no notifications yet), skip the CTA.
  • Reuse the Voice & Writing tone rules — Empty state copy sits at the 'warm, inviting' personality level — see the Tone scale on the Voice & Writing page.

Don’t

  • Don't apologize — 'Oops, nothing here!' undercuts the calm, direct Instagram voice. State the fact, then help.
  • Don't leave a surface blank with zero copy — Every list, grid, or feed needs a defined empty state — a blank white/black rectangle is never acceptable.
  • Don't skeleton an empty surface — Skeletons are for loading; once you know the result set is genuinely empty, show the empty state immediately. See Loading & Skeletons.
  • Don't combine multiple CTAs — One action maximum. If there are two plausible next steps, pick the more common one and drop the other.