Shell Design Language

When designing a web application, you quickly find yourself needing to talk about structural decisions that existing vocabularies don't cover cleanly. Is the sidebar a component? Is the header? What happens to the layout when a panel opens? How does the sidebar relate to the header at the corners?

SDL is a formal language for answering these questions precisely. It defines region types (what exists), region behaviours (how each region acts), anchor zones (internal structure within regions), and named compositions (common patterns built from regions).

An SDL description gives designers, developers, and product teams a shared reference that is precise enough to implement from, without specifying visual design or technology.

SDL description · Claude Desktop

Workspace + Controller.
Chrome Span: Top full-span, Leading inset.

Top Anchor: header, fixed, full-span.
  Sidebar toggle → A→A controller
  Tab bar → Viewport controller

Leading Anchor: sidebar, collapsible,
  breakpoint: Lift.
  Header · Body (owned scroll) · Footer

Main Viewport: Staged, 3 stages.

Trailing Panel: content-initiated,
  compresses Viewport on Inject.

A complete structural description in under 15 lines.

Visual Reference

Diagrams for every concept

Dark theme

SDL Visual Reference

19 annotated diagrams covering every region type, behaviour, named composition, and transition. Includes worked examples for Claude Desktop, Figma, and VS Code.

Open reference →

Light theme

SDL Visual Reference

The same reference in a light theme suitable for printing, sharing in documents, or reading in bright environments.

Open reference →

Key concepts

What SDL covers

Region Types

Chrome, Anchor, Viewport, Panel, Modal Overlay, Anchored Overlay — the five structural elements every shell is built from.

Anchor Span

Whether an Anchor is full-span or inset relative to perpendicular Anchors. Determines the root CSS Grid structure of the Chrome.

Viewport Modes

Linear, Staged, Routed, and Spatial — four fundamentally different ways a Viewport can be navigated.

Controller Relationships

How Anchors drive Viewports, how Anchors drive other Anchors (the sidebar toggle pattern), and bidirectional relationships in Canvas applications.

Panel Groups

Exclusive, Additive, and Tabbed Panel Policies for shells with multiple simultaneous Panels. Corner Ownership resolves perpendicular Panel Groups.

Spatial Viewports

Navigation models, object models, selection models, and the Minimap Viewport Fixture for Canvas applications like Figma and Miro.

Anchor Zones

The Header, Body, and Footer zones within an Anchor — each with different persistence and scroll behaviour.

Named Compositions

Workspace, Master-Detail, Canvas, Dashboard, Staged, and Command — six structural patterns that cover the majority of web applications.

Transitions

Collapse, Lift, Swap, Split, Merge, Inject, Eject, Lift Overlay, Dismiss Overlay — the vocabulary for how shells change over time.

Repository

Specification and contributing

Read the specification Browse examples Contributing guide Changelog Propose a concept