Design system · Component review 07

Demo comparison

The original Guide arranges related examples in a spacious responsive grid. The approved shared comparison preserves that calm rhythm and keeps specimens readable before it asks them to sit side by side.

Approved direction: DemoComparison uses wider reading columns and a larger gap. It adds no frame, padding, labels, child wrappers or paint that could change the CSS lesson.

Two elevation specimens

The same shadow-sm and shadow-lg cards appear in each treatment. Resize the page to see when the pair stacks.

01

Original Guide

Local shadow-scale grid

shadow-sm
Standard surface

Cards, reusable panels, and quiet product surfaces.

shadow-lg
Detached overlay

Dropdowns, popovers, toasts, and menus.

The Guide controls its own responsive columns and generous gap.

02

Previous

Earlier shared DemoComparison

shadow-sm
Standard surface

Cards, reusable panels, and quiet product surfaces.

shadow-lg
Detached overlay

Dropdowns, popovers, toasts, and menus.

The earlier auto-fit grid uses a 14rem minimum and the medium gap.

03

Adopted

Shared DemoComparison

shadow-sm
Standard surface

Cards, reusable panels, and quiet product surfaces.

shadow-lg
Detached overlay

Dropdowns, popovers, toasts, and menus.

A 17rem reading minimum and larger gap keep both specimens clear before stacking.

Actual Guide use

The elevation guide keeps its original six-card shadow scale.

Open /guide/elevation
shadow-xs
Quiet separation

Small controls, table rows, and subtle raised states.

shadow-sm
Standard surface

Cards, reusable panels, and quiet product surfaces.

shadow-md
Temporary lift

Hover lift, floating toolbars, and command surfaces.

shadow-lg
Detached overlay

Dropdowns, popovers, toasts, and menus.

shadow-xl
Workflow interruption

Drawers, dialogs, and focused panels.

shadow-2xl
Blocking layer

Modals and spotlight surfaces above a dimmed page.

The shared layout is available for future comparisons. The existing Guide grid remains intact.