From 1f1db080b71e81c85101dfff21134bd2d2e6911f Mon Sep 17 00:00:00 2001
From: Mateusz Basiaga <basmateusz@wp.pl>
Date: Sat, 14 Nov 2026 02:59:46 +0100
Subject: [PATCH 1/4] feat(tokens): switch to the Orbit theme

Mirror the MoonBase Studio Design System, direction Orbit (tokens.json v2).

One dark theme: surface #050004, panel, raised and line surfaces, signal
#22FF86 as the accent, warning and error from the Commander theme.
Space Grotesk 300/400/700 for the UI, Space Mono for labels, Lalezar
only for the wordmark. New type scale (display, title, label, state,
numeric-*), radius 0 everywhere, size tokens bar, control, row, bracket
and key. inspectorTypography now exposes title, valueLarge, value, body
and label.
---
 app/assets/css/tokens.css               | 197 ++++--------------------
 app/utils/inspector-typography.utils.ts |  27 ++--
 app/utils/tailwind.utils.ts             |  19 ++-
 nuxt.config.ts                          |   7 +-
 tailwind.config.ts                      |  85 ++++++----
 5 files changed, 112 insertions(+), 223 deletions(-)

diff --git a/app/assets/css/tokens.css b/app/assets/css/tokens.css
index 91abb78..9351ed0 100644
--- a/app/assets/css/tokens.css
+++ b/app/assets/css/tokens.css
@@ -1,180 +1,45 @@
+/*
+ * MoonBase — Orbit (design system "MoonBase Studio Design System", tokens.json v2).
+ * One dark theme. Channels are "r g b" so Tailwind can add alpha, but Orbit
+ * avoids transparency: prefer the solid tokens below.
+ * Token → design system name:
+ *   surface → surface, surface-container → panel, surface-container-high → raised,
+ *   line → line, on-surface → on-surface, on-surface-dim → on-surface-dim,
+ *   accent → signal, accent-dim → signal-dim, on-accent → on-signal.
+ */
 :root,
-.theme-light {
-  /* Surfaces */
-  --color-surface: 242 242 242;
-  --color-surface-container: 233 233 233;
-  --color-surface-inverted: 0 0 0;
-
-  /* Content / Text */
-  --color-on-surface: 5 3 21;
-  --color-on-surface-dim: 90 90 90;
-  --color-on-surface-inverted: 255 255 255;
-
-  /* Accent */
-  --color-accent: 0 114 245;
-  --color-accent-dim: 121 180 239;
-
-  /* Panel categories */
-  --color-category-layout: 0 201 228;
-  --color-category-interactive: 255 0 204;
-
-  /* Semantic */
-  --color-info: 82 128 234;
-  --color-info-container: 82 128 234;
-  --color-warning: 255 106 0;
-  --color-warning-container: 255 106 0;
-  --color-error: 220 38 38;
-  --color-error-container: 220 38 38;
-  --color-success: 132 204 22;
-  --color-success-container: 132 204 22;
-}
-
-.theme-dark {
-  /* Surfaces */
-  --color-surface: 11 13 17;
-  --color-surface-container: 20 24 29;
-  --color-surface-inverted: 231 231 231;
-
-  /* Content / Text */
-  --color-on-surface: 255 255 255;
-  --color-on-surface-dim: 179 179 179;
-  --color-on-surface-inverted: 0 0 0;
-
-  /* Accent */
-  --color-accent: 59 130 246;
-  --color-accent-dim: 35 78 148;
-
-  /* Panel categories */
-  --color-category-layout: 0 201 228;
-  --color-category-interactive: 255 0 204;
-
-  /* Semantic */
-  --color-info: 82 128 234;
-  --color-info-container: 82 128 234;
-  --color-warning: 255 106 0;
-  --color-warning-container: 255 106 0;
-  --color-error: 220 38 38;
-  --color-error-container: 220 38 38;
-  --color-success: 132 204 22;
-  --color-success-container: 132 204 22;
-}
-
-.theme-blue {
-  /* Surfaces */
-  --color-surface: 14 19 27;
-  --color-surface-container: 29 33 41;
-  --color-surface-inverted: 231 231 232;
-
-  /* Content / Text */
-  --color-on-surface: 255 255 255;
-  --color-on-surface-dim: 179 179 179;
-  --color-on-surface-inverted: 0 0 0;
-
-  /* Accent */
-  --color-accent: 0 201 228;
-  --color-accent-dim: 0 121 137;
-
-  /* Panel categories */
-  --color-category-layout: 0 201 228;
-  --color-category-interactive: 255 0 204;
-
-  /* Semantic */
-  --color-info: 82 128 234;
-  --color-info-container: 82 128 234;
-  --color-warning: 255 106 0;
-  --color-warning-container: 255 106 0;
-  --color-error: 220 38 38;
-  --color-error-container: 220 38 38;
-  --color-success: 132 204 22;
-  --color-success-container: 132 204 22;
-}
-
-html[data-theme='light'] {
-  /* Surfaces */
-  --color-surface: 242 242 242;
-  --color-surface-container: 233 233 233;
-  --color-surface-inverted: 0 0 0;
-
-  /* Content / Text */
-  --color-on-surface: 5 3 21;
-  --color-on-surface-dim: 90 90 90;
-  --color-on-surface-inverted: 255 255 255;
-
-  /* Accent */
-  --color-accent: 0 114 245;
-  --color-accent-dim: 121 180 239;
-
-  /* Panel categories */
-  --color-category-layout: 0 201 228;
-  --color-category-interactive: 255 0 204;
-
-  /* Semantic */
-  --color-info: 82 128 234;
-  --color-info-container: 82 128 234;
-  --color-warning: 255 106 0;
-  --color-warning-container: 255 106 0;
-  --color-error: 220 38 38;
-  --color-error-container: 220 38 38;
-  --color-success: 132 204 22;
-  --color-success-container: 132 204 22;
-}
-
+.theme-dark,
 html[data-theme='dark'] {
   /* Surfaces */
-  --color-surface: 11 13 17;
-  --color-surface-container: 20 24 29;
-  --color-surface-inverted: 231 231 231;
-
-  /* Content / Text */
-  --color-on-surface: 255 255 255;
-  --color-on-surface-dim: 179 179 179;
-  --color-on-surface-inverted: 0 0 0;
-
-  /* Accent */
-  --color-accent: 59 130 246;
-  --color-accent-dim: 35 78 148;
-
-  /* Panel categories */
-  --color-category-layout: 0 201 228;
-  --color-category-interactive: 255 0 204;
-
-  /* Semantic */
-  --color-info: 82 128 234;
-  --color-info-container: 82 128 234;
-  --color-warning: 255 106 0;
-  --color-warning-container: 255 106 0;
-  --color-error: 220 38 38;
-  --color-error-container: 220 38 38;
-  --color-success: 132 204 22;
-  --color-success-container: 132 204 22;
-}
-
-html[data-theme='blue'] {
-  /* Surfaces */
-  --color-surface: 14 19 27;
-  --color-surface-container: 29 33 41;
-  --color-surface-inverted: 231 231 232;
+  --color-surface: 5 0 4;
+  --color-surface-container: 18 18 18;
+  --color-surface-container-high: 28 28 28;
+  --color-surface-inverted: 255 255 255;
+  --color-line: 42 42 42;
 
   /* Content / Text */
   --color-on-surface: 255 255 255;
-  --color-on-surface-dim: 179 179 179;
-  --color-on-surface-inverted: 0 0 0;
+  --color-on-surface-dim: 138 138 138;
+  --color-on-surface-inverted: 5 0 4;
 
-  /* Accent */
-  --color-accent: 0 201 228;
-  --color-accent-dim: 0 121 137;
+  /* Signal (accent) */
+  --color-accent: 34 255 134;
+  --color-accent-dim: 24 184 95;
+  --color-on-accent: 5 0 4;
 
-  /* Panel categories */
-  --color-category-layout: 0 201 228;
+  /* Element categories (Studio only) */
+  --color-category-layout: 0 229 255;
   --color-category-interactive: 255 0 204;
+  --color-category-interactive-fill: 55 0 44;
 
   /* Semantic */
   --color-info: 82 128 234;
   --color-info-container: 82 128 234;
-  --color-warning: 255 106 0;
-  --color-warning-container: 255 106 0;
-  --color-error: 220 38 38;
-  --color-error-container: 220 38 38;
-  --color-success: 132 204 22;
-  --color-success-container: 132 204 22;
+  --color-warning: 230 161 92;
+  --color-warning-container: 230 161 92;
+  --color-error: 232 93 76;
+  --color-error-container: 232 93 76;
+  --color-success: 34 255 134;
+  --color-success-container: 34 255 134;
+  --color-on-status: 5 0 4;
 }
