Skip to main content

Design system showcase design

Reader​

A designer or engineer choosing an existing Dreamineering atom, molecule, organism, or page template before building a new one.

Primary job​

Scan the system by Brad Frost tier, inspect representative states, and open a real template when context determines whether the pattern works.

Design system container​

This area is a lesson about assembly. A live route is the composition: the reader is inside the page, and components do not need a boundary drawn around them. Here the catalogue chrome and the thing being taught are different objects. Without a stage, a specimen inherits the page and you cannot see where the component or template starts.

Each specimen uses DesignSystemContainer. Three layers stay visually separate, the way shadcn sidebar blocks separate the viewer from the block:

  1. Showcase chrome sits outside the demo: the component name, Desktop / Tablet / Mobile width, and nothing that looks like the component being shown.
  2. The container is the bordered viewport. Its dotted ground is empty stage, not part of the component. Narrower widths leave that ground visible around the demo so the component's edge is obvious.
  3. The demo is only the children inside that viewport. A full-bleed region or template page fills the viewport at desktop and sits inside the dotted ground when the width is narrower.
  4. Intent and links to real pages sit under the viewport. That copy is catalogue, not part of the component.

Composition thesis​

Hub at /design-system uses category cards for Atoms | Molecules | Organisms | Templates. Detail routes under /design-system/atoms|molecules|organisms/ and /design-system/templates/. External catalogues inform spacing and scan paths only — not Dreamineering identity.

Protected authority​

The showcase demonstrates implemented states and known consumers. It does not claim general reusability without contract and rendered evidence.

Observable proof​

  • Tier cards are legible within five seconds at 320, 768, and 1440px.
  • Template directory lists only real page shells; page types are named separately.
  • Specimens do not create page-level horizontal overflow.
  • Each specimen name and its width controls sit outside a framed viewport. The dotted ground is the container. The demo is only what is inside that viewport. Intent and a live-page link sit under it.