Foundation

Layout & spacing

Use one identity at two deliberate rhythms: spacious and asymmetric for Visual expression; compact and stable for Product.

01 / The decision

Structure makes relationships visible

Shared edges identify related work. Deliberate gaps separate different jobs. Density changes by context, but alignment, reading order, and usable targets do not.

Align related things

Content with a shared job uses shared columns, edges, and baselines.

Separate different jobs

Spacing and rules create boundaries before containers or decoration do.

Keep one identity

Visual expression and Product use different rhythms, not different design systems.

02 / See it in use

Two rhythms, one system

The editorial specimen uses scale and negative space to make one operating idea memorable. The Product specimen uses stable navigation and governed density to help a builder act.

Visual expression · spacious

Build the experience. Keep operations connected.

One dominant message, one system relationship, and enough negative space to make both legible.

Product expression · compact

Operations

Overview

Catalog sync Operational

Order routing Operational

Event delivery Operational · example

Illustrative states. Stable navigation, task-led controls, and 36px data rows.

03 / How it works

Every region has a job

The documentation shell demonstrates the same layout contract it describes. Visual callouts and the equivalent ordered list carry the same information.

Foundation

Structure carries meaning before decoration.

Shared edges identify related work. Deliberate gaps separate decisions. The content stays readable as the field changes size.

1
Viewport
The available browser area; the page never assumes a fixed canvas.
2
Margin
Responsive breathing room between the viewport and the content field.
3
Rail
Persistent section navigation at large sizes; a disclosure at smaller sizes.
4
Content field
The primary reading and specimen region.
5
Gutter
Space that separates columns without breaking their shared alignment.
6
On this page
A secondary orientation aid, never the main reading path.
7
Reading measure
Body copy stays narrow enough to scan and comprehend.

04 / Use / Avoid

Choose space by purpose

Start with the relationship you need to communicate, then select the smallest governed interval that makes it clear.

Inline

space.1–2

Separate an icon, label, badge, or compact pair.

Control

space.2–3

Create internal control padding and short action groups.

Component

space.3–5

Organize fields, rows, cards, and related content.

Section

space.6–8

Separate distinct jobs within a page or workflow.

Editorial

space.8–10

Give a dominant idea and system object room to lead.

Use visible alignment

Let a shared field, a border, or a consistent inset explain how objects belong together.

Avoid container inflation

Do not wrap every sentence, metric, or action in a card. Containers must express a real boundary.

Use governed density

Keep compact visible controls inside a usable target, and let data rows remain scannable.

Avoid compression failures

Do not break alignment, shrink targets, or create page-level horizontal overflow to preserve a desktop arrangement.

Product density in a real task

Visible size and interactive target size are governed separately. The table is the only horizontally scrollable region; the page remains stable.

Connection health

Illustrative operational data

Service	Status	Updated
Catalog	Operational	12:40
Orders	Operational	12:40
Events	Operational	12:40

28px sidebar32px control36px row44px target

Restrained radii in use

Shape clarifies containment. Product controls use 4px or 6px; panels stop at 10px.

Control · 4px

Input · 6px

Endpoint

Component · 6px

Event delivery

Bounded, compact content.

Panel · 10px

Review panel

The largest Product radius.

05 / Adaptation

Reflow before reduction

At smaller widths, remove secondary regions and stack tasks in logical order before reducing type, controls, or targets.

Desktop · 1440

Rail and multi-column comparison stay visible.

Tablet · 768

Secondary regions simplify before controls shrink.

Mobile · 320–390

One reading column preserves task order and targets.

Preserve task order

Keep the primary action near its object and let the source order remain understandable without columns.

Preserve minimums

At 390px and 320px, Product content stays 14px, compact controls stay 32px, and touch targets stay at least 44px.

06 / Technical reference

Tokens and exact values

Implementation values are secondary to the examples above. Open the references when building or auditing a layout.

Spacing scale10 public intervals · 4px to 128px

space.1

--od-space-1

0.25rem

space.2

--od-space-2

0.5rem

space.3

--od-space-3

0.75rem

space.4

--od-space-4

1rem

space.5

--od-space-5

1.5rem

space.6

--od-space-6

2rem

space.7

--od-space-7

3rem

space.8

--od-space-8

4rem

space.9

--od-space-9

6rem

space.10

--od-space-10

8rem

Product densitySidebar, controls, rows, targets, and icons

component.density.sidebarItemHeight

--od-sidebar-item-height

28px

component.density.compactControlHeight

--od-control-height

32px

component.density.tableRowHeight

--od-table-row-height

36px

component.density.touchTargetMinimum

--od-touch-target-minimum

44px

component.density.iconSize

--od-icon-size

16px

RadiiControl, component, panel, and round

radius.control

--od-radius-control

4px

radius.component

--od-radius-component

6px

radius.panel

--od-radius-panel

10px

radius.round

--od-radius-round

999px

Responsive field contractViewport, margin, columns, and behavior

Viewport	Margin	Field	Behavior
< 640px	20px	4 columns	One reading column; stack before reducing targets.
640–1023px	32px	8 columns	Use two regions only when comparison improves the task.
≥ 1024px	48px	12 columns	Use the full field; cap documentation at 1600px.