Layout And Organization

Boxes

The structural container every surface composes from — a 1px-bordered, token-filled region with no decorative chrome of its own.

Partially evidencedLayout And Organization

Findings

What's actually in /ig

Containers in /ig are composed as one-off rules reaching for --ig-separator, --ig-secondary-background, or --ig-stroke directly.
The pattern is consistent even without a shared class: 1px border in --ig-separator, background in --ig-secondary-background or --ig-elevated-background, radius from the documented scale.

Rationale

Why this component exists

Instagram's surfaces separate content with a hairline border and a tonal background shift, not elevation. A Box is the canonical container that pattern resolves to once it's named: it carries no shadow by default, because shadow in this system is reserved for true overlays (modals, popovers) that sit above the page, not for in-flow grouping.

Usage

When to use it

Use when

Grouping related content within a surface — a settings group, a card body, a stat block — where the goal is visual separation, not elevation.

Avoid when

The content is a temporary overlay above the page (use Modals & Panels or Popovers) or a single row in a list (use the row anatomy on Lists And Tables instead of nesting a Box per row).

Anatomy

01
Container
02
Border (--ig-separator)
03
Fill (--ig-secondary-background or --ig-elevated-background)

Specification

Spacing, colour, type, and motion

Padding: 16px (4× base unit) — 24px for editorial/wide contexts
Border: 1px solid rgb(var(--ig-separator))
Fill: rgb(var(--ig-secondary-background)) or rgb(var(--ig-elevated-background))
Radius: 8px or 12px from the shared radius scale — see Shape
Elevation: None by default — border substitutes for shadow

States

Interaction states for Boxes
State	Behaviour
Default	Resting structural container: 1px separator border, token fill, no overlay, and no elevation.
Hover	Only for a Box promoted to a single interactive target, add rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)); passive grouping Boxes do not change on hover.
Pressed/Active	Interactive Boxes use an overlay slightly deeper than hover overlay while pressed; structural Boxes remain unchanged.
Focused	Focusable Boxes use a 2px var(--ig-stop-magenta) outline with a --radius-xs offset around the container.
Disabled	Disabled interactive Boxes have opacity reduced and pointer-events none; passive grouping Boxes are not disabled.

Examples

Real interface compositions

Settings

Account privacy setting group

Private account, Activity status, and Close Friends rows sit inside one bordered tonal container so the group reads as a related set without floating above the page like a modal.

16px padding, 1px --ig-separator, --ig-secondary-background, 8/12px radius

Guidance

Usage guidance

Compose containers per-component from the same handful of tokens rather than giving Box a decorative identity of its own.
A shared Box primitive should source its border/fill from --ig-separator and --ig-secondary-background so it matches every existing container without a new token.

Accessibility

A Box is a grouping container, not an interactive element — it carries no role unless its content requires one (e.g. role="group" with an aria-label when it groups form controls).
Border contrast against the page background must clear the same threshold documented on Accessibility — verify --ig-separator against --ig-primary-background in both themes before shipping a new tonal pairing.

Do / Don't

Do

Compose new containers from --ig-separator + --ig-secondary-background/--ig-elevated-background + the documented radius scale.

Don’t

Add a drop shadow by default — most /ig containers use a 1px border, not elevation, for separation.

Code

Evidence-backed CSS

Boxes — derived from /ig

.box {
  padding: 16px;
  border: 1px solid rgb(var(--ig-separator));
  background: rgb(var(--ig-secondary-background));
  border-radius: 12px;
}