Unify font sizes through qs.Commons.Style

Themes now drive typography the same way they drive colors: one [font]
base-size in shell.toml is the rem root, and every Style.font.<token>
(caption, bodySmall, body, subtitle, title, heading, display,
displayLarge, iconSmall, icon, iconLarge) derives from it via a fixed
multiplier. Themes can also pin individual tokens for stylistic
emphasis. base-size is clamped 11..13 until row-height tokens exist.

Bar dimensions move to the same singleton: [bar] size-horizontal /
size-vertical replace the hardcoded 26/28 in Bar.qml, exposed as
Style.bar.sizeHorizontal / sizeVertical.

Style.qml also resolves the fontconfig 'monospace' alias via fc-match
and exposes Style.font.resolvedFamily so panels can display the
concrete family. Watches ~/.config/fontconfig/fonts.conf so it tracks
'omarchy font set <name>'.

The qs.Ui kit (PillButton, Dropdown, Toggle, TextField, etc.) and
every first-party plugin (bar widgets, settings, menu, clipboard,
emoji, polkit, notifications, osd, image-picker, dev-gallery) now
bind to Style.font.* instead of pixel literals. Only three deliberate
display-scale outliers remain: the notification empty-state glyph and
the weather flyout's hero temperature pair, all commented.

Background plugin's applyTheme IPC fast-path also pushes shell.toml to
Style so theme swaps update typography and bar size without waiting
for inotify debounce.

Dev gallery (omarchy dev ui-preview) now ships a Typography section
that renders the full scale and theme tokens live, and its summon
command is fixed (omarchy-shell-ipc -> omarchy-shell).

bin/omarchy-dev-ui-preview

@@ -2,4 +2,4 @@
 
 # omarchy:summary=Open the omarchy-shell dev gallery (qs.Ui kit preview)
 
-omarchy-shell-ipc shell summon omarchy.dev-gallery '{}'
+omarchy-shell shell summon omarchy.dev-gallery '{}'

default/themed/shell.toml.tpl

@@ -1,11 +1,37 @@
-# Omarchy shell colors. Defaults derive from colors.toml; themes can ship
+# Omarchy shell surfaces. Colors derive from colors.toml; sizes and the
-# themes/<name>/shell.toml to override individual keys.
+# typographic scale come from the keys below. Themes can ship
+# themes/<name>/shell.toml to override any individual key.
 
 [bar]
 background = "{{ background }}"
 text       = "{{ foreground }}"
 # Modules calling attention to themselves (recording, voxtype, alerts, updates)
 active     = "{{ color1 }}"
+# Cross-axis size in px. size-horizontal is the height of top/bottom bars;
+# size-vertical is the width of left/right bars.
+size-horizontal = 26
+size-vertical   = 28
+
+[font]
+# base-size is the rem root for the type scale. Every Style.font.<token>
+# derives from it (e.g. body = base, subtitle ≈ base * 1.083,
+# heading ≈ base * 1.333). Clamped 11..13 by the shell — row heights are
+# fixed until we ship matching spacing tokens, so growth would clip.
+base-size = 12
+# Per-token overrides, in px. Uncomment any to pin a specific size without
+# affecting the rest of the scale. Useful for stylistic emphasis (a
+# minimalist theme that wants a bigger heading without scaling everything).
+# caption       = 10
+# body-small    = 11
+# body          = 12
+# subtitle      = 13
+# title         = 14
+# heading       = 16
+# display       = 24
+# display-large = 28
+# icon-small    = 11
+# icon          = 14
+# icon-large    = 18
 
 [popups]
 # Shared by every bar flyout. Body text inside flyouts is not separately

docs/omarchy-shell.md

@@ -99,6 +99,80 @@ Rules:
 user `shell.json` exists, defaults are used verbatim. Once the user
 customizes, `shell.json` is canonical — there is no deep-merge.
 
+## Theme tokens
+
+Themes ship colors in `themes/<name>/colors.toml` and surface roles +
+sizing in `themes/<name>/shell.toml`. Defaults are generated from
+`default/themed/shell.toml.tpl`; a theme may also drop a hand-written
+`shell.toml` next to its `colors.toml` to override individual keys.
+
+The shell exposes these tokens to QML via two singletons in
+`qs.Commons`:
+
+- `Color` — palette (`foreground`, `background`, `accent`, `urgent`)
+  and per-surface roles (`Color.bar.*`, `Color.popups.*`,
+  `Color.notifications.*`, `Color.menu.*`, `Color.imagePicker.*`).
+- `Style` — structural tokens (`cornerRadius`, focus affordances),
+  the type scale (`Style.font.*`), and bar dimensions
+  (`Style.bar.sizeHorizontal` / `Style.bar.sizeVertical`).
+
+### Typography
+
+`[font] base-size` is the rem root for the scale. Every
+`Style.font.<token>` derives from it via a fixed multiplier, so
+bumping `base-size` rescales the whole shell proportionally:
+
+| Token                 | Multiplier | Default |
+|-----------------------|------------|---------|
+| `Style.font.caption`      | 0.833 | 10 |
+| `Style.font.bodySmall`    | 0.917 | 11 |
+| `Style.font.body`         | 1.0   | 12 |
+| `Style.font.subtitle`     | 1.083 | 13 |
+| `Style.font.title`        | 1.167 | 14 |
+| `Style.font.heading`      | 1.333 | 16 |
+| `Style.font.display`      | 2.0   | 24 |
+| `Style.font.displayLarge` | 2.333 | 28 |
+| `Style.font.iconSmall`    | bodySmall | 11 |
+| `Style.font.icon`         | title     | 14 |
+| `Style.font.iconLarge`    | 1.5       | 18 |
+
+A theme can either scale everything by tweaking `base-size`:
+
+```toml
+[font]
+base-size = 13   # roomier
+```
+
+…or pin individual tokens for stylistic emphasis without affecting
+the rest of the scale:
+
+```toml
+[font]
+base-size = 12
+heading       = 20
+display-large = 36
+```
+
+Recognized override keys: `base-size`, `caption`, `body-small`,
+`body`, `subtitle`, `title`, `heading`, `display`, `display-large`,
+`icon-small`, `icon`, `icon-large`.
+
+`base-size` is clamped to **11..13** because row heights and the bar
+cross-axis size are fixed; per-token overrides aren't clamped. The
+shell font family is the fontconfig `monospace` alias — themes don't
+set it, the user does via `omarchy font set <name>`.
+
+### Bar size
+
+`[bar] size-horizontal` / `size-vertical` set the cross-axis dimension
+of top/bottom and left/right bars respectively (in px):
+
+```toml
+[bar]
+size-horizontal = 26   # top/bottom bar height
+size-vertical   = 28   # left/right bar width
+```
+
 ## Custom bar modules
 
 If a full plugin is overkill, declare a one-off module inline in

shell/Commons/Style.qml

@@ -4,9 +4,9 @@ import Quickshell
 import Quickshell.Io
 
 // Shared structural style tokens for the shell. Color is the palette
-// singleton; Style holds the *shape* and *focus-affordance* tokens that
+// singleton; Style holds everything else themes can influence — corner
-// every panel surface and qs.Ui component should bind to so they stay
+// rounding, focus affordances, typography scale, and bar dimensions —
-// in sync as the user toggles round/sharp corners or as themes change.
+// so panels and qs.Ui components have a single source of truth.
 //
 // `cornerRadius` mirrors Hyprland's `decoration:rounding`. Themes ship
 // their own rounding via theme/hyprland.lua; the user toggle via
@@ -15,9 +15,11 @@ import Quickshell.Io
 // up the change here by re-running `hyprctl getoption` whenever either
 // of those input files changes.
 //