diff --git a/app/utils/inspector-typography.utils.ts b/app/utils/inspector-typography.utils.ts
index 409223e..9d43612 100644
--- a/app/utils/inspector-typography.utils.ts
+++ b/app/utils/inspector-typography.utils.ts
@@ -1,24 +1,23 @@
 /**
- * Figma text styles for the layer inspector.
+ * Orbit text styles for the layer inspector (MoonBase Studio Design System).
  * Color, alignment, and box size stay on the consumer.
  */
 export const inspectorTypography = {
-  /** Special High — Lalezar Regular 48px */
-  specialHigh: 'font-lalezar text-special-high font-normal tracking-normal',
-  /** Special Medium — Lalezar Regular 40px */
-  specialMedium: 'font-lalezar text-special-medium font-normal tracking-normal',
-  /** Special Small — Lalezar Regular 36px */
-  specialSmall: 'font-lalezar text-special-small font-normal tracking-normal',
-  /** Standard High — Inter Medium 24px */
-  standardHigh: 'font-inter text-standard-high font-medium tracking-normal',
-  /** Standard Medium — Inter Medium 20px */
-  standardMedium: 'font-inter text-standard-medium font-medium tracking-normal',
-  /** Standard Small — Inter Medium 16px */
-  standardSmall: 'font-inter text-standard-small font-medium tracking-normal',
+  /** Card / view title — Space Grotesk 300, 28px. */
+  title: 'font-sans text-title font-light',
+  /** Large value — Space Grotesk 300, 20px, tabular figures. */
+  valueLarge: 'font-sans text-numeric-md font-light tabular-nums',
+  /** Field value — Space Grotesk 400, 14px, tabular figures. */
+  value: 'font-sans text-body-sm font-normal tabular-nums',
+  /** Body text — Space Grotesk 400, 14px. */
+  body: 'font-sans text-body-sm font-normal',
+  /** Label, unit, group heading — Space Mono 12px, upper case. */
+  label: 'font-mono text-label font-normal uppercase',
 } as const;
 
 export type InspectorFieldTypography = 'standard-medium' | 'standard-small';
 
+/** Both sizes map to the Orbit field value; kept as a prop for API compatibility. */
 export function inspectorFieldTypography(kind: InspectorFieldTypography = 'standard-medium') {
-  return kind === 'standard-small' ? inspectorTypography.standardSmall : inspectorTypography.standardMedium;
+  return kind === 'standard-small' ? inspectorTypography.value : inspectorTypography.valueLarge;
 }
