diff --git a/AGENTS.md b/AGENTS.md
index 38bb0cf..4917323 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -38,6 +38,16 @@ The `pnpm test` script intentionally runs `build` first so `tsnapi` snapshots co
 - Utility imports use the package-path form `devframe/utils/*`, never relative `../utils/*`.
 - Dependencies go through the pnpm catalogs in `pnpm-workspace.yaml` (`cli`, `inlined`, `testing`, `types`) — add to a catalog and reference as `catalog:<name>`, don't pin versions in `package.json`.
 
+### Design system
+
+The built-in plugins share one design system, `@internal/design`, so they look and feel like one product across frameworks (the Git dashboard is React/Next, terminals is Svelte, code-server is vanilla DOM). It's an optional package plugins opt into — devframe core stays headless and ships no styling.
+
+- **One preset to extend.** Each plugin's `uno.config.ts` is just `presets: [presetDevframe()]` (imported from `@internal/design/preset`). The preset bundles `presetWind4` + `presetIcons` + the directive/variant-group transformers, the semantic token theme, and the shared `df-*` component shortcuts. Don't re-declare presets, palettes, or shortcuts per plugin.
+- **One token source.** Import `@internal/design/theme.css` once on the page (after the generated UnoCSS stylesheet so its base layer wins). Token *values* (the `--df-*` custom properties, light + dark via the `.dark` class) live only there — never hardcode a palette in a plugin.
+- **Shared component vocabulary.** Build UI from the `df-*` classes (`df-btn`, `df-badge`, `df-tab`, `df-navtab`, `df-nav`, `df-toolbar`, `df-card`, `df-input`, `df-dot`, `df-tag-*`, …) and the semantic token utilities (`bg-primary`, `text-muted-foreground`, `bg-card`, `border-border`, …). Markup differs per framework; the classes resolve identically, which is what keeps the surfaces consistent. Non-UnoCSS consumers can link the prebuilt `@internal/design/style.css`.
+- **Component builders.** Prefer the framework-neutral recipes from `@internal/design/components` (`button`, `badge`, `tab`, `navTab`, `nav`, `toolbar`, `card`, `panel`, `input`, `link`, `dot`, `spinner`, `tag`) over hand-written class strings — they return the canonical `df-*` classes and read the same in React (`className=`), Svelte (`class=`) and vanilla DOM. Because these classes are assembled at runtime, the preset safelists the `df-*` vocabulary so UnoCSS always emits it; add new component classes to `DF_SAFELIST` when you extend the set.
+- **Plain `.ts`/vanilla views** must opt `.ts` into UnoCSS extraction (`content.pipeline.include`), since UnoCSS only scans framework files by default.
+
 ### Devframe design principles
 
 These reinforce devframe's positioning as "the container for one devtool integration, portable to multiple viewers". When in doubt, err on the side of "devframe provides primitives, the hub provides UX".
diff --git a/alias.ts b/alias.ts
index cb28bf8..eddbddf 100644
--- a/alias.ts
+++ b/alias.ts
@@ -45,6 +45,11 @@ export const alias = {
   '@devframes/hub': r('hub/src/index.ts'),
   '@devframes/nuxt/runtime/plugin.client': r('nuxt/src/runtime/plugin.client.ts'),
   '@devframes/nuxt': r('nuxt/src/index.ts'),
+  '@internal/design/preset': r('design/src/preset.ts'),
+  '@internal/design/components': r('design/src/components.ts'),
+  '@internal/design/tokens': r('design/src/tokens.ts'),
+  '@internal/design/theme.css': r('design/src/theme.css'),
+  '@internal/design': r('design/src/index.ts'),
   '@devframes/plugin-code-server/client': p('code-server/src/client/index.ts'),
   '@devframes/plugin-code-server/node': p('code-server/src/node/index.ts'),
   '@devframes/plugin-code-server/constants': p('code-server/src/constants.ts'),
@@ -65,11 +70,14 @@ export const alias = {
   'devframe': r('devframe/src'),
 }
 
-// update tsconfig.base.json
+// update tsconfig.base.json — CSS aliases exist for Vite resolution only;
+// TypeScript resolves `*.css` side-effect imports through ambient shims.
 const raw = fs.readFileSync(join(root, 'tsconfig.base.json'), 'utf-8').trim()
 const tsconfig = JSON.parse(raw)
 tsconfig.compilerOptions.paths = Object.fromEntries(
-  Object.entries(alias).map(([key, value]) => [key, [`./${relative(root, value)}`]]),
+  Object.entries(alias)
+    .filter(([key]) => !key.endsWith('.css'))
+    .map(([key, value]) => [key, [`./${relative(root, value)}`]]),
 )
 const newRaw = JSON.stringify(tsconfig, null, 2)
 if (newRaw !== raw)
diff --git a/packages/design/package.json b/packages/design/package.json
new file mode 100644
index 0000000..002fc87
--- /dev/null
+++ b/packages/design/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@internal/design",
+  "type": "module",
+  "version": "0.5.4",
+  "private": true,
+  "description": "Internal, unpublished design system for devframe's built-in plugins — one UnoCSS preset, one token set, one shared component vocabulary, portable across frameworks.",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./preset": "./dist/preset.mjs",
+    "./components": "./dist/components.mjs",
+    "./tokens": "./dist/tokens.mjs",
+    "./theme.css": "./dist/theme.css",
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown && tsx scripts/build-css.ts",
+    "watch": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "prepack": "pnpm run build"
+  },
+  "peerDependencies": {
+    "unocss": "^66.0.0"
+  },
+  "dependencies": {
+    "@iconify-json/ph": "catalog:frontend"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:types",
+    "tsdown": "catalog:build",
+    "tsx": "catalog:build",
+    "unocss": "catalog:frontend"
+  }
+}
diff --git a/packages/design/scripts/build-css.ts b/packages/design/scripts/build-css.ts
new file mode 100644
index 0000000..710087f
--- /dev/null
+++ b/packages/design/scripts/build-css.ts
@@ -0,0 +1,48 @@
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { createGenerator } from 'unocss'
+import { presetDevframe, shortcuts } from '../src/preset'
+
+/**
+ * Emit the design package's shipped CSS:
+ *
+ * - `dist/theme.css` — the `--df-*` token values + base layer, verbatim.
+ * - `dist/style.css` — a standalone stylesheet (UnoCSS preflights + every
+ *   `df-*` component class + the tokens) for consumers that don't run UnoCSS
+ *   themselves but still want the shared component vocabulary.
+ */
+
+const root = fileURLToPath(new URL('..', import.meta.url))
+const distDir = resolve(root, 'dist')
+
+async function main(): Promise<void> {
+  await mkdir(distDir, { recursive: true })
+
+  const theme = await readFile(resolve(root, 'src/theme.css'), 'utf8')
+  await writeFile(resolve(distDir, 'theme.css'), theme)
+
+  // Materialize every named `df-*` shortcut (and a few palette tags) so the
+  // standalone stylesheet carries the full shared component vocabulary.
+  const names = new Set<string>()
+  for (const entry of shortcuts) {
+    if (Array.isArray(entry))
+      continue
+    for (const key of Object.keys(entry))
+      names.add(key)
+  }
+  for (const color of ['blue', 'amber', 'green', 'red', 'sky', 'violet', 'rose'])
+    names.add(`df-tag-${color}`)
+
+  const generator = await createGenerator({ presets: [presetDevframe()] })
+  const { css } = await generator.generate(names, { preflights: true })
+
+  const banner = '/* @internal/design — prebuilt stylesheet. Generated by scripts/build-css.ts; do not edit. */\n'
+  await writeFile(resolve(distDir, 'style.css'), `${banner}${css}\n${theme}`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/packages/design/src/components.ts b/packages/design/src/components.ts
new file mode 100644
index 0000000..2bcc22a
--- /dev/null
+++ b/packages/design/src/components.ts
@@ -0,0 +1,166 @@
+/**
+ * Shared component recipes.
+ *
+ * These framework-neutral builders are the devframe "components": each returns
+ * the canonical `df-*` class string for an element, so React (`className=`),
+ * Svelte (`class=`) and vanilla DOM (`el.className =`) all describe the same
+ * button, panel, tab or nav the same way and render identically.
+ *
+ * Because the class strings are assembled at runtime, the `df-*` vocabulary is
+ * safelisted by the preset (see {@link DF_SAFELIST}) so UnoCSS always emits it
+ * regardless of static extraction.
+ */
+
+/** Join truthy class fragments into a single class string. */
+export function cx(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ')
+}
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
+export type ButtonSize = 'md' | 'sm' | 'lg' | 'icon' | 'icon-sm'
+
+export interface ButtonProps {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  /** Extra classes appended after the recipe. */
+  class?: string
+}
+
+/** A button. `df-btn` + a variant, optionally a non-default size. */
+export function button({ variant = 'primary', size = 'md', class: extra }: ButtonProps = {}): string {
+  return cx('df-btn', `df-btn-${variant}`, size !== 'md' && `df-btn-${size}`, extra)
+}
+
+export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'
+
+export interface BadgeProps {
+  variant?: BadgeVariant
+  class?: string
+}
+
+/** A solid/semantic badge (the variant class already includes the `df-badge` base). */
+export function badge({ variant = 'secondary', class: extra }: BadgeProps = {}): string {
+  return cx(`df-badge-${variant}`, extra)
+}
+
+/** A soft, palette-driven tag (`df-tag-blue`, `df-tag-amber`, …). */
+export function tag(color: string, extra?: string): string {
+  return cx(`df-tag-${color}`, extra)
+}
+
+/** The container for a set of segmented tabs. */
+export function tabsList(extra?: string): string {
+  return cx('df-tabs-list', extra)
+}
+
+/** A segmented tab (active state is driven by `data-state="active"` on the element). */
+export function tab(extra?: string): string {
+  return cx('df-tab', extra)
+}
+
+export interface NavTabProps {
+  active?: boolean
+  class?: string
+}
+
+/** A closeable navigation tab (terminal sessions, open documents, …). */
+export function navTab({ active = false, class: extra }: NavTabProps = {}): string {
+  return cx('df-navtab', active && 'df-navtab-active', extra)
+}
+
+/** A top navigation bar. */
+export function nav(extra?: string): string {
+  return cx('df-nav', extra)
+}
+
+/** A secondary toolbar bar. */
+export function toolbar(extra?: string): string {
+  return cx('df-toolbar', extra)
+}
+
+/** A card surface. */
+export function card(extra?: string): string {
+  return cx('df-card', extra)
+}
+
+/** A flat panel surface. */
+export function panel(extra?: string): string {
+  return cx('df-panel', extra)
+}
+
+/** A text input / textarea. */
+export function input(extra?: string): string {
+  return cx('df-input', extra)
+}
+
+/** An inline link. */
+export function link(extra?: string): string {
+  return cx('df-link', extra)
+}
+
+export type DotState = 'running' | 'idle' | 'error'
+
+/** A status dot for a lifecycle state. */
+export function dot(state: DotState, extra?: string): string {
+  return cx('df-dot', `df-dot-${state}`, extra)
+}
+
+/** An indeterminate spinner. */
+export function spinner(extra?: string): string {
+  return cx('df-spinner', extra)
+}
+
+/**
+ * The full fixed `df-*` vocabulary. The preset safelists this so the runtime
+ * builders above always have CSS to resolve to, even though their class strings
+ * never appear literally in scanned source. A representative set of palette
+ * tags is included for {@link tag}.
+ */
+export const DF_SAFELIST: string[] = [
+  // buttons
+  'df-btn',
+  'df-btn-primary',
+  'df-btn-secondary',
+  'df-btn-outline',
+  'df-btn-ghost',
+  'df-btn-destructive',
+  'df-btn-link',
+  'df-btn-sm',
+  'df-btn-lg',
+  'df-btn-icon',
+  'df-btn-icon-sm',
+  // badges
+  'df-badge',
+  'df-badge-primary',
+  'df-badge-secondary',
+  'df-badge-success',
+  'df-badge-warning',
+  'df-badge-destructive',
+  'df-badge-outline',
+  // tabs + bars
+  'df-tabs-list',
+  'df-tab',
+  'df-navtab',
+  'df-navtab-active',
+  'df-nav',
+  'df-toolbar',
+  // surfaces + controls
+  'df-card',
+  'df-panel',
+  'df-input',
+  'df-link',
+  // status
+  'df-dot',
+  'df-dot-running',
+  'df-dot-idle',
+  'df-dot-error',
+  'df-spinner',
+  // common palette tags
+  'df-tag-blue',
+  'df-tag-amber',
+  'df-tag-green',
+  'df-tag-red',
+  'df-tag-sky',
+  'df-tag-violet',
+  'df-tag-rose',
+]
diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
new file mode 100644
index 0000000..ccdf55f
--- /dev/null
+++ b/packages/design/src/index.ts
@@ -0,0 +1,14 @@
+export * from './components'
+export { presetDevframe, shortcuts } from './preset'
+export type { PresetDevframeOptions } from './preset'
+export { presetDevframe as default } from './preset'
+export {
+  cssVar,
+  PAIRED_TOKENS,
+  radius,
+  SOLO_TOKENS,
+  TOKEN_PREFIX,
+  tokenColors,
+} from './tokens'
+
+export type { DesignToken, PairedToken, SoloToken } from './tokens'
diff --git a/packages/design/src/preset.ts b/packages/design/src/preset.ts
new file mode 100644
index 0000000..4da1728
--- /dev/null
+++ b/packages/design/src/preset.ts
@@ -0,0 +1,149 @@
+import type { Preset } from 'unocss'
+import {
+  definePreset,
+  presetIcons,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import { DF_SAFELIST } from './components'
+import { radius, tokenColors } from './tokens'
+
+export interface PresetDevframeOptions {
+  /**
+   * Options forwarded to `presetIcons`. The default icon scale matches the
+   * inline-with-text sizing used across the built-in plugins.
+   */
+  icons?: Parameters<typeof presetIcons>[0]
+}
+
+/**
+ * The shared `df-*` component vocabulary. These shortcuts are the cross-frame
+ * "components": markup differs per framework (React, Svelte, vanilla DOM) but a
+ * `df-btn df-btn-primary` button — or a `df-badge`, `df-tab`, `df-card`, … —
+ * resolves to the same CSS everywhere, so they look and feel identical. The
+ * definitions mirror the flagship shadcn/ui primitives so a hand-written
+ * `df-btn` and a generated `<Button>` are visually interchangeable.
+ */
+export const shortcuts = [
+  {
+    // Foundations — friendly aliases onto the semantic token palette.
+    'bg-base': 'bg-background',
+    'color-base': 'text-foreground',
+    'border-base': 'border-border',
+    'bg-active': 'bg-accent',
+    'color-active': 'text-primary',
+    'border-active': 'border-primary/40',
+    'op-fade': 'op65 dark:op75',
+    'op-mute': 'op40 dark:op45',
+
+    // Named depth layers so chrome stacks predictably.
+    'z-toolbar': 'z-20',
+    'z-nav': 'z-30',
+
+    // Buttons.
+    'df-btn': 'inline-flex items-center justify-center gap-2 shrink-0 whitespace-nowrap select-none cursor-pointer rounded-md text-sm font-medium h-9 px-4 py-2 outline-none transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0 disabled:(pointer-events-none op50) focus-visible:(ring-[3px] ring-ring/50)',
+    'df-btn-primary': 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+    'df-btn-secondary': 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+    'df-btn-outline': 'border border-border bg-background shadow-xs hover:(bg-accent text-accent-foreground)',
+    'df-btn-ghost': 'hover:(bg-accent text-accent-foreground)',
+    'df-btn-destructive': 'bg-destructive text-white shadow-xs hover:bg-destructive/90',
+    'df-btn-link': 'text-primary underline-offset-4 hover:underline',
+    // Size modifiers override the base size with `!` so they win regardless of
+    // stylesheet order — no `tailwind-merge` needed in Svelte/vanilla markup.
+    'df-btn-sm': 'h-8! gap-1.5! px-3!',
+    'df-btn-lg': 'h-10! px-6!',
+    'df-btn-icon': 'w-9! px-0!',
+    'df-btn-icon-sm': 'h-7! w-7! px-0!',
+
+    // Badges (solid / semantic) and soft tags share a silhouette.
+    'df-badge': 'inline-flex items-center justify-center gap-1 w-fit shrink-0 whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium',
+    'df-badge-primary': 'df-badge border-transparent bg-primary text-primary-foreground',
+    'df-badge-secondary': 'df-badge border-transparent bg-secondary text-secondary-foreground',
+    'df-badge-success': 'df-badge border-success/20 bg-success/15 text-success',
+    'df-badge-warning': 'df-badge border-warning/20 bg-warning/15 text-warning',
+    'df-badge-destructive': 'df-badge border-transparent bg-destructive text-white',
+    'df-badge-outline': 'df-badge text-foreground',
+
+    // Segmented tabs (mirror the shadcn segmented control).
+    'df-tabs-list': 'inline-flex items-center justify-center w-fit h-9 p-[3px] rounded-lg bg-muted text-muted-foreground',
+    'df-tab': 'inline-flex flex-1 items-center justify-center gap-1.5 h-[calc(100%-1px)] px-2 py-1 rounded-md border border-transparent text-sm font-medium whitespace-nowrap select-none cursor-pointer outline-none transition-colors disabled:(pointer-events-none op50) focus-visible:(ring-[3px] ring-ring/50) data-[state=active]:(bg-background text-foreground shadow-sm)',
+
+    // Closeable navigation tabs (e.g. terminal sessions, open documents).
+    'df-navtab': 'relative inline-flex items-center gap-1.5 max-w-52 px-2 py-1 rounded-md border border-transparent text-sm op-fade select-none cursor-pointer transition-colors hover:(op100 bg-accent)',
+    'df-navtab-active': 'op100! bg-accent border-base! color-base',
+
+    // Surfaces.
+    'df-card': 'flex flex-col rounded-xl border border-border bg-card text-card-foreground shadow-sm',
+    'df-panel': 'rounded-lg border border-border bg-card text-card-foreground',
+
+    // Bars — a top navigation strip and a secondary toolbar.
+    'df-nav': 'z-nav flex items-center gap-1 shrink-0 h-9 px-2 border-b border-base bg-base',
+    'df-toolbar': 'z-toolbar flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm',
+
+    // Form controls.
+    'df-input': 'flex w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground disabled:(cursor-not-allowed op50) focus-visible:(border-ring ring-[3px] ring-ring/50)',
+
+    // Links.
+    'df-link': 'text-primary underline-offset-4 hover:underline',
+
+    // Status dots — real lifecycle states only.
+    'df-dot': 'inline-block h-1.5 w-1.5 rounded-full shrink-0',
+    'df-dot-running': 'bg-success',
+    'df-dot-idle': 'bg-muted-foreground',
+    'df-dot-error': 'bg-destructive',
+
+    // Indeterminate spinner.
+    'df-spinner': 'inline-block size-4 rounded-full border-2 border-current border-t-transparent animate-spin',
+  },
+
+  // Soft, palette-driven tags: `df-tag-blue`, `df-tag-amber`, … for ad-hoc
+  // categorical labels that fall outside the semantic palette.
+  [
+    /^df-tag-(\w+)$/,
+    ([, color]: string[]) =>
+      `inline-flex items-center gap-1 w-fit whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium border-${color}-500/20 bg-${color}-400/15 text-${color}-700 dark:text-${color}-300`,
+  ] as [RegExp, (match: string[]) => string],
+]
+
+/**
+ * The single UnoCSS preset every devframe plugin extends. It bundles
+ * `presetWind4` (Tailwind-compatible utilities + class-based `dark:`),
+ * `presetIcons` (Phosphor via `@iconify-json/ph`), the directive + variant-group
+ * transformers, the semantic token theme, and the shared `df-*` shortcuts.
+ *
+ * A plugin's entire `uno.config.ts` becomes:
+ *
+ * ```ts
+ * import { presetDevframe } from '@internal/design/preset'
+ * import { defineConfig } from 'unocss'
+ *
+ * export default defineConfig({ presets: [presetDevframe()] })
+ * ```
+ *
+ * Pair it with `import '@internal/design/theme.css'` once on the page to define
+ * the `--df-*` token values and base element styling.
+ */
+export function presetDevframe(options: PresetDevframeOptions = {}): Preset {
+  return definePreset({
+    name: '@internal/design/preset',
+    theme: {
+      colors: tokenColors,
+      radius,
+    },
+    shortcuts,
+    // The `df-*` vocabulary is assembled at runtime by the component builders,
+    // so it can't be statically extracted — always emit it.
+    safelist: DF_SAFELIST,
+    presets: [
+      presetWind4(),
+      presetIcons({ scale: 1.1, ...options.icons }),
+    ],
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup(),
+    ],
+  })
+}
+
+export default presetDevframe
diff --git a/packages/design/src/theme.css b/packages/design/src/theme.css
new file mode 100644
index 0000000..aa58e4d
--- /dev/null
+++ b/packages/design/src/theme.css
@@ -0,0 +1,112 @@
+/**
+ * devframe design tokens — the single source of truth for color *values*.
+ *
+ * Import once on the page (after UnoCSS's generated stylesheet so the base
+ * layer wins): `import '@internal/design/theme.css'`. Every `--df-*` variable
+ * is consumed by the UnoCSS preset's semantic utilities (`bg-primary`,
+ * `text-muted-foreground`, …) and flips wholesale under the `.dark` class, so a
+ * single class set drives both themes.
+ */
+
+:root {
+  color-scheme: light;
+
+  --df-radius: 0.625rem;
+
+  --df-background: oklch(1 0 0);
+  --df-foreground: oklch(0.145 0 0);
+  --df-card: oklch(1 0 0);
+  --df-card-foreground: oklch(0.145 0 0);
+  --df-popover: oklch(1 0 0);
+  --df-popover-foreground: oklch(0.145 0 0);
+  --df-primary: oklch(0.54 0.2 283);
+  --df-primary-foreground: oklch(0.985 0 0);
+  --df-secondary: oklch(0.97 0 0);
+  --df-secondary-foreground: oklch(0.205 0 0);
+  --df-muted: oklch(0.97 0 0);
+  --df-muted-foreground: oklch(0.556 0 0);
+  --df-accent: oklch(0.96 0.012 283);
+  --df-accent-foreground: oklch(0.205 0 0);
+  --df-destructive: oklch(0.577 0.245 27.325);
+  --df-destructive-foreground: oklch(0.985 0 0);
+  --df-success: oklch(0.6 0.13 160);
+  --df-success-foreground: oklch(0.985 0 0);
+  --df-warning: oklch(0.75 0.15 80);
+  --df-warning-foreground: oklch(0.205 0 0);
+  --df-border: oklch(0.922 0 0);
+  --df-input: oklch(0.922 0 0);
+  --df-ring: oklch(0.54 0.2 283);
+}
+
+.dark {
+  color-scheme: dark;
+
+  --df-background: oklch(0.145 0 0);
+  --df-foreground: oklch(0.985 0 0);
+  --df-card: oklch(0.205 0 0);
+  --df-card-foreground: oklch(0.985 0 0);
+  --df-popover: oklch(0.205 0 0);
+  --df-popover-foreground: oklch(0.985 0 0);
+  --df-primary: oklch(0.72 0.16 285);
+  --df-primary-foreground: oklch(0.18 0.03 285);
+  --df-secondary: oklch(0.269 0 0);
+  --df-secondary-foreground: oklch(0.985 0 0);
+  --df-muted: oklch(0.269 0 0);
+  --df-muted-foreground: oklch(0.708 0 0);
+  --df-accent: oklch(0.27 0.018 285);
+  --df-accent-foreground: oklch(0.985 0 0);
+  --df-destructive: oklch(0.704 0.191 22.216);
+  --df-destructive-foreground: oklch(0.985 0 0);
+  --df-success: oklch(0.7 0.14 160);
+  --df-success-foreground: oklch(0.205 0 0);
+  --df-warning: oklch(0.8 0.15 80);
+  --df-warning-foreground: oklch(0.205 0 0);
+  --df-border: oklch(1 0 0 / 10%);
+  --df-input: oklch(1 0 0 / 15%);
+  --df-ring: oklch(0.62 0.17 285);
+}
+
+/* Bare `border`/`divide` utilities adopt the token color (UnoCSS leaves border
+   color at `currentColor` otherwise). Import order keeps this ahead of resets. */
+*,
+::before,
+::after {
+  border-color: var(--df-border);
+}
+
+body {
+  background-color: var(--df-background);
+  color: var(--df-foreground);
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background-color: color-mix(in oklab, var(--df-primary) 30%, transparent);
+}
+
+/* Opt-in slim, theme-aware scrollbars for dense overflow regions. */
+.scrollbar-slim {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklab, var(--df-foreground) 22%, transparent) transparent;
+}
+
+.scrollbar-slim::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scrollbar-slim::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: color-mix(in oklab, var(--df-foreground) 22%, transparent);
+}
+
+.scrollbar-slim::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in oklab, var(--df-foreground) 36%, transparent);
+}
+
+.scrollbar-slim::-webkit-scrollbar-track,
+.scrollbar-slim::-webkit-scrollbar-corner {
+  background: transparent;
+}
diff --git a/packages/design/src/tokens.ts b/packages/design/src/tokens.ts
new file mode 100644
index 0000000..c71c7e0
--- /dev/null
+++ b/packages/design/src/tokens.ts
@@ -0,0 +1,71 @@
+/**
+ * The devframe design tokens.
+ *
+ * Token *values* (the actual colors, light + dark) live in `theme.css` as
+ * `--df-*` custom properties so any consumer — UnoCSS, plain CSS, or a foreign
+ * framework — reads one source of truth. This module is the JavaScript-facing
+ * mirror: it maps each semantic token to its `var(--df-*)` reference so the
+ * UnoCSS preset can expose utilities (`bg-primary`, `text-muted-foreground`, …)
+ * that resolve to the same variables and flip with the `.dark` class.
+ */
+
+/** Prefix for every design-system CSS custom property. */
+export const TOKEN_PREFIX = '--df-'
+
+/** A `var(--df-<name>)` reference for a semantic token. */
+export function cssVar(name: string): string {
+  return `var(${TOKEN_PREFIX}${name})`
+}
+
+/** Semantic colors that come in surface/`-foreground` pairs. */
+export const PAIRED_TOKENS = [
+  'primary',
+  'secondary',
+  'muted',
+  'accent',
+  'card',
+  'popover',
+  'destructive',
+  'success',
+  'warning',
+] as const
+
+/** Single-value semantic colors (no paired foreground). */
+export const SOLO_TOKENS = [
+  'background',
+  'foreground',
+  'border',
+  'input',
+  'ring',
+] as const
+
+export type PairedToken = (typeof PAIRED_TOKENS)[number]
+export type SoloToken = (typeof SOLO_TOKENS)[number]
+export type DesignToken = PairedToken | SoloToken | `${PairedToken}-foreground`
+
+/**
+ * The UnoCSS `theme.colors` object. Every entry resolves to a `--df-*`
+ * variable, so the same semantic utility renders identically across plugins
+ * and switches theme via the `.dark` class on a common ancestor.
+ */
+export const tokenColors: Record<string, string | Record<string, string>> = {
+  ...Object.fromEntries(SOLO_TOKENS.map(name => [name, cssVar(name)])),
+  ...Object.fromEntries(
+    PAIRED_TOKENS.map(name => [
+      name,
+      { DEFAULT: cssVar(name), foreground: cssVar(`${name}-foreground`) },
+    ]),
+  ),
+}
+
+/**
+ * Corner radii, derived from a single `0.625rem` base (matching the flagship
+ * dashboard). Emitted by UnoCSS as `--radius-*`, referenced by `rounded-*`.
+ */
+export const radius = {
+  DEFAULT: '0.625rem',
+  sm: 'calc(0.625rem - 4px)',
+  md: 'calc(0.625rem - 2px)',
+  lg: '0.625rem',
+  xl: 'calc(0.625rem + 4px)',
+} as const
diff --git a/packages/design/tsconfig.json b/packages/design/tsconfig.json
new file mode 100644
index 0000000..4041c65
--- /dev/null
+++ b/packages/design/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["esnext", "dom"],
+    "types": ["node"]
+  },
+  "include": ["src", "scripts", "tsdown.config.ts"],
+  "exclude": ["dist", "node_modules"]
+}
diff --git a/packages/design/tsdown.config.ts b/packages/design/tsdown.config.ts
new file mode 100644
index 0000000..ea6962a
--- /dev/null
+++ b/packages/design/tsdown.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'tsdown'
+
+export default defineConfig({
+  entry: {
+    index: 'src/index.ts',
+    preset: 'src/preset.ts',
+    components: 'src/components.ts',
+    tokens: 'src/tokens.ts',
+  },
+  outExtensions: () => ({ js: '.mjs', dts: '.d.mts' }),
+  clean: true,
+  tsconfig: '../../tsconfig.base.json',
+  dts: true,
+  platform: 'neutral',
+  deps: {
+    neverBundle: [
+      'unocss',
+      '@unocss/core',
+      '@unocss/preset-wind4',
+      '@unocss/preset-icons',
+    ],
+  },
+})
diff --git a/plugins/code-server/.storybook/main.ts b/plugins/code-server/.storybook/main.ts
index 769ec5c..6697301 100644
--- a/plugins/code-server/.storybook/main.ts
+++ b/plugins/code-server/.storybook/main.ts
@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/html-vite'
+import UnoCSS from 'unocss/vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx)'],
@@ -6,6 +7,11 @@ const config: StorybookConfig = {
     name: '@storybook/html-vite',
     options: {},
   },
