Components

All component patterns follow the Design Language and use CSS Tokens exclusively. These are implementation references — the specific class names in the Next.js app may differ; the CSS values are authoritative.

---

Raised panel (card)

The primary container for dashboard widgets, content sections, and standalone data panels.

<div class="panel">
  <h3>Widget Title</h3>
  <p>Content…</p>
</div>

.panel {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: var(--bevel) solid rgba(255, 255, 255, 0.03);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-raise);
  padding: 1.2rem 1.4rem;
}

---

Inset well

Used for code blocks, terminal outputs, search inputs, and any content that should appear recessed.

<pre class="well"><code>docker ps --all</code></pre>

.well {
  background: var(--surface-sink);
  box-shadow: var(--sh-inset);
  border: var(--bevel) solid rgba(0, 0, 0, 0.4);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
}

---

Glass header

The top navigation bar. Reserved for site-level chrome — do not reuse for content panels.

.site-header {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--bevel) solid var(--line);
  box-shadow: var(--sh-header);
  position: sticky;
  top: 0;
  z-index: 100;
}

---

Navigation item

Sidebar navigation links use a 2-column flex layout: indicator dot (or icon) + label.

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: var(--ink-dim);
  border-radius: var(--r-sm);
  padding: 0.42em 0.7em 0.42em 0.65em;
  margin: 0.12em 0;
  border-left: 2px solid transparent;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--tr), background var(--tr), border-color var(--tr), padding-left var(--tr);
}

.nav-link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-left-color: color-mix(in srgb, var(--accent) 50%, transparent);
  padding-left: 0.85em;
}

.nav-link[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--sh-raise);
  border-left-color: var(--accent);
}

---

Button — primary

<button class="btn-primary">Deploy</button>

.btn-primary {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--ink);
  border: var(--bevel) solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-raise);
  padding: 0.45em 1.1em;
  font-weight: 600;
  font-size: var(--fs-1);
  cursor: pointer;
  transition: filter var(--tr), box-shadow var(--tr);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-primary:active {
  box-shadow: var(--sh-press);
  filter: brightness(0.96);
}

/* Accent variant */
.btn-accent {
  background: var(--accent);
  color: var(--bg);
  border-color: transparent;
  box-shadow: var(--sh-raise), var(--sh-glow);
}

---

Badge / tag

Small inline status indicators.

<span class="badge badge--ops">Running</span>
<span class="badge badge--warn">Degraded</span>
<span class="badge badge--error">Offline</span>

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-0);
  font-weight: 600;
  padding: 0.15em 0.55em;
  border-radius: var(--r-pill);
  letter-spacing: 0.3px;
}

.badge--ops   { background: rgba(59,130,246,.15); color: var(--c-ops-bright); }
.badge--green { background: rgba(52,197,138,.15); color: var(--c-consulting-bright); }
.badge--warn  { background: rgba(242,145,61,.15); color: var(--c-admin-bright); }
.badge--error { background: rgba(239,68,68,.15);  color: #f87171; }
.badge--muted { background: rgba(255,255,255,.06); color: var(--ink-dim); }

---

Table

Data tables use a raised surface with a recessed header.

.data-table {
  background: var(--surface-2);
  border-radius: var(--r);
  box-shadow: var(--sh-raise);
  border: none;
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.data-table th {
  background: var(--surface-sink);
  color: var(--ink);
  box-shadow: var(--sh-inset);
  font-weight: 700;
  font-size: var(--fs-1);
  text-align: left;
  padding: 0.6em 1em;
}

.data-table td {
  border-top: var(--bevel) solid var(--line);
  color: var(--ink-dim);
  padding: 0.55em 1em;
}

.data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

---

Inline code chip

Used in body text: <code>docker compose up -d</code>

code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.84em;
  background: var(--surface-sink);
  color: var(--c-ops-bright);
  padding: 0.12em 0.42em;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-inset);
}

---

Callout / aside

Used for warnings, tips, and notes in documentation.

.callout {
  background: var(--surface-2);
  border: none;
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  box-shadow: var(--sh-raise);
  padding: 1rem 1.2rem;
  font-size: var(--fs-1);
}

/* Colour variants matching section accents */
.callout--note    { border-left-color: var(--c-ops); }
.callout--tip     { border-left-color: var(--c-consulting); }
.callout--caution { border-left-color: var(--c-admin); }
.callout--danger  { border-left-color: #ef4444; }

---

Divider / HR

hr {
  border: 0;
  height: 2px;
  margin: 2rem 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line) 18%,
    var(--line) 82%,
    transparent
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

---

Focus ring

All interactive elements must have a visible focus ring that meets WCAG AA.

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

---

Scrollbar

Custom scrollbar styling for WebKit browsers.

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-sink); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--surface-2), var(--line));
  border: 2px solid var(--surface-sink);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }