One system, eight layouts

Static wireframes built from the same tokens. Each shows one dominant region, one accent element per region, a single active-region rule, edges between compartments, and the grid motif only where it carries meaning. All names and data are fictional.

Data & records
Editor & IDE
Media & creative
Monitoring & analytics
Utility & wizard
Communication
CAD & 3D
Settings & system tools

Data & records

Dominant: table (≈65%). Rows Compact, forms Comfortable. Accent: Run export.

Orders248 recordsExport…

Records

IDCustomerStatusTotal

A-1042NorthwindShipped$1,280

A-1041ContosoPending$640

A-1040FabrikamShipped$2,115

A-1039AdatumFailed$90

A-1038LitwareShipped$415

Details

Order: A-1042
Customer: Northwind
Placed: 2026-11-02

Open record

Filter: all statuses · Sorted by ID · 5 of 248 shown

Editor & IDE

Dominant: editor (≈55%). Everything Compact. Accent: Run. Code colors are not the brand accent.

Code EditorRun F5Build

Explorer

src
main.rs
lib.rs
Cargo.toml

main.rs

fn main() -> Result<()> {
    let name = read_line()?;
    println!("Hello, {name}");
    Ok(())
}

Symbols

main()
read_line()

Terminal

> cargo build
Finished in 0.62s · 0 warnings

main · Ln 3, Col 14 · UTF-8 · Build succeeded

Media & creative

Dominant: canvas (≈70%). Chrome recedes. Toolbars Compact, properties Comfortable. Grid shows as the empty canvas.

StudioUndoRender

Tools

Move
Crop
Text
Mask

Canvas

Drop media hereOr use Import. Supported formats are listed in Help.

Properties

Opacity: 100%
Blend: Normal

Timeline

1920×1080 · 24 fps · Zoom 100%

Monitoring & analytics

Dominant: one metric or chart per view. A table alternative is required for every chart. Accent: the single alert action.

Fleet healthLast 24 hAcknowledge alert

Error rate

0.42%

Down from 0.61% yesterday

Nodes

eu-1 Healthy
us-2 Degraded
ap-1 Healthy

Events

TimeNodeEvent

14:21us-2Latency above limit

14:02eu-1Deploy completed

Refreshed 14:26 · Data table view available

Utility & wizard

Dominant: the current step. Everything Comfortable. No scrollbars. Accent: the step's one action.

Disk Tool

Choose source
Review
Write

Review changes

12 files will be copied to Drive E:. Nothing is changed until you continue.

Ready · 0 of 12 files

BackStart copy

Estimated 2 min · You can cancel at any time

Communication

Deliberately asymmetric: narrow list, wide conversation, optional detail. Rows Compact. Accent: Send.

MessagesNew

Conversations

Avery
Morgan
Jules

Avery

Handoff files are ready for review.

Thanks. Checking now.

Write a messageSend

Details

Role: Design

Connected · 3 unread

CAD & 3D

Dominant: viewport (≈70%). The viewport may use depth cues and perspective. Chrome stays flat. Accent: Commit.

ModelSketchCommit

Features

Base plate
Extrude 1
Fillet 1

Viewport

Properties

Depth: 12 mm
Direction: Normal

> extrude 12 · Units mm · Snap on

Settings & system tools

Dominant: the form. Section navigation at left, staged Apply/Cancel at the foot. Forms Comfortable. Accent: Apply.

Settings

Sections

Appearance
Layout
Shortcuts
Privacy

Appearance

ThemeSystemAccentCarmineDensityPer component

CancelApply

Changes stay staged until Apply