+  viteFinal(viteConfig) {
+    viteConfig.plugins ??= []
+    viteConfig.plugins.push(UnoCSS())
+    return viteConfig
+  },
 }
 
 export default config
diff --git a/plugins/code-server/.storybook/preview.ts b/plugins/code-server/.storybook/preview.ts
index 20b90ba..0b0ec08 100644
--- a/plugins/code-server/.storybook/preview.ts
+++ b/plugins/code-server/.storybook/preview.ts
@@ -1,4 +1,6 @@
 import type { Preview } from '@storybook/html-vite'
+import 'virtual:uno.css'
+import '@internal/design/theme.css'
 import '../src/client/style.css'
 
 const preview: Preview = {
diff --git a/plugins/code-server/package.json b/plugins/code-server/package.json
index fd82749..07ee0bd 100644
--- a/plugins/code-server/package.json
+++ b/plugins/code-server/package.json
@@ -63,12 +63,15 @@
     "nostics": "catalog:deps"
   },
   "devDependencies": {
+    "@iconify-json/ph": "catalog:frontend",
+    "@internal/design": "workspace:*",
     "@storybook/html-vite": "catalog:storybook",
     "@types/node": "catalog:types",
     "devframe": "workspace:*",
     "h3": "catalog:deps",
     "storybook": "catalog:storybook",
     "tsdown": "catalog:build",
+    "unocss": "catalog:frontend",
     "vite": "catalog:build",
     "vitest": "catalog:testing",
     "ws": "catalog:deps"
diff --git a/plugins/code-server/src/client/style.css b/plugins/code-server/src/client/style.css
index c2fbc0c..abc8deb 100644
--- a/plugins/code-server/src/client/style.css
+++ b/plugins/code-server/src/client/style.css
@@ -1,5 +1,8 @@
-/* code-server launcher UI. Loaded by the SPA entry and by Storybook; the
-   library `mountCodeServer` assumes this stylesheet is present on the page. */
+/* code-server launcher — structural layout only. Tokens, base element styling,
+   and the `df-*` component vocabulary come from the shared design system
+   (`@internal/design/theme.css` + the UnoCSS preset). The library
+   `mountCodeServer` renders `df-*` classes and assumes that CSS is on the
+   page; the SPA and Storybook generate it via UnoCSS. */
 
 html,
 body {
@@ -11,230 +14,3 @@ body {
   position: relative;
   height: 100%;
 }
-
-.dcs-root {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-  background: var(--dcs-bg);
-  color: var(--dcs-fg);
-
-  --dcs-bg: #ffffff;
-  --dcs-fg: #1f2328;
-  --dcs-muted: #59636e;
-  --dcs-border: #d0d7de;
-  --dcs-surface: #f6f8fa;
-  --dcs-surface-hover: #eaeef2;
-  --dcs-accent: #0969da;
-  --dcs-accent-fg: #ffffff;
-  --dcs-ok: #1a7f37;
-  --dcs-err: #cf222e;
-  --dcs-code-bg: #f6f8fa;
-}
-
-@media (prefers-color-scheme: dark) {
-  .dcs-root {
-    --dcs-bg: #0d1117;
-    --dcs-fg: #e6edf3;
-    --dcs-muted: #8b949e;
-    --dcs-border: #30363d;
-    --dcs-surface: #161b22;
-    --dcs-surface-hover: #21262d;
-    --dcs-accent: #2f81f7;
-    --dcs-accent-fg: #ffffff;
-    --dcs-ok: #3fb950;
-    --dcs-err: #f85149;
-    --dcs-code-bg: #161b22;
-  }
-}
-
-.dcs-center {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-}
-
-.dcs-card {
-  width: 100%;
-  max-width: 560px;
-}
-
-.dcs-eyebrow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 0 10px;
-  font-size: 12px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--dcs-muted);
-}
-
-.dcs-title {
-  margin: 0 0 8px;
-  font-size: 22px;
-  font-weight: 650;
-}
-
-.dcs-lead {
-  margin: 0 0 20px;
-  font-size: 14px;
-  line-height: 1.55;
-  color: var(--dcs-muted);
-}
-
-.dcs-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 16px;
-  margin: 0 0 20px;
-  font-size: 12.5px;
-  color: var(--dcs-muted);
-}
-
-.dcs-meta code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--dcs-fg);
-}
-
-.dcs-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px;
-}
-
-.dcs-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  border: 1px solid var(--dcs-border);
-  border-radius: 7px;
-  background: var(--dcs-surface);
-  color: var(--dcs-fg);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 550;
-  cursor: pointer;
-  transition: background 0.12s;
-}
-
-.dcs-btn:hover {
-  background: var(--dcs-surface-hover);
-}
-
-.dcs-btn:disabled {
-  opacity: 0.55;
-  cursor: default;
-}
-
-.dcs-btn.primary {
-  border-color: transparent;
-  background: var(--dcs-accent);
-  color: var(--dcs-accent-fg);
-}
-
-.dcs-btn.primary:hover {
-  background: var(--dcs-accent);
-  filter: brightness(1.07);
-}
-
-.dcs-link {
-  color: var(--dcs-accent);
-  font-size: 13px;
-  text-decoration: none;
-}
-
-.dcs-link:hover {
-  text-decoration: underline;
-}
-
-.dcs-install {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin: 0 0 20px;
-}
-
-.dcs-install-row label {
-  display: block;
-  margin: 0 0 4px;
-  font-size: 12px;
-  color: var(--dcs-muted);
-}
-
-.dcs-cmd {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border: 1px solid var(--dcs-border);
-  border-radius: 7px;
-  background: var(--dcs-code-bg);
-}
-
-.dcs-cmd code {
-  flex: 1;
-  overflow-x: auto;
-  white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12.5px;
-  color: var(--dcs-fg);
-}
-
-.dcs-copy {
-  flex: none;
-  padding: 3px 9px;
-  border: 1px solid var(--dcs-border);
-  border-radius: 5px;
-  background: var(--dcs-surface);
-  color: var(--dcs-muted);
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-}
-
-.dcs-copy:hover {
-  color: var(--dcs-fg);
-}
-
-.dcs-error {
-  margin: 0 0 18px;
-  padding: 10px 12px;
-  border: 1px solid color-mix(in srgb, var(--dcs-err) 35%, transparent);
-  border-radius: 7px;
-  background: color-mix(in srgb, var(--dcs-err) 9%, transparent);
-  color: var(--dcs-err);
-  font-size: 13px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.dcs-spinner {
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--dcs-border);
-  border-top-color: var(--dcs-accent);
-  border-radius: 50%;
-  animation: dcs-spin 0.7s linear infinite;
-}
-
-@keyframes dcs-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Running: the editor fills the whole surface — no chrome over the iframe. */
-.dcs-frame {
-  flex: 1;
-  width: 100%;
-  border: 0;
-  background: var(--dcs-bg);
-}
diff --git a/plugins/code-server/src/client/view.ts b/plugins/code-server/src/client/view.ts
index b0ca4a4..1285076 100644
--- a/plugins/code-server/src/client/view.ts
+++ b/plugins/code-server/src/client/view.ts
@@ -3,6 +3,7 @@ import type {
   CodeServerDetection,
   CodeServerServerInfo,
 } from '../types'
