Principles

Guide index

Calm precision

Most visible area is dark neutral material. Color identifies an action, navigation, focus location or named status; neutral surfaces and bold labels identify graphical selection, and the terminal adds persistent ▸ glyphs where needed. Large headings, deliberate alignment and clear content order establish hierarchy before decoration.

The visual signature is a thin chamfered frame with a subtle hexagonal cutout or popout near its top-right corner. Squared display lettering, clean reading text, a slight surface gradient and an optional short inset cyan header accent support that silhouette. Use the signature on major regions; repeating it around every row makes information harder to scan.

Shape carries identity

A major panel has clipped 45-degree corners and one outline, with a small top-right embellishment integrated into that outline. The default embellishment is a shallow hexagonal recess; an outward popout is an alternate where space permits. Keep it quiet, noninteractive and separate from the cyan focus treatment; it must not compete with a title or action.

Controls that need a square profile, including tab headers, remain rectangular with square corners except for one top-right cutout. “Square” describes the corner treatment, not equal width and height. Do not chamfer their other corners or add the panel's separate hexagonal ornament. Tabs attach to their content pane; standalone buttons retain their own action shape. See shape for exact geometry.

The corners are clean rather than razor sharp: graphical joins may soften by 2 logical pixels. Do not turn the silhouette into a rounded card or add secondary decorative frames.

🮣─────────────────🯓▁▁▁🯐───🮢
│ Major panel             │
│ One-cell diagonal joins │
🮡─────────────────────────🮠

┌──────────🮢
│ Overview │  Details
├──────────┴───────────────┐
│ Attached content         │
└──────────────────────────┘

Run  Ready

Dark blue actions; cyan focus

Enabled standard action buttons and selected content tabs share the same dark blue face gradient, #0D2545-> #0F1D31 - 110° , with #006EFF emphasis. The surface looks translucent but is painted opaquely. Primary buttons do not become bright blue slabs.

Cyan #46DDEB marks keyboard focus when used on borders. Sparse cyan structural accents are allowed, but never on borders. Selection and focus remain independently visible. A selected tab keeps its dark blue face and blue selection marker while its existing 1px contour changes to cyan at 0 offset. Never add an outer focus ring. Controls whose edge must retain on, checked, or invalid meaning preserve that semantic edge and use the defined lighter surface.focus fill for focus instead.

Violet #AD8AFF identifies navigation. Graphical selection uses neutral surfaces, bold labels, and violet navigation edges; data rows and the terminal add persistent ▸ glyphs. Status colors exclude violet and cyan.

Action   Run validation

Focus    Run validation

Active tab   | Overview \  Details

Destination  ▸ Activity (selected and focused)

On the terminal, navigation and row selection use persistent primary-text ▸ in a reserved one-cell slot, blank when absent. Violet identifies navigation. Keyboard focus recolors only the control label cyan; values and selection glyphs remain unchanged, with no focus prefix or cyan frame. Nerd Font is required and guaranteed; do not substitute > for ▸.

Stable anchors

Every titled region starts with its heading at a fixed leading/top inset. The first row contains the title and at most one optional trailing status chip. Remaining chips, metadata (including descriptions), then actions always follow below, including on desktop. Additional content increases header height downward; it never centers or shifts the heading. Back navigation occupies a separate region above the content header.

The terminal follows the same order even though all text uses one font size. Bold and spacing replace display font size, not information hierarchy.

Terminal elements do not shift when glyphs are added or changed, or when selection changes. If a glyph represents selection or state, reserve its cell and leave a blank space when that glyph is absent.

← Back to jobs

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

← Back to jobs

🮣───────────────────────────🮢
│ Validation run            │
│ Accepted              │
│ Outcome pending       │
│ Planner               │
│ Job 042 · Revision 8      │
│ Export  Run       │
│ More context below.       │
🮡───────────────────────────🮠

Truthful states

Ready, accepted, running, stale, unknown and complete are different facts. Pair status colors with explicit labels and scope. Preserve readable retained data and drafts. An accepted request is not a completed effect; a completed worker is not proof of final output.

An interface must remain understandable with all decorative accents removed. It must also remain usable while loading, disconnected, disabled or compact.

✓ Ready Inputs verified

Accepted Request received
! Outcome pending
Final output unconfirmed

↻ Running · 3 / 8
Three checks observed complete

! Stale Retained observation
Connection unavailable

? Unknown No observation

✓ Complete Output verified

× Failed Review the input

One design, appropriate rendering

Desktop and mobile are one graphical system. Shape, color, typography, icons, surfaces and compact controls follow the same rules, values and styling on both. Mobile adapts only where touch and screen format demand it: larger touch targets; spacing tokens stay on the shared scale. Layouts reflow for portrait orientation, and text honors the host scale. A component shrunk to a small container keeps the same styling it has at full size; it does not gain a mobile-specific look.

Platform adaptations preserve the desktop control they replace: bottom navigation carries the rail's destinations and violet navigation role when portrait width cannot fit a rail, with the same neutral selection face and bold violet label, independent of focus. A bottom sheet is the same dialog anchored low for the constrained viewport, retaining chrome, type, title-first order, scrim and focus restoration. Persistent primary actions stay shared primary buttons in a header action section or bottom action area for thumb reach.

Graphical surfaces use subtle gradients and layered planes. Terminals use flat cell backgrounds, glyph borders and text actions. Neither should imitate the other's rendering limitations. They share ordering, status meaning, keyboard clarity and chamfer identity.

🮣───────────────────────────🮢
│ Content · flat panel      │
│                           │
│ Input · revision: 8       │
│                           │
│ Run validation        │
│ ▸ Selected context        │
🮡───────────────────────────🮠

Decisions that normalize the references

Motion, mobile touch sizing and overlay recipes fill gaps in the pictures. They are explicit design decisions documented in their topic pages, not inferred screenshot measurements.