Presentation
Windows
A fixed, non-resizable task surface — Instagram's equivalent of a window is the legacy modal box, deliberately without resize or minimize chrome.
Findings
What's actually in /ig
- Window-like task surfaces resolve to the legacy ._t/._1yv modal box (background:#fff, box-shadow:0 2px 26px rgba(0,0,0,.3)) rather than title bars, resize handles, or minimize/maximize chrome.
Rationale
Why this component exists
A single-surface product has no use for independent, resizable windows, and the system never builds the chrome for one — every task surface found is fixed-size and dismissed as a unit, not resized or minimized. Where a 'document' needs its own space, Instagram reaches for the legacy modal box rather than a window primitive.
Usage
When to use it
Use when
Migrating a desktop-pattern integration where a self-contained task surface is unavoidable.
Avoid when
Almost always — prefer Modals & Panels or Sheets, which carry real evidence and the system's actual visual language.
Anatomy
Anatomy
- 01
Fixed surface (no title bar)
- 02
Content
- 03
Single dismiss control
Specification
Spacing, colour, type, and motion
- Shadow
- 0 2px 26px rgba(0,0,0,.3) — confirmed legacy modal box value, same as --shadow-elevated
- Background
- #fff (background: #fff from ._t/._1yv selector)
- Corner radius
- var(--radius-lg) 12px
States
States
| State | Behaviour |
|---|---|
| Default | Fixed surface at rest — no visible chrome beyond the content box, border-radius, and the documented legacy shadow. |
| Loading | Content renders its own loading state within the fixed surface; the surface itself does not animate. |
| Dismissing | Surface fades or scales out via the same motion as Modals (Ease Settle, ~300ms); no minimize or hide-to-taskbar affordance. |
Examples
Real interface compositions
Desktop messaging
DM thread panel
A centered messaging panel sits over the page using modal tokens; it reads as a constrained Instagram surface, not as an operating-system window with titlebar chrome.
modal radius, backdrop tokens, no native window chrome, focused overlay surface
Guidance
Usage guidance
- Don't model this as a resizable, independent OS window. If a document-like surface is needed, the legacy modal box is the Instagram precedent.
Do / Don't
Do / Don't
Do
- Use the legacy modal box's shadow (0 2px 26px rgba(0,0,0,.3)) and rounded corners if a document-like surface is unavoidable.
Don’t
- Add resize handles, a title bar, or minimize/maximize controls — they belong to OS window chrome, not Instagram surfaces.
See also