+import { button, link as linkClass, spinner } from '@internal/design/components'
 
 /** The data the view renders from. Pure — no RPC, no process knowledge. */
 export interface CodeServerViewState {
@@ -101,39 +102,39 @@ export function createCodeServerView(
   const launch = (): void => options.actions?.launch?.()
   const recheck = (): void => options.actions?.recheck?.()
 
-  const root = el('div', 'dcs-root')
+  const root = el('div', 'absolute inset-0 flex flex-col of-hidden bg-background text-foreground font-sans')
   container.append(root)
 
   let frameSrc: string | null = null
 
   function shell(...children: Node[]): void {
     frameSrc = null
-    const center = el('div', 'dcs-center')
-    const card = el('div', 'dcs-card')
+    const center = el('div', 'flex-1 flex items-center justify-center p-6')
+    const card = el('div', 'w-full max-w-[560px]')
     card.append(...children)
     center.append(card)
     root.replaceChildren(center)
   }
 
   function renderConnecting(): void {
-    const wrap = el('div', 'dcs-actions')
-    wrap.append(el('div', 'dcs-spinner'), el('span', 'dcs-lead', 'Connecting to devframe…'))
+    const wrap = el('div', 'flex items-center gap-2.5')
+    wrap.append(el('div', spinner('text-muted-foreground')), el('span', 'text-sm text-muted-foreground', 'Connecting to devframe…'))
     shell(wrap)
   }
 
   function renderNotInstalled(busy: boolean): void {
     const nodes: Node[] = []
-    nodes.push(el('p', 'dcs-eyebrow', 'code-server'))
-    nodes.push(el('h1', 'dcs-title', 'code-server is not installed'))
-    nodes.push(el('p', 'dcs-lead', 'Install code-server (VS Code in the browser) to open the editor here. Pick whichever fits your setup, then re-check.'))
+    nodes.push(el('p', 'flex items-center gap-2 mb-2.5 text-xs tracking-wider uppercase text-muted-foreground', 'code-server'))
+    nodes.push(el('h1', 'mb-2 text-[1.35rem] font-semibold', 'code-server is not installed'))
+    nodes.push(el('p', 'mb-5 text-sm leading-relaxed text-muted-foreground', 'Install code-server (VS Code in the browser) to open the editor here. Pick whichever fits your setup, then re-check.'))
 
-    const install = el('div', 'dcs-install')
+    const install = el('div', 'flex flex-col gap-3 mb-5')
     for (const { label, command } of INSTALL_COMMANDS) {
-      const row = el('div', 'dcs-install-row')
-      row.append(el('label', undefined, label))
-      const cmd = el('div', 'dcs-cmd')
-      cmd.append(el('code', undefined, command))
-      const copy = el('button', 'dcs-copy', 'Copy')
+      const row = el('div')
+      row.append(el('label', 'block mb-1 text-xs text-muted-foreground', label))
+      const cmd = el('div', 'flex items-center gap-2 px-2.5 py-2 rounded-md border border-border bg-muted')
+      cmd.append(el('code', 'flex-1 of-x-auto whitespace-nowrap font-mono text-xs text-foreground', command))
+      const copy = el('button', button({ variant: 'outline', size: 'sm', class: 'shrink-0 text-[11px]' }), 'Copy')
       copy.onclick = () => {
         navigator.clipboard?.writeText(command).then(() => {
           copy.textContent = 'Copied'
@@ -148,8 +149,8 @@ export function createCodeServerView(
     }
     nodes.push(install)
 
-    const actions = el('div', 'dcs-actions')
-    const recheckBtn = el('button', 'dcs-btn primary', busy ? 'Checking…' : 'Re-check')
+    const actions = el('div', 'flex flex-wrap items-center gap-2.5')
+    const recheckBtn = el('button', button({ variant: 'primary' }), busy ? 'Checking…' : 'Re-check')
     recheckBtn.disabled = busy
     recheckBtn.onclick = recheck
     actions.append(recheckBtn)
@@ -162,28 +163,28 @@ export function createCodeServerView(
   function renderLaunch(state: CodeServerViewState): void {
     const { detection, server, busy } = state
     const nodes: Node[] = []
-    nodes.push(el('p', 'dcs-eyebrow', 'code-server'))
-    nodes.push(el('h1', 'dcs-title', 'Launch the editor'))
-    nodes.push(el('p', 'dcs-lead', 'Start a code-server instance scoped to this workspace and open VS Code right here. The server runs with a generated password and the editor is signed in automatically.'))
+    nodes.push(el('p', 'flex items-center gap-2 mb-2.5 text-xs tracking-wider uppercase text-muted-foreground', 'code-server'))
+    nodes.push(el('h1', 'mb-2 text-[1.35rem] font-semibold', 'Launch the editor'))
+    nodes.push(el('p', 'mb-5 text-sm leading-relaxed text-muted-foreground', 'Start a code-server instance scoped to this workspace and open VS Code right here. The server runs with a generated password and the editor is signed in automatically.'))
 
     if (server.status === 'error' && server.error)
-      nodes.push(el('div', 'dcs-error', server.error))
+      nodes.push(el('div', 'mb-4 px-3 py-2.5 rounded-md border border-destructive/35 bg-destructive/10 text-destructive text-sm whitespace-pre-wrap break-words', server.error))
 
-    const meta = el('div', 'dcs-meta')
+    const meta = el('div', 'flex flex-wrap gap-x-4 gap-y-1.5 mb-5 text-xs text-muted-foreground')
     if (detection.version) {
       const v = el('span')
-      v.append(document.createTextNode('version '), el('code', undefined, detection.version))
+      v.append(document.createTextNode('version '), el('code', 'font-mono text-foreground', detection.version))
       meta.append(v)
     }
     const b = el('span')
-    b.append(document.createTextNode('binary '), el('code', undefined, detection.bin))
+    b.append(document.createTextNode('binary '), el('code', 'font-mono text-foreground', detection.bin))
     meta.append(b)
     nodes.push(meta)
 
-    const actions = el('div', 'dcs-actions')
-    const launchBtn = el('button', 'dcs-btn primary')
+    const actions = el('div', 'flex flex-wrap items-center gap-2.5')
+    const launchBtn = el('button', button({ variant: 'primary' }))
     if (busy)
-      launchBtn.append(el('span', 'dcs-spinner'), document.createTextNode('Starting…'))
+      launchBtn.append(el('span', spinner()), document.createTextNode('Starting…'))
     else
       launchBtn.textContent = 'Launch code-server'
     launchBtn.disabled = busy ?? false
@@ -194,8 +195,8 @@ export function createCodeServerView(
   }
 
   function renderStarting(): void {
-    const wrap = el('div', 'dcs-actions')
-    wrap.append(el('div', 'dcs-spinner'), el('span', 'dcs-lead', 'Starting code-server…'))
+    const wrap = el('div', 'flex items-center gap-2.5')
+    wrap.append(el('div', spinner('text-muted-foreground')), el('span', 'text-sm text-muted-foreground', 'Starting code-server…'))
     shell(wrap)
   }
 
@@ -207,7 +208,9 @@ export function createCodeServerView(
       return
     if (state.auth)
       applyAuth(state.auth)
-    const frame = el('iframe', 'dcs-frame') as HTMLIFrameElement
+    // The editor fills the whole surface — no chrome over the iframe. The
+    // `dcs-frame` class is a stable JS hook for the reuse check above.
+    const frame = el('iframe', 'dcs-frame flex-1 w-full border-0 bg-background') as HTMLIFrameElement
     frame.setAttribute('allow', 'clipboard-read; clipboard-write; cross-origin-isolated')
     frame.src = url
     frameSrc = url
@@ -215,7 +218,7 @@ export function createCodeServerView(
   }
 
   function link(text: string, href: string): HTMLAnchorElement {
-    const a = el('a', 'dcs-link', text) as HTMLAnchorElement
+    const a = el('a', linkClass('text-sm'), text) as HTMLAnchorElement
     a.href = href
     a.target = '_blank'
     a.rel = 'noreferrer'
diff --git a/plugins/code-server/src/shims.d.ts b/plugins/code-server/src/shims.d.ts
index e7941dc..125a077 100644
--- a/plugins/code-server/src/shims.d.ts
+++ b/plugins/code-server/src/shims.d.ts
@@ -1,2 +1,3 @@
 // Allow side-effect CSS imports from the SPA entry and Storybook stories.
 declare module '*.css' {}
+declare module 'virtual:uno.css' {}
diff --git a/plugins/code-server/src/spa/main.ts b/plugins/code-server/src/spa/main.ts
index 5e090dc..14c11a2 100644
--- a/plugins/code-server/src/spa/main.ts
+++ b/plugins/code-server/src/spa/main.ts
@@ -1,4 +1,6 @@
 import { mountCodeServer } from '../client/index'
+import 'virtual:uno.css'
+import '@internal/design/theme.css'
 import '../client/style.css'
 
 const app = document.getElementById('app')
diff --git a/plugins/code-server/src/spa/vite.config.ts b/plugins/code-server/src/spa/vite.config.ts
index 79fe3dd..f589bab 100644
--- a/plugins/code-server/src/spa/vite.config.ts
+++ b/plugins/code-server/src/spa/vite.config.ts
@@ -1,5 +1,6 @@
 import { fileURLToPath } from 'node:url'
 import { viteDevBridge } from 'devframe/helpers/vite'
+import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
 import { alias } from '../../../../alias'
 import { createCodeServerDevframe } from '../index'
@@ -17,6 +18,7 @@ export default defineConfig({
   root: fileURLToPath(new URL('.', import.meta.url)),
   resolve: { alias },
   plugins: [
+    UnoCSS(),
     viteDevBridge(createCodeServerDevframe(), { devMiddleware: true, base: '/' }),
   ],
   build: {
diff --git a/plugins/code-server/uno.config.ts b/plugins/code-server/uno.config.ts
new file mode 100644
index 0000000..fd91d99
--- /dev/null
+++ b/plugins/code-server/uno.config.ts
@@ -0,0 +1,17 @@
+import { presetDevframe } from '@internal/design/preset'
+import { defineConfig } from 'unocss'
+
+// The code-server launcher extends the shared devframe design system. The SPA
+// and Storybook generate CSS from this config; the library emits `df-*`
+// classes and relies on the host page providing the matching stylesheet.
+//
+// The launcher view is hand-written vanilla TS, so `.ts` is opted into the
+// extraction pipeline (UnoCSS scans framework files only by default).
+export default defineConfig({
+  presets: [presetDevframe()],
+  content: {
+    pipeline: {
+      include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/],
+    },
+  },
+})
diff --git a/plugins/git/.storybook/main.ts b/plugins/git/.storybook/main.ts
index c3203f2..5c73b56 100644
--- a/plugins/git/.storybook/main.ts
+++ b/plugins/git/.storybook/main.ts
@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite'
-import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react-oxc'
+import UnoCSS from 'unocss/vite'
 
 const config: StorybookConfig = {
   stories: ['../src/client/**/*.stories.@(ts|tsx)'],
@@ -14,7 +14,7 @@ const config: StorybookConfig = {
     // Vite 8 bundles with rolldown/oxc, which doesn't transform JSX on its
     // own; the React plugin wires up the automatic runtime so `.tsx` stories
     // and views parse.
-    viteConfig.plugins.push(react(), tailwindcss())
+    viteConfig.plugins.push(react(), UnoCSS())
     return viteConfig
   },
 }
diff --git a/plugins/git/.storybook/preview.tsx b/plugins/git/.storybook/preview.tsx
index 3f7d4c3..8f2ee20 100644
--- a/plugins/git/.storybook/preview.tsx
+++ b/plugins/git/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import type { Decorator, Preview } from '@storybook/react-vite'
 import { useEffect } from 'react'
-import '../src/client/app/globals.css'
+import 'virtual:uno.css'
+import '@internal/design/theme.css'
 
 const withTheme: Decorator = (Story, context) => {
   const theme = context.globals.theme ?? 'dark'
diff --git a/plugins/git/.storybook/shims.d.ts b/plugins/git/.storybook/shims.d.ts
index 717fe7e..c1fdbad 100644
--- a/plugins/git/.storybook/shims.d.ts
+++ b/plugins/git/.storybook/shims.d.ts
@@ -1,3 +1,3 @@
-// Storybook config files live outside the app's tsconfig, so declare the CSS
-// side-effect import used by `preview.tsx`.
-declare module '*.css'
+// Side-effect style imports used by the Storybook preview.
+declare module '*.css' {}
+declare module 'virtual:uno.css' {}
diff --git a/plugins/git/package.json b/plugins/git/package.json
index 02c69c1..1aa797a 100644
--- a/plugins/git/package.json
+++ b/plugins/git/package.json
@@ -51,6 +51,7 @@
     "pathe": "catalog:deps"
   },
   "devDependencies": {
+    "@internal/design": "workspace:*",
     "@radix-ui/react-scroll-area": "catalog:frontend",
     "@radix-ui/react-separator": "catalog:frontend",
     "@radix-ui/react-slot": "catalog:frontend",
@@ -58,10 +59,9 @@
     "@storybook/addon-a11y": "catalog:storybook",
     "@storybook/addon-docs": "catalog:storybook",
     "@storybook/react-vite": "catalog:storybook",
-    "@tailwindcss/postcss": "catalog:frontend",
-    "@tailwindcss/vite": "catalog:frontend",
     "@types/react": "catalog:types",
     "@types/react-dom": "catalog:types",
+    "@unocss/postcss": "catalog:frontend",
     "@vitejs/plugin-react-oxc": "catalog:storybook",
     "class-variance-authority": "catalog:frontend",
     "clsx": "catalog:frontend",
@@ -73,9 +73,8 @@
     "react-dom": "catalog:frontend",
     "storybook": "catalog:storybook",
     "tailwind-merge": "catalog:frontend",
-    "tailwindcss": "catalog:frontend",
     "tsdown": "catalog:build",
-    "tw-animate-css": "catalog:frontend",
+    "unocss": "catalog:frontend",
     "vitest": "catalog:testing",
     "ws": "catalog:deps"
   }
diff --git a/plugins/git/src/client/app/globals.css b/plugins/git/src/client/app/globals.css
index 35274a1..9efb1ae 100644
--- a/plugins/git/src/client/app/globals.css
+++ b/plugins/git/src/client/app/globals.css
@@ -1,121 +1,6 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+/* The Git dashboard's design tokens, base layer, and component vocabulary come
+   from the shared devframe design system. `@unocss` is replaced by UnoCSS with
+   the generated preflights + utilities; `@internal/design/theme.css` (imported
+   after this file in layout.tsx) supplies the `--df-*` token values + base. */
 
-/* Explicit source globs so class detection covers app/ and components/. */
-@source "../**/*.{ts,tsx}";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.54 0.2 283);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.96 0.012 283);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.54 0.2 283);
-  --success: oklch(0.6 0.13 160);
-  --warning: oklch(0.75 0.15 80);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.72 0.16 285);
-  --primary-foreground: oklch(0.18 0.03 285);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.27 0.018 285);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.62 0.17 285);
-  --success: oklch(0.7 0.14 160);
-  --warning: oklch(0.8 0.15 80);
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-success: var(--success);
-  --color-warning: var(--warning);
-  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "Menlo", monospace;
-}
-
-@layer base {
-  * {
-    border-color: var(--color-border);
-    outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
-  }
-
-  body {
-    background-color: var(--color-background);
-    color: var(--color-foreground);
-    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  ::selection {
-    background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
-  }
-}
-
-/* Slim, theme-aware scrollbars for native overflow regions (the commit log,
-   commit-details patch, etc.) so dense panels read like a real devtool. */
-@utility scrollbar-slim {
-  scrollbar-width: thin;
-  scrollbar-color: color-mix(in oklab, var(--color-foreground) 22%, transparent) transparent;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 9999px;
-    background-color: color-mix(in oklab, var(--color-foreground) 22%, transparent);
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: color-mix(in oklab, var(--color-foreground) 36%, transparent);
-  }
-}
+@unocss;
diff --git a/plugins/git/src/client/app/layout.tsx b/plugins/git/src/client/app/layout.tsx
index 012843d..728d4d3 100644
--- a/plugins/git/src/client/app/layout.tsx
+++ b/plugins/git/src/client/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import type { ReactNode } from 'react'
 import './globals.css'
+import '@internal/design/theme.css'
 
 export const metadata: Metadata = {
   title: 'Git Dashboard',
diff --git a/plugins/git/src/client/components/ui/badge.tsx b/plugins/git/src/client/components/ui/badge.tsx
index c641ba0..1e17245 100644
--- a/plugins/git/src/client/components/ui/badge.tsx
+++ b/plugins/git/src/client/components/ui/badge.tsx
@@ -1,42 +1,27 @@
-import type { VariantProps } from 'class-variance-authority'
+import type { BadgeVariant } from '@internal/design/components'
+import { badge as badgeClass } from '@internal/design/components'
 import { Slot } from '@radix-ui/react-slot'
-import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { cn } from '../../lib/utils'
 
-const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1 [&>svg]:size-3 [&>svg]:pointer-events-none transition-[color,box-shadow] overflow-hidden',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        destructive: 'border-transparent bg-destructive text-white',
-        outline: 'text-foreground',
-        success: 'border-transparent bg-success/15 text-success',
-        warning: 'border-transparent bg-warning/15 text-warning',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
+/** Badge — a React shell over the shared `badge()` recipe from `@internal/design`. */
 function Badge({
   className,
-  variant,
+  variant = 'secondary',
   asChild = false,
   ...props
-}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+}: React.ComponentProps<'span'> & {
+  variant?: BadgeVariant
+  asChild?: boolean
+}) {
   const Comp = asChild ? Slot : 'span'
   return (
     <Comp
       data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
+      className={cn(badgeClass({ variant }), className)}
       {...props}
     />
   )
 }
 
-export { Badge, badgeVariants }
+export { Badge }
diff --git a/plugins/git/src/client/components/ui/button.tsx b/plugins/git/src/client/components/ui/button.tsx
index 128ce76..b6e7bdc 100644
--- a/plugins/git/src/client/components/ui/button.tsx
+++ b/plugins/git/src/client/components/ui/button.tsx
@@ -1,50 +1,33 @@
-import type { VariantProps } from 'class-variance-authority'
+import type { ButtonSize, ButtonVariant } from '@internal/design/components'
+import { button as buttonClass } from '@internal/design/components'
 import { Slot } from '@radix-ui/react-slot'
-import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { cn } from '../../lib/utils'
 
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 shrink-0 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 cursor-pointer',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90',
-        outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
+/**
+ * Button — a thin React shell over the shared `button()` recipe from
+ * `@internal/design`, so it renders identically to the Svelte/vanilla buttons
+ * in the other built-in plugins.
+ */
 function Button({
   className,
-  variant,
-  size,
+  variant = 'primary',
+  size = 'md',
   asChild = false,
   ...props
-}: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & { asChild?: boolean }) {
+}: React.ComponentProps<'button'> & {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  asChild?: boolean
+}) {
   const Comp = asChild ? Slot : 'button'
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonClass({ variant, size }), className)}
       {...props}
     />
   )
 }
 
-export { Button, buttonVariants }
+export { Button }
diff --git a/plugins/git/src/client/components/ui/card.tsx b/plugins/git/src/client/components/ui/card.tsx
index 1c2db0b..240d9ba 100644
--- a/plugins/git/src/client/components/ui/card.tsx
+++ b/plugins/git/src/client/components/ui/card.tsx
@@ -1,3 +1,4 @@
+import { card } from '@internal/design/components'
 import * as React from 'react'
 import { cn } from '../../lib/utils'
 
@@ -5,7 +6,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card"
-      className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)}
+      className={cn(card('gap-6 py-6'), className)}
       {...props}
     />
   )
