Design Language

The Level 147 design language is called the control surface aesthetic. It is a visual system modelled after the tactile interfaces of mixing consoles, broadcast equipment, and industrial control rooms.

The defining quality of a control surface is legible physicality: every element communicates its affordance through its apparent depth and texture. Without labels, you know what you can press, what is recessed, what is active.

Core principle: elevation as hierarchy

Control surface UI operates at three physical depths relative to the base surface. These are not arbitrary style choices — they carry semantic meaning:

Depth	Token	Semantic meaning
Inset / Well	`--sh-inset`	Data, input, content you read or type into
Flush / Surface	`--surface`	The working plane — default content level
Raised	`--sh-raise`	Interactive controls, active states, prominent panels
Pressed	`--sh-press`	Active/depressed state — button held down

Never add elevation without purpose. A panel that doesn’t need to be distinct from the surface should not be raised.

The three depths

Inset wells

Content carved below the surface plane. Used for inputs, code blocks, terminal outputs, and deep data displays. The visual cue is a dark cavity with a highlight on the bottom edge.

.inset-well {
  background: var(--surface-sink);
  box-shadow: var(--sh-inset);
  border-radius: var(--r);
}

Use for: code blocks, text inputs, search fields, log viewers, data terminals.

Flush surface

The default working plane. Most content lives here. No shadow — it is the reference level.

.surface {
  background: var(--surface);
}

Use for: page content, prose, default text containers.

Raised panels

Elements that protrude above the surface. The shadow stack simulates physical lift: a bright inset highlight on the top edge, a dark outer shadow beneath.

.raised-panel {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--sh-raise);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

Use for: dashboard cards, active navigation items, dialogs, popovers.

Pressed state

A deeper inset than a well — used for interactive elements in their active/depressed state.

.pressed {
  box-shadow: var(--sh-press);
}

Use for: button :active state, toggle-on indicators.

Glass chrome

The top navigation bar uses glass chrome: a semi-transparent, backdrop-blurred surface that floats above the content plane without obscuring it.

.glass-header {
  background: var(--glass-bg);          /* rgba with opacity */
  backdrop-filter: var(--glass-blur);   /* saturate(160%) blur(10px) */
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-header);
}

Glass chrome is reserved for navigation and floating panels. Do not apply it to content areas.

Accent spine

Interactive and active elements use a coloured left-border or accent glow as the primary identity indicator — not fill colours. This preserves the monochromatic surface so that accents carry maximum signal.

/* Active sidebar item */
.nav-item[aria-current="page"] {
  border-left: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--sh-raise);
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

Section accent triad

Three colours identify the three primary sections of the platform. They are used for:

Left-border indicators on active nav items
Heading underline accents
Glow shadows on featured panels
Badge colours

Section	Token	Colour
Operations	`--c-ops`	Blue `#3b82f6`
Consulting	`--c-consulting`	Green `#34c58a`
Admin	`--c-admin`	Orange `#f2913d`

Apply the per-section accent by setting data-section on the page root:

<html data-section="ops">    <!-- operations pages -->
<html data-section="consulting"> <!-- consulting pages -->
<html data-section="admin">  <!-- admin pages -->

Bevelled edges

Borders between surfaces use a 1px bevel (--bevel: 1px) in a muted line colour (--line). Avoid thick borders — the elevation shadow provides the primary depth cue; borders are secondary definition.

.panel {
  border: var(--bevel) solid var(--line);
}

Motion

Transitions are functional — they signal state change. They are not decorative.

/* Standard easing for all state transitions */
transition: color 160ms cubic-bezier(.2, .7, .3, 1),
            background 160ms cubic-bezier(.2, .7, .3, 1),
            box-shadow 160ms cubic-bezier(.2, .7, .3, 1);

Duration	Use
160ms	Standard interactive state (hover, focus)
0ms	Instant feedback (keyboard, click)
Avoid	Entrance/exit animations on functional UI

Always respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

Applying the language to a new interface

Follow this checklist when designing a new page or component:

Identify the data layer — does this content live in a well (data/input) or on a surface (prose/navigation)?
Identify interactive elements — raise them; apply accent spine to active/selected states.
Apply section accent — set data-section on the page root.
Use the type scale — do not invent new sizes; pick from --fs-0 through --fs-6.
Use token colours only — never hardcode colour values in component CSS; always use var(--token).
Define motion — every state transition should use the standard timing; none should be surprising.