Layout and density

Guide index · Shape · Terminal

Units and spacing

Graphical dimensions are logical pixels. On the web these correspond to CSS px at default scaling; native implementations use density-independent layout units and scalable text, not physical display pixels. The terminal uses columns and rows independently; never divide pixel values by a guessed character size.

Use the 4px rhythm for layout. Strokes, corner cuts, typography and focus offsets have their own explicit values; they are not rounded to the spacing scale.

space.1  · ·
space.2  · ··
space.3  · ···
space.4  · ····
space.5  · ·····
space.6  · ······
space.8  · ········
space.12 · ············
(blank cells, not px ÷ char width)

Density

Related gaps remain 8px and component insets remain 16px across densities; touch uses the shared spacing scale. Icon actions (including search Clear) and menu commands follow the same active density minimum as buttons. Standard is the default. Density is set explicitly for a workspace, not inferred from window width. Compact is for deliberate keyboard/mouse use, not a workaround for overflowing content. Preserve the type scale; a wrapped label or larger text setting expands the control beyond its minimum. Touch-capable experiences use touch targets even when the drawn glyph is 24px.

Standard / Dense / Compact / Touch
One cell row height in every mode

Action
Data row

Shell composition

The graphical shell has a 52px app header, flexible workspace, and 28px minimum status bar. Header and status can grow with text scaling. The workspace contains a leading navigation rail, main content and optional trailing diagnostic drawer.

The icon-only rail is 64px wide; a labeled compact rail is 76px and an expanded navigation list is 240px. Pick one mode per shell rather than mixing widths between destinations. Navigation occupies the workspace height, not the menu or status chrome.

When portrait width cannot accommodate the rail and readable content together, bottom navigation replaces the desktop rail with the same destinations, labels and violet navigation role. Keep the selected destination on the neutral selection face with a bold violet label, independently of keyboard focus. Use one navigation representation at a time.

Persistent primary actions use the shared chamfered primary button with its blue edge in the header's action section or a bottom action area. A bottom action area keeps a frequent action within thumb reach on a tall touch screen; reserve body space for it and respect safe-area and software-keyboard insets so it never covers content or navigation.

Drawer default width is 340px, minimum 230px, maximum 50% of the workspace width. Clamp the effective minimum down to the maximum in a small container. Preserve the preferred width separately from its temporary clamp. A collapsed right drawer is a 36px rail with only its leading/top expansion control; use a 28px target in that desktop rail. Touch layouts expand the rail target to 48px or provide an accessible 48px drawer action elsewhere in the header.

Expanded and collapsed drawer states retain the same body material, header band, frame, toggle anchor and workspace bounds. The toggle sits at the leading edge of the drawer header: right chevron to collapse a right drawer, left chevron to expand it. Do not place the toggle in the unrelated global menu.

Oracle · header row        
│ Nav  │ Main workspace
│ rail │
│      │
Collapsed drawer: ‹ one-cell rail

Header anatomy

Use a 16px top/leading inset within every titled component. The first row contains the heading and at most one optional trailing status chip. Remaining chips, metadata (including any subtitle), and actions follow below in that order, with 8px separation between related rows. Actions always occupy their own section below metadata, including on desktop.

A configured leading icon occupies a stable slot in every state; never add/remove it in a way that shifts the label. Keep the title at its fixed inset as text wraps. If the optional status chip cannot fit beside it, move that chip below the title before the remaining chips. Additional chips and wrapped actions grow the header downward; no title-row action slot is reserved.

Back navigation is a separate region before the controlled area's header. It remains before the heading in focus order. Content Back and drawer controls must not migrate into global chrome as a layout shortcut.

← Back to jobs

🮣───────────────────────────🮢
│ Validation run Ready  │
│ Planner               │
│ Job 042 · Revision 8      │
│ Export  Run       │
🮡───────────────────────────🮠

Content layouts

Use a 24px outer page gutter on standard desktop, 16px below 720px available content width. A component's internal 16px inset is measured from its own edge. Card grids use a 280px minimum card width and 16px gap; dense grids may use 12px gaps.

A list/detail split starts at 32% list and 68% detail, with 240px list and 360px detail minima. At less than 720px available split width, show one pane: the list until detail is chosen, then detail with an explicit Back action. Preserve selection, drafts and independent scroll positions across adaptation.

When a narrow portrait viewport cannot comfortably contain the centered desktop dialog, anchor that same dialog to the bottom edge as a sheet. Preserve its chrome, type roles, title-first header order, modal scrim, focus containment and restoration to the trigger. Bound body scrolling to the space above safe-area and keyboard insets; Back and Close follow the dialog's dismissal policy.

Broad forms can show Guided and Advanced panes side by side with a 16px gap when pane minima are satisfied. Forbid side-by-side editors below pane minima; below 720px use one mode or readable stack.

Use these container bands as defaults: compact below 720px, medium 720–1199px, expanded at 1200px and above. Apply the band to the available content region after navigation/drawers, not the physical monitor. A drawer can make a wide window's content compact. Multi-pane arrangements must satisfy all pane minima.

List pane          │ Detail
Item A             │ Revision 8
Item B (selected)  │

<720px: list only, then detail + Back

Scrolling and sticky content

Page navigation, heading, toolbar and footer are fixed relative to the region; its body is the default vertical scroll owner. Sibling split panes scroll independently. Nested layouts opt out of body scrolling when the parent already owns it. Tables/code may own a labeled horizontal viewport; the app shell must not acquire accidental horizontal overflow.

Keep a stable scrollbar gutter. Scrollbar default width is 10px, track input-colored, thumb neutral, 2px inset, 32px minimum thumb length. Native accessibility/user scrollbar settings may override these values. Place the scrollbar immediately inside the trailing contour, outside the 16px content inset.

Composite sticky headers include title, metadata, toolbar and tabs as one opaque region. The next section pushes the previous header away; headers do not accumulate or duplicate controls. If a header becomes taller than the viewport, disable stickiness for that section so normal scrolling reaches everything.

Resizing and overflow

Split/divider affordances have a 1px visible neutral line and at least 8px pointer hit strip, separate from touch targets. Provide named keyboard resizing; arrows change 10px, Shift+arrow 50px, Home/End select limits. Focus is cyan and independent of pointer hover.

At 320px available content width, allow toolbar wrapping, stacked metadata and one-pane navigation. Keep essential actions reachable. Reflow does not submit commands, clear selection, reset drafts or decide an observed outcome.

Sticky header row (fixed)
🮣────────────────────────────🮢
│ Body scrolls independently │
│ line 2                     │
│ line 3                     │
🮡────────────────────────────🮠

Pane A │ Pane B
       │ split rule