diff --git a/plugins/git/src/client/components/ui/tabs.tsx b/plugins/git/src/client/components/ui/tabs.tsx
index ed5db4c..ac3b642 100644
--- a/plugins/git/src/client/components/ui/tabs.tsx
+++ b/plugins/git/src/client/components/ui/tabs.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { tab, tabsList } from '@internal/design/components'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import * as React from 'react'
 import { cn } from '../../lib/utils'
@@ -18,7 +19,7 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      className={cn('bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]', className)}
+      className={cn(tabsList(), className)}
       {...props}
     />
   )
@@ -28,7 +29,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
-      className={cn('data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:ring-ring/50 inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', className)}
+      className={cn(tab(), className)}
       {...props}
     />
   )
diff --git a/plugins/git/src/client/postcss.config.mjs b/plugins/git/src/client/postcss.config.mjs
index 6e8ba06..8cf7cb4 100644
--- a/plugins/git/src/client/postcss.config.mjs
+++ b/plugins/git/src/client/postcss.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('postcss-load-config').Config} */
 export default {
   plugins: {
-    '@tailwindcss/postcss': {},
+    '@unocss/postcss': {},
   },
 }
diff --git a/plugins/git/uno.config.ts b/plugins/git/uno.config.ts
new file mode 100644
index 0000000..6a43d5a
--- /dev/null
+++ b/plugins/git/uno.config.ts
@@ -0,0 +1,20 @@
+import { fileURLToPath } from 'node:url'
+import { presetDevframe } from '@internal/design/preset'
+import { defineConfig } from 'unocss'
+
+// The Git dashboard extends the shared devframe design system. `@unocss/postcss`
+// (see src/client/postcss.config.mjs) and Storybook both load this config.
+// Absolute globs keep class extraction working regardless of the working
+// directory PostCSS runs in (Next builds from `src/client`).
+const client = fileURLToPath(new URL('./src/client', import.meta.url))
+
+export default defineConfig({
+  content: {
+    filesystem: [
+      `${client}/app/**/*.{ts,tsx}`,
+      `${client}/components/**/*.{ts,tsx}`,
+      `${client}/lib/**/*.{ts,tsx}`,
+    ],
+  },
+  presets: [presetDevframe()],
+})
diff --git a/plugins/terminals/package.json b/plugins/terminals/package.json
index 477986c..87e90d4 100644
--- a/plugins/terminals/package.json
+++ b/plugins/terminals/package.json
@@ -68,11 +68,9 @@
   },
   "devDependencies": {
     "@iconify-json/ph": "catalog:frontend",
+    "@internal/design": "workspace:*",
     "@sveltejs/vite-plugin-svelte": "catalog:frontend",
     "@types/node": "catalog:types",
-    "@unocss/preset-icons": "catalog:frontend",
-    "@unocss/preset-uno": "catalog:frontend",
-    "@unocss/vite": "catalog:frontend",
     "devframe": "workspace:*",
     "get-port-please": "catalog:deps",
     "h3": "catalog:deps",
diff --git a/plugins/terminals/src/client/App.svelte b/plugins/terminals/src/client/App.svelte
index 53132b1..d81a801 100644
--- a/plugins/terminals/src/client/App.svelte
+++ b/plugins/terminals/src/client/App.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { DevframeRpcClient } from 'devframe/client'
+  import type { DotState } from '@internal/design/components'
   import type { TerminalPreset, TerminalSessionInfo } from '../types'
+  import { button, dot, nav, navTab, tag, toolbar } from '@internal/design/components'
   import { onMount } from 'svelte'
   import { PRESETS_STATE_KEY, SESSIONS_STATE_KEY } from '../constants'
   import TerminalView from './TerminalView.svelte'
@@ -140,16 +142,16 @@
     node.select()
   }
 
