diff --git a/theme/src/components.css b/theme/src/components.css
new file mode 100644
index 0000000..6019bf7
--- /dev/null
+++ b/theme/src/components.css
@@ -0,0 +1,309 @@
+/*
+ * @araharah/theme — component layer (mockup-derived, D-11)
+ * ------------------------------------------------------------------
+ * Every Rams component the four mockup screens show: buttons,
+ * inputs, telemetry cards, event chips, the maneuver banner,
+ * checkbox, and the two-way toggle — plus the full typography
+ * helper scale consuming the --type-* custom properties.
+ *
+ * Values are token references ONLY (D-03, D-07): colors via
+ * var(--color-*), spacing via var(--spacing-*), type via
+ * var(--type-*). The sole literals are the design doc's machined
+ * border geometry (1px / 2px inset rules, 3px focus brackets)
+ * and the exact 18x18 checkbox square — spec geometry, not theme
+ * values. Absolute zero roundedness; zero blur, glow, or
+ * transition anywhere.
+ */
+
+@layer components {
+
+  /* ——— Buttons (design doc: Components › Buttons & Trigger Controls) ——— */
+
+  .btn-primary,
+  .btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-space-sm);
+    font: var(--type-label-lg);
+    letter-spacing: var(--type-label-lg-tracking);
+    text-transform: uppercase;
+    padding: var(--spacing-space-sm) var(--spacing-space-md);
+    border: 2px solid var(--color-matte-black);
+    border-radius: 0;
+    cursor: pointer;
+  }
+
+  /* Primary action: signal-orange field, matte-black label.
+     Hover/focus inverts — matte-black field, orange label. */
+  .btn-primary {
+    background: var(--color-signal-orange);
+    color: var(--color-matte-black);
+  }
+  .btn-primary:hover {
+    background: var(--color-matte-black);
+    color: var(--color-signal-orange);
+  }
+
+  /* Secondary action: soft-beige substrate; hover/focus shifts
+     to the chassis-subtle nested-surface tone. */
+  .btn-secondary {
+    background: var(--color-soft-beige);
+    color: var(--color-matte-black);
+  }
+  .btn-secondary:hover {
+    background: var(--color-chassis-subtle);
+  }
+
+  /* Focus brackets: the 2px frame thickens to a 3px
+     signal-orange rule. No outline ring, no glow, no
+     transition — a machined edge settling into its housing. */
+  .btn-primary:focus-visible {
+    background: var(--color-matte-black);
+    color: var(--color-signal-orange);
+    border: 3px solid var(--color-signal-orange);
+    outline: none;
+  }
+  .btn-secondary:focus-visible {
+    background: var(--color-chassis-subtle);
+    border: 3px solid var(--color-signal-orange);
+    outline: none;
+  }
+
+  /* ——— Inputs (design doc: Components › Input Fields & Search Bars) ——— */
+
+  .input-field {
+    font: var(--type-body-md);
+    letter-spacing: var(--type-body-md-tracking);
+    color: var(--color-matte-black);
+    background: var(--color-soft-beige);
+    border: 2px solid var(--color-matte-black);
+    border-radius: 0;
+    padding: var(--spacing-space-sm) var(--spacing-space-md);
+    caret-color: var(--color-signal-orange);
+  }
+  .input-field::placeholder {
+    color: var(--color-outline);
+  }
+  /* Focus: the frame thickens to a 3px signal-orange rule —
+     zero glow, zero blur, zero animation. */
+  .input-field:focus {
+    border: 3px solid var(--color-signal-orange);
+    outline: none;
+  }
+
+  /* ——— Telemetry cards (design doc: Components › Telemetry Cards & Module Panels) ——— */
+
+  .card {
+    background: var(--color-soft-beige);
+    color: var(--color-matte-black);
+    border: 1px solid var(--color-matte-black);
+    border-radius: 0;
+  }
+
+  /* Header plate: separated from content by a horizontal 1px
+     rule; label-sm uppercase category left, reference badge right. */
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-space-sm);
+    padding: var(--spacing-space-sm) var(--spacing-space-md);
+    border-bottom: 1px solid var(--color-matte-black);
+    color: var(--color-on-surface-variant);
+  }
+
+  /* Reference badge: inverted matte-black plate, label-sm. */
+  .card-ref {
+    font: var(--type-label-sm);
+    letter-spacing: var(--type-label-sm-tracking);
+    text-transform: uppercase;
+    background: var(--color-matte-black);
+    color: var(--color-pure-white);
+    padding: var(--spacing-space-xs) var(--spacing-space-sm);
+    border-radius: 0;
+  }
+
+  /* Content block: high-contrast data point in telemetry-num
+     paired with an adjacent unit label. */
+  .card-content {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-space-xs);
+    padding: var(--spacing-space-sm);
+  }
+
+  /* ——— Chips / event tags (design doc: Components › Chips & Event Tags) ——— */
+
+  .chip-traffic,
+  .chip-hazard,
+  .chip-safe {
+    display: inline-block;
+    font: var(--type-label-sm);
+    letter-spacing: var(--type-label-sm-tracking);
+    text-transform: uppercase;
+    padding: var(--spacing-space-xs) var(--spacing-space-sm);
+    border-radius: 0;
+  }
+
+  /* Monolithic rectangular blocks, no rounding. */
+  .chip-traffic {
+    background: var(--color-signal-orange);
+    color: var(--color-matte-black);
+  }
+  .chip-hazard {
+    background: var(--color-functional-red);
+    color: var(--color-pure-white);
+  }
+  .chip-safe {
+    background: var(--color-olive-green);
+    color: var(--color-pure-white);
+  }
+
+  /* ——— Maneuver banner (design doc: Components › Navigation HUD) ——— */
+
+  .maneuver-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-space-md);
+    background: var(--color-matte-black);
+    color: var(--color-soft-beige);
+    padding: var(--spacing-space-md) var(--spacing-margin);
+    border-radius: 0;
+  }
+
+  /* Step register reads signal-orange inside the inverted chassis. */
+  .maneuver-banner .text-label-sm {
+    color: var(--color-signal-orange);
+  }
+  .maneuver-banner .text-telemetry-num {
+    color: var(--color-pure-white);
+  }
+
+  /* Graphic vector: sharp directional turn arrow, 3px stroke,
+     drawn on square linecaps (sized by the spacing scale). */
+  .maneuver-arrow {
+    width: var(--spacing-space-xl);
+    height: var(--spacing-space-xl);
+    color: var(--color-signal-orange);
+    flex: none;
+  }
+
+  /* ——— Checkbox (design doc: Components › Checkboxes & Toggle Switches) ——— */
+
+  .checkbox {
+    appearance: none;
+    display: grid;
+    place-content: center;
+    width: 18px; /* design-doc geometry: exact 18x18 square */
+    height: 18px;
+    margin: 0;
+    border: 2px solid var(--color-matte-black);
+    border-radius: 0;
+    background: var(--color-pure-white);
+    cursor: pointer;
+  }
+
+  /* Checked state: solid centered 8x8 square in signal-orange —
+     pure geometric state, no checkmark glyph. */
+  .checkbox:checked::before {
+    content: "";
+    width: var(--spacing-space-sm);
+    height: var(--spacing-space-sm);
+    background: var(--color-signal-orange);
+  }
+  .checkbox:focus-visible {
+    border: 3px solid var(--color-signal-orange);
+    outline: none;
+  }
+
+  /* ——— Two-way toggle: [ OFF | ON ] — active box inverts ——— */
+
+  .toggle {
+    display: inline-flex;
+    gap: var(--spacing-space-xs);
+    padding: var(--spacing-space-xs);
+    background: var(--color-chassis-subtle);
+    border: 1px solid var(--color-matte-black);
+    border-radius: 0;
+  }
+
+  /* Inactive side: muted chassis-subtle field, matte-black label. */
+  .toggle-option {
+    font: var(--type-label-lg);
+    letter-spacing: var(--type-label-lg-tracking);
+    text-transform: uppercase;
+    padding: var(--spacing-space-sm) var(--spacing-space-md);
+    background: var(--color-chassis-subtle);
+    color: var(--color-matte-black);
+    border: 0;
+    border-radius: 0;
+    cursor: pointer;
+  }
+
+  /* Active side fills solidly matte-black with inverted
+     signal-orange label. */
+  .toggle-option[aria-pressed="true"] {
+    background: var(--color-matte-black);
+    color: var(--color-signal-orange);
+  }
+  .toggle-option:focus-visible {
+    outline: 3px solid var(--color-signal-orange);
+  }
+
+  /* ——— Typography helpers: the full scale, token names verbatim ——— */
+
+  .text-display-lg {
+    font: var(--type-display-lg);
+    letter-spacing: var(--type-display-lg-tracking);
+  }
+  .text-display-lg-mobile {
+    font: var(--type-display-lg-mobile);
+    letter-spacing: var(--type-display-lg-mobile-tracking);
+  }
+  .text-headline-lg {
+    font: var(--type-headline-lg);
+    letter-spacing: var(--type-headline-lg-tracking);
+  }
+  .text-headline-lg-mobile {
+    font: var(--type-headline-lg-mobile);
+    letter-spacing: var(--type-headline-lg-mobile-tracking);
+  }
+  .text-headline-md {
+    font: var(--type-headline-md);
+    letter-spacing: var(--type-headline-md-tracking);
+  }
+  .text-headline-sm {
+    font: var(--type-headline-sm);
+    letter-spacing: var(--type-headline-sm-tracking);
+  }
+  .text-body-lg {
+    font: var(--type-body-lg);
+    letter-spacing: var(--type-body-lg-tracking);
+  }
+  .text-body-md {
+    font: var(--type-body-md);
+    letter-spacing: var(--type-body-md-tracking);
+  }
+  .text-body-sm {
+    font: var(--type-body-sm);
+    letter-spacing: var(--type-body-sm-tracking);
+  }
+  .text-label-lg {
+    font: var(--type-label-lg);
+    letter-spacing: var(--type-label-lg-tracking);
+  }
+  .text-label-md {
+    font: var(--type-label-md);
+    letter-spacing: var(--type-label-md-tracking);
+  }
+  .text-label-sm {
+    font: var(--type-label-sm);
+    letter-spacing: var(--type-label-sm-tracking);
+  }
+  .text-telemetry-num {
+    font: var(--type-telemetry-num);
+    letter-spacing: var(--type-telemetry-num-tracking);
+  }
+}
diff --git a/theme/src/theme.css b/theme/src/theme.css
index d9f1b4a..09aa66e 100644
--- a/theme/src/theme.css
+++ b/theme/src/theme.css
@@ -12,6 +12,7 @@
 
 @import "tailwindcss";
 @import "./tokens.css";
+@import "./components.css";
 
 /*
  * Class candidates (D-02, D-06): the four mockup screens are the