diff --git a/app/utils/tailwind.utils.ts b/app/utils/tailwind.utils.ts
index f1b159b..ace5fd8 100644
--- a/app/utils/tailwind.utils.ts
+++ b/app/utils/tailwind.utils.ts
@@ -7,16 +7,15 @@ const tailwindMerge = extendTailwindMerge({
       'font-size': [
         {
           text: [
-            'special-high',
-            'special-medium',
-            'special-small',
-            'standard-high',
-            'standard-medium',
-            'standard-small',
-            'heading-md',
-            'heading-lg',
-            'heading-x-lg',
-            'heading-x-huge',
+            'display',
+            'numeric-xl',
+            'numeric-lg',
+            'numeric-md',
+            'title',
+            'state',
+            'label',
+            'label-lg',
+            'brand-logo',
             'body-x-sm',
             'body-sm',
             'body-md',
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2114a2d..2d8df69 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -58,8 +58,11 @@ export default defineNuxtConfig({
   ],
   googleFonts: {
     families: {
-      Roboto: '400..700',
+      'Space Grotesk': [300, 400, 700],
+      'Space Mono': [400],
+      Lalezar: true,
     },
+    subsets: ['latin', 'latin-ext'],
     preload: true,
   },
   fonts: {
@@ -71,6 +74,6 @@ export default defineNuxtConfig({
     provider: 'local',
   },
   fontMetrics: {
-    fonts: ['Roboto', { family: 'Roboto' }],
+    fonts: ['Space Grotesk', 'Space Mono'],
   },
 });
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9900bb0..5ee4091 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,6 +3,10 @@ import type { Config } from 'tailwindcss';
 
 import rootFontSize from './tailwind/plugins/root-font-size';
 
+/**
+ * MoonBase — Orbit. Values mirror the "MoonBase Studio Design System" (tokens.json v2).
+ * 1rem = 10px (root-font-size plugin).
+ */
 const config = {
   content: [],
   darkMode: ['class', '.theme-dark'],
@@ -10,52 +14,61 @@ const config = {
   theme: {
     extend: {
       fontFamily: {
-        roboto: ['Roboto', 'sans-serif'],
-        inter: ['Inter', 'sans-serif'],
-        lalezar: ['Lalezar', 'sans-serif'],
+        /** Space Grotesk — the one UI face: 300 for large sizes, 400 text, 700 state. */
+        sans: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
+        /** Space Mono — labels, units, state words, upper case. */
+        mono: ['"Space Mono"', 'ui-monospace', 'monospace'],
+        /** Lalezar — the MoonBase wordmark only. */
+        brand: ['Lalezar', '"Space Grotesk"', 'sans-serif'],
       },
       fontSize: {
-        'special-high': ['4.8rem', { lineHeight: 'normal', letterSpacing: '0', fontWeight: '400' }],
-        'special-medium': ['4rem', { lineHeight: 'normal', letterSpacing: '0', fontWeight: '400' }],
-        'special-small': ['3.6rem', { lineHeight: 'normal', letterSpacing: '0', fontWeight: '400' }],
-        'standard-high': ['2.4rem', { lineHeight: '2.9rem', letterSpacing: '0', fontWeight: '500' }],
-        'standard-medium': ['2rem', { lineHeight: '2.4rem', letterSpacing: '0', fontWeight: '500' }],
-        'standard-small': ['1.6rem', { lineHeight: '1.9rem', letterSpacing: '0', fontWeight: '500' }],
+        /* Telemetry — shared with the Commander 7" screen */
+        display: ['9.6rem', { lineHeight: '9.2rem', letterSpacing: '-0.03em', fontWeight: '300' }],
+        'numeric-xl': ['12rem', { lineHeight: '11.2rem', letterSpacing: '-0.04em', fontWeight: '300' }],
+        'numeric-lg': ['4.8rem', { lineHeight: '5.2rem', fontWeight: '300' }],
+        title: ['2.8rem', { lineHeight: '3.6rem', fontWeight: '300' }],
+        'body-lg': ['1.8rem', { lineHeight: '2.6rem' }],
+        state: ['1.4rem', { lineHeight: '2rem', fontWeight: '700' }],
 
-        'heading-sm': ['1.6rem', { lineHeight: '2.4rem' }],
-        'heading-xs': ['1.4rem', { lineHeight: '2.2rem' }],
-        'heading-md': ['2rem', { lineHeight: '2.8rem' }],
-        'heading-lg': ['2.8rem', { lineHeight: '3.6rem' }],
-        'heading-x-lg': ['3.6rem', { lineHeight: '4.4rem' }],
-        'heading-x-huge': ['6.4rem', { lineHeight: '7.6rem' }],
+        /* Mono labels (use with font-mono uppercase) */
+        label: ['1.2rem', { lineHeight: '1.6rem', letterSpacing: '0.14em' }],
+        'label-lg': ['1.4rem', { lineHeight: '2rem', letterSpacing: '0.12em' }],
 
-        'body-x-sm': ['1.2rem', { lineHeight: '1.6rem' }],
-        'body-sm': ['1.4rem', { lineHeight: '2rem' }],
+        /* Studio UI */
+        'numeric-md': ['2rem', { lineHeight: '2.4rem', fontWeight: '300' }],
         'body-md': ['1.6rem', { lineHeight: '2.4rem' }],
-        'body-lg': ['1.8rem', { lineHeight: '2.8rem' }],
+        'body-sm': ['1.4rem', { lineHeight: '2rem' }],
+        'body-x-sm': ['1.2rem', { lineHeight: '1.6rem' }],
+
+        /* Brand */
+        'brand-logo': ['2.8rem', { lineHeight: '3.6rem', fontWeight: '400' }],
       },
       fontWeight: {
+        light: '300',
         normal: '400',
-        medium: '500',
-        semibold: '600',
+        bold: '700',
       },
       letterSpacing: {
-        'x-sm': '-0.02rem',
-        sm: '-0.01rem',
-        md: '0rem',
-        lg: '0rem',
-        'x-lg': '0.02rem',
-        'xx-lg': '0.04rem',
+        tight: '-0.03em',
+        label: '0.14em',
+        'label-lg': '0.12em',
       },
       borderRadius: {
-        none: '0rem',
-        'x-sm': '0.2rem',
-        sm: '0.4rem',
-        md: '0.8rem',
-        lg: '1.6rem',
+        /* Orbit: no rounding anywhere. The status dot uses rounded-full. */
+        DEFAULT: '0',
+        none: '0',
+        'x-sm': '0',
+        sm: '0',
+        md: '0',
+        lg: '0',
         full: '9999px',
       },
       spacing: {
+        /*
+         * Named scale kept for compatibility. Orbit uses the 4px grid members:
+         * tiny 4 · xxx-sm 8 · x-sm 12 · md 16 · xx-lg 24 · xxxx-lg 32 · xxx-huge 48 (x-tiny 2 for hairline gaps).
+         * Size tokens: bar 48 · control 32 · row 28 · bracket 12.
+         */
         none: '0',
         'x-tiny': '0.2rem',
         tiny: '0.4rem',
@@ -75,6 +88,11 @@ const config = {
         'xx-huge': '4.4rem',
         'xxx-huge': '4.8rem',
         'xxxx-huge': '5.2rem',
+        bar: '4.8rem',
+        control: '3.2rem',
+        row: '2.8rem',
+        bracket: '1.2rem',
+        key: '12.8rem',
       },
       colors: {
         current: 'currentColor',
@@ -83,7 +101,9 @@ const config = {
 
         surface: 'rgb(var(--color-surface) / <alpha-value>)',
         'surface-container': 'rgb(var(--color-surface-container) / <alpha-value>)',
+        'surface-container-high': 'rgb(var(--color-surface-container-high) / <alpha-value>)',
         'surface-inverted': 'rgb(var(--color-surface-inverted) / <alpha-value>)',
+        line: 'rgb(var(--color-line) / <alpha-value>)',
 
         'on-surface': 'rgb(var(--color-on-surface) / <alpha-value>)',
         'on-surface-dim': 'rgb(var(--color-on-surface-dim) / <alpha-value>)',
@@ -91,9 +111,11 @@ const config = {
 
         accent: 'rgb(var(--color-accent) / <alpha-value>)',
         'accent-dim': 'rgb(var(--color-accent-dim) / <alpha-value>)',
+        'on-accent': 'rgb(var(--color-on-accent) / <alpha-value>)',
 
         'category-layout': 'rgb(var(--color-category-layout) / <alpha-value>)',
         'category-interactive': 'rgb(var(--color-category-interactive) / <alpha-value>)',
+        'category-interactive-fill': 'rgb(var(--color-category-interactive-fill) / <alpha-value>)',
 
         info: 'rgb(var(--color-info) / <alpha-value>)',
         'info-container': 'rgb(var(--color-info-container) / <alpha-value>)',
@@ -103,6 +125,7 @@ const config = {
         'error-container': 'rgb(var(--color-error-container) / <alpha-value>)',
         success: 'rgb(var(--color-success) / <alpha-value>)',
         'success-container': 'rgb(var(--color-success-container) / <alpha-value>)',
+        'on-status': 'rgb(var(--color-on-status) / <alpha-value>)',
       },
       transitionDuration: {
         short: '200ms',

From 8f409414ceb467700d900b791996a44263ce4db8 Mon Sep 17 00:00:00 2001
From: Mateusz Basiaga <basmateusz@wp.pl>
Date: Sat, 14 Nov 2026 03:00:46 +0100
Subject: [PATCH 2/4] feat(base): add BaseFrame and BaseStatusBadge

BaseFrame is the Orbit block: a 1px line frame that gets signal corner
brackets when active. BaseFrameBrackets is exported for cards that draw
their own frame. BaseStatusBadge pairs the status dot with a mono state
word, so color never carries the state alone.
---
 app/components/base/base-frame/BaseFrame.vue  | 37 ++++++++++++++
 .../base/base-frame/BaseFrameBrackets.vue     | 40 +++++++++++++++
 app/components/base/base-frame/index.ts       | 22 ++++++++
 .../base-status-badge/BaseStatusBadge.vue     | 50 +++++++++++++++++++
 .../base/base-status-badge/index.ts           | 14 ++++++
 5 files changed, 163 insertions(+)
 create mode 100644 app/components/base/base-frame/BaseFrame.vue
 create mode 100644 app/components/base/base-frame/BaseFrameBrackets.vue
 create mode 100644 app/components/base/base-frame/index.ts
 create mode 100644 app/components/base/base-status-badge/BaseStatusBadge.vue
 create mode 100644 app/components/base/base-status-badge/index.ts

diff --git a/app/components/base/base-frame/BaseFrame.vue b/app/components/base/base-frame/BaseFrame.vue
new file mode 100644
index 0000000..20ef1e7
--- /dev/null
+++ b/app/components/base/base-frame/BaseFrame.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '../../../utils/tailwind.utils';
+import type { BaseFrameProps } from '.';
+import BaseFrameBrackets from './BaseFrameBrackets.vue';
+
+const props = withDefaults(defineProps<BaseFrameProps>(), {
+  label: undefined,
+  active: false,
+  corners: 'diagonal',
+  tone: 'accent',
+  filled: false,
+  as: 'section',
+  class: undefined,
+});
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="
+      cn('relative min-w-0 border border-line', props.filled ? 'bg-surface-container' : 'bg-transparent', props.class)
+    "
+  >
+    <BaseFrameBrackets
+      v-if="active"
+      :corners="corners"
+      :tone="tone"
+    />
+    <span
+      v-if="label"
+      class="mb-xxx-sm block font-mono text-label uppercase text-on-surface-dim"
+    >
+      {{ label }}
+    </span>
+    <slot />
+  </component>
+</template>
diff --git a/app/components/base/base-frame/BaseFrameBrackets.vue b/app/components/base/base-frame/BaseFrameBrackets.vue
new file mode 100644
index 0000000..1d81dcb
--- /dev/null
+++ b/app/components/base/base-frame/BaseFrameBrackets.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority';
+
+import type { BaseFrameCorners, BaseFrameTone } from '.';
+
+const props = withDefaults(defineProps<{ corners?: BaseFrameCorners; tone?: BaseFrameTone }>(), {
+  corners: 'diagonal',
+  tone: 'accent',
+});
+
+const bracketVariants = cva('pointer-events-none absolute size-bracket border-0', {
+  variants: {
+    tone: {
+      accent: 'border-accent',
+      warning: 'border-warning',
+      error: 'border-error',
+      layout: 'border-category-layout',
+      interactive: 'border-category-interactive',
+    },
+  },
+  defaultVariants: { tone: 'accent' },
+});
+
+const positions = computed(() => {
+  const diagonal = ['-left-px -top-px border-l border-t', '-bottom-px -right-px border-b border-r'];
+  if (props.corners === 'diagonal') {
+    return diagonal;
+  }
+  return [...diagonal, '-right-px -top-px border-r border-t', '-bottom-px -left-px border-b border-l'];
+});
+</script>
+
+<template>
+  <span
+    v-for="position in positions"
+    :key="position"
+    :class="[bracketVariants({ tone: props.tone }), position]"
+    aria-hidden="true"
+  />
+</template>
diff --git a/app/components/base/base-frame/index.ts b/app/components/base/base-frame/index.ts
new file mode 100644
index 0000000..f99b840
--- /dev/null
+++ b/app/components/base/base-frame/index.ts
@@ -0,0 +1,22 @@
+import type { ClassValue } from 'clsx';
+
+export type BaseFrameTone = 'accent' | 'warning' | 'error' | 'layout' | 'interactive';
+export type BaseFrameCorners = 'diagonal' | 'all';
+
+export interface BaseFrameProps {
+  /** Mono label in the top-left corner of the frame. */
+  label?: string;
+  /** Adds the corner brackets (Orbit "active block"). */
+  active?: boolean;
+  /** `diagonal`: top-left + bottom-right; `all`: four corners. */
+  corners?: BaseFrameCorners;
+  tone?: BaseFrameTone;
+  /** Panel fill. Only for overlays (menus, dialogs, popovers) and hardware keys. */
+  filled?: boolean;
+  /** Rendered element. */
+  as?: string;
+  class?: ClassValue;
+}
+
+export { default as BaseFrame } from './BaseFrame.vue';
+export { default as BaseFrameBrackets } from './BaseFrameBrackets.vue';
diff --git a/app/components/base/base-status-badge/BaseStatusBadge.vue b/app/components/base/base-status-badge/BaseStatusBadge.vue
new file mode 100644
index 0000000..7167644
--- /dev/null
+++ b/app/components/base/base-status-badge/BaseStatusBadge.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../../utils/tailwind.utils';
+import type { BaseStatusBadgeProps } from '.';
+
+const props = withDefaults(defineProps<BaseStatusBadgeProps>(), {
+  state: 'idle',
+  live: false,
+  class: undefined,
+});
+
+const wordVariants = cva('inline-flex items-center gap-xxx-sm whitespace-nowrap font-mono text-label uppercase', {
+  variants: {
+    state: {
+      idle: 'text-on-surface-dim',
+      live: 'text-accent',
+      paused: 'text-warning',
+      warning: 'text-warning',
+      error: 'text-error',
+      offline: 'text-on-surface-dim',
+      ok: 'text-on-surface',
+      info: 'text-info',
+    },
+  },
+});
+
+const dotClass = computed(() => {
+  if (props.state === 'offline') {
+    return 'border border-current bg-transparent';
+  }
+  if (props.state === 'ok') {
+    return 'bg-accent';
+  }
+  return 'bg-current';
+});
+</script>
+
+<template>
+  <span
+    :class="cn(wordVariants({ state: props.state }), props.class)"
+    :role="live ? 'status' : undefined"
+  >
+    <span
+      :class="['size-xxx-sm shrink-0 rounded-full', dotClass]"
+      aria-hidden="true"
+    />
+    {{ label }}
+  </span>
+</template>
diff --git a/app/components/base/base-status-badge/index.ts b/app/components/base/base-status-badge/index.ts
new file mode 100644
index 0000000..56d0591
--- /dev/null
+++ b/app/components/base/base-status-badge/index.ts
@@ -0,0 +1,14 @@
+import type { ClassValue } from 'clsx';
+
+export type BaseStatusBadgeState = 'idle' | 'live' | 'paused' | 'warning' | 'error' | 'offline' | 'ok' | 'info';
+
+export interface BaseStatusBadgeProps {
+  state?: BaseStatusBadgeState;
+  /** The word is required: color never carries the state alone. */
+  label: string;
+  /** Announces changes politely (aria-live). */
+  live?: boolean;
+  class?: ClassValue;
+}
+
+export { default as BaseStatusBadge } from './BaseStatusBadge.vue';

From 6733eea642bdf52c5112cc07fbf9b21c3491f926 Mon Sep 17 00:00:00 2001
From: Mateusz Basiaga <basmateusz@wp.pl>
Date: Sat, 14 Nov 2026 03:00:54 +0100
Subject: [PATCH 3/4] refactor(base): restyle base components to Orbit

Drop hardcoded #050004, #22FF86, color-mix and opacity-based disabled
states. Fields become 1px line frames with mono labels, the property
card gets a thin white title and brackets, the toggle and color swatch
are square, popover and option group follow the frame pattern, and icon
buttons hover to the signal color.
---
 .../base-color-swatch/BaseColorSwatch.vue     |  4 +--
 .../base/base-icon-button/BaseIconButton.vue  |  4 +--
 .../base/base-icon-rail/BaseIconRail.vue      |  7 ++---
 .../BaseInspectorField.vue                    | 11 ++++----
 .../base-option-button/BaseOptionButton.vue   |  8 +++---
 .../base-option-group/BaseOptionGroup.vue     | 19 +++----------
 .../base/base-popover/BasePopover.vue         |  2 +-
 .../base-property-card/BasePropertyCard.vue   | 18 ++++++-------
 .../base/base-reveal-list/BaseRevealList.vue  |  2 +-
 .../base/base-scrub-field/BaseScrubField.vue  | 27 ++++++++++---------
 .../base/base-select-pill/BaseSelectPill.vue  |  9 ++++---
 .../base/base-text-button/BaseTextButton.vue  |  7 ++++-
 .../base/base-toggle-dot/BaseToggleDot.vue    | 13 ++++-----
 .../base/base-tree-item/BaseTreeItem.vue      |  2 +-
 .../base/base-value-field/BaseValueField.vue  | 16 +++++------
 .../inspector/IconInspectorEyeFilled.vue      |  2 +-
 .../inspector/IconInspectorLockOpenFilled.vue |  2 +-
 sandbox/app/pages/index.vue                   |  6 ++---
 18 files changed, 79 insertions(+), 80 deletions(-)

diff --git a/app/components/base/base-color-swatch/BaseColorSwatch.vue b/app/components/base/base-color-swatch/BaseColorSwatch.vue
index 6c4ed27..d0fcea4 100644
--- a/app/components/base/base-color-swatch/BaseColorSwatch.vue
+++ b/app/components/base/base-color-swatch/BaseColorSwatch.vue
@@ -32,14 +32,14 @@ function onPickerChange(event: Event) {
   <div :class="cn('flex flex-col items-start gap-x-tiny', props.class)">
     <span
       v-if="label"
-      class="font-roboto text-body-x-sm lowercase leading-none text-on-surface-dim"
+      class="font-mono text-label uppercase text-on-surface-dim"
     >
       {{ label }}
     </span>
     <button
       type="button"
       :disabled="disabled"
-      class="size-6 shrink-0 rounded-x-sm border border-on-surface-dim/40 p-0 disabled:opacity-50"
+      class="size-xx-lg shrink-0 border border-on-surface-dim p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:border-dashed"
       :style="{ backgroundColor: modelValue }"
       :aria-label="label ?? modelValue"
       @click="openPicker"
diff --git a/app/components/base/base-icon-button/BaseIconButton.vue b/app/components/base/base-icon-button/BaseIconButton.vue
index f8e4ad3..8a197f0 100644
--- a/app/components/base/base-icon-button/BaseIconButton.vue
+++ b/app/components/base/base-icon-button/BaseIconButton.vue
@@ -30,9 +30,9 @@ function onClick(event: MouseEvent) {
     :class="
       cn(
         'inline-flex shrink-0 items-center justify-center text-on-surface transition-colors duration-short',
-        'hover:text-on-surface-dim',
+        'hover:text-accent active:text-accent-dim',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
-        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-on-surface-dim',
         props.class,
       )
     "
diff --git a/app/components/base/base-icon-rail/BaseIconRail.vue b/app/components/base/base-icon-rail/BaseIconRail.vue
index 8c9d00e..1b2f201 100644
--- a/app/components/base/base-icon-rail/BaseIconRail.vue
+++ b/app/components/base/base-icon-rail/BaseIconRail.vue
@@ -19,7 +19,7 @@ function onSelect(id: string) {
 
 <template>
   <div
-    :class="cn('flex shrink-0 flex-col items-center gap-[7px]', props.class)"
+    :class="cn('flex shrink-0 flex-col items-center gap-xxx-sm', props.class)"
     role="group"
   >
     <button
@@ -29,9 +29,10 @@ function onSelect(id: string) {
       :aria-label="item.label"
       :aria-pressed="isActive(item.id)"
       :class="[
-        'flex size-10 items-center justify-center transition-colors',
+        'flex size-x-huge items-center justify-center border transition-colors duration-short',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
         item.boxClass,
-        isActive(item.id) ? 'text-[#22FF86]' : 'text-white',
+        isActive(item.id) ? 'border-line text-accent' : 'border-transparent text-on-surface-dim hover:text-on-surface',
       ]"
       @click="onSelect(item.id)"
     >
diff --git a/app/components/base/base-inspector-field/BaseInspectorField.vue b/app/components/base/base-inspector-field/BaseInspectorField.vue
index a88fa3e..514e435 100644
--- a/app/components/base/base-inspector-field/BaseInspectorField.vue
+++ b/app/components/base/base-inspector-field/BaseInspectorField.vue
@@ -89,13 +89,14 @@ function onColorInput(event: Event) {
   emit('change', value);
 }
 
-const shellClass = 'border border-transparent bg-[color-mix(in_srgb,white_5%,#050004)] focus-within:border-[#22FF86]';
+const shellClass =
+  'border border-line bg-transparent transition-colors duration-short hover:border-on-surface-dim focus-within:border-accent';
 </script>
 
 <template>
   <label
     v-if="type === 'color'"
-    :class="cn('relative block size-[32px] shrink-0 cursor-pointer rounded-full', shellClass, props.class)"
+    :class="cn('relative block size-control shrink-0 cursor-pointer border-on-surface-dim', shellClass, props.class)"
     :style="{ backgroundColor: String(modelValue) }"
   >
     <input
@@ -109,7 +110,7 @@ const shellClass = 'border border-transparent bg-[color-mix(in_srgb,white_5%,#05
   </label>
   <div
     v-else
-    :class="cn(shellClass, 'flex h-[24px] min-w-0 items-center px-[4px]', props.class)"
+    :class="cn(shellClass, 'flex h-row min-w-0 items-center px-tiny', props.class)"
   >
     <input
       :value="draft"
@@ -117,7 +118,7 @@ const shellClass = 'border border-transparent bg-[color-mix(in_srgb,white_5%,#05
       inputmode="decimal"
       autocomplete="off"
       :disabled="disabled"
-      class="min-w-0 flex-1 border-0 bg-transparent p-0 font-inter text-body-sm font-medium tracking-normal text-white outline-none disabled:opacity-50"
+      class="min-w-0 flex-1 border-0 bg-transparent p-0 font-sans text-body-sm font-normal tabular-nums text-on-surface outline-none disabled:text-on-surface-dim"
       @focus="onFocus"
       @beforeinput="onBeforeInput"
       @input="onInput"
@@ -127,7 +128,7 @@ const shellClass = 'border border-transparent bg-[color-mix(in_srgb,white_5%,#05
     />
     <span
       v-if="suffix"
-      class="shrink-0 font-inter text-body-sm font-medium tracking-normal text-white"
+      class="ml-x-tiny shrink-0 font-mono text-label uppercase text-on-surface-dim"
       aria-hidden="true"
     >
       {{ suffix }}
diff --git a/app/components/base/base-option-button/BaseOptionButton.vue b/app/components/base/base-option-button/BaseOptionButton.vue
index be4a869..f9841c4 100644
--- a/app/components/base/base-option-button/BaseOptionButton.vue
+++ b/app/components/base/base-option-button/BaseOptionButton.vue
@@ -14,13 +14,13 @@ const emit = defineEmits<{
 }>();
 
 const toneVariants = cva(
-  'w-full rounded-sm px-x-sm py-tiny text-center font-roboto text-body-sm leading-snug font-normal lowercase text-on-surface transition-colors duration-short focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:pointer-events-none disabled:opacity-50',
+  'w-full border border-transparent bg-surface-container-high px-x-sm py-tiny text-left font-sans text-body-sm font-normal text-on-surface transition-colors duration-short focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:pointer-events-none disabled:border-dashed disabled:border-line disabled:bg-transparent disabled:text-on-surface-dim',
   {
     variants: {
       tone: {
-        accent: 'bg-surface-container hover:bg-surface-container/80',
-        layout: 'bg-surface-container hover:bg-surface-container/80',
-        interactive: 'bg-category-interactive/20 hover:bg-category-interactive/30',
+        accent: 'hover:border-accent hover:bg-surface',
+        layout: 'hover:border-category-layout hover:bg-surface',
+        interactive: 'hover:border-category-interactive hover:bg-category-interactive-fill',
       },
     },
     defaultVariants: {
diff --git a/app/components/base/base-option-group/BaseOptionGroup.vue b/app/components/base/base-option-group/BaseOptionGroup.vue
index 0efa4a2..55a58f6 100644
--- a/app/components/base/base-option-group/BaseOptionGroup.vue
+++ b/app/components/base/base-option-group/BaseOptionGroup.vue
@@ -2,26 +2,14 @@
 import { cva } from 'class-variance-authority';
 
 import { cn } from '../../../utils/tailwind.utils';
+import BaseFrameBrackets from '../base-frame/BaseFrameBrackets.vue';
 import type { BaseOptionGroupProps } from '.';
 
 const props = withDefaults(defineProps<BaseOptionGroupProps>(), {
   tone: 'accent',
 });
 
-const sectionVariants = cva('gap-tiny flex flex-col border border-dashed px-x-sm py-x-sm', {
-  variants: {
-    tone: {
-      accent: 'border-accent',
-      layout: 'border-category-layout',
-      interactive: 'border-category-interactive',
-    },
-  },
-  defaultVariants: {
-    tone: 'accent',
-  },
-});
-
-const titleVariants = cva('font-roboto text-body-sm leading-snug font-semibold lowercase', {
+const titleVariants = cva('mb-xx-sm font-mono text-label font-normal uppercase', {
   variants: {
     tone: {
       accent: 'text-accent',
@@ -36,7 +24,8 @@ const titleVariants = cva('font-roboto text-body-sm leading-snug font-semibold l
 </script>
 
 <template>
-  <section :class="cn(sectionVariants({ tone: props.tone }), props.class)">
+  <section :class="cn('relative flex flex-col gap-tiny border border-line p-x-sm', props.class)">
+    <BaseFrameBrackets :tone="props.tone" />
     <h3 :class="cn(titleVariants({ tone: props.tone }))">
       {{ title }}
     </h3>
diff --git a/app/components/base/base-popover/BasePopover.vue b/app/components/base/base-popover/BasePopover.vue
index 6de4b3b..6dcb409 100644
--- a/app/components/base/base-popover/BasePopover.vue
+++ b/app/components/base/base-popover/BasePopover.vue
@@ -45,7 +45,7 @@ defineExpose({ close });
         update-position-strategy="always"
         :class="
           cn(
-            'z-50 flex h-[450px] max-h-[calc(100dvh-1.5rem)] w-[300px] max-w-[calc(100vw-1.5rem)] flex-col overflow-hidden bg-surface p-x-sm shadow-lg outline-none',
+            'z-50 flex h-[450px] max-h-[calc(100dvh-1.5rem)] w-[300px] max-w-[calc(100vw-1.5rem)] flex-col overflow-hidden border border-line bg-surface-container p-x-sm outline-none',
           )
         "
         @escape-key-down="close"
diff --git a/app/components/base/base-property-card/BasePropertyCard.vue b/app/components/base/base-property-card/BasePropertyCard.vue
index 14492a1..df6549d 100644
--- a/app/components/base/base-property-card/BasePropertyCard.vue
+++ b/app/components/base/base-property-card/BasePropertyCard.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import { inspectorTypography } from '../../../utils/inspector-typography.utils';
 import { cn } from '../../../utils/tailwind.utils';
+import BaseFrameBrackets from '../base-frame/BaseFrameBrackets.vue';
 import type { BasePropertyCardProps } from '.';
 
 const props = defineProps<BasePropertyCardProps>();
 </script>
 
 <template>
-  <section :class="cn('flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[#050004]', props.class)">
-    <div class="min-h-0 flex-1 overflow-y-auto">
-      <div class="flex min-h-full flex-col items-center justify-center gap-[10px] py-[7px]">
-        <h3
-          :class="
-            cn(inspectorTypography.specialSmall, 'flex h-[56px] shrink-0 items-center justify-center text-[#22FF86]')
-          "
-        >
+  <section
+    :class="cn('relative flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden border border-line', props.class)"
+  >
+    <BaseFrameBrackets />
+    <div class="min-h-0 flex-1 overflow-y-auto px-md py-md">
+      <div class="flex min-h-full flex-col gap-md">
+        <h3 :class="cn(inspectorTypography.title, 'shrink-0 text-on-surface')">
           {{ title }}
         </h3>
-        <div class="flex w-full flex-col items-center">
+        <div class="flex w-full flex-col">
           <slot />
         </div>
       </div>
diff --git a/app/components/base/base-reveal-list/BaseRevealList.vue b/app/components/base/base-reveal-list/BaseRevealList.vue
index a620b85..7432799 100644
--- a/app/components/base/base-reveal-list/BaseRevealList.vue
+++ b/app/components/base/base-reveal-list/BaseRevealList.vue
@@ -84,7 +84,7 @@ onUnmounted(() => {
   >
     <span
       ref="lineRef"
-      :class="['pointer-events-none absolute inset-y-0 left-0 w-px', active ? 'bg-accent' : 'bg-on-surface']"
+      :class="['pointer-events-none absolute inset-y-0 left-0 w-px', active ? 'bg-accent' : 'bg-line']"
       aria-hidden="true"
     />
     <div
diff --git a/app/components/base/base-scrub-field/BaseScrubField.vue b/app/components/base/base-scrub-field/BaseScrubField.vue
index 8559084..b7428d2 100644
--- a/app/components/base/base-scrub-field/BaseScrubField.vue
+++ b/app/components/base/base-scrub-field/BaseScrubField.vue
@@ -20,13 +20,11 @@ const props = withDefaults(defineProps<BaseScrubFieldProps>(), {
 
 const valueTypeClass = computed(() =>
   props.compact
-    ? 'font-inter text-body-sm font-medium tracking-normal text-white'
-    : cn(inspectorFieldTypography(props.valueTypography), 'text-white'),
+    ? cn(inspectorTypography.value, 'text-on-surface')
+    : cn(inspectorFieldTypography(props.valueTypography), 'text-on-surface'),
 );
 
-const labelTypeClass = computed(() =>
-  props.compact ? valueTypeClass.value : cn(inspectorTypography.standardMedium, 'text-white'),
-);
+const labelTypeClass = computed(() => cn(inspectorTypography.label, 'text-on-surface-dim'));
 
 const emit = defineEmits<{
   'update:modelValue': [value: string];
@@ -115,7 +113,7 @@ function onScrubUp(event: PointerEvent) {
 </script>
 
 <template>
-  <div :class="cn('flex items-center gap-[6px]', props.class)">
+  <div :class="cn('flex items-center gap-xxx-sm', props.class)">
     <span
       v-if="label.trim()"
       :class="cn(labelTypeClass, 'shrink-0')"
@@ -125,9 +123,9 @@ function onScrubUp(event: PointerEvent) {
     <div
       :class="
         cn(
-          props.compact
-            ? 'flex h-[24px] w-full min-w-0 shrink items-center justify-between bg-[color-mix(in_srgb,white_5%,#050004)] px-[4px]'
-            : 'flex h-[36px] w-full min-w-0 max-w-[90px] shrink items-center justify-between bg-[color-mix(in_srgb,white_5%,#050004)] px-[5px] py-[6px]',
+          'flex w-full min-w-0 shrink items-center justify-between border border-line bg-transparent transition-colors duration-short focus-within:border-accent hover:border-on-surface-dim',
+          props.compact ? 'h-row px-tiny' : 'h-control max-w-[10.4rem] px-xxx-sm',
+          disabled && 'border-dashed hover:border-line',
           props.fieldClass,
         )
       "
@@ -139,7 +137,10 @@ function onScrubUp(event: PointerEvent) {
           inputmode="decimal"
           :disabled="disabled"
           :class="
-            cn(valueTypeClass, 'min-w-[1ch] border-0 bg-transparent p-0 text-left outline-none disabled:opacity-50')
+            cn(
+              valueTypeClass,
+              'min-w-[1ch] border-0 bg-transparent p-0 text-left outline-none disabled:text-on-surface-dim',
+            )
           "
           :style="{ width: `${Math.max(draft.length, 1)}ch` }"
           @focus="onFocus"
@@ -149,7 +150,7 @@ function onScrubUp(event: PointerEvent) {
         />
         <span
           v-if="suffix"
-          :class="cn(valueTypeClass, 'shrink-0')"
+          :class="cn(inspectorTypography.label, 'ml-tiny shrink-0 text-on-surface-dim')"
         >
           {{ suffix }}
         </span>
@@ -159,7 +160,7 @@ function onScrubUp(event: PointerEvent) {
         type="button"
         :class="
           cn(
-            'shrink-0 cursor-ns-resize touch-none text-white',
+            'shrink-0 cursor-ns-resize touch-none text-on-surface-dim hover:text-on-surface',
             compact ? 'size-4' : 'size-6',
             fieldSuffix === 'vertical' && 'rotate-90',
           )
@@ -176,7 +177,7 @@ function onScrubUp(event: PointerEvent) {
       <button
         v-if="showLock"
         type="button"
-        class="shrink-0 text-white/10"
+        class="shrink-0 text-line"
         :class="compact ? 'size-4' : 'size-6'"
         tabindex="-1"
         aria-hidden="true"
diff --git a/app/components/base/base-select-pill/BaseSelectPill.vue b/app/components/base/base-select-pill/BaseSelectPill.vue
index 71805da..bbcace2 100644
--- a/app/components/base/base-select-pill/BaseSelectPill.vue
+++ b/app/components/base/base-select-pill/BaseSelectPill.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { cn } from '../../../utils/tailwind.utils';
+import IconChevronDown from '../../icons/IconChevronDown.vue';
 import type { BaseSelectPillProps } from '.';
 
 const props = withDefaults(defineProps<BaseSelectPillProps>(), {
@@ -20,17 +21,17 @@ function onClick(event: MouseEvent) {
 
 <template>
   <div :class="cn('flex min-w-0 flex-col', props.class)">
-    <span class="mb-[0.2rem] block font-roboto text-[10px] lowercase leading-none text-on-surface">
+    <span class="mb-x-tiny block font-mono text-label uppercase text-on-surface-dim">
       {{ label }}
     </span>
     <button
       type="button"
       :disabled="disabled"
-      class="flex h-[1.375rem] min-w-[5.5rem] items-center justify-between gap-x-sm rounded-[0.2rem] bg-surface-container px-[0.45rem] font-roboto text-[11px] leading-none text-on-surface transition-colors hover:bg-surface-container/90 disabled:opacity-50"
+      class="flex h-control min-w-[14.4rem] items-center justify-between gap-xxx-sm border border-line bg-transparent px-xxx-sm font-sans text-body-sm text-on-surface transition-colors duration-short hover:border-on-surface-dim focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:border-dashed disabled:text-on-surface-dim"
       @click="onClick"
     >
-      <span class="truncate lowercase">{{ value }}</span>
-      <span class="text-[10px] text-on-surface-dim">&gt;</span>
+      <span class="truncate">{{ value }}</span>
+      <IconChevronDown class="size-md text-on-surface-dim" />
     </button>
   </div>
 </template>
diff --git a/app/components/base/base-text-button/BaseTextButton.vue b/app/components/base/base-text-button/BaseTextButton.vue
index 1fdb8f1..1da301a 100644
--- a/app/components/base/base-text-button/BaseTextButton.vue
+++ b/app/components/base/base-text-button/BaseTextButton.vue
@@ -105,7 +105,12 @@ function onClick(event: MouseEvent) {
     :disabled="disabled"
     :aria-disabled="disabled"
     :aria-current="active ? 'page' : undefined"
-    :class="cn('font-sans text-body-md font-medium', props.class)"
+    :class="
+      cn(
+        'font-sans text-body-md font-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed',
+        props.class,
+      )
+    "
     @click="onClick"
     @pointerenter="onPointerEnter"
     @pointerleave="onPointerLeave"
diff --git a/app/components/base/base-toggle-dot/BaseToggleDot.vue b/app/components/base/base-toggle-dot/BaseToggleDot.vue
index 8c44ba5..7dbd84c 100644
--- a/app/components/base/base-toggle-dot/BaseToggleDot.vue
+++ b/app/components/base/base-toggle-dot/BaseToggleDot.vue
@@ -27,8 +27,8 @@ function toggle() {
     <span
       :class="
         props.labelTypography === 'inspector'
-          ? 'font-inter text-body-sm font-medium tracking-normal text-white'
-          : 'font-roboto text-body-x-sm lowercase leading-none text-on-surface-dim'
+          ? 'font-sans text-body-sm font-normal text-on-surface'
+          : 'font-mono text-label uppercase text-on-surface-dim'
       "
     >
       {{ label }}
@@ -37,14 +37,15 @@ function toggle() {
       type="button"
       role="switch"
       :aria-checked="modelValue"
+      :aria-label="label"
       :disabled="disabled"
-      class="flex size-5 shrink-0 items-center justify-center rounded-full border border-on-surface-dim/40 transition-colors disabled:opacity-50"
-      :class="modelValue ? 'border-accent' : ''"
+      class="flex size-x-lg shrink-0 items-center justify-center border transition-colors duration-short focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:border-dashed"
+      :class="modelValue ? 'border-accent' : 'border-on-surface-dim'"
       @click="toggle"
     >
       <span
-        class="size-2 rounded-full transition-colors"
-        :class="modelValue ? 'bg-accent' : 'bg-transparent'"
+        class="size-xx-sm transition-colors duration-short"
+        :class="modelValue ? (disabled ? 'bg-on-surface-dim' : 'bg-accent') : 'bg-transparent'"
       />
     </button>
   </div>
diff --git a/app/components/base/base-tree-item/BaseTreeItem.vue b/app/components/base/base-tree-item/BaseTreeItem.vue
index 5616a69..b4b69de 100644
--- a/app/components/base/base-tree-item/BaseTreeItem.vue
+++ b/app/components/base/base-tree-item/BaseTreeItem.vue
@@ -22,7 +22,7 @@ const rowClass = computed(() =>
 
 const labelClass = computed(() =>
   cn(
-    'min-w-0 flex-1 truncate text-left font-roboto font-medium transition-colors duration-short',
+    'min-w-0 flex-1 truncate text-left font-sans font-normal transition-colors duration-short',
     props.dense ? 'py-xx-sm text-body-sm' : 'text-body-md',
     props.selected ? 'text-accent' : 'text-on-surface',
     props.interactiveLabel &&
diff --git a/app/components/base/base-value-field/BaseValueField.vue b/app/components/base/base-value-field/BaseValueField.vue
index 185b971..58a2c5c 100644
--- a/app/components/base/base-value-field/BaseValueField.vue
+++ b/app/components/base/base-value-field/BaseValueField.vue
@@ -37,17 +37,17 @@ function onChange(event: Event) {
 </script>
 
 <template>
-  <div :class="cn('flex items-center gap-[6px]', props.class)">
+  <div :class="cn('flex items-center gap-xxx-sm', props.class)">
     <span
       v-if="label.trim()"
-      :class="cn(inspectorTypography.standardMedium, 'shrink-0 text-white')"
+      :class="cn(inspectorTypography.label, 'shrink-0 text-on-surface-dim')"
     >
       {{ label }}
     </span>
     <div
       :class="
         cn(
-          'flex h-[36px] w-full min-w-0 max-w-[90px] shrink items-center justify-between bg-[color-mix(in_srgb,white_5%,#050004)] px-[5px] py-[6px]',
+          'flex h-control w-full min-w-0 max-w-[10.4rem] shrink items-center justify-between border border-line px-xxx-sm transition-colors duration-short focus-within:border-accent hover:border-on-surface-dim',
           props.fieldClass,
         )
       "
@@ -60,7 +60,7 @@ function onChange(event: Event) {
         :class="
           cn(
             valueTypeClass,
-            'min-w-0 flex-1 border-0 bg-transparent p-0 text-left text-white outline-none disabled:opacity-50',
+            'min-w-0 flex-1 border-0 bg-transparent p-0 text-left text-on-surface outline-none disabled:text-on-surface-dim',
           )
         "
         @input="onInput"
@@ -68,26 +68,26 @@ function onChange(event: Event) {
       />
       <span
         v-if="suffix"
-        :class="cn(valueTypeClass, 'shrink-0 text-white')"
+        :class="cn(inspectorTypography.label, 'shrink-0 text-on-surface-dim')"
       >
         {{ suffix }}
       </span>
       <span
         v-if="fieldSuffix === 'horizontal'"
-        class="size-6 shrink-0 text-white"
+        class="size-md shrink-0 text-on-surface-dim"
       >
         <IconInspectorArrowH />
       </span>
       <span
         v-else-if="fieldSuffix === 'vertical'"
-        class="size-6 shrink-0 rotate-90 text-white"
+        class="size-md shrink-0 rotate-90 text-on-surface-dim"
       >
         <IconInspectorArrowH />
       </span>
       <button
         v-if="showLock"
         type="button"
-        class="size-6 shrink-0 text-white/10"
+        class="size-md shrink-0 text-line"
         tabindex="-1"
         aria-hidden="true"
         @click="emit('lock-click')"
diff --git a/app/components/icons/inspector/IconInspectorEyeFilled.vue b/app/components/icons/inspector/IconInspectorEyeFilled.vue
index d100def..62d6db8 100644
--- a/app/components/icons/inspector/IconInspectorEyeFilled.vue
+++ b/app/components/icons/inspector/IconInspectorEyeFilled.vue
@@ -13,7 +13,7 @@
       cx="13.5"
       cy="13.5"
       r="2.1"
-      fill="#050004"
+      fill="rgb(var(--color-surface))"
     />
   </svg>
 </template>
diff --git a/app/components/icons/inspector/IconInspectorLockOpenFilled.vue b/app/components/icons/inspector/IconInspectorLockOpenFilled.vue
index 56c9def..8d081f5 100644
--- a/app/components/icons/inspector/IconInspectorLockOpenFilled.vue
+++ b/app/components/icons/inspector/IconInspectorLockOpenFilled.vue
@@ -13,7 +13,7 @@
       cx="13.5"
       cy="17.2"
       r="1.3"
-      fill="#050004"
+      fill="rgb(var(--color-surface))"
     />
   </svg>
 </template>
diff --git a/sandbox/app/pages/index.vue b/sandbox/app/pages/index.vue
index 5b336e9..47cbbad 100644
--- a/sandbox/app/pages/index.vue
+++ b/sandbox/app/pages/index.vue
@@ -24,8 +24,8 @@ const cursorOn = ref(true);
 </script>
 
 <template>
-  <div class="min-h-[100dvh] bg-surface p-lg font-roboto text-on-surface">
-    <h1 class="mb-lg text-center text-heading-sm">Property inspector primitives</h1>
+  <div class="min-h-[100dvh] bg-surface p-lg font-sans text-on-surface">
+    <h1 class="mb-lg text-center text-title font-light">Property inspector primitives</h1>
 
     <div class="mx-auto flex max-w-5xl flex-col gap-lg">
       <BasePropertyCard title="screen">
@@ -135,7 +135,7 @@ const cursorOn = ref(true);
           <BaseColorSwatch v-model="color" />
         </div>
         <div class="mt-xx-sm flex flex-wrap items-end gap-md">
-          <span class="font-roboto text-body-x-sm lowercase text-accent">space</span>
+          <span class="font-mono text-label uppercase text-accent">space</span>
           <BaseValueField
             v-model="letterSpacing"
             label="letters"

From 0382716c63977e4194883ff07103f1aac690ce58 Mon Sep 17 00:00:00 2001
From: Mateusz Basiaga <basmateusz@wp.pl>
Date: Sat, 14 Nov 2026 03:01:02 +0100
Subject: [PATCH 4/4] docs: describe the Orbit tokens and UI rules

---
 .ai/docs/design-tokens.md   |  5 +++--
 .ai/docs/ui-design-rules.md | 37 +++++++++++++++++++------------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/.ai/docs/design-tokens.md b/.ai/docs/design-tokens.md
index 931d231..b302fcb 100644
--- a/.ai/docs/design-tokens.md
+++ b/.ai/docs/design-tokens.md
@@ -10,8 +10,9 @@ Tokens are the single source of truth for shared visual values used by Moonbase
 
 ## Source of Truth
 
-- Core token definitions are stored in `app/assets/css/tokens.css`.
-- Tailwind token mapping and scale extensions are configured in `tailwind.config.ts`.
+- The design source is the **MoonBase Studio Design System** (claude.ai artifact, direction "Orbit", `tokens.json` v2). It is shared with the Moonbase Commander 7" screen (`electronics/moonbase-commander/docs/ekran-7.md`, section 2). Change values there first, then mirror them here.
+- Core token definitions are stored in `app/assets/css/tokens.css` (one dark theme; `accent` = signal, `surface-container` = panel, `surface-container-high` = raised, `line`).
+- Tailwind token mapping and scale extensions are configured in `tailwind.config.ts` (Space Grotesk / Space Mono / Lalezar, Orbit type scale, radius 0, size tokens `bar`, `control`, `row`, `bracket`, `key`).
 - Extra Tailwind behavior can be added in `tailwind/plugins/*` (for example root font sizing).
 
 ---
diff --git a/.ai/docs/ui-design-rules.md b/.ai/docs/ui-design-rules.md
index 15a3385..50c2034 100644
--- a/.ai/docs/ui-design-rules.md
+++ b/.ai/docs/ui-design-rules.md
@@ -30,7 +30,7 @@ Inconsistent UI is a defect. Visual and behavioral patterns must be uniform acro
   - `hover` — visible, subtle feedback
   - `focus` — clearly visible focus ring (never removed, only styled)
   - `active` / `pressed` — immediate visual response
-  - `disabled` — reduced opacity, no pointer events, cursor `not-allowed`
+  - `disabled` — `text-on-surface-dim`, dashed border, no pointer events, cursor `not-allowed` (no opacity)
 - Do not mix token-based values with hardcoded values within the same component.
 
 ---
@@ -54,29 +54,30 @@ Tailwind is the **only** permitted styling system. All visual output must be exp
 - Do not use default Tailwind spacing numerics (e.g. `p-4`, `gap-2`) — they are overridden by the project scale.
 - `1rem = 10px` in this project due to the `root-font-size` plugin.
 
-### Typography
+### Typography (Orbit)
 
-- Use the semantic font size scale: `text-heading-x-huge`, `text-heading-x-lg`, `text-heading-lg`, `text-heading-md`, `text-body-lg`, `text-body-md`, `text-body-sm`, `text-body-x-sm`.
-- Font families: `font-roboto` for all UI text; `font-arlon` for brand/logo elements only.
-- Font weights: `font-normal` (400), `font-medium` (500), `font-semibold` (600).
-- Letter spacing: use `tracking-x-sm` through `tracking-xx-lg` from the defined scale.
+- Families: `font-sans` (Space Grotesk) for all UI text; `font-mono` (Space Mono) for labels, units, group headings and state words, always `uppercase`; `font-brand` (Lalezar) for the MoonBase wordmark only.
+- Weights: `font-light` (300) for sizes ≥ 20px (titles, large numbers), `font-normal` (400) for text, `font-bold` (700) only for state values (`text-state`). Do not use 500 or 600.
+- Size scale: `text-display` (96), `text-numeric-xl` (120), `text-numeric-lg` (48), `text-title` (28), `text-numeric-md` (20), `text-body-lg` (18), `text-body-md` (16), `text-body-sm` (14), `text-body-x-sm` (12, the minimum), `text-state` (14/700), `text-label` (12 mono, 0.14em), `text-label-lg` (14 mono, 0.12em), `text-brand-logo` (28 Lalezar).
+- Numbers always get `tabular-nums`.
+- The inspector uses `inspectorTypography` (`title`, `valueLarge`, `value`, `body`, `label`) from `app/utils/inspector-typography.utils.ts`. Those styles do not include color.
 - Never hardcode `font-size`, `line-height`, or `font-family` values.
-- The layer properties inspector uses the Figma Special/Standard scale instead of the Roboto body scale: `font-lalezar` with `text-special-high` (48px), `text-special-medium` (40px), `text-special-small` (36px), and `font-inter` with `text-standard-high` (24px), `text-standard-medium` (20px), `text-standard-small` (16px). Prefer `inspectorTypography` from `app/utils/inspector-typography.utils.ts`. Those styles do not include color. The rest of the studio chrome keeps `text-body-*` and `font-roboto`.
 
-### Color Usage
+### Color Usage (Orbit)
 
-- Use semantic color tokens only. Never use Tailwind's default palette (e.g. `bg-blue-500`).
-- Surface colors: `bg-surface`, `bg-surface-container`, `bg-surface-inverted`.
-- Text colors: `text-on-surface`, `text-on-surface-dim`, `text-on-surface-inverted`.
-- Accent: `bg-accent`, `text-accent`, `bg-accent-dim`, `text-accent-dim`.
-- Semantic: `bg-info`, `bg-warning`, `bg-error`, `bg-success` (and their `-container` variants).
-- Opacity modifiers are allowed: `bg-accent/80`, `text-error/30`.
-- Theme is applied via `theme-light`, `theme-dark`, or `theme-blue` on `<html>` — do not override theme-sensitive tokens per component.
+- Use semantic color tokens only. Never use Tailwind's default palette (e.g. `bg-blue-500`) or hex values.
+- One dark theme. `bg-surface` is the page; a block is `border border-line`, not a filled panel. `bg-surface-container` (panel) only for overlays (menus, dialogs, popovers) and hardware keys. `bg-surface-container-high` (raised) for hover rows and unlit segments.
+- Text: `text-on-surface`; labels, units and disabled: `text-on-surface-dim`; on green fills: `text-on-accent`.
+- `accent` is the signal green: live, active, selected, focus, corner brackets. It is a stroke, dot, segment or number — a fill only for “Start / Resume” and the on-air key. Hover/pressed: `accent-dim`.
+- Semantic: `warning`, `error`, `info` (`success` equals `accent`). Every state also carries a word or icon.
+- Element categories (Studio): `category-layout`, `category-interactive` (`category-interactive-fill` for hover).
+- Avoid opacity modifiers and transparency; disabled is `text-on-surface-dim` plus a dashed border, not `opacity-50`.
+- Active blocks get corner brackets: `BaseFrame active` or `BaseFrameBrackets`.
 
-### Border Radius
+### Border Radius (Orbit)
 
-- Use the defined scale: `rounded-none`, `rounded-x-sm`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-full`.
-- Do not use Tailwind's default radius values (e.g. `rounded`, `rounded-2xl`).
+- No rounding: every radius token is 0. `rounded-full` only for the status dot (`BaseStatusBadge`).
+- No shadows, gradients, blur or glass. The boot screen is the only exception.
 
 ### Transitions