-  function statusDot(status: string): string {
+  function statusDot(status: string): DotState {
     if (status === 'running')
-      return 'dot-running'
-    return status === 'exited' ? 'dot-exited' : 'dot-error'
+      return 'running'
+    return status === 'exited' ? 'idle' : 'error'
   }
 </script>
 
 <div class="absolute inset-0 flex flex-col bg-base color-base font-sans of-hidden">
   <!-- Top navigation: brand + session tabs + actions -->
-  <nav class="z-nav h-9 shrink-0 flex items-center gap-1 px-2 border-b border-base bg-base">
+  <nav class={nav()}>
     <div class="flex items-center gap-1.5 pr-2 mr-1 border-r border-base shrink-0">
       <div class="i-ph-terminal-window-duotone text-base color-active"></div>
       <span class="text-sm font-500 op-fade hidden sm:inline">Terminals</span>
@@ -173,12 +175,12 @@
         {:else}
           <button
             type="button"
-            class="group tab-item {activeId === s.id ? 'tab-item-active' : ''}"
+            class={navTab({ active: activeId === s.id, class: 'group' })}
             title={`${displayName(s)} — double-click to rename`}
             onclick={() => (activeId = s.id)}
             ondblclick={(e) => { e.preventDefault(); e.stopPropagation(); renamingId = s.id }}
           >
-            <span class="h-1.5 w-1.5 rounded-full shrink-0 {statusDot(s.status)}"></span>
+            <span class={dot(statusDot(s.status))}></span>
             <span class="truncate">{displayName(s)}</span>
             <span
               role="button"
@@ -194,7 +196,7 @@
 
       <button
         type="button"
-        class="btn-icon shrink-0"
+        class={button({ variant: 'ghost', size: 'icon-sm', class: 'shrink-0' })}
         title="New terminal"
         onclick={() => spawn({ mode: 'interactive' })}
       >
@@ -206,7 +208,7 @@
       <div class="relative shrink-0">
         <button
           type="button"
-          class="btn-action-sm {presetsOpen ? 'btn-action-active' : ''}"
+          class={button({ variant: 'outline', size: 'sm', class: presetsOpen ? 'bg-accent! color-active border-active!' : '' })}
           title="Run a preset command"
           onclick={() => (presetsOpen = !presetsOpen)}
         >
@@ -242,8 +244,8 @@
   <!-- Toolbar: details of the active session -->
   {#if activeSession}
     {@const s = activeSession}
-    <div class="z-toolbar h-8 shrink-0 flex items-center gap-2 px-2.5 border-b border-base bg-secondary text-sm">
-      <span class="px1.5 rounded text-xs font-500 {s.mode === 'interactive' ? 'badge-blue' : 'badge-amber'}">
+    <div class={toolbar()}>
+      <span class={tag(s.mode === 'interactive' ? 'blue' : 'amber')}>
         {s.mode === 'interactive' ? 'interactive' : 'readonly'}
       </span>
       <span class="font-mono truncate op-fade" title={`${s.command} ${s.args.join(' ')}`}>
@@ -251,7 +253,7 @@
       </span>
       <span class="flex items-center gap-1.5 op-mute font-mono text-xs tabular-nums shrink-0">
         {#if s.status === 'running'}
-          <span class="h-1.5 w-1.5 rounded-full dot-running"></span>
+          <span class={dot('running')}></span>
           {s.backend}{s.pid ? ` · ${s.pid}` : ''}
         {:else}
           {s.status}{s.exitCode != null ? ` (${s.exitCode})` : ''}
@@ -260,10 +262,10 @@
 
       <div class="flex-1"></div>
 
-      <button type="button" class="btn-icon" title="Restart" onclick={() => rpc.call('devframes-plugin-terminals:restart', { id: s.id }).catch(() => {})}>
+      <button type="button" class={button({ variant: 'ghost', size: 'icon-sm' })} title="Restart" onclick={() => rpc.call('devframes-plugin-terminals:restart', { id: s.id }).catch(() => {})}>
         <div class="i-ph-arrow-clockwise-duotone"></div>
       </button>
-      <button type="button" class="btn-icon" title="Kill" onclick={() => rpc.call('devframes-plugin-terminals:remove', { id: s.id }).catch(() => {})}>
+      <button type="button" class={button({ variant: 'ghost', size: 'icon-sm' })} title="Kill" onclick={() => rpc.call('devframes-plugin-terminals:remove', { id: s.id }).catch(() => {})}>
         <div class="i-ph-trash-duotone"></div>
       </button>
     </div>
@@ -276,7 +278,7 @@
         <div class="i-ph-terminal-window-duotone text-5xl"></div>
         <div class="flex items-center gap-1.5 text-sm">
           <span>No sessions.</span>
-          <button type="button" class="btn-action-sm" onclick={() => spawn({ mode: 'interactive' })}>
+          <button type="button" class={button({ variant: 'outline', size: 'sm' })} onclick={() => spawn({ mode: 'interactive' })}>
             <div class="i-ph-plus"></div>
             New terminal
           </button>
diff --git a/plugins/terminals/src/client/index.ts b/plugins/terminals/src/client/index.ts
index 737fc82..d0e4da9 100644
--- a/plugins/terminals/src/client/index.ts
+++ b/plugins/terminals/src/client/index.ts
@@ -4,6 +4,7 @@ import { mount, unmount } from 'svelte'
 import App from './App.svelte'
 
 import 'virtual:uno.css'
+import '@internal/design/theme.css'
 import './styles.css'
 
 export interface MountTerminalsOptions {
diff --git a/plugins/terminals/src/client/styles.css b/plugins/terminals/src/client/styles.css
index 2005121..fdb3b95 100644
--- a/plugins/terminals/src/client/styles.css
+++ b/plugins/terminals/src/client/styles.css
@@ -1,3 +1,6 @@
+/* Terminal-specific surface tweaks. Tokens, base element styling, and the
+   `color-scheme` light/dark switch come from `@internal/design/theme.css`. */
+
 html,
 body,
 #app {
@@ -6,15 +9,6 @@ body,
   padding: 0;
 }
 
-html {
-  --uno: bg-base color-base font-sans;
-  color-scheme: light;
-}
-
-html.dark {
-  color-scheme: dark;
-}
-
 :root {
   --term-scrollbar: #8884;
   --term-scrollbar-hover: #8887;
diff --git a/plugins/terminals/uno.config.ts b/plugins/terminals/uno.config.ts
index 68a570b..372c162 100644
--- a/plugins/terminals/uno.config.ts
+++ b/plugins/terminals/uno.config.ts
@@ -1,74 +1,9 @@
-import {
-  defineConfig,
-  presetIcons,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { presetDevframe } from '@internal/design/preset'
+import { defineConfig } from 'unocss'
 
+// The terminals panel extends the shared devframe design system — one preset
+// carries the token theme, the `df-*` component vocabulary, Phosphor icons, and
+// the directive/variant-group transformers. Pair with `@internal/design/theme.css`.
 export default defineConfig({
-  theme: {
-    colors: {
-      primary: {
-        50: '#E9F4E7',
-        100: '#D2E8CF',
-        200: '#A9D3A2',
-        300: '#7CBC71',
-        400: '#49833E',
-        DEFAULT: '#49833E',
-        500: '#3F7236',
-        600: '#396831',
-        700: '#2C5026',
-        800: '#1D3419',
-        900: '#0F1C0D',
-        950: '#080E07',
-      },
-    },
-  },
-  shortcuts: [
-    {
-      // Neutral foundations (light + dark together).
-      'color-base': 'color-neutral-800 dark:color-neutral-200',
-      'bg-base': 'bg-white dark:bg-#111',
-      'bg-secondary': 'bg-#f6f6f7 dark:bg-#191919',
-      'border-base': 'border-#8882',
-
-      // Accents layered on top of neutrals.
-      'bg-active': 'bg-#8881',
-      'color-active': 'color-primary-600 dark:color-primary-300',
-      'border-active': 'border-primary-600/25 dark:border-primary-400/25',
-
-      'op-fade': 'op65 dark:op55',
-      'op-mute': 'op40 dark:op30',
-
-      // Reusable controls.
-      'btn-action': 'inline-flex gap-1.5 items-center border border-base rounded px2 py1 op75 transition-colors hover:(op100 bg-active) disabled:(pointer-events-none op30)',
-      'btn-action-sm': 'btn-action text-sm',
-      'btn-action-active': 'color-active border-active! bg-active op100!',
-      'btn-icon': 'inline-flex h-7 w-7 items-center justify-center rounded op50 transition-colors hover:(op100 bg-active) disabled:(pointer-events-none op30)',
-
-      // Tabs.
-      'tab-item': 'relative inline-flex gap-1.5 items-center max-w-52 px2 py1 rounded border border-transparent text-sm op-fade transition-colors hover:(op100 bg-active) cursor-pointer select-none',
-      'tab-item-active': 'op100! bg-active border-base! color-base',
-
-      // Status dots (real semantic state only).
-      'dot-running': 'bg-primary-500 dark:bg-primary-400',
-      'dot-exited': 'bg-neutral-400 dark:bg-neutral-500',
-      'dot-error': 'bg-red-500',
-
-      // Named depth layers.
-      'z-nav': 'z-30',
-      'z-toolbar': 'z-20',
-    },
-    // mode badges: badge-mode-<color>
-    [/^badge-(\w+)$/, ([, color]) => `bg-${color}-400/15 text-${color}-700 dark:text-${color}-300 border border-${color}-500/20`],
-  ],
-  presets: [
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-  ],
-  transformers: [
-    transformerDirectives(),
-    transformerVariantGroup(),
-  ],
+  presets: [presetDevframe()],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b33039b..25983c3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,19 +132,7 @@ catalogs:
     '@sveltejs/vite-plugin-svelte':
       specifier: ^5.0.0
       version: 5.1.1
-    '@tailwindcss/postcss':
-      specifier: ^4.3.1
-      version: 4.3.1
-    '@tailwindcss/vite':
-      specifier: ^4.3.1
-      version: 4.3.1
-    '@unocss/preset-icons':
-      specifier: ^66.0.0
-      version: 66.7.2
-    '@unocss/preset-uno':
-      specifier: ^66.0.0
-      version: 66.7.2
-    '@unocss/vite':
+    '@unocss/postcss':
       specifier: ^66.0.0
       version: 66.7.2
     '@xterm/addon-fit':
@@ -180,12 +168,6 @@ catalogs:
     tailwind-merge:
       specifier: ^3.6.0
       version: 3.6.0
-    tailwindcss:
-      specifier: ^4.3.1
-      version: 4.3.1
-    tw-animate-css:
-      specifier: ^1.4.0
-      version: 1.4.0
     unocss:
       specifier: ^66.0.0
       version: 66.7.2
@@ -494,6 +476,25 @@ importers:
         specifier: catalog:deps
         version: 8.21.0
 
+  packages/design:
+    dependencies:
+      '@iconify-json/ph':
+        specifier: catalog:frontend
+        version: 1.2.2
+    devDependencies:
+      '@types/node':
+        specifier: catalog:types
+        version: 25.9.1
+      tsdown:
+        specifier: catalog:build
+        version: 0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3)
+      tsx:
+        specifier: catalog:build
+        version: 4.22.3
+      unocss:
+        specifier: catalog:frontend
+        version: 66.7.2(@unocss/postcss@66.7.2(postcss@8.5.15))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
+
   packages/devframe:
     dependencies:
       '@valibot/to-json-schema':
@@ -625,6 +626,12 @@ importers:
         specifier: catalog:deps
         version: 1.1.4
     devDependencies:
+      '@iconify-json/ph':
+        specifier: catalog:frontend
+        version: 1.2.2
+      '@internal/design':
+        specifier: workspace:*
+        version: link:../../packages/design
       '@storybook/html-vite':
         specifier: catalog:storybook
         version: 10.4.6(esbuild@0.28.0)(rollup@4.60.3)(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
@@ -643,6 +650,9 @@ importers:
       tsdown:
         specifier: catalog:build
         version: 0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3)
+      unocss:
+        specifier: catalog:frontend
+        version: 66.7.2(@unocss/postcss@66.7.2(postcss@8.5.15))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
       vite:
         specifier: catalog:build
         version: 8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)
@@ -662,6 +672,9 @@ importers:
         specifier: catalog:deps
         version: 2.0.3
     devDependencies:
+      '@internal/design':
+        specifier: workspace:*
+        version: link:../../packages/design
       '@radix-ui/react-scroll-area':
         specifier: catalog:frontend
         version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -683,18 +696,15 @@ importers:
       '@storybook/react-vite':
         specifier: catalog:storybook
         version: 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(esbuild@0.28.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(rollup@4.60.3)(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
-      '@tailwindcss/postcss':
-        specifier: catalog:frontend
-        version: 4.3.1
-      '@tailwindcss/vite':
-        specifier: catalog:frontend
-        version: 4.3.1(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
       '@types/react':
         specifier: catalog:types
         version: 19.2.15
       '@types/react-dom':
         specifier: catalog:types
         version: 19.2.3(@types/react@19.2.15)
+      '@unocss/postcss':
+        specifier: catalog:frontend
+        version: 66.7.2(postcss@8.5.15)
       '@vitejs/plugin-react-oxc':
         specifier: catalog:storybook
         version: 0.4.3(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
@@ -728,15 +738,12 @@ importers:
       tailwind-merge:
         specifier: catalog:frontend
         version: 3.6.0
-      tailwindcss:
-        specifier: catalog:frontend
-        version: 4.3.1
       tsdown:
         specifier: catalog:build
         version: 0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3)
-      tw-animate-css:
+      unocss:
         specifier: catalog:frontend
-        version: 1.4.0
+        version: 66.7.2(@unocss/postcss@66.7.2(postcss@8.5.15))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
       vitest:
         specifier: catalog:testing
         version: 4.1.7(@types/node@25.9.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
@@ -765,21 +772,15 @@ importers:
       '@iconify-json/ph':
         specifier: catalog:frontend
         version: 1.2.2
+      '@internal/design':
+        specifier: workspace:*
+        version: link:../../packages/design
       '@sveltejs/vite-plugin-svelte':
         specifier: catalog:frontend
         version: 5.1.1(svelte@5.56.3(@typescript-eslint/types@8.59.2))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
       '@types/node':
         specifier: catalog:types
         version: 25.9.1
-      '@unocss/preset-icons':
-        specifier: catalog:frontend
-        version: 66.7.2
-      '@unocss/preset-uno':
-        specifier: catalog:frontend
-        version: 66.7.2
-      '@unocss/vite':
-        specifier: catalog:frontend
-        version: 66.7.2(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
       devframe:
         specifier: workspace:*
         version: link:../../packages/devframe
@@ -797,7 +798,7 @@ importers:
         version: 0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3)
       unocss:
         specifier: catalog:frontend
-        version: 66.7.2(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
+        version: 66.7.2(@unocss/postcss@66.7.2(postcss@8.5.15))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
       vite:
         specifier: catalog:build
         version: 8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)
@@ -820,10 +821,6 @@ packages:
   '@adobe/css-tools@4.5.0':
     resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==}
 
-  '@alloc/quick-lru@5.2.0':
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-
   '@antfu/eslint-config@9.0.0':
     resolution: {integrity: sha512-8aQW0UWHoNMdVxTfzs1+w10t26plsc9oFs8YhCyCtST5nnANJe/VAjqvR3hYI1l3PHBeo4tjVMg8wuu6g3OLlA==}
     hasBin: true
@@ -3514,103 +3511,6 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  '@tailwindcss/node@4.3.1':
-    resolution: {integrity: sha512-6NDaqRoAMSXD1mr/RXu0HBvNE9a2n5tHPsxu9XHLws8o4Twes5rBM2205SUUiJ9goAtadrN6xTGX0UDEwp/N4A==}
-
-  '@tailwindcss/oxide-android-arm64@4.3.1':
-    resolution: {integrity: sha512-SVlyf61g374l5cHyg8x9kf5xmLcOaxvOTsbsqDnSsDJaKOEFZ7GCvi84VAVGpxojYOs1+3K6M0UjXfqPU8vmOQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [android]
-
-  '@tailwindcss/oxide-darwin-arm64@4.3.1':
-    resolution: {integrity: sha512-hVnWLwv+e/l7c4WKyVtHVrIPvYdqWHjRB3MDIqARynzFtnQg85kmQEFCbV9Ja0VVx4xXTIiDWY60Y7iz/iNoDA==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-darwin-x64@4.3.1':
-    resolution: {integrity: sha512-Cf7abu0WVgbhU7ANgPUnSAvm7nCvMweusHb8FnaHlLfv/Caq4GYaEZg7ZImzzmjx4lIAfuS8q+eLIS7A7IzxIg==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-freebsd-x64@4.3.1':
-    resolution: {integrity: sha512-ZZqzX2Y+GXtXXfqSfpJhDm60OoZfvLHLCgm+J7NVqgHHJjG/m9ugZI77RwTsVd4fnBJuCFP6Ae6kTJb71UdS8g==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.1':
-    resolution: {integrity: sha512-/Ah/xik0LaMYfv9DZ0S/t4pBlBNYOcqtRwusjgovHkvT8ixueWCLyJjsaF5kQIckjb4IT8Q6K6p/iPmZMixYgg==}
-    engines: {node: '>= 20'}
-    cpu: [arm]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.3.1':
-    resolution: {integrity: sha512-gqdFoVJlw444GvpnheZLHmvTzSxI/cOUUh2KSNejQjTcYkW062SVD+En0rUgD+QV91bz1XGIGtt1HJd48xUGbQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.3.1':
-    resolution: {integrity: sha512-Bwv9KwOvE0VKa86xPFif9b9c3Y1NxOV1P0gLti/IYaWEsQYZXDlxfGEtA8mdDZ7SG3wyNXAWYT5SIn3giL57oA==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.3.1':
-    resolution: {integrity: sha512-Ymi8O8T15HYQdOUWUtTI6ldN0neHP85FC+Qz32xTcZ7iJXtem/x8ITev0o1e9e5rkqj4lONZfTRLvkmin1+tKg==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@tailwindcss/oxide-linux-x64-musl@4.3.1':
-    resolution: {integrity: sha512-M+P/91qJ6uILLw4k2G93GMDRAXj61SMvFQYt39AqvUqYgExXpLL5aepfns7sj4HiAQeolirQF9E0lzRvdf4zPQ==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@tailwindcss/oxide-wasm32-wasi@4.3.1':
-    resolution: {integrity: sha512-zsM8uOeqvVGHsAXsJxsT28ttosFahLJKCLOTUBqRAtKnVgGSRitds9T432QiT8b77Yga7JIBkulIRRlJPtYhRA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.3.1':
-    resolution: {integrity: sha512-aiNvSq9BsVk8V513lDKlrCFAgf8qBMPZTpgEhInL+NwQqs97mYmupVMrPrgBBSL8Pv/0zXu9MrMF9rMun1ZeNg==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.3.1':
-    resolution: {integrity: sha512-xDEyu1rg290472FEGaKHnzyDyh5QH+AlWvsU5hMoMtPpzmKlRI0jaYKCgSHDYtaQWZOYbMaduSyCwFwY4n1HmA==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [win32]
-
-  '@tailwindcss/oxide@4.3.1':
-    resolution: {integrity: sha512-yVPyo8RNkabVr3O2EhHEE0Rewu7YKzc1DhIqfL46LKveFrmu9XbDazNOJY7/GRuvw1h6u3utWnR29H/p5JPlgA==}
-    engines: {node: '>= 20'}
-
-  '@tailwindcss/postcss@4.3.1':
-    resolution: {integrity: sha512-dNJuNbdEJT/SWRuXTYP1WSamelsz3ztkUsdtWQPjrexysrTpaEPM40P/71knXiXLYEojqPOEGitVLLpPMS5T6A==}
-
-  '@tailwindcss/vite@4.3.1':
-    resolution: {integrity: sha512-hItDHuIIlEV61R+faXu66s1K36aTurO/Qw0e45Vskz57gXl9pWOT6eg3zmcEui6CZXddbN7zd41bwmvag4JGwQ==}
-    peerDependencies:
-      vite: ^5.2.0 || ^6 || ^7 || ^8
-
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
@@ -3936,6 +3836,11 @@ packages:
   '@unocss/inspector@66.7.2':
     resolution: {integrity: sha512-fvZ8w9dTnu61ZwbXjVMQopxxrQOnFOBN2I6KVPJtoUSMsatrpEYyJHDA9pfLes1a3C4eEJZaSADURHKkON09CA==}
 
+  '@unocss/postcss@66.7.2':
+    resolution: {integrity: sha512-q5gRA/B3f2SZtM/MIWSLqCUSjCYdh8t9iIwsrRY9NGycFBLovbBelhM6ye3Uxa+2jWUO0ZbDPbZgS93lajGQfw==}
+    peerDependencies:
+      postcss: ^8.4.21
+
   '@unocss/preset-attributify@66.7.2':
     resolution: {integrity: sha512-JnnoRUgOL4O565+jNi8BfzTQDElEny1reaMhrdYQR4P4I7cfdRV89R5DsmND0H2mGtwJjP/gL4cWd1FSX9ShrA==}
 
@@ -7499,9 +7404,6 @@ packages:
   tailwind-merge@3.6.0:
     resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
 
-  tailwindcss@4.3.1:
-    resolution: {integrity: sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==}
-
   tapable@2.3.3:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
@@ -7663,9 +7565,6 @@ packages:
     resolution: {integrity: sha512-VpKvD9Z0Hu/xrGUAYX1wnhfpqv835wIwGqeKfulvBPTOcDap0E3nFwyzCAVV85fB1sBcBDEfTP+7FSW7GzwWSQ==}
     hasBin: true
 
-  tw-animate-css@1.4.0:
-    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
-
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -8310,8 +8209,6 @@ snapshots:
 
   '@adobe/css-tools@4.5.0': {}
 
-  '@alloc/quick-lru@5.2.0': {}
-
   '@antfu/eslint-config@9.0.0(@typescript-eslint/rule-tester@8.59.2(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3))(@typescript-eslint/typescript-estree@8.59.2(typescript@6.0.3))(@typescript-eslint/utils@8.59.2(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3))(@vue/compiler-sfc@3.5.34)(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)(vitest@4.1.7(@types/node@25.9.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)))':
     dependencies:
       '@antfu/install-pkg': 1.1.0
@@ -10590,82 +10487,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tailwindcss/node@4.3.1':
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.21.6
-      jiti: 2.7.0
-      lightningcss: 1.32.0
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.3.1
-
-  '@tailwindcss/oxide-android-arm64@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-arm64@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-x64@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-freebsd-x64@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-musl@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-wasm32-wasi@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.3.1':
-    optional: true
-
-  '@tailwindcss/oxide@4.3.1':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.3.1
-      '@tailwindcss/oxide-darwin-arm64': 4.3.1
-      '@tailwindcss/oxide-darwin-x64': 4.3.1
-      '@tailwindcss/oxide-freebsd-x64': 4.3.1
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.1
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.1
-      '@tailwindcss/oxide-linux-arm64-musl': 4.3.1
-      '@tailwindcss/oxide-linux-x64-gnu': 4.3.1
-      '@tailwindcss/oxide-linux-x64-musl': 4.3.1
-      '@tailwindcss/oxide-wasm32-wasi': 4.3.1
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.1
-      '@tailwindcss/oxide-win32-x64-msvc': 4.3.1
-
-  '@tailwindcss/postcss@4.3.1':
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.3.1
-      '@tailwindcss/oxide': 4.3.1
-      postcss: 8.5.15
-      tailwindcss: 4.3.1
-
-  '@tailwindcss/vite@4.3.1(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))':
-    dependencies:
-      '@tailwindcss/node': 4.3.1
-      '@tailwindcss/oxide': 4.3.1
-      tailwindcss: 4.3.1
-      vite: 8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)
-
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -11077,6 +10898,15 @@ snapshots:
       gzip-size: 6.0.0
       sirv: 3.0.2
 
+  '@unocss/postcss@66.7.2(postcss@8.5.15)':
+    dependencies:
+      '@unocss/config': 66.7.2
+      '@unocss/core': 66.7.2
+      '@unocss/rule-utils': 66.7.2
+      css-tree: 3.2.1
+      postcss: 8.5.15
+      tinyglobby: 0.2.16
+
   '@unocss/preset-attributify@66.7.2':
     dependencies:
       '@unocss/core': 66.7.2
@@ -15371,8 +15201,6 @@ snapshots:
 
   tailwind-merge@3.6.0: {}
 
-  tailwindcss@4.3.1: {}
-
   tapable@2.3.3: {}
 
   tar-fs@2.1.4:
@@ -15543,8 +15371,6 @@ snapshots:
       '@turbo/windows-64': 2.9.15
       '@turbo/windows-arm64': 2.9.15
 
-  tw-animate-css@1.4.0: {}
-
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -15653,7 +15479,7 @@ snapshots:
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
 
-  unocss@66.7.2(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)):
+  unocss@66.7.2(@unocss/postcss@66.7.2(postcss@8.5.15))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)):
     dependencies:
       '@unocss/cli': 66.7.2
       '@unocss/core': 66.7.2
@@ -15672,6 +15498,8 @@ snapshots:
       '@unocss/transformer-directives': 66.7.2
       '@unocss/transformer-variant-group': 66.7.2
       '@unocss/vite': 66.7.2(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
+    optionalDependencies:
+      '@unocss/postcss': 66.7.2(postcss@8.5.15)
     transitivePeerDependencies:
       - vite
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9b15f25..c9b547f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -70,11 +70,7 @@ catalogs:
     '@radix-ui/react-slot': ^1.3.0
     '@radix-ui/react-tabs': ^1.1.15
     '@sveltejs/vite-plugin-svelte': ^5.0.0
-    '@tailwindcss/postcss': ^4.3.1
-    '@tailwindcss/vite': ^4.3.1
-    '@unocss/preset-icons': ^66.0.0
-    '@unocss/preset-uno': ^66.0.0
-    '@unocss/vite': ^66.0.0
+    '@unocss/postcss': ^66.0.0
     '@xterm/addon-fit': ^0.11.0
     '@xterm/xterm': ^6.0.0
     class-variance-authority: ^0.7.1
@@ -86,8 +82,6 @@ catalogs:
     react-dom: ^19.2.6
     svelte: ^5.0.0
     tailwind-merge: ^3.6.0
-    tailwindcss: ^4.3.1
-    tw-animate-css: ^1.4.0
     unocss: ^66.0.0
     vite-plugin-css-injected-by-js: ^3.5.0
   inlined:
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts
index 9f380d2..1fc4fb8 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts
@@ -1,12 +1,15 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/constants`
  */
-// #region Other
-export { DEFAULT_CODE_SERVER_PORT }
-export { DEFAULT_PORT }
-export { DEFAULT_START_TIMEOUT }
-export { getCookieSessionName }
-export { PLUGIN_ID }
-export { SESSION_COOKIE_BASE }
-export { STATE_KEY }
+// #region Functions
+export declare function getCookieSessionName(_?: string): string;
+// #endregion
+
+// #region Variables
+export declare const DEFAULT_CODE_SERVER_PORT: number;
+export declare const DEFAULT_PORT: number;
+export declare const DEFAULT_START_TIMEOUT: number;
+export declare const PLUGIN_ID: string;
+export declare const SESSION_COOKIE_BASE: string;
+export declare const STATE_KEY: string;
 // #endregion
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
index c5a9ee2..f2899af 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -121,6 +121,18 @@
       "@devframes/nuxt": [
         "./packages/nuxt/src/index.ts"
       ],
+      "@internal/design/preset": [
+        "./packages/design/src/preset.ts"
+      ],
+      "@internal/design/components": [
+        "./packages/design/src/components.ts"
+      ],
+      "@internal/design/tokens": [
+        "./packages/design/src/tokens.ts"
+      ],
+      "@internal/design": [
+        "./packages/design/src/index.ts"
+      ],
       "@devframes/plugin-code-server/client": [
         "./plugins/code-server/src/client/index.ts"
       ],
diff --git a/turbo.json b/turbo.json
index e9f47db..0ae5b6e 100644
--- a/turbo.json
+++ b/turbo.json
@@ -18,14 +18,18 @@
       "outputLogs": "new-only",
       "outputs": ["dist/**"]
     },
+    "@internal/design#build": {
+      "outputLogs": "new-only",
+      "outputs": ["dist/**"]
+    },
     "@devframes/plugin-code-server#build": {
       "outputLogs": "new-only",
-      "dependsOn": ["devframe#build"],
+      "dependsOn": ["devframe#build", "@internal/design#build"],
       "outputs": ["dist/**"]
     },
     "@devframes/plugin-terminals#build": {
       "outputLogs": "new-only",
-      "dependsOn": ["devframe#build"],
+      "dependsOn": ["devframe#build", "@internal/design#build"],
       "outputs": ["dist/**"]
     },
     "minimal-vite-devframe-hub#build": {
@@ -55,7 +59,7 @@
     },
     "@devframes/plugin-git#build": {
       "outputLogs": "new-only",
-      "dependsOn": ["devframe#build"],
+      "dependsOn": ["devframe#build", "@internal/design#build"],
       "outputs": ["dist/**"]
     },
     "files-inspector-example#cli:build": {