-// Single source of truth lives in Hyprland; the shell follows. That
+// Typography and bar size come from `theme/shell.toml`. `[font] base-size`
-// means a theme that ships `rounding = 10` gives us 10px panels by
+// is the rem root; every `Style.font.<token>` derives from it via the
-// default, and the round/sharp user toggle still works on top of it.
+// scale multipliers below unless the theme pins that specific token.
+// `[bar] size-horizontal` / `size-vertical` set the cross-axis dimension
+// for top/bottom and left/right bars respectively.
 QtObject {
   id: root
 
@@ -36,6 +38,69 @@ QtObject {
   readonly property color hotFill: Qt.rgba(Color.foreground.r, Color.foreground.g, Color.foreground.b, 0.08)
   readonly property color selectedFill: Qt.rgba(Color.foreground.r, Color.foreground.g, Color.foreground.b, 0.18)
 
+  // ---------------------------------------------------------- typography
+  //
+  // `fontFamily` defaults to "monospace" so the bar and every qs.Ui
+  // component follows the fontconfig alias `omarchy-font-set` writes.
+  // Themes can override per-token via [font] in shell.toml, but the
+  // family stays system-wide.
+  property string fontFamily: "monospace"
+
+  // The concrete family `monospace` resolves to right now, e.g.
+  // "JetBrainsMono Nerd Font". Bind `font.family` to `fontFamily` (so the
+  // alias path keeps working when the user runs `omarchy font set`), but
+  // read `resolvedFontFamily` when you want to *display* what's drawing.
+  property string resolvedFontFamily: "monospace"
+
+  // Clamped 11..13 by loadShell — bar height and row heights are fixed
+  // until we ship matching spacing tokens, so unbounded growth clips.
+  property int fontBaseSize: 12
+
+  // Parsed maps populated by loadShell. Keep them as plain dicts so
+  // reassigning the whole property fires reactive bindings.
+  property var fontOverrides: ({})
+  property var barOverrides: ({})
+
+  function fontPx(mult) {
+    return Math.max(1, Math.round(fontBaseSize * mult))
+  }
+
+  function fontToken(key, fallback) {
+    var v = fontOverrides[key]
+    var n = Number(v)
+    return (isFinite(n) && n > 0) ? Math.round(n) : fallback
+  }
+
+  function barToken(key, fallback) {
+    var v = barOverrides[key]
+    var n = Number(v)
+    return (isFinite(n) && n > 0) ? Math.round(n) : fallback
+  }
+
+  readonly property QtObject font: QtObject {
+    readonly property string family: root.fontFamily
+    readonly property string resolvedFamily: root.resolvedFontFamily
+    readonly property int baseSize: root.fontBaseSize
+
+    readonly property int caption:      root.fontToken("caption",       root.fontPx(0.833))   // 10
+    readonly property int bodySmall:    root.fontToken("body-small",    root.fontPx(0.917))   // 11
+    readonly property int body:         root.fontToken("body",          root.fontPx(1.0))     // 12
+    readonly property int subtitle:     root.fontToken("subtitle",      root.fontPx(1.083))   // 13
+    readonly property int title:        root.fontToken("title",         root.fontPx(1.167))   // 14
+    readonly property int heading:      root.fontToken("heading",       root.fontPx(1.333))   // 16
+    readonly property int display:      root.fontToken("display",       root.fontPx(2.0))     // 24
+    readonly property int displayLarge: root.fontToken("display-large", root.fontPx(2.333))   // 28
+
+    readonly property int iconSmall:    root.fontToken("icon-small",    bodySmall)
+    readonly property int icon:         root.fontToken("icon",          title)
+    readonly property int iconLarge:    root.fontToken("icon-large",    root.fontPx(1.5))     // 18
+  }
+
+  readonly property QtObject bar: QtObject {
+    readonly property int sizeHorizontal: root.barToken("size-horizontal", 26)
+    readonly property int sizeVertical:   root.barToken("size-vertical",   28)
+  }
+
   function refresh() {
     hyprctlProc.running = true
   }
@@ -50,6 +115,43 @@ QtObject {
     }
   }
 
+  // Parse [font] base-size + per-token overrides and [bar] size-* keys
+  // out of shell.toml. Color.qml owns the quoted-string side of the same
+  // file; we only care about the unquoted integer values here.
+  function loadShell(raw) {
+    var fontOut = {}
+    var barOut = {}
+    var nextBase = 12
+    var text = String(raw || "")
+    if (text) {
+      var lines = text.split("\n")
+      var section = ""
+      for (var i = 0; i < lines.length; i++) {
+        var line = lines[i].replace(/^\s+|\s+$/g, "")
+        if (!line || line.charAt(0) === "#") continue
+        var sectionMatch = line.match(/^\[([A-Za-z0-9_-]+)\]\s*(#.*)?$/)
+        if (sectionMatch) { section = sectionMatch[1]; continue }
+        var kv = line.match(/^([A-Za-z0-9_-]+)\s*=\s*(-?\d+)\s*(#.*)?$/)
+        if (!kv) continue
+        var key = kv[1]
+        var val = parseInt(kv[2], 10)
+        if (section === "font") {
+          if (key === "base-size") nextBase = val
+          else fontOut[key] = val
+        } else if (section === "bar" && (key === "size-horizontal" || key === "size-vertical")) {
+          barOut[key] = val
+        }
+      }
+    }
+    // Clamp the rem root. Per-token overrides aren't clamped — a theme
+    // that wants display-large = 64 should be allowed to ship it.
+    if (nextBase < 11) nextBase = 11
+    if (nextBase > 13) nextBase = 13
+    fontBaseSize = nextBase
+    fontOverrides = fontOut
+    barOverrides = barOut
+  }
+
   property Process hyprctlProc: Process {
     id: hyprctlProc
     command: ["hyprctl", "-j", "getoption", "decoration:rounding"]
@@ -59,6 +161,34 @@ QtObject {
     }
   }
 
+  // Resolve the fontconfig alias to a concrete family name. `omarchy font
+  // set <name>` rewrites ~/.config/fontconfig/fonts.conf and restarts the
+  // shell, but rerun on file change anyway so manual edits propagate too.
+  function resolveFontFamily() {
+    fcMatchProc.running = true
+  }
+
+  property Process fcMatchProc: Process {
+    id: fcMatchProc
+    command: ["fc-match", "-f", "%{family[0]}", "monospace"]
+    stdout: StdioCollector {
+      waitForEnd: true
+      onStreamFinished: {
+        var name = String(text || "").trim()
+        if (name.length > 0) root.resolvedFontFamily = name
+      }
+    }
+  }
+
+  property FileView fontconfigFile: FileView {
+    path: Quickshell.env("HOME") + "/.config/fontconfig/fonts.conf"
+    watchChanges: true
+    printErrors: false
+    onFileChanged: root.resolveFontFamily()
+    onLoaded: root.resolveFontFamily()
+    onLoadFailed: root.resolveFontFamily()
+  }
+
   // Re-poll Hyprland a beat after either input file changes. Hyprland's
   // auto-reload runs asynchronously when its sourced .lua files change,
   // so racing it with an immediate hyprctl gives the old value. 200ms is
@@ -71,12 +201,18 @@ QtObject {
   }
 
   // The theme name flips whenever `omarchy-theme-set` swaps the theme/
-  // symlink; that's when theme/hyprland.lua's `rounding` value changes.
+  // symlink; that's when theme/hyprland.lua's `rounding` value changes
+  // and the new theme/shell.toml drops into place. Force a reload of
+  // shell.toml here so we don't wait on the inotify watch — Color.qml
+  // uses the same tripwire for the same reason.
   property FileView themeNameFile: FileView {
     path: Quickshell.env("HOME") + "/.config/omarchy/current/theme.name"
     watchChanges: true
     printErrors: false
-    onFileChanged: refreshTimer.restart()
+    onFileChanged: {
+      refreshTimer.restart()
+      shellTomlFile.reload()
+    }
   }
 
   // `omarchy style corners <round|sharp>` creates or removes this flag file.
@@ -91,5 +227,18 @@ QtObject {
     onLoadFailed: refreshTimer.restart()
   }
 
-  Component.onCompleted: refresh()
+  property FileView shellTomlFile: FileView {
+    id: shellTomlFile
+    path: Quickshell.env("HOME") + "/.config/omarchy/current/theme/shell.toml"
+    watchChanges: true
+    printErrors: false
+    onLoaded: root.loadShell(text())
+    onLoadFailed: root.loadShell("")
+    onFileChanged: reload()
+  }
+
+  Component.onCompleted: {
+    refresh()
+    resolveFontFamily()
+  }
 }

shell/Ui/ChoiceButton.qml

@@ -26,8 +26,8 @@ Rectangle {
   property color foreground: Color.foreground
   property color background: Color.background
   property color accent: Color.accent
-  property string fontFamily: "monospace"
+  property string fontFamily: Style.font.family
-  property real fontSize: 12
+  property real fontSize: Style.font.body
 
   signal clicked()
   signal hovered(bool isHovered)

shell/Ui/Dropdown.qml

@@ -26,7 +26,7 @@ Item {
   property color background: Color.popups.background
   property color popupBorder: Color.popups.border
   property color accent: Color.accent
-  property string fontFamily: "JetBrainsMono Nerd Font"
+  property string fontFamily: Style.font.family
   property int rowHeight: 28
   property int popupRowHeight: 28
   property bool showLabel: true
@@ -74,7 +74,7 @@ Item {
       text: root.label
       color: Qt.darker(root.foreground, 1.4)
       font.family: root.fontFamily
-      font.pixelSize: 10
+      font.pixelSize: Style.font.caption
       font.bold: true
     }
 
@@ -118,7 +118,7 @@ Item {
         text: root.currentLabel()
         color: root.foreground
         font.family: root.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
         elide: Text.ElideRight
       }
 
@@ -130,7 +130,7 @@ Item {
         text: "󰅀"
         color: Qt.darker(root.foreground, 1.2)
         font.family: root.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
       }
 
       MouseArea {
@@ -219,7 +219,7 @@ Item {
               text: root.optionLabel(modelData)
               color: index === optionList.currentIndex ? root.accent : root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 12
+              font.pixelSize: Style.font.body
               elide: Text.ElideRight
             }
 

shell/Ui/NumberField.qml

@@ -12,8 +12,8 @@ Column {
   property int stepSize: 1
   property color foreground: Color.foreground
   property color accent: Color.accent
-  property string fontFamily: "JetBrainsMono Nerd Font"
+  property string fontFamily: Style.font.family
-  property real fontSize: 12
+  property real fontSize: Style.font.body
   property real fieldWidth: 120
   property bool hasCursor: false
   property alias field: spin
@@ -28,7 +28,7 @@ Column {
     text: root.label
     color: Qt.darker(root.foreground, 1.4)
     font.family: root.fontFamily
-    font.pixelSize: 11
+    font.pixelSize: Style.font.bodySmall
   }
 
   QQC.SpinBox {

shell/Ui/PanelActionButton.qml

@@ -29,11 +29,11 @@ Rectangle {
 
   property string iconText: ""
   property string tooltipText: ""
-  property color foreground: "#cacccc"
+  property color foreground: Color.foreground
   property color hoverColor: foreground
-  property color panelBackground: "#101315"
+  property color panelBackground: Color.background
-  property string fontFamily: "JetBrainsMono Nerd Font"
+  property string fontFamily: Style.font.family
-  property real fontSize: 14
+  property real fontSize: Style.font.icon
   property real size: 22
 
   property bool focusable: false

shell/Ui/PanelSectionHeader.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import qs.Commons
 
 // Small-caps-style label that introduces a panel section ("DNS provider",
 // "Wi-Fi networks", "Output device", "Paired devices"). Sits between a
@@ -6,9 +7,9 @@ import QtQuick
 Text {
   id: root
 
-  property color foreground: "#cacccc"
+  property color foreground: Color.foreground
-  property string fontFamily: "JetBrainsMono Nerd Font"
+  property string fontFamily: Style.font.family
-  property real fontSize: 10
+  property real fontSize: Style.font.caption
 
   color: Qt.darker(foreground, 1.4)
   font.family: fontFamily

shell/Ui/PanelToolTip.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import qs.Commons
 
 // Styled wrapper around Qt Quick Controls ToolTip. Drop-in: declare inside
 // the hovered item and bind `visible` to the hover state, e.g.
@@ -16,10 +17,10 @@ import QtQuick.Controls
 ToolTip {
   id: root
 
-  property color panelForeground: "#cacccc"
+  property color panelForeground: Color.foreground
-  property color panelBackground: "#101315"
+  property color panelBackground: Color.background
-  property string fontFamily: "JetBrainsMono Nerd Font"
+  property string fontFamily: Style.font.family
-  property real fontSize: 11
+  property real fontSize: Style.font.bodySmall
 
   delay: 400
   padding: 0

shell/Ui/PillButton.qml

@@ -8,15 +8,15 @@ Rectangle {
   property string text: ""
   property string iconText: ""
   property string tooltipText: ""
-  property color foreground: "#cacccc"
+  property color foreground: Color.foreground
   property color background: "transparent"
   property color hoverBackground: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.08)
   property color pressedBackground: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.22)
-  property color tooltipBackground: "#101315"
+  property color tooltipBackground: Color.background
   property color tooltipForeground: foreground
-  property string fontFamily: "JetBrainsMono Nerd Font"
+  property string fontFamily: Style.font.family
-  property real fontSize: 12
+  property real fontSize: Style.font.body
-  property real iconSize: 14
+  property real iconSize: Style.font.icon
   property real iconRotation: 0
   property real horizontalPadding: 10
   property real verticalPadding: 6
@@ -66,7 +66,7 @@ Rectangle {
       text: root.tooltipText
       color: root.tooltipForeground
       font.family: root.fontFamily
-      font.pixelSize: 11
+      font.pixelSize: Style.font.bodySmall
       leftPadding: 10
       rightPadding: 10
       topPadding: 6

shell/Ui/SearchableDropdown.qml

@@ -29,7 +29,7 @@ Item {
   property color background: Color.popups.background
   property color popupBorder: Color.popups.border
   property color accent: Color.accent
-  property string fontFamily: "JetBrainsMono Nerd Font"
+  property string fontFamily: Style.font.family
   property int rowHeight: 28
   property int popupRowHeight: 28
   property int popupMinHeight: 220
@@ -96,7 +96,7 @@ Item {
       text: root.label
       color: Qt.darker(root.foreground, 1.4)
       font.family: root.fontFamily
-      font.pixelSize: 10
+      font.pixelSize: Style.font.caption
       font.bold: true
     }
 
@@ -140,7 +140,7 @@ Item {
         text: root.currentLabel() || root.triggerLabel || root.placeholderText
         color: (root.currentLabel() || root.triggerLabel) ? root.foreground : Qt.darker(root.foreground, 1.5)
         font.family: root.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
         elide: Text.ElideRight
       }
 
@@ -152,7 +152,7 @@ Item {
         text: "󰅀"
         color: Qt.darker(root.foreground, 1.2)
         font.family: root.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
       }
 
       MouseArea {
@@ -204,7 +204,7 @@ Item {
               foreground: root.foreground
               accent: root.accent
               font.family: root.fontFamily
-              font.pixelSize: 12
+              font.pixelSize: Style.font.body
 
               onTextChanged: {
                 root.recomputeFiltered()
@@ -247,7 +247,7 @@ Item {
               text: root.emptyText
               color: Qt.darker(root.foreground, 1.6)
               font.family: root.fontFamily
-              font.pixelSize: 12
+              font.pixelSize: Style.font.body
             }
 
             ListView {
@@ -312,7 +312,7 @@ Item {
                     text: root.optionLabel(modelData)
                     color: index === resultList.currentIndex ? root.accent : root.foreground
                     font.family: root.fontFamily
-                    font.pixelSize: 12
+                    font.pixelSize: Style.font.body
                     elide: Text.ElideRight
                     width: parent.width
                   }
@@ -321,7 +321,7 @@ Item {
                     text: root.optionDescription(modelData)
                     color: Qt.darker(root.foreground, 1.5)
                     font.family: root.fontFamily
-                    font.pixelSize: 10
+                    font.pixelSize: Style.font.caption
                     elide: Text.ElideRight
                     width: parent.width
                   }

shell/Ui/TextField.qml

@@ -37,6 +37,8 @@ TextField {
   readonly property bool _focused: activeFocus || hasCursor
 
   echoMode: password ? TextInput.Password : TextInput.Normal
+  font.family: Style.font.family
+  font.pixelSize: Style.font.body
   color: foreground
   selectionColor: selectionTint
   selectedTextColor: foreground

shell/Ui/Toggle.qml

@@ -32,9 +32,9 @@ Rectangle {
 
   property color foreground: Color.foreground
   property color accent: Color.accent
-  property string fontFamily: "monospace"
+  property string fontFamily: Style.font.family
-  property real titleSize: 13
+  property real titleSize: Style.font.subtitle
-  property real descriptionSize: 10
+  property real descriptionSize: Style.font.caption
 
   signal clicked()
   signal hovered(bool isHovered)

shell/Ui/WidgetButton.qml

@@ -1,14 +1,15 @@
 import QtQuick
+import qs.Commons
 
 Item {
   id: root
 
   property var bar: null
   property string text: ""
-  property string fontFamily: bar ? bar.fontFamily : "JetBrainsMono Nerd Font"
+  property string fontFamily: bar ? bar.fontFamily : Style.font.family
-  property real fontSize: 12
+  property real fontSize: Style.font.body
-  property color foreground: bar ? bar.foreground : "#cacccc"
+  property color foreground: bar ? bar.foreground : Color.foreground
-  property color activeColor: bar ? bar.urgent : "#a55555"
+  property color activeColor: bar ? bar.urgent : Color.urgent
   property bool active: false
   property real horizontalMargin: 8.5
   property real rightExtraMargin: 0
@@ -23,7 +24,7 @@ Item {
   signal wheelMoved(int delta)
 
   readonly property bool vertical: bar ? bar.vertical : false
-  readonly property int barSize: bar ? bar.barSize : 26
+  readonly property int barSize: bar ? bar.barSize : Style.bar.sizeHorizontal
 
   visible: text !== "" || keepSpace
   opacity: text === "" ? 0 : 1
@@ -41,7 +42,7 @@ Item {
     text: root.text
     color: root.active ? root.activeColor : root.foreground
     font.family: root.fontFamily
-    font.pointSize: root.fontSize * 0.75
+    font.pixelSize: root.fontSize
     renderType: Text.NativeRendering
     rotation: root.textRotation
     horizontalAlignment: Text.AlignHCenter

shell/plugins/background/Background.qml

@@ -81,6 +81,10 @@ Item {
     NoctaliaCommons.Color.resumeThemeReloads()
     NoctaliaCommons.Color.loadColors(pendingColorsRaw)
     NoctaliaCommons.Color.loadShell(pendingShellRaw)
+    // Style watches the same shell.toml for [font] and [bar] sizing; push
+    // synchronously so the type scale flips with the background instead of
+    // waiting on inotify debounce.
+    NoctaliaCommons.Style.loadShell(pendingShellRaw)
     pendingThemeVersion = -1
     pendingColorsRaw = ""
     pendingShellRaw = ""

shell/plugins/bar/Bar.qml

@@ -44,9 +44,10 @@ Item {
   property bool transparent: false
   property int barConfigSerial: 0
   property string position: "top"
-  // "monospace" resolves through fontconfig at paint time, so changing the
+  // Resolves through fontconfig at paint time (Style.font.family defaults
-  // system font (via `omarchy-font-set`) updates the bar without a reload.
+  // to "monospace"), so changing the system font (via `omarchy-font-set`)
-  property string fontFamily: "monospace"
+  // updates the bar without a reload.
+  property string fontFamily: Style.font.family
   // Bound to the central Color singleton so the bar tracks shell.toml's
   // [bar] section. Property names kept for the rest of this file's bindings.
   property color foreground: Color.bar.text
@@ -80,7 +81,7 @@ Item {
   }
 
   readonly property bool vertical: position === "left" || position === "right"
-  readonly property int barSize: vertical ? 28 : 26
+  readonly property int barSize: vertical ? Style.bar.sizeVertical : Style.bar.sizeHorizontal
 
   signal indicatorsRefreshRequested()
 
@@ -713,7 +714,7 @@ Item {
           text: root.tooltipText
           color: root.foreground
           font.family: root.fontFamily
-          font.pixelSize: 12
+          font.pixelSize: Style.font.body
           horizontalAlignment: Text.AlignHCenter
           verticalAlignment: Text.AlignVCenter
         }
@@ -1073,7 +1074,7 @@ Item {
     property bool active: false
     property bool keepSpace: false
     property string fontFamily: root.fontFamily
-    property real fontSize: 12
+    property real fontSize: Style.font.body
     property real horizontalMargin: 7.5
     property real rightExtraMargin: 0
     property real verticalPadding: 6
@@ -1097,7 +1098,7 @@ Item {
       text: buttonRoot.text
       color: buttonRoot.active ? root.urgent : root.foreground
       font.family: buttonRoot.fontFamily
-      font.pointSize: buttonRoot.fontSize * 0.75
+      font.pixelSize: buttonRoot.fontSize
       renderType: Text.NativeRendering
       rotation: buttonRoot.textRotation
       horizontalAlignment: Text.AlignHCenter
@@ -1118,7 +1119,7 @@ Item {
   }
 
   component IndicatorModule: ModuleButton {
-    fontSize: 10
+    fontSize: Style.font.caption
     horizontalMargin: 5
     verticalPadding: 5
   }
@@ -1171,7 +1172,7 @@ Item {
 
   component UpdateModule: ModuleButton {
     text: root.updateAvailable ? "" : ""
-    fontSize: 10
+    fontSize: Style.font.caption
     tooltipText: root.updateAvailable ? "Omarchy update available" : ""
     onPressed: function() { root.run("omarchy-launch-floating-terminal-with-presentation omarchy-update") }
   }
@@ -1483,7 +1484,7 @@ Item {
           text: "Tray icons"
           color: root.foreground
           font.family: root.fontFamily
-          font.pixelSize: 12
+          font.pixelSize: Style.font.body
           font.bold: true
         }
 
@@ -1491,7 +1492,7 @@ Item {
           text: "Pinned icons stay visible. Hidden icons never show."
           color: Qt.darker(root.foreground, 1.4)
           font.family: root.fontFamily
-          font.pixelSize: 10
+          font.pixelSize: Style.font.caption
           wrapMode: Text.WordWrap
           width: parent.width
         }
@@ -1501,7 +1502,7 @@ Item {
           text: "No tray items reporting."
           color: Qt.darker(root.foreground, 1.5)
           font.family: root.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
           font.italic: true
         }
 
@@ -1546,7 +1547,7 @@ Item {
               text: rowRoot.displayName
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 11
+              font.pixelSize: Style.font.bodySmall
               elide: Text.ElideRight
             }
 
@@ -1559,8 +1560,8 @@ Item {
               foreground: root.foreground
               horizontalPadding: 8
               verticalPadding: 3
-              iconSize: 11
+              iconSize: Style.font.bodySmall
-              fontSize: 11
+              fontSize: Style.font.bodySmall
               onClicked: trayRoot.togglePin(rowRoot.itemId)
             }
 
@@ -1574,8 +1575,8 @@ Item {
               foreground: root.foreground
               horizontalPadding: 8
               verticalPadding: 3
-              iconSize: 11
+              iconSize: Style.font.bodySmall
-              fontSize: 11
+              fontSize: Style.font.bodySmall
               onClicked: trayRoot.toggleHide(rowRoot.itemId)
             }
           }

shell/plugins/bar/widgets/activeWindow.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
+import qs.Commons
 
 Item {
   id: root
@@ -42,7 +43,7 @@ Item {
       text: root.title
       color: root.bar ? root.bar.foreground : "#cacccc"
       font.family: root.bar ? root.bar.fontFamily : "JetBrainsMono Nerd Font"
-      font.pixelSize: 12
+      font.pixelSize: Style.font.body
       elide: Text.ElideRight
       opacity: 0.85
     }

shell/plugins/bar/widgets/audioPanel.qml

@@ -4,6 +4,7 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Services.Pipewire
 import qs.Ui
+import qs.Commons
 
 Item {
   id: root
@@ -356,7 +357,7 @@ Item {
     anchors.fill: parent
     bar: root.bar
     text: root.outputIcon()
-    fontSize: 12
+    fontSize: Style.font.body
     onPressed: function(b) {
       if (b === Qt.RightButton) root.toggleOutputMute()
       else if (b === Qt.MiddleButton) root.bar.run("omarchy-launch-audio")
@@ -428,7 +429,7 @@ Item {
                 text: "Output"
                 foreground: root.bar.foreground
                 fontFamily: root.bar.fontFamily
-                fontSize: 11
+                fontSize: Style.font.bodySmall
                 anchors.verticalCenter: parent.verticalCenter
               }
 
@@ -436,7 +437,7 @@ Item {
                 text: root.sink ? "· " + root.nodeLabel(root.sink) : ""
                 color: Qt.darker(root.bar.foreground, 1.8)
                 font.family: root.bar.fontFamily
-                font.pixelSize: 11
+                font.pixelSize: Style.font.bodySmall
                 elide: Text.ElideRight
                 width: parent.width - 70
                 anchors.verticalCenter: parent.verticalCenter
@@ -467,7 +468,7 @@ Item {
                   text: root.outputIcon()
                   color: root.bar.foreground
                   font.family: root.bar.fontFamily
-                  font.pixelSize: 16
+                  font.pixelSize: Style.font.heading
                   width: 22
                   horizontalAlignment: Text.AlignHCenter
                   anchors.verticalCenter: parent.verticalCenter
@@ -500,7 +501,7 @@ Item {
                   text: Math.round((outputSlider.dragging ? outputSlider.liveValue : root.outputVolume) * 100) + "%"
                   color: root.bar.foreground
                   font.family: root.bar.fontFamily
-                  font.pixelSize: 11
+                  font.pixelSize: Style.font.bodySmall
                   width: 36
                   horizontalAlignment: Text.AlignRight
                   anchors.verticalCenter: parent.verticalCenter
@@ -547,7 +548,7 @@ Item {
                 text: "Input"
                 foreground: root.bar.foreground
                 fontFamily: root.bar.fontFamily
-                fontSize: 11
+                fontSize: Style.font.bodySmall
                 anchors.verticalCenter: parent.verticalCenter
               }
 
@@ -555,7 +556,7 @@ Item {
                 text: root.source ? "· " + root.nodeLabel(root.source) : ""
                 color: Qt.darker(root.bar.foreground, 1.8)
                 font.family: root.bar.fontFamily
-                font.pixelSize: 11
+                font.pixelSize: Style.font.bodySmall
                 elide: Text.ElideRight
                 width: parent.width - 56
                 anchors.verticalCenter: parent.verticalCenter
@@ -584,7 +585,7 @@ Item {
                   text: root.inputIcon()
                   color: root.bar.foreground
                   font.family: root.bar.fontFamily
-                  font.pixelSize: 16
+                  font.pixelSize: Style.font.heading
                   width: 22
                   horizontalAlignment: Text.AlignHCenter
                   anchors.verticalCenter: parent.verticalCenter
@@ -617,7 +618,7 @@ Item {
                   text: Math.round((inputSlider.dragging ? inputSlider.liveValue : root.inputVolume) * 100) + "%"
                   color: root.bar.foreground
                   font.family: root.bar.fontFamily
-                  font.pixelSize: 11
+                  font.pixelSize: Style.font.bodySmall
                   width: 36
                   horizontalAlignment: Text.AlignRight
                   anchors.verticalCenter: parent.verticalCenter
@@ -660,7 +661,7 @@ Item {
               text: "Playing"
               foreground: root.bar.foreground
               fontFamily: root.bar.fontFamily
-              fontSize: 11
+              fontSize: Style.font.bodySmall
             }
 
             Repeater {
@@ -712,7 +713,7 @@ Item {
         text: root.sinkGlyph(sinkRow.node)
         color: root.bar.foreground
         font.family: root.bar.fontFamily
-        font.pixelSize: 14
+        font.pixelSize: Style.font.title
         width: 22
         horizontalAlignment: Text.AlignHCenter
         anchors.verticalCenter: parent.verticalCenter
@@ -722,7 +723,7 @@ Item {
         text: root.nodeLabel(sinkRow.node)
         color: root.bar.foreground
         font.family: root.bar.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
         elide: Text.ElideRight
         width: parent.width - 22 - 14 - 16
         anchors.verticalCenter: parent.verticalCenter
@@ -732,7 +733,7 @@ Item {
         text: sinkRow.isActive ? "󰄬" : ""
         color: root.bar.foreground
         font.family: root.bar.fontFamily
-        font.pixelSize: 13
+        font.pixelSize: Style.font.subtitle
         width: 14
         horizontalAlignment: Text.AlignRight
         anchors.verticalCenter: parent.verticalCenter
@@ -779,7 +780,7 @@ Item {
         text: root.sourceGlyph(sourceRow.node)
         color: root.bar.foreground
         font.family: root.bar.fontFamily
-        font.pixelSize: 14
+        font.pixelSize: Style.font.title
         width: 22
         horizontalAlignment: Text.AlignHCenter
         anchors.verticalCenter: parent.verticalCenter
@@ -789,7 +790,7 @@ Item {
         text: root.nodeLabel(sourceRow.node)
         color: root.bar.foreground
         font.family: root.bar.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
         elide: Text.ElideRight
         width: parent.width - 22 - 14 - 16
         anchors.verticalCenter: parent.verticalCenter
@@ -799,7 +800,7 @@ Item {
         text: sourceRow.isActive ? "󰄬" : ""
         color: root.bar.foreground
         font.family: root.bar.fontFamily
-        font.pixelSize: 13
+        font.pixelSize: Style.font.subtitle
         width: 14
         horizontalAlignment: Text.AlignRight
         anchors.verticalCenter: parent.verticalCenter
@@ -855,7 +856,7 @@ Item {
           text: streamRow.streamMuted ? "󰝟" : "󰕾"
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 12
+          font.pixelSize: Style.font.body
           width: 14
           horizontalAlignment: Text.AlignHCenter
           anchors.verticalCenter: parent.verticalCenter
@@ -875,7 +876,7 @@ Item {
           text: root.streamLabel(streamRow.node)
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
           elide: Text.ElideRight
           width: parent.width - streamMuteIcon.width - streamPct.width - 12
           anchors.verticalCenter: parent.verticalCenter
@@ -886,7 +887,7 @@ Item {
           text: Math.round(streamRow.streamVolume * 100) + "%"
           color: Qt.darker(root.bar.foreground, 1.5)
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
           width: 36
           horizontalAlignment: Text.AlignRight
           anchors.verticalCenter: parent.verticalCenter

shell/plugins/bar/widgets/bluetoothPanel.qml

@@ -4,6 +4,7 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Bluetooth
 import qs.Ui
+import qs.Commons
 
 Item {
   id: root
@@ -395,7 +396,7 @@ Item {
               text: "Bluetooth"
               foreground: root.bar.foreground
               fontFamily: root.bar.fontFamily
-              fontSize: 11
+              fontSize: Style.font.bodySmall
               anchors.verticalCenter: parent.verticalCenter
             }
 
@@ -403,7 +404,7 @@ Item {
               text: "· " + (root.adapter && root.adapter.enabled ? "On" : "Off")
               color: Qt.darker(root.bar.foreground, 1.8)
               font.family: root.bar.fontFamily
-              font.pixelSize: 11
+              font.pixelSize: Style.font.bodySmall
               anchors.verticalCenter: parent.verticalCenter
             }
           }
@@ -501,7 +502,7 @@ Item {
                   : "No paired devices. Tap the scan icon to find new ones."
               color: Qt.darker(root.bar.foreground, 1.5)
               font.family: root.bar.fontFamily
-              font.pixelSize: 11
+              font.pixelSize: Style.font.bodySmall
               wrapMode: Text.WordWrap
               width: deviceList.width
             }
@@ -672,7 +673,7 @@ Item {
         text: row.isConnected ? "󰂱" : "󰂯"
         color: row.statusColor
         font.family: root.bar.fontFamily
-        font.pixelSize: 16
+        font.pixelSize: Style.font.heading
         anchors.left: parent.left
         anchors.verticalCenter: parent.verticalCenter
       }
@@ -715,7 +716,7 @@ Item {
           text: root.deviceLabel(row.dev) || "Device"
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 12
+          font.pixelSize: Style.font.body
           elide: Text.ElideRight
           width: parent.width
         }
@@ -724,7 +725,7 @@ Item {
           text: row.statusText
           color: row.statusColor
           font.family: root.bar.fontFamily
-          font.pixelSize: 10
+          font.pixelSize: Style.font.caption
           elide: Text.ElideRight
           width: parent.width
         }

shell/plugins/bar/widgets/calendar.qml

@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import qs.Ui
+import qs.Commons
 
 Item {
   id: root
@@ -110,7 +111,7 @@ Item {
           text: Qt.formatDate(root.viewMonth, "MMMM yyyy")
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 14
+          font.pixelSize: Style.font.title
           font.bold: true
         }
 
@@ -146,7 +147,7 @@ Item {
               text: modelData
               color: Qt.darker(root.bar.foreground, 1.6)
               font.family: root.bar.fontFamily
-              font.pixelSize: 11
+              font.pixelSize: Style.font.bodySmall
               font.bold: true
             }
           }
@@ -187,7 +188,7 @@ Item {
               text: dayDate.getDate()
               color: isToday ? root.bar.background : (inMonth ? root.bar.foreground : Qt.darker(root.bar.foreground, 2.2))
               font.family: root.bar.fontFamily
-              font.pixelSize: 12
+              font.pixelSize: Style.font.body
               font.bold: isToday
             }
           }

shell/plugins/bar/widgets/keyboardLayout.qml

@@ -3,6 +3,7 @@ import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
 import qs.Ui
+import qs.Commons
 
 Item {
   id: root
@@ -76,7 +77,7 @@ Item {
     anchors.fill: parent
     bar: root.bar
     text: root.layoutLabel
-    fontSize: 10
+    fontSize: Style.font.caption
     horizontalMargin: 6
     tooltipText: root.layoutFull
     onPressed: function() { root.cycleLayout() }

shell/plugins/bar/widgets/lockKeys.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import Quickshell
 import Quickshell.Io
+import qs.Commons
 
 Item {
   id: root
@@ -96,6 +97,6 @@ Item {
     text: glyph
     color: active ? (root.bar ? root.bar.foreground : "#cacccc") : Qt.rgba(0.7, 0.7, 0.7, 0.3)
     font.family: root.bar ? root.bar.fontFamily : "JetBrainsMono Nerd Font"
-    font.pixelSize: 11
+    font.pixelSize: Style.font.bodySmall
   }
 }

shell/plugins/bar/widgets/media.qml

@@ -2,6 +2,7 @@ import QtQuick
 import Quickshell
 import Quickshell.Services.Mpris
 import qs.Ui
+import qs.Commons
 
 Item {
   id: root
@@ -52,8 +53,7 @@ Item {
       text: root.playIcon
       color: activePlayer && activePlayer.isPlaying ? root.bar.foreground : Qt.darker(root.bar.foreground, 1.5)
       font.family: root.bar.fontFamily
-      font.pixelSize: 12
+      font.pixelSize: Style.font.body
-
       Behavior on color { ColorAnimation { duration: 160 } }
     }
 
@@ -70,7 +70,7 @@ Item {
         text: root.title + (root.artist ? "  ·  " + root.artist : "")
         color: root.bar.foreground
         font.family: root.bar.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
         anchors.verticalCenter: parent.verticalCenter
 
         property bool needsScroll: implicitWidth > scrollClip.width
@@ -154,7 +154,7 @@ Item {
             text: "󰝚"
             color: root.bar.foreground
             font.family: root.bar.fontFamily
-            font.pixelSize: 28
+            font.pixelSize: Style.font.displayLarge
           }
         }
 
@@ -166,7 +166,7 @@ Item {
             text: root.title || "Nothing playing"
             color: root.bar.foreground
             font.family: root.bar.fontFamily
-            font.pixelSize: 13
+            font.pixelSize: Style.font.subtitle
             font.bold: true
             elide: Text.ElideRight
             width: parent.width
@@ -176,7 +176,7 @@ Item {
             text: root.artist
             color: Qt.darker(root.bar.foreground, 1.3)
             font.family: root.bar.fontFamily
-            font.pixelSize: 11
+            font.pixelSize: Style.font.bodySmall
             elide: Text.ElideRight
             width: parent.width
             visible: text !== ""
@@ -186,7 +186,7 @@ Item {
             text: root.activePlayer && root.activePlayer.trackAlbum ? root.activePlayer.trackAlbum : ""
             color: Qt.darker(root.bar.foreground, 1.6)
             font.family: root.bar.fontFamily
-            font.pixelSize: 10
+            font.pixelSize: Style.font.caption
             elide: Text.ElideRight
             width: parent.width
             visible: text !== ""

shell/plugins/bar/widgets/monitorPanel.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import Quickshell
 import Quickshell.Io
 import qs.Ui
+import qs.Commons
 
 Item {
   id: root
@@ -353,7 +354,7 @@ Item {
     anchors.fill: parent
     bar: root.bar
     text: "󰍹"
-    fontSize: 13
+    fontSize: Style.font.subtitle
     onPressed: function(b) { root.popupOpen = !root.popupOpen }
     onWheelMoved: function(delta) {
       if (root.brightnessAvailable) root.setBrightness(root.brightnessPercent + (delta > 0 ? 5 : -5))
@@ -403,7 +404,7 @@ Item {
               text: "Brightness"
               foreground: root.bar.foreground
               fontFamily: root.bar.fontFamily
-              fontSize: 11
+              fontSize: Style.font.bodySmall
             }
 
             CursorSurface {
@@ -427,7 +428,7 @@ Item {
                   text: "󰃠"
                   color: root.bar.foreground
                   font.family: root.bar.fontFamily
-                  font.pixelSize: 16
+                  font.pixelSize: Style.font.heading
                   width: 22
                   horizontalAlignment: Text.AlignHCenter
                   anchors.verticalCenter: parent.verticalCenter
@@ -455,7 +456,7 @@ Item {
                   text: Math.round(brightnessSlider.dragging ? brightnessSlider.liveValue : root.brightnessPercent) + "%"
                   color: root.bar.foreground
                   font.family: root.bar.fontFamily
-                  font.pixelSize: 11
+                  font.pixelSize: Style.font.bodySmall
                   width: 36
                   horizontalAlignment: Text.AlignRight
                   anchors.verticalCenter: parent.verticalCenter
@@ -475,7 +476,7 @@ Item {
               text: "No controllable backlight found"
               color: Qt.darker(root.bar.foreground, 1.5)
               font.family: root.bar.fontFamily
-              font.pixelSize: 11
+              font.pixelSize: Style.font.bodySmall
             }
           }
 
@@ -488,7 +489,7 @@ Item {
               text: "Scale"
               foreground: root.bar.foreground
               fontFamily: root.bar.fontFamily
-              fontSize: 11
+              fontSize: Style.font.bodySmall
             }
 
             Row {
@@ -509,7 +510,7 @@ Item {
                   tooltipBackground: root.bar.background
                   tooltipForeground: root.bar.foreground
                   fontFamily: root.bar.fontFamily
-                  fontSize: 11
+                  fontSize: Style.font.bodySmall
                   horizontalPadding: 0
                   verticalPadding: 6
                   active: root.normalizeScale(root.monitorScale) === root.normalizeScale(modelData)
@@ -536,7 +537,7 @@ Item {
               text: "Monitors"
               foreground: root.bar.foreground
               fontFamily: root.bar.fontFamily
-              fontSize: 11
+              fontSize: Style.font.bodySmall
             }
 
             Repeater {

shell/plugins/bar/widgets/networkPanel.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import Quickshell
 import Quickshell.Io
 import qs.Ui
+import qs.Commons
 
 Item {
   id: root
@@ -663,7 +664,7 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
             text: root.icon
             color: root.bar.foreground
             font.family: root.bar.fontFamily
-            font.pixelSize: 22
+            font.pixelSize: Style.font.display
             anchors.verticalCenter: parent.verticalCenter
           }
 
@@ -675,7 +676,7 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
               text: root.info.iface || (root.kind === "disconnected" ? "Disconnected" : "No connection")
               color: root.bar.foreground
               font.family: root.bar.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
@@ -691,7 +692,7 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
               visible: text !== ""
               color: Qt.darker(root.bar.foreground, 1.4)
               font.family: root.bar.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
             }
           }
         }
@@ -732,14 +733,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
           text: "IP address"
           color: Qt.darker(root.bar.foreground, 1.4)
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
         Text {
           visible: !!root.info.ip
           text: (root.info.ip || "") + (root.info.prefix ? "/" + root.info.prefix : "")
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
 
         // Gateway.
@@ -748,14 +749,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
           text: "Gateway"
           color: Qt.darker(root.bar.foreground, 1.4)
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
         Text {
           visible: !!root.info.gateway
           text: root.info.gateway || ""
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
 
         // Ethernet link speed / duplex.
@@ -764,14 +765,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
           text: "Link"
           color: Qt.darker(root.bar.foreground, 1.4)
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
         Text {
           visible: root.info.type === "ethernet" && !!root.info.speed
           text: root.formatSpeed(root.info.speed || "") + (root.info.duplex ? "  ·  " + root.info.duplex + " duplex" : "")
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
 
         // Wi-Fi signal.
@@ -780,14 +781,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
           text: "Signal"
           color: Qt.darker(root.bar.foreground, 1.4)
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
         Text {
           visible: root.info.type === "wifi" && !!root.info.signal_dbm
           text: (root.info.signal_dbm || "") + " dBm"
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
 
         // Wi-Fi tx bitrate.
@@ -796,14 +797,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
           text: "Link rate"
           color: Qt.darker(root.bar.foreground, 1.4)
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
         Text {
           visible: root.info.type === "wifi" && !!root.info.bitrate
           text: root.info.bitrate || ""
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
       }
 
@@ -1048,7 +1049,7 @@ iwctl known-networks list 2>/dev/null \\
         text: row.net ? root.wifiIconFor(row.net.signal) : ""
         color: row.statusColor
         font.family: root.bar.fontFamily
-        font.pixelSize: 14
+        font.pixelSize: Style.font.title
         anchors.left: parent.left
         anchors.verticalCenter: parent.verticalCenter
       }
@@ -1083,7 +1084,7 @@ iwctl known-networks list 2>/dev/null \\
         text: "󰌾"
         color: Qt.darker(root.bar.foreground, 1.4)
         font.family: root.bar.fontFamily
-        font.pixelSize: 13
+        font.pixelSize: Style.font.subtitle
       }
 
       Column {
@@ -1101,7 +1102,7 @@ iwctl known-networks list 2>/dev/null \\
           text: row.net ? (row.net.ssid || "Hidden") : ""
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 12
+          font.pixelSize: Style.font.body
           elide: Text.ElideRight
           width: parent.width
         }
@@ -1116,7 +1117,7 @@ iwctl known-networks list 2>/dev/null \\
           height: visible ? implicitHeight : 0
           color: row.statusColor
           font.family: root.bar.fontFamily
-          font.pixelSize: 10
+          font.pixelSize: Style.font.caption
           elide: Text.ElideRight
           width: parent.width
         }
@@ -1146,7 +1147,7 @@ iwctl known-networks list 2>/dev/null \\
         password: true
         placeholderText: "Passphrase"
         font.family: root.bar.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
         foreground: root.bar.foreground
         horizontalPadding: 8
         verticalPadding: 6

shell/plugins/bar/widgets/notificationCenter.qml

@@ -125,7 +125,7 @@ Item {
           text: "Notifications"
           font.family: root.bar ? root.bar.fontFamily : ""
           color: root.colForeground
-          font.pixelSize: 14
+          font.pixelSize: Style.font.title
           font.bold: true
         }
 
@@ -151,7 +151,7 @@ Item {
               text: dndPill.dndOn ? "󰂛" : "󰂚"
               font.family: root.bar ? root.bar.fontFamily : ""
               color: dndPill.dndOn ? Color.background : root.colDim
-              font.pixelSize: 12
+              font.pixelSize: Style.font.body
               anchors.verticalCenter: parent.verticalCenter
             }
 
@@ -160,7 +160,7 @@ Item {
               text: dndPill.dndOn ? "DND on" : "DND off"
               font.family: root.bar ? root.bar.fontFamily : ""
               color: dndPill.dndOn ? Color.background : root.colDim
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               font.bold: true
               anchors.verticalCenter: parent.verticalCenter
             }
@@ -198,7 +198,7 @@ Item {
               text: modelData.label + (modelData.count > 0 ? "  " + modelData.count : "")
               font.family: root.bar ? root.bar.fontFamily : ""
               color: parent.isActive ? root.colForeground : root.colDim
-              font.pixelSize: 12
+              font.pixelSize: Style.font.body
               font.bold: parent.isActive
             }
 
@@ -243,7 +243,7 @@ Item {
             text: root.activeTab === "pending" ? "Mark all as seen" : "Clear recent"
             font.family: root.bar ? root.bar.fontFamily : ""
             color: root.colForeground
-            font.pixelSize: 10
+            font.pixelSize: Style.font.caption
           }
 
           MouseArea {
@@ -342,7 +342,7 @@ Item {
                 text: rowCard.summary
                 font.family: root.bar ? root.bar.fontFamily : ""
                 color: root.colForeground
-                font.pixelSize: 13
+                font.pixelSize: Style.font.subtitle
                 font.bold: true
                 wrapMode: Text.WordWrap
                 elide: Text.ElideRight
@@ -356,7 +356,7 @@ Item {
                 font.family: root.bar ? root.bar.fontFamily : ""
                 textFormat: Text.PlainText
                 color: root.colDim
-                font.pixelSize: 11
+                font.pixelSize: Style.font.bodySmall
                 wrapMode: Text.WordWrap
                 elide: Text.ElideRight
                 maximumLineCount: 2
@@ -375,7 +375,7 @@ Item {
                 text: "✕"
                 font.family: root.bar ? root.bar.fontFamily : ""
                 color: root.colDim
-                font.pixelSize: 11
+                font.pixelSize: Style.font.bodySmall
               }
 
               MouseArea {
@@ -409,6 +409,8 @@ Item {
             text: "󰂚"
             font.family: root.bar ? root.bar.fontFamily : ""
             color: root.colBorder
+            // Deliberately oversized empty-state glyph; doesn't follow the
+            // Style.font.* scale because it's a one-off decorative element.
             font.pixelSize: 36
           }
 
@@ -421,7 +423,7 @@ Item {
               ? "Nothing waiting for you"
               : "No past notifications"
             color: root.colDim
-            font.pixelSize: 12
+            font.pixelSize: Style.font.body
           }
         }
       }

shell/plugins/bar/widgets/systemStats.qml

@@ -2,6 +2,7 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.Ui
+import qs.Commons
 
 Item {
   id: root
@@ -188,7 +189,7 @@ Item {
         text: "System"
         color: root.bar.foreground
         font.family: root.bar.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
         font.bold: true
       }
 
@@ -217,13 +218,13 @@ Item {
           text: "Load"
           color: Qt.darker(root.bar.foreground, 1.5)
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
         Text {
           text: root.loadAvg.toFixed(2)
           color: root.bar.foreground
           font.family: root.bar.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
       }
     }
@@ -246,14 +247,14 @@ Item {
         text: detail.title
         color: Qt.darker(detail.barFg, 1.4)
         font.family: detail.fontFamily
-        font.pixelSize: 11
+        font.pixelSize: Style.font.bodySmall
       }
       Item { width: detail.width - parent.children[0].implicitWidth - parent.children[2].implicitWidth; height: 1 }
       Text {
         text: detail.value
         color: detail.barFg
         font.family: detail.fontFamily
-        font.pixelSize: 11
+        font.pixelSize: Style.font.bodySmall
       }
     }
 

shell/plugins/bar/widgets/weatherFlyout.qml

@@ -351,6 +351,8 @@ Item {
             text: root.label || "—"
             color: root.bar.foreground
             font.family: root.bar.fontFamily
+            // Decorative condition emoji; intentionally larger than the
+            // Style.font.* scale's displayLarge (28).
             font.pixelSize: 64
           }
 
@@ -363,6 +365,8 @@ Item {
               text: root.reportTempNum || "—"
               color: root.bar.foreground
               font.family: root.bar.fontFamily
+              // Hero temperature read-out; deliberately oversized, outside
+              // the Style.font.* scale.
               font.pixelSize: 56
               font.bold: true
             }
@@ -370,7 +374,7 @@ Item {
               text: root.current ? root.tempUnit : ""
               color: root.bar.foreground
               font.family: root.bar.fontFamily
-              font.pixelSize: 22
+              font.pixelSize: Style.font.display
               anchors.top: tempBig.top
               anchors.topMargin: 10
             }
@@ -392,14 +396,14 @@ Item {
               text: ""  // nf-fa-map_marker
               color: Qt.darker(root.bar.foreground, 1.4)
               font.family: root.bar.fontFamily
-              font.pixelSize: 12
+              font.pixelSize: Style.font.body
               anchors.verticalCenter: parent.verticalCenter
             }
             Text {
               text: (root.reportLocation || "").toUpperCase()
               color: Qt.darker(root.bar.foreground, 1.4)
               font.family: root.bar.fontFamily
-              font.pixelSize: 12
+              font.pixelSize: Style.font.body
               font.letterSpacing: 1
               anchors.verticalCenter: parent.verticalCenter
             }
@@ -415,14 +419,14 @@ Item {
                 text: "FEELS"
                 color: Qt.darker(root.bar.foreground, 1.5)
                 font.family: root.bar.fontFamily
-                font.pixelSize: 11
+                font.pixelSize: Style.font.bodySmall
                 font.letterSpacing: 1
               }
               Text {
                 text: root.reportFeels
                 color: root.bar.foreground
                 font.family: root.bar.fontFamily
-                font.pixelSize: 15
+                font.pixelSize: Style.font.title
               }
             }
 
@@ -432,14 +436,14 @@ Item {
                 text: "WIND"
                 color: Qt.darker(root.bar.foreground, 1.5)
                 font.family: root.bar.fontFamily
-                font.pixelSize: 11
+                font.pixelSize: Style.font.bodySmall
                 font.letterSpacing: 1
               }
               Text {
                 text: root.reportWind
                 color: root.bar.foreground
                 font.family: root.bar.fontFamily
-                font.pixelSize: 15
+                font.pixelSize: Style.font.title
               }
             }
 
@@ -449,14 +453,14 @@ Item {
                 text: "HUMID"
                 color: Qt.darker(root.bar.foreground, 1.5)
                 font.family: root.bar.fontFamily
-                font.pixelSize: 11
+                font.pixelSize: Style.font.bodySmall
                 font.letterSpacing: 1
               }
               Text {
                 text: root.reportHumidity
                 color: root.bar.foreground
                 font.family: root.bar.fontFamily
-                font.pixelSize: 15
+                font.pixelSize: Style.font.title
               }
             }
           }
@@ -468,7 +472,7 @@ Item {
         text: "Fetching forecast…"
         color: Qt.darker(root.bar.foreground, 1.5)
         font.family: root.bar.fontFamily
-        font.pixelSize: 11
+        font.pixelSize: Style.font.bodySmall
         font.italic: true
       }
 
@@ -506,7 +510,7 @@ Item {
                 text: root.dayIcon(modelData)
                 color: root.bar.foreground
                 font.family: root.bar.fontFamily
-                font.pixelSize: 24
+                font.pixelSize: Style.font.display
               }
 
               Column {
@@ -517,7 +521,7 @@ Item {
                   text: root.dayName(modelData.date).toUpperCase()
                   color: Qt.darker(root.bar.foreground, 1.4)
                   font.family: root.bar.fontFamily
-                  font.pixelSize: 10
+                  font.pixelSize: Style.font.caption
                   font.letterSpacing: 1
                 }
 
@@ -528,13 +532,13 @@ Item {
                     text: root.bareTempForDay(modelData, "max")
                     color: root.bar.foreground
                     font.family: root.bar.fontFamily
-                    font.pixelSize: 12
+                    font.pixelSize: Style.font.body
                   }
                   Text {
                     text: root.bareTempForDay(modelData, "min")
                     color: Qt.darker(root.bar.foreground, 1.5)
                     font.family: root.bar.fontFamily
-                    font.pixelSize: 12
+                    font.pixelSize: Style.font.body
                   }
                 }
               }

shell/plugins/clipboard-picker/ClipboardPicker.qml

@@ -241,7 +241,7 @@ Item {
             color: root.foreground
             opacity: root.filterText ? 1 : 0.58
             font.family: root.fontFamily
-            font.pixelSize: 16
+            font.pixelSize: Style.font.heading
             elide: Text.ElideRight
           }
         }
@@ -299,7 +299,7 @@ Item {
                     text: parent.parent.isPassword ? "••••••••" : (parent.parent.previewType === "text" ? parent.parent.previewText : "Image")
                     color: index === root.selectedIndex ? root.accent : root.foreground
                     font.family: root.fontFamily
-                    font.pixelSize: 14
+                    font.pixelSize: Style.font.title
                     font.italic: parent.parent.previewType === "file" || parent.parent.isPassword
                     opacity: (parent.parent.previewType === "file" || parent.parent.isPassword) ? 0.6 : 1.0
                     elide: Text.ElideRight
@@ -339,7 +339,7 @@ Item {
                 text: parent.activeRow ? (parent.activeRow.isPassword ? "••••••••" : parent.activeRow.previewText) : ""
                 color: root.foreground
                 font.family: root.fontFamily
-                font.pixelSize: 14
+                font.pixelSize: Style.font.title
                 wrapMode: Text.WrapAnywhere
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignTop
@@ -365,7 +365,7 @@ Item {
               color: root.accent
               opacity: 0.8
               font.family: root.fontFamily
-              font.pixelSize: 28
+              font.pixelSize: Style.font.displayLarge
               horizontalAlignment: Text.AlignHCenter
               width: parent.width
             }
@@ -375,7 +375,7 @@ Item {
               color: root.foreground
               opacity: 0.7
               font.family: root.fontFamily
-              font.pixelSize: 14
+              font.pixelSize: Style.font.title
               horizontalAlignment: Text.AlignHCenter
               width: parent.width
             }

shell/plugins/dev-gallery/GalleryPanel.qml

@@ -5,8 +5,8 @@ import qs.Ui
 import qs.Commons
 
 // Visual reference + live playground for omarchy-shell's common UI
-// components. Summoned via:
+// components. Summon with `omarchy dev ui-preview`, or directly via:
-//   omarchy-shell-ipc shell summon omarchy.dev-gallery "{}"
+//   omarchy-shell shell summon omarchy.dev-gallery "{}"
 //
 // Every section here renders the REAL component (not a copy) so the
 // gallery doubles as a smoke test. When you add a new common component,
@@ -21,9 +21,11 @@ Item {
   function open(payloadJson) {
     closingFromHost = false
     window.visible = true
+    // Defer focus so the FloatingWindow's content tree is in place; the
+    // hasCursor bindings on each demo target scroll themselves into view
+    // via onHasCursorChanged, so no explicit scroll call is needed here.
     Qt.callLater(function() {
       if (keyCatcher) keyCatcher.forceActiveFocus()
-      ensureCursorVisible(currentTarget())
     })
   }
 
@@ -334,14 +336,14 @@ Item {
               text: "Omarchy shell · dev gallery"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 18
+              font.pixelSize: Style.font.iconLarge
               font.bold: true
             }
             Text {
               text: "Live previews of every type exported from qs.Ui. Use this as the visual reference when porting panels or building plugins. j/k or arrows to walk; h/l within rows; Enter to activate; Esc to close."
               color: Qt.darker(root.foreground, 1.4)
               font.family: root.fontFamily
-              font.pixelSize: 11
+              font.pixelSize: Style.font.bodySmall
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -358,7 +360,7 @@ Item {
               text: "Conventions"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
 
@@ -384,7 +386,7 @@ Item {
                   wrapMode: Text.WordWrap
                   color: Qt.darker(root.foreground, 1.4)
                   font.family: root.fontFamily
-                  font.pixelSize: 11
+                  font.pixelSize: Style.font.bodySmall
                   text: "Theme. qs.Commons.Style exposes cornerRadius (mirrored from Hyprland's decoration:rounding), focusBorderColor / focusFillColor / focusBorderWidth (derived from Color.accent), and hotFill (the shared hover/cursor tint). qs.Commons.Color exposes foreground / background / accent / urgent plus per-surface roles. Components default-bind to these so a caller with no overrides matches the active theme."
                 }
                 Text {
@@ -392,7 +394,7 @@ Item {
                   wrapMode: Text.WordWrap
                   color: Qt.darker(root.foreground, 1.4)
                   font.family: root.fontFamily
-                  font.pixelSize: 11
+                  font.pixelSize: Style.font.bodySmall
                   text: "Single cursor. Most reusable panel primitives expose hasCursor: bool and emit hovered(bool); a few (like PanelSlider) defer to their own focus handling. The panel root owns focusSection + selectedIndex; each element binds hasCursor: root.focusSection === 'X' && root.selectedIndex === N, and onHovered updates the same state. One highlight on screen, keyboard and mouse always agree. See plugins/bar/widgets/audioPanel.qml for the canonical recipe."
                 }
                 Text {
@@ -400,7 +402,7 @@ Item {
                   wrapMode: Text.WordWrap
                   color: Qt.darker(root.foreground, 1.4)
                   font.family: root.fontFamily
-                  font.pixelSize: 11
+                  font.pixelSize: Style.font.bodySmall
                   text: "Popups + editors. Dropdown / SearchableDropdown expose popupOpen plus open() / close() / toggle(); inline TextField uses activeFocus. While any of those own the keys, set PanelKeyCatcher.blocked so the panel's cursor model freezes and the active widget handles input."
                 }
                 Text {
@@ -408,7 +410,7 @@ Item {
                   wrapMode: Text.WordWrap
                   color: Qt.darker(root.foreground, 1.4)
                   font.family: root.fontFamily
-                  font.pixelSize: 11
+                  font.pixelSize: Style.font.bodySmall
                   text: "Adding a component. Drop the QML in Ui/, add a line to Ui/qmldir, then add a section here using the real type (not a copy). The gallery doubles as a smoke test — if a component starts misbehaving this is the fastest place to see it."
                 }
               }
@@ -417,6 +419,205 @@ Item {
 
           PanelSeparator { foreground: root.foreground }
 
+          // ---- Typography --------------------------------------------------
+          Column {
+            width: parent.width
+            spacing: 8
+
+            Text {
+              text: "Typography"
+              color: root.foreground
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.subtitle
+              font.bold: true
+            }
+            Text {
+              text: "Style.font.* is the shell-wide type scale. Themes ship a single "
+                + "[font] base-size in shell.toml (clamped 11..13); every token derives from "
+                + "it via a fixed multiplier, so changing base-size rescales the whole shell "
+                + "proportionally. Themes can also pin individual tokens (caption, heading, "
+                + "display, etc.) for stylistic emphasis. The family follows the fontconfig "
+                + "monospace alias \u2014 set it with `omarchy font set <name>`."
+              color: Qt.darker(root.foreground, 1.5)
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.bodySmall
+              width: parent.width
+              wrapMode: Text.WordWrap
+            }
+
+            Rectangle {
+              width: parent.width
+              implicitHeight: typeCol.implicitHeight + 24
+              color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
+              radius: Style.cornerRadius
+              border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
+              border.width: 1
+
+              Column {
+                id: typeCol
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: 14
+                anchors.rightMargin: 14
+                spacing: 10
+
+                Text {
+                  text: "Scale"
+                  color: Qt.darker(root.foreground, 1.4)
+                  font.family: root.fontFamily
+                  font.pixelSize: Style.font.caption
+                  font.bold: true
+                }
+
+                // Every Style.font.* token rendered at its actual size. The
+                // model is data, not a Component graph, so this list stays
+                // in lockstep with the singleton without manual upkeep.
+                Repeater {
+                  model: [
+                    { key: "caption",      size: Style.font.caption,      sample: "Section header text" },
+                    { key: "bodySmall",    size: Style.font.bodySmall,    sample: "Secondary / tooltip text" },
+                    { key: "body",         size: Style.font.body,         sample: "Default label and control text" },
+                    { key: "subtitle",     size: Style.font.subtitle,     sample: "Row title text" },
+                    { key: "title",        size: Style.font.title,        sample: "Card title text" },
+                    { key: "heading",      size: Style.font.heading,      sample: "Panel heading" },
+                    { key: "display",      size: Style.font.display,      sample: "Display text" },
+                    { key: "displayLarge", size: Style.font.displayLarge, sample: "Display large" },
+                    { key: "iconSmall",    size: Style.font.iconSmall,    sample: "\uf004 \uf005 \uf02d" },
+                    { key: "icon",         size: Style.font.icon,         sample: "\uf004 \uf005 \uf02d" },
+                    { key: "iconLarge",    size: Style.font.iconLarge,    sample: "\uf004 \uf005 \uf02d" }
+                  ]
+                  delegate: Item {
+                    required property var modelData
+                    width: typeCol.width
+                    implicitHeight: Math.max(metaCol.implicitHeight, sampleText.implicitHeight)
+
+                    Column {
+                      id: metaCol
+                      anchors.left: parent.left
+                      anchors.verticalCenter: parent.verticalCenter
+                      width: 140
+                      spacing: 1
+                      Text {
+                        text: "Style.font." + modelData.key
+                        color: root.foreground
+                        font.family: root.fontFamily
+                        font.pixelSize: Style.font.bodySmall
+                      }
+                      Text {
+                        text: modelData.size + " px"
+                        color: Qt.darker(root.foreground, 1.5)
+                        font.family: root.fontFamily
+                        font.pixelSize: Style.font.caption
+                      }
+                    }
+
+                    Text {
+                      id: sampleText
+                      anchors.left: metaCol.right
+                      anchors.right: parent.right
+                      anchors.verticalCenter: parent.verticalCenter
+                      anchors.leftMargin: 16
+                      text: modelData.sample
+                      color: root.foreground
+                      font.family: root.fontFamily
+                      font.pixelSize: modelData.size
+                      elide: Text.ElideRight
+                    }
+                  }
+                }
+
+                Rectangle {
+                  width: parent.width
+                  height: 1
+                  color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
+                }
+
+                Text {
+                  text: "Theme tokens"
+                  color: Qt.darker(root.foreground, 1.4)
+                  font.family: root.fontFamily
+                  font.pixelSize: Style.font.caption
+                  font.bold: true
+                }
+
+                Grid {
+                  columns: 2
+                  columnSpacing: 16
+                  rowSpacing: 4
+                  width: parent.width
+
+                  Text {
+                    text: "Style.font.family"
+                    color: Qt.darker(root.foreground, 1.5)
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+                  Text {
+                    text: Style.font.family
+                    color: root.foreground
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+
+                  Text {
+                    text: "Style.font.resolvedFamily"
+                    color: Qt.darker(root.foreground, 1.5)
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+                  Text {
+                    text: Style.font.resolvedFamily
+                    color: root.foreground
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+
+                  Text {
+                    text: "Style.font.baseSize"
+                    color: Qt.darker(root.foreground, 1.5)
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+                  Text {
+                    text: Style.font.baseSize + " px"
+                    color: root.foreground
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+
+                  Text {
+                    text: "Style.bar.sizeHorizontal"
+                    color: Qt.darker(root.foreground, 1.5)
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+                  Text {
+                    text: Style.bar.sizeHorizontal + " px"
+                    color: root.foreground
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+
+                  Text {
+                    text: "Style.bar.sizeVertical"
+                    color: Qt.darker(root.foreground, 1.5)
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+                  Text {
+                    text: Style.bar.sizeVertical + " px"
+                    color: root.foreground
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.bodySmall
+                  }
+                }
+              }
+            }
+          }
+
+          PanelSeparator { foreground: root.foreground }
+
           // ---- PanelSectionHeader ------------------------------------------
           Column {
             width: parent.width
@@ -426,14 +627,14 @@ Item {
               text: "PanelSectionHeader"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Small-caps-style intro label for a section."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
             }
 
             Rectangle {
@@ -467,7 +668,7 @@ Item {
                   text: "Playing"
                   foreground: root.foreground
                   fontFamily: root.fontFamily
-                  fontSize: 11
+                  fontSize: Style.font.bodySmall
                 }
               }
             }
@@ -482,14 +683,14 @@ Item {
               text: "PanelSeparator"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "1px horizontal rule. Default 0.12 alpha on foreground; tweak via strength."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
             }
 
             Rectangle {
@@ -525,14 +726,14 @@ Item {
               text: "CursorSurface"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Single highlight chrome for keyboard+mouse navigable items. Press h/l (anywhere in this window) to move the demo cursor. The middle item is also marked `current` to show how the two states layer."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -582,7 +783,7 @@ Item {
                       text: modelData.label
                       color: root.foreground
                       font.family: root.fontFamily
-                      font.pixelSize: 12
+                      font.pixelSize: Style.font.body
                       elide: Text.ElideRight
                     }
 
@@ -610,14 +811,14 @@ Item {
               text: "PillButton"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Compact rounded button with optional icon, label, tooltip, and `active` highlight. Used inside panels for inline actions (Refresh, DNS pills, Bluetooth header)."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -713,14 +914,14 @@ Item {
               text: "CursorPill"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "PillButton with panel-cursor wiring. Bind hasCursor to your cursor state and onHovered to update it on mouse enter; clicks come from PillButton's clicked() signal. Use this for any \"pick one in a row\" UI (wifi DNS pills, bluetooth header actions). Click below or press h/l to walk the demo cursor."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -773,14 +974,14 @@ Item {
               text: "PanelActionButton"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "22×22 right-edge action button. Two flavors via hoverColor: default (foreground tint, e.g. confirm) and urgent (red tint, e.g. forget/unpair). Hover and click states are intrinsic; the row that owns it stays responsible for the cursor highlight."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -847,7 +1048,7 @@ Item {
                   foreground: root.foreground
                   panelBackground: root.background
                   fontFamily: root.fontFamily
-                  fontSize: 13
+                  fontSize: Style.font.subtitle
                   size: 26
                   focusable: true
                   hasCursor: root.focusSection === "panel-action-button" && root.selectedIndex === 3
@@ -869,14 +1070,14 @@ Item {
               text: "PanelToolTip"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Hover the swatch below to see the styled tooltip. Use this whenever a custom button or row needs a hover hint."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -901,7 +1102,7 @@ Item {
                 text: "hover me"
                 color: root.foreground
                 font.family: root.fontFamily
-                font.pixelSize: 12
+                font.pixelSize: Style.font.body
               }
 
               MouseArea {
@@ -935,14 +1136,14 @@ Item {
               text: "Slider"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Volume / progress slider. Drag, click anywhere on the track, or scroll the wheel."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -981,7 +1182,7 @@ Item {
                   text: "󰕾"
                   color: root.foreground
                   font.family: root.fontFamily
-                  font.pixelSize: 16
+                  font.pixelSize: Style.font.heading
                   width: 22
                   horizontalAlignment: Text.AlignHCenter
                   anchors.verticalCenter: parent.verticalCenter
@@ -1000,7 +1201,7 @@ Item {
                   text: Math.round((demoSlider.dragging ? demoSlider.liveValue : sliderRow.demoVolume) * 100) + "%"
                   color: root.foreground
                   font.family: root.fontFamily
-                  font.pixelSize: 12
+                  font.pixelSize: Style.font.body
                   width: 38
                   horizontalAlignment: Text.AlignRight
                   anchors.verticalCenter: parent.verticalCenter
@@ -1018,14 +1219,14 @@ Item {
               text: "ChoiceButton"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "A single button in a mutually-exclusive choice group. Selected styling uses the accent fill+border; focus styling uses the Style.focusBorderColor outline so keyboard nav can land on a non-selected option without it reading as the chosen one."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -1081,14 +1282,14 @@ Item {
               text: "TextField"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Single-line input. Inherits Qt Quick Controls TextField, swaps in the kit's focus chrome and selection styling. Toggle `password: true` for masked entry."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -1117,7 +1318,7 @@ Item {
                   foreground: root.foreground
                   accent: root.accent
                   font.family: root.fontFamily
-                  font.pixelSize: 12
+                  font.pixelSize: Style.font.body
                   hasCursor: !activeFocus && root.focusSection === "text-field" && root.selectedIndex === 0
                   onHoveredChanged: if (hovered) {
                     root.focusSection = "text-field"; root.selectedIndex = 0
@@ -1139,7 +1340,7 @@ Item {
                   foreground: root.foreground
                   accent: root.accent
                   font.family: root.fontFamily
-                  font.pixelSize: 12
+                  font.pixelSize: Style.font.body
                   hasCursor: !activeFocus && root.focusSection === "text-field" && root.selectedIndex === 1
                   onHoveredChanged: if (hovered) {
                     root.focusSection = "text-field"; root.selectedIndex = 1
@@ -1165,14 +1366,14 @@ Item {
               text: "NumberField"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Labeled spin box for integer settings. Up/down arrows step the value; the field accepts typed input. Pair with `from`/`to`/`stepSize` to constrain range."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -1216,14 +1417,14 @@ Item {
               text: "Toggle"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Title + description + switch. Click anywhere on the row to flip; caller updates `checked` in response. Same focus tokens as ChoiceButton."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -1277,14 +1478,14 @@ Item {
               text: "Dropdown"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Themed single-select with a panel-styled popup. Tab to focus the trigger, Enter/Space opens, j/k or arrows walk options, Enter selects. Options can be plain strings or { value, label } objects."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -1333,14 +1534,14 @@ Item {
               text: "SearchableDropdown"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "Dropdown with an embedded filter input. Type to narrow the list, Down to jump from the search to the first match, Enter to select. Use this for the bar settings \"+ Add widget\" picker and any other long-list selector."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -1406,14 +1607,14 @@ Item {
               text: "Composed example"
               color: root.foreground
               font.family: root.fontFamily
-              font.pixelSize: 13
+              font.pixelSize: Style.font.subtitle
               font.bold: true
             }
             Text {
               text: "A miniature wifi-style row built from CursorSurface + PanelActionButton + PanelToolTip. This is what new panel rows should look like — no inline Rectangle/Text/MouseArea reimplementation."
               color: Qt.darker(root.foreground, 1.5)
               font.family: root.fontFamily
-              font.pixelSize: 10
+              font.pixelSize: Style.font.caption
               width: parent.width
               wrapMode: Text.WordWrap
             }
@@ -1472,7 +1673,7 @@ Item {
                       text: "󰖩"
                       color: root.foreground
                       font.family: root.fontFamily
-                      font.pixelSize: 14
+                      font.pixelSize: Style.font.title
                     }
 
                     PanelActionButton {
@@ -1499,7 +1700,7 @@ Item {
                         text: "HughesWiFi"
                         color: root.foreground
                         font.family: root.fontFamily
-                        font.pixelSize: 12
+                        font.pixelSize: Style.font.body
                         elide: Text.ElideRight
                         width: parent.width
                       }
@@ -1507,7 +1708,7 @@ Item {
                         text: "Connected"
                         color: root.foreground
                         font.family: root.fontFamily
-                        font.pixelSize: 10
+                        font.pixelSize: Style.font.caption
                         elide: Text.ElideRight
                         width: parent.width
                       }
@@ -1546,7 +1747,7 @@ Item {
                       text: "󰖩"
                       color: Qt.darker(root.foreground, 1.4)
                       font.family: root.fontFamily
-                      font.pixelSize: 14
+                      font.pixelSize: Style.font.title
                     }
 
                     Text {
@@ -1556,7 +1757,7 @@ Item {
                       text: "HughesATT"
                       color: root.foreground
                       font.family: root.fontFamily
-                      font.pixelSize: 12
+                      font.pixelSize: Style.font.body
                     }
                   }
                 }

shell/plugins/dev-gallery/manifest.json

@@ -4,7 +4,7 @@
   "name": "Dev gallery",
   "version": "1.0.0",
   "author": "Omarchy",
-  "description": "Visual reference for omarchy-shell common UI components. Summon with: omarchy-shell-ipc shell summon omarchy.dev-gallery '{}'",
+  "description": "Visual reference for omarchy-shell common UI components. Summon with: omarchy-shell shell summon omarchy.dev-gallery '{}' (or run: omarchy dev ui-preview).",
   "kinds": ["panel"],
   "activation": "on-demand",
   "entryPoints": { "panel": "GalleryPanel.qml" }

shell/plugins/emoji-picker/EmojiPicker.qml

@@ -249,7 +249,7 @@ Item {
             color: root.foreground
             opacity: root.filterText ? 1 : 0.58
             font.family: root.fontFamily
-            font.pixelSize: 16
+            font.pixelSize: Style.font.heading
             elide: Text.ElideRight
           }
         }
@@ -279,7 +279,7 @@ Item {
               Text {
                 text: parent.emoji
                 font.family: root.fontFamily
-                font.pixelSize: 24
+                font.pixelSize: Style.font.display
                 anchors.centerIn: parent
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
@@ -308,7 +308,7 @@ Item {
               color: root.accent
               opacity: 0.8
               font.family: root.fontFamily
-              font.pixelSize: 28
+              font.pixelSize: Style.font.displayLarge
               horizontalAlignment: Text.AlignHCenter
               width: parent.width
             }
@@ -318,7 +318,7 @@ Item {
               color: root.foreground
               opacity: 0.7
               font.family: root.fontFamily
-              font.pixelSize: 14
+              font.pixelSize: Style.font.title
               horizontalAlignment: Text.AlignHCenter
               width: parent.width
             }

shell/plugins/image-picker/ImagePicker.qml

@@ -642,7 +642,7 @@ Item {
           color: root.foreground
           style: Text.Outline
           styleColor: root.withAlpha(root.background, 0.7)
-          font.pixelSize: 24
+          font.pixelSize: Style.font.display
           font.weight: Font.DemiBold
           horizontalAlignment: Text.AlignHCenter
           elide: Text.ElideRight
@@ -659,7 +659,7 @@ Item {
           opacity: 0.85
           style: Text.Outline
           styleColor: root.withAlpha(root.background, 0.7)
-          font.pixelSize: 14
+          font.pixelSize: Style.font.title
           horizontalAlignment: Text.AlignHCenter
           elide: Text.ElideRight
         }

shell/plugins/menu/Menu.qml

@@ -871,7 +871,7 @@ Item {
             color: root.foreground
             opacity: root.filterText ? 1 : 0.58
             font.family: root.fontFamily
-            font.pixelSize: 16
+            font.pixelSize: Style.font.heading
             elide: Text.ElideRight
           }
 
@@ -946,7 +946,7 @@ Item {
                 color: index === root.selectedIndex ? root.accent : root.foreground
                 opacity: row.kind === "back" ? 0.7 : 1
                 font.family: root.fontFamily
-                font.pixelSize: 18
+                font.pixelSize: Style.font.iconLarge
                 width: 36
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
@@ -970,7 +970,7 @@ Item {
                   text: row.label
                   color: index === root.selectedIndex ? root.accent : root.foreground
                   font.family: root.fontFamily
-                  font.pixelSize: 16
+                  font.pixelSize: Style.font.heading
                   font.weight: Font.Medium
                   elide: Text.ElideRight
                 }
@@ -982,7 +982,7 @@ Item {
                   color: root.foreground
                   opacity: 0.52
                   font.family: root.fontFamily
-                  font.pixelSize: 11
+                  font.pixelSize: Style.font.bodySmall
                   elide: Text.ElideRight
                 }
               }
@@ -1001,7 +1001,7 @@ Item {
                   color: root.foreground
                   opacity: 0.45
                   font.family: root.fontFamily
-                  font.pixelSize: 12
+                  font.pixelSize: Style.font.body
                   anchors.verticalCenter: parent.verticalCenter
                 }
 
@@ -1010,7 +1010,7 @@ Item {
                   color: index === root.selectedIndex ? root.accent : root.foreground
                   opacity: row.kind === "menu" || row.kind === "link" ? 0.36 : 0
                   font.family: root.fontFamily
-                  font.pixelSize: 16
+                  font.pixelSize: Style.font.heading
                   font.weight: Font.Normal
                   anchors.verticalCenter: parent.verticalCenter
                 }
@@ -1036,7 +1036,7 @@ Item {
               color: root.accent
               opacity: 0.8
               font.family: root.fontFamily
-              font.pixelSize: 28
+              font.pixelSize: Style.font.displayLarge
               horizontalAlignment: Text.AlignHCenter
               width: 320
             }
@@ -1046,7 +1046,7 @@ Item {
               color: root.foreground
               opacity: 0.7
               font.family: root.fontFamily
-              font.pixelSize: 14
+              font.pixelSize: Style.font.title
               horizontalAlignment: Text.AlignHCenter
               width: 320
             }

shell/plugins/notifications/components/NotificationCard.qml

@@ -200,7 +200,7 @@ Rectangle {
           text: root.glyph
           color: Color.notifications.text
           font.family: root.fontFamily
-          font.pixelSize: 18
+          font.pixelSize: Style.font.iconLarge
         }
       }
 
@@ -215,7 +215,7 @@ Rectangle {
           text: root.summary
           font.family: "Liberation Sans"
           color: Color.notifications.text
-          font.pixelSize: 14
+          font.pixelSize: Style.font.title
           font.bold: true
           wrapMode: Text.WordWrap
           elide: Text.ElideRight
@@ -230,7 +230,7 @@ Rectangle {
           textFormat: Text.StyledText
           font.family: "Liberation Sans"
           color: root.bodyColor
-          font.pixelSize: 14
+          font.pixelSize: Style.font.title
           wrapMode: Text.WordWrap
           elide: Text.ElideRight
           maximumLineCount: 3

shell/plugins/osd/Osd.qml

@@ -109,8 +109,8 @@ Item {
           anchors.verticalCenter: parent.verticalCenter
           horizontalAlignment: Text.AlignHCenter
           text: root.icon
-          font.family: "JetBrainsMono Nerd Font"
+          font.family: Style.font.family
-          font.pixelSize: 27
+          font.pixelSize: Style.font.displayLarge
           color: Color.foreground
         }
         Rectangle {
@@ -129,9 +129,9 @@ Item {
           width: root.hasProgress ? 41 : 190
           anchors.verticalCenter: parent.verticalCenter
           text: root.message
-          font.family: "JetBrainsMono Nerd Font"
+          font.family: Style.font.family
           font.bold: true
-          font.pixelSize: 14
+          font.pixelSize: Style.font.title
           color: Color.foreground
           elide: Text.ElideRight
           maximumLineCount: 1

shell/plugins/polkit/PolkitAgent.qml

@@ -269,7 +269,7 @@ Item {
           text: "\uf023"
           color: root.errorFlash ? Color.urgent : root.accent
           font.family: root.fontFamily
-          font.pixelSize: 20
+          font.pixelSize: Style.font.iconLarge
           width: 26
           height: root.fieldHeight
           horizontalAlignment: Text.AlignHCenter
@@ -289,7 +289,7 @@ Item {
             selectionColor: root.withAlpha(root.accent, 0.45)
             selectedTextColor: root.foreground
             font.family: root.fontFamily
-            font.pixelSize: 19
+            font.pixelSize: Style.font.iconLarge
             echoMode: root.responseVisible ? TextInput.Normal : TextInput.Password
             passwordCharacter: "\u2022"
             color: root.errorFlash ? Color.urgent : root.foreground
@@ -314,7 +314,7 @@ Item {
             color: root.errorFlash ? Color.urgent : root.foreground
             opacity: root.errorFlash ? 1 : 0.36
             font.family: root.fontFamily
-            font.pixelSize: 19
+            font.pixelSize: Style.font.iconLarge
             elide: Text.ElideRight
             visible: passwordInput.visible && passwordInput.text.length === 0
           }

shell/plugins/settings/SettingsPanel.qml

@@ -559,7 +559,7 @@ Item {
             text: "Omarchy Bar Settings"
             color: root.foreground
             font.family: root.fontFamily
-            font.pixelSize: 16
+            font.pixelSize: Style.font.heading
             font.bold: true
             anchors.left: parent.left
             anchors.leftMargin: 18
@@ -570,7 +570,7 @@ Item {
             text: "~/.config/omarchy/shell.json"
             color: Qt.darker(root.foreground, 1.8)
             font.family: root.fontFamily
-            font.pixelSize: 10
+            font.pixelSize: Style.font.caption
             anchors.right: parent.right
             anchors.rightMargin: 18
             anchors.verticalCenter: parent.verticalCenter
@@ -651,7 +651,7 @@ Item {
             text: root.widgetName(root.widgetDialogEntry.id || "")
             color: root.foreground
             font.family: root.fontFamily
-            font.pixelSize: 14
+            font.pixelSize: Style.font.title
             font.bold: true
           }
 
@@ -659,7 +659,7 @@ Item {
             text: root.widgetDescription(root.widgetDialogEntry.id || "")
             color: Qt.darker(root.foreground, 1.4)
             font.family: root.fontFamily
-            font.pixelSize: 11
+            font.pixelSize: Style.font.bodySmall
             wrapMode: Text.WordWrap
             Layout.fillWidth: true
           }
@@ -709,7 +709,7 @@ Item {
       text: "Bar"
       color: root.foreground
       font.family: root.fontFamily
-      font.pixelSize: 18
+      font.pixelSize: Style.font.iconLarge
       font.bold: true
     }
 
@@ -717,7 +717,7 @@ Item {
       text: "Drag widgets between the bar's three sections, drop in plugin widgets, and tweak per-widget options. Auto-saves to shell.json."
       color: Qt.darker(root.foreground, 1.6)
       font.family: root.fontFamily
-      font.pixelSize: 11
+      font.pixelSize: Style.font.bodySmall
       wrapMode: Text.WordWrap
       Layout.fillWidth: true
     }
@@ -819,7 +819,7 @@ Item {
         text: "Position"
         color: Qt.darker(root.foreground, 1.4)
         font.family: root.fontFamily
-        font.pixelSize: 10
+        font.pixelSize: Style.font.caption
         font.bold: true
       }
 
@@ -869,7 +869,7 @@ Item {
         text: section.sectionLabel
         color: root.foreground
         font.family: root.fontFamily
-        font.pixelSize: 13
+        font.pixelSize: Style.font.subtitle
         font.bold: true
         Layout.alignment: Qt.AlignVCenter
       }
@@ -878,7 +878,7 @@ Item {
         text: "·  " + section.entries.length + (section.entries.length === 1 ? " widget" : " widgets")
         color: Qt.darker(root.foreground, 1.5)
         font.family: root.fontFamily
-        font.pixelSize: 11
+        font.pixelSize: Style.font.bodySmall
         Layout.alignment: Qt.AlignVCenter
       }
 
@@ -947,7 +947,7 @@ Item {
           text: "Empty — add a widget"
           color: Qt.darker(root.foreground, 1.5)
           font.family: root.fontFamily
-          font.pixelSize: 11
+          font.pixelSize: Style.font.bodySmall
         }
       }
     }
@@ -984,7 +984,7 @@ Item {
         foreground: root.foreground
         panelBackground: root.background
         fontFamily: root.fontFamily
-        fontSize: 13
+        fontSize: Style.font.subtitle
         size: 26
         focusable: true
         onClicked: root.moveEntry(card.sectionKey, card.entryIndex, card.entryIndex - 1)
@@ -995,7 +995,7 @@ Item {
         foreground: root.foreground
         panelBackground: root.background
         fontFamily: root.fontFamily
-        fontSize: 13
+        fontSize: Style.font.subtitle
         size: 26
         focusable: true
         onClicked: root.moveEntry(card.sectionKey, card.entryIndex, card.entryIndex + 1)
@@ -1006,7 +1006,7 @@ Item {
         foreground: root.foreground
         panelBackground: root.background
         fontFamily: root.fontFamily
-        fontSize: 13
+        fontSize: Style.font.subtitle
         size: 26
         focusable: true
         visible: card.hasSettings
@@ -1019,7 +1019,7 @@ Item {
         hoverColor: root.urgent
         panelBackground: root.background
         fontFamily: root.fontFamily
-        fontSize: 13
+        fontSize: Style.font.subtitle
         size: 26
         focusable: true
         onClicked: root.removeEntry(card.sectionKey, card.entryIndex)
@@ -1038,7 +1038,7 @@ Item {
         text: card.displayName
         color: root.foreground
         font.family: root.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
         font.bold: true
         elide: Text.ElideRight
         width: parent.width
@@ -1048,7 +1048,7 @@ Item {
         text: card.description
         color: Qt.darker(root.foreground, 1.5)
         font.family: root.fontFamily
-        font.pixelSize: 10
+        font.pixelSize: Style.font.caption
         elide: Text.ElideRight
         width: parent.width
       }
@@ -1126,7 +1126,7 @@ Item {
         foreground: root.foreground
         accent: root.accent
         font.family: root.fontFamily
-        font.pixelSize: 12
+        font.pixelSize: Style.font.body
         onEditingFinished: if (fieldKey) calForm.fieldChanged(fieldKey, text)
       }
 
@@ -1134,7 +1134,7 @@ Item {
         text: "Horizontal format"
         color: Qt.darker(root.foreground, 1.4)
         font.family: root.fontFamily
-        font.pixelSize: 11
+        font.pixelSize: Style.font.bodySmall
       }
       CalendarField {
         fieldKey: "format"
@@ -1145,7 +1145,7 @@ Item {
         text: "Alternate format (click to swap)"
         color: Qt.darker(root.foreground, 1.4)
         font.family: root.fontFamily
-        font.pixelSize: 11
+        font.pixelSize: Style.font.bodySmall
       }
       CalendarField {
         fieldKey: "formatAlt"
@@ -1156,7 +1156,7 @@ Item {
         text: "Vertical format (left/right bars)"
         color: Qt.darker(root.foreground, 1.4)
         font.family: root.fontFamily
-        font.pixelSize: 11
+        font.pixelSize: Style.font.bodySmall
       }
       CalendarField {
         fieldKey: "verticalFormat"

shell/plugins/settings/components/NDropdown.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import qs.Commons
 
 // Themed ComboBox + popup. Anchors below the trigger, paints with the host
 // shell's foreground/background palette, and inherits the shell-wide corner
@@ -10,10 +11,10 @@ Item {
   property string label: ""
   property string value: ""
   property var options: []
-  property color foreground: "#cacccc"
+  property color foreground: Color.foreground
-  property color background: "#101315"
+  property color background: Color.background
-  property color accent: "#cacccc"
+  property color accent: Color.accent
-  property string fontFamily: "monospace"
+  property string fontFamily: Style.font.family
   property int cornerRadius: 0
   property int rowHeight: 28
   property int popupRowHeight: 28
@@ -33,7 +34,7 @@ Item {
       text: root.label
       color: Qt.darker(root.foreground, 1.4)
       font.family: root.fontFamily
-      font.pixelSize: 10
+      font.pixelSize: Style.font.caption
       font.bold: true
     }
 
@@ -42,7 +43,7 @@ Item {
       width: parent.width
       height: root.rowHeight
       font.family: root.fontFamily
-      font.pixelSize: 12
+      font.pixelSize: Style.font.body
       model: root.options
       currentIndex: {
         for (var i = 0; i < model.length; i++) if (model[i] === root.value) return i
@@ -76,7 +77,7 @@ Item {
         text: "▾"
         color: Qt.darker(root.foreground, 1.2)
         font.family: root.fontFamily
-        font.pixelSize: 10
+        font.pixelSize: Style.font.caption
       }
 
       popup: Popup {
@@ -115,7 +116,7 @@ Item {
           text: String(modelData)
           color: index === combo.highlightedIndex ? root.accent : root.foreground
           font.family: root.fontFamily
-          font.pixelSize: 12
+          font.pixelSize: Style.font.body
           leftPadding: 10
           rightPadding: 10
           verticalAlignment: Text.AlignVCenter

shell/ui/settings/DynamicSettingsForm.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import qs.Commons
 import qs.Ui
 
 // Generic schema-driven settings form. The host panel passes:
@@ -16,8 +17,8 @@ Column {
 
   property var schema: []
   property var entry: ({})
-  property color foregroundColor: "#cacccc"
+  property color foregroundColor: Color.foreground
-  property string fontFamilyName: "JetBrainsMono Nerd Font"
+  property string fontFamilyName: Style.font.family
   spacing: 10
   width: parent ? parent.width : 0
 
@@ -45,7 +46,7 @@ Column {
         text: modelData && modelData.label ? modelData.label : (modelData && modelData.key ? modelData.key : "")
         color: Qt.darker(root.foregroundColor, 1.3)
         font.family: root.fontFamilyName
-        font.pixelSize: 11
+        font.pixelSize: Style.font.bodySmall
         font.bold: true
         visible: text !== ""
       }
@@ -55,7 +56,7 @@ Column {
         text: modelData ? (modelData.description || "") : ""
         color: Qt.darker(root.foregroundColor, 1.6)
         font.family: root.fontFamilyName
-        font.pixelSize: 10
+        font.pixelSize: Style.font.caption
         wrapMode: Text.WordWrap
         width: parent.width
       }
@@ -89,7 +90,7 @@ Column {
           width: parent.width
           foreground: root.foregroundColor
           font.family: root.fontFamilyName
-          font.pixelSize: 12
+          font.pixelSize: Style.font.body
           text: root.currentValue(field) === undefined ? "" : String(root.currentValue(field))
           onEditingFinished: if (fieldKey) root.fieldChanged(fieldKey, text)
         }
@@ -101,7 +102,7 @@ Column {
           property string fieldKey: ""
           property var field: ({})
           font.family: root.fontFamilyName
-          font.pixelSize: 12
+          font.pixelSize: Style.font.body
           text: field && field.label ? "" : ""
           checked: !!root.currentValue(field)
           onToggled: if (fieldKey) root.fieldChanged(fieldKey, checked)
@@ -115,7 +116,7 @@ Column {
           property var field: ({})
           width: parent.width
           font.family: root.fontFamilyName
-          font.pixelSize: 12
+          font.pixelSize: Style.font.body
           model: field && field.options ? field.options : []
           currentIndex: {
             var v = root.currentValue(field)
@@ -172,7 +173,7 @@ Column {
             text: slider.value.toFixed(2)
             color: root.foregroundColor
             font.family: root.fontFamilyName
-            font.pixelSize: 11
+            font.pixelSize: Style.font.bodySmall
             anchors.verticalCenter: parent.verticalCenter
           }
         }
@@ -185,6 +186,6 @@ Column {
     text: "No settings."
     color: Qt.darker(root.foregroundColor, 1.5)
     font.family: root.fontFamilyName
-    font.pixelSize: 11
+    font.pixelSize: Style.font.bodySmall
   }
 }