Windows

A window presents UI views and components in your app or game. On the web this is a presentational shell for demos, screenshots, and app-like layouts. It does not drag or resize.

Preview

Anatomy

Two window styles share one structure, and both are geometry variants, not states. The document window uses a 16px radius with a continuous corner and the system window shadow, 0 18px 54px at 30% plus a blurred 1px hairline at 80% that keeps the edge defined on any background. In browsers with corner-shape support (Chromium 139 and later) the corner draws as a true squircle, superellipse(1.465) over a 21px span, which matches the native 16px curve. Other browsers fall back to the plain 16px arc. The utility panel (.p-window-compact, for inspectors and panels) keeps a plain 15px radius and a lighter 0 5px 20px shadow at 30%.

Focus is a separate axis. .p-window-inactive applies to either style: the shadow shortens to 0 7px 21px at 20%, the lights and title gray out, toolbar glass flattens, and the sidebar lightens and grays its icons.

Titlebar

The title leads. With no toolbar it sits 24px after the zoom light in a 32px band, lights 8px in. It is 13px bold at 85% ink, and an optional proxy icon (.p-window-title-icon) sits 4px before it at the same ink. Wrap the title in .p-window-titles to add a subtitle line: 11px at weight 510 in #999999, for state such as “Edited”.

The band is a scroll-edge material rather than an opaque strip: white at 85% over a light blur (#1F1F1F at 55% in dark mode), closed by a 0.67px hairline at rgba(0, 0, 0, 0.05).

A toolbar is a set of glass groups from toolbars, placed 8px from the band edges and 8px apart. There are three layouts:

• Unified, regular (.p-window-titlebar-unified). A 52px band with lights 18px in. The first group sits 16px after the zoom light and the title 8px after that group.
• Unified, small (add .p-window-titlebar-small). The same layout with 24px groups, in a 40px band.
• Two rows. A 32px title row, then .p-window-toolbar with 36px groups, for a 75px band.

To hide the title, leave it out; the groups keep their places.

The utility panel centers its title and keeps an icon strip: 44×30px slots on a 44px pitch, with the selected slot drawn as a radius-9 glass pill. The band is 65px, closed by a 1px rule at rgba(60, 60, 67, 0.12). The macOS 26 flat strip (44×29px, radius 6px, selected slot filled at 3%) is still available: add .p-window-toolbar-flat to the toolbar row.

Traffic lights

Three 14px lights on a 23px pitch: close #FF5C60, minimize #FAC800, zoom #35C759. The utility panel uses 10px lights on a 17px pitch, 12px from the left and 11px from the top. Each light carries a 0.5px ring that is black at 45% in overlay blend. It darkens each light in its own hue (the close edge reads about #FF484B). CSS can’t blend a box shadow, so the ring colors are precomputed: --p-traffic-close-ring, --p-traffic-min-ring and --p-traffic-zoom-ring. The lights are real buttons, so label them (aria-label="Close") even in demos so screen readers get a name.

When the window is inactive, all three lights turn rgba(0, 0, 0, 0.15), or rgba(255, 255, 255, 0.17) in dark mode, and the title drops to 50%.

Sidebar windows

For a sidebar window, add .p-window-split to the window and put a full-height sidebar first. The lights move into the sidebar’s header zone, at 19px from the top and left. An optional 36px round glass toggle sits 8px from the sidebar’s top and trailing edges. The main column (.p-window-main) holds its own titlebar, with the title 18px from the sidebar edge.

<div class="p-window p-window-split">
  <nav class="p-sidebar p-sidebar-small" aria-label="Locations">
    <div class="p-sidebar-titlebar">
      <div class="p-traffic-lights">…</div>
      <button class="p-toolbar-circle p-sidebar-toggle" aria-label="Hide sidebar">
        <i class="ph-bold ph-sidebar-simple"></i>
      </button>
    </div>
    <div class="p-sidebar-row p-selected">…</div>
  </nav>
  <div class="p-window-main">
    <div class="p-window-titlebar p-window-titlebar-unified">
      <div class="p-window-titlebar-row"><span class="p-window-title">Recents</span></div>
    </div>
    <div class="p-window-content">…</div>
  </div>
</div>

Group boxes

A group box visually groups related content inside a window. .p-box is a radius-12 rectangle with a very faint fill: black at 1.5% (it reads as #FBFBFB on white), or white at 1.5% in dark mode. It has no border, shadow or title. If the group needs a label, put a .p-box-title above it (11px at weight 590, 50% ink). The fill almost disappears off pure white or #1E1E1E, so with prefers-contrast: more it rises to 5% and gains a 1px ring. boxes.css ships in both bundles.

Dark mode

The surface becomes #1E1E1E, with a 1px inner rim of white at 20% on the window edge. The window shadow deepens to 57% (35% inactive). The band hairline becomes 10% white, and the title and proxy icon go to 85% white. Light colors do not change. Both .p-dark-mode and .p-auto-dark-mode are supported.

Code

<div class="p-window" style="width: 480px; height: 320px;">
  <div class="p-window-titlebar">
    <div class="p-window-titlebar-row">
      <div class="p-traffic-lights">
        <button class="p-traffic-light p-traffic-light-close" aria-label="Close"></button>
        <button class="p-traffic-light p-traffic-light-min" aria-label="Minimize"></button>
        <button class="p-traffic-light p-traffic-light-zoom" aria-label="Zoom"></button>
      </div>
      <div class="p-window-titles">
        <span class="p-window-title">Project</span>
        <span class="p-window-subtitle">Edited</span>
      </div>
    </div>
  </div>
  <div class="p-window-content">
    <!-- app content -->
  </div>
</div>

The window makes itself a backdrop root, so its band and glass only ever blur the window’s own content. With prefers-reduced-transparency the band turns opaque. Traffic lights show a 2px #64BAFF focus ring, and toolbar buttons show the standard ring, 3px rgb(0 122 255 / 50%).