Survey — current design-language state
State: open/active · Genre: survey
A point-in-time snapshot from 2026-08-26, not updated since. Adoption has moved past what it describes — PLAN.md’s phase status is the current picture.
Surveyed 2026-08-26 across packages/ts/, solutions/, apps/, sites/,
tools/.
1. The system that exists
Section titled “1. The system that exists”The layer chain, bottom to top:
@determined/ui (tokens + D* kit) → @sksizer/panes, node-tree, graph-canvas, json-canvas-vue (primitives) → @sksizer/app-frame (chrome: titlebar, panes, palette, settings, registries) → host binding (@determined/shell | solutions/ontological/desktop) → experiences (22) → products (22)Tokens (packages/ts/ui/app/assets/css/tokens.css, 1,431 lines)
Section titled “Tokens (packages/ts/ui/app/assets/css/tokens.css, 1,431 lines)”- 94 unique
--d-*custom properties in@layer determined-ui-tokens. - Two tiers: ~22 seed values per theme per mode; derived values via
color-mix()declared once. - A documented 25-token contract is all
app-frame+D*require of a host; the rest is appearance vocabulary for the workbench chrome. - Five themes on
data-theme:platinum(default),graphite,contrast,flat(hi/lo),mono. Platinum light: bg#f0f0f4, text#1d1d1f, accent#0a60ff. Dark: bg#191a20, text#e8e8ec, accent#4f95ff. - Orthogonal axes, all subtree-scopable:
data-density(titlebar 52/46/37px),data-radius,data-shadow,data-contrast(design-default vs WCAG AA, with measured ratios in-file),data-os(windows skin), plus component axesdata-path,data-icons,data-panels. - One-way Nuxt UI bridge
--ui-* ← --d-*, including a derived 11-stop primary ramp, so rawU*components inherit the theme. - Vault-hue system (
--d-vault-hue/sat/light) tints chrome per vault. - Motion, radius, icon-size, chrome-dimension, and font tokens all exist.
Components and semantics
Section titled “Components and semantics”- 35
D*components (packages/ts/ui/app/components/), each with a doc-header contract and a co-located story. Discipline holds: zerodark:variants, zero raw palette classes inside the kit. dSemantics.ts:ActionIntent,StatusKind,SurfaceTier,DSize = xs|sm|md— meaning in, appearance out.useAppearance(ten axes, registry-based themes viaregisterTheme()),useDTheme(light/dark/system),useDOs.- Spec:
packages/ts/ui/docs/design-system.md— five principles: mac-first quiet chrome; semantic-first styling; surface-tier discipline; compact pro-tool density (28px controls, 13px text); dumb components. - Verification culture:
/labspecimen page, Storybook (port 4890), 154 mvux screenshots + 44 notes + 15 ui-package screenshots, Playwright suites.
Primitives’ theming contracts
Section titled “Primitives’ theming contracts”| Package | Contract |
|---|---|
@sksizer/panes | --pane-* variables with neutral fallbacks; app-frame maps 23 of them onto --d-* |
@sksizer/node-tree | Reads --d-* directly with self-contained fallbacks |
@sksizer/graph-canvas | theme: 'light'|'dark' prop + pre-resolved node/edge style objects; own validated categorical palette |
@augment/json-canvas-vue | Scoped --vjc-* vocabulary; notes bridges it onto --d-* |
2. Adoption map
Section titled “2. Adoption map”| Surface | Stack | Consumes the system | Theming today |
|---|---|---|---|
| determined experiences (22) + products (22) | Nuxt layers over shell | Yes — deep (D* heavily used; ~9 raw palette classes total) | Full: 5 themes × axes |
solutions/ontological/desktop (SDF) | Tauri + Nuxt | Yes — registers own sdf theme via the public seam | Full, own preset |
solutions/ontological/products/suspenders | Tauri + Nuxt | Partial — extends app-frame without a design-system layer | Broken by omission |
apps/zoo (live) | Tauri + Nuxt, Nuxt UI v3 | No | Stock green/slate; most token-disciplined otherwise |
apps/pumice (live) | Tauri + Nuxt, Nuxt UI v4 | No | Own palette + uiSemantics.ts intent helpers (the system’s ancestor) |
apps/agentpants (live) | Tauri + Nuxt, Nuxt UI v4 | No | Hand-written token file that nothing consumes; 2,444 raw palette literals |
apps/ontological-legacy (parts donor) | Tauri + Nuxt, pnpm | No | Dark mode hard-pinned to light |
apps/legacy-polish (frozen, D-0011 §6) | Tauri + Nuxt | No | violet/zinc, Nuxt UI dashboard chrome |
solutions/augmented (6 apps) | Mixed: Nuxt, Astro, Vite | No | Four regimes: bespoke variables.css, stock Nuxt UI, plain CSS, stock Tailwind |
solutions/agent-pants | Obsidian plugin + Storybook mockups | No (correct — inherits host vault theme) | Obsidian variables re-creation in mockups |
sites/df-docs + Starlight sites | Astro Starlight | No | Stock Starlight |
Legacy dashboard INDEX_HTML, eta reports | Inline HTML/CSS | No | Hard-coded palettes (the sdf theme’s ancestor) |
Cross-estate facts:
- Icon sets split: lucide (app-frame, shell, agentpants, legacy-polish) vs heroicons (zoo, ontological-legacy, learn_web) vs mixed (pumice).
- Fonts undecided everywhere: every app registers
@nuxt/fonts, none configures it. Only the token layer declares stacks; webfonts deliberately absent (offline Tauri builds). - Version skew in
apps/: Nuxt UI 3.1→4.10, vue-router 4 and 5, one pnpm holdout.
3. Drift ledger
Section titled “3. Drift ledger”Inside the system:
| # | Drift | Where |
|---|---|---|
| 1 | Spec derivation direction is reversed vs shipped code (--d-* ← --ui-* documented; --ui-* ← --d-* shipped); ~69 of 94 tokens, all five themes, and all axes undocumented in the spec | packages/ts/ui/docs/design-system.md §2/§4 vs tokens.css |
| 2 | Body font hard-codes a stack, unlayered, defeating --d-font-sans and the windows font skin | packages/ts/app-frame/app/assets/shell.css:18 |
| 3 | --d-density-font read only by the lab preview; real text stays 14px in every density | tokens.css:348 vs shell.css |
| 4 | Four --d-* names referenced but never defined: --d-status-danger, --d-bg-secondary, --d-bg-primary, --d-border-primary | notes NotesRenameDialog.vue; agent-pants experience pages |
| 5 | Second alias vocabulary (--bg, --text, --accent…) with --text-muted mapped to the wrong tier; 12 call sites | shell.css:1-11 |
| 6 | Four dark-mode mechanisms: .dark class; prefers-color-scheme (panes tokens.css, obsidian-md); wrapper class + prop (json-canvas-vue); bare prop (graph-canvas) | packages listed |
| 7 | Graph experience watches matchMedia instead of useDTheme (app toggle ignored) and stamps data-theme="light|dark", colliding with the theme-preset axis | experiences/graph/…/useGraphView.ts:47, index.vue:140 |
| 8 | dataVizPalette is static indigo hex against a five-theme accent; zero consumers; pumice ships a diverged richer sibling | dSemantics.ts:141, apps/pumice/…/uiSemantics.ts:239 |
| 9 | Two icon sets ship in the kit itself (2 heroicons uses in shipped code); @determined/ui declares no icon collection | DSidebar.vue:52, app-frame layout :513 |
| 10 | app.config.ts still names indigo/zinc; explorations still use the pre-bridge idiom | packages/ts/ui/app.config.ts, explorations.css |
| 11 | Two styling idioms across the two layers (Tailwind arbitrary values vs scoped CSS) — internally consistent, mutually incompatible | ui vs app-frame |
| 12 | suspenders product extends app-frame with no design-system layer; frame contract unsatisfied | solutions/ontological/products/suspenders/nuxt.config.ts:9 |
| 13 | Experiences use 108 raw UButton with literal color/variant beside 97 DButton (partially sanctioned by the migration guide) | experiences |
| 14 | Windows data-os skin re-binds radius/height tokens outside the layer, detaching them from the radius/density axes | os.css |
| 15 | Token counts disagree across docs (58 vs 25 vs actual 94) | IMPLEMENTATION.md:140, tokens.css header |
4. Sources
Section titled “4. Sources”Full detail lives in the layer specs and runbooks:
packages/ts/ui/docs/design-system.md,
solutions/determined/docs/planning/desktop-framework/multi-vault-ux/
(31 HTML mocks, IMPLEMENTATION.md),
solutions/ontological/desktop/docs/ui-consolidation-plan.md.
No repo-level decision or standard currently covers design tokens, theming,
typography, iconography, or component conventions.