Skip to content

feat(studio): adopt the Orbit design system - #10

Open
Me-Phew wants to merge 4 commits into
mainfrom
feat/orbit-design-system
Open

Me-Phew wants to merge 4 commits into
mainfrom
feat/orbit-design-system

Conversation

@Me-Phew

@Me-Phew Me-Phew commented Nov 14, 2026

Copy link
Copy Markdown
Contributor

🔗 Depends on: Moonbase-Systems/moonbase-core#2 (merge first: production pulls the core layer from GitHub)

🎯 Purpose of this PR:

Moves Studio to Orbit, the MoonBase Studio Design System direction shared with the Commander 7" screen.

Theme and fonts

  • The local dark theme override (layers/core/.../themes.css) and the Inter/Lalezar Tailwind overrides are removed; tokens and fonts come from moonbase-core only. Declaring the fonts in both layers duplicated the weights in the Google Fonts request, which was rejected, so the fonts never loaded.
  • Space Grotesk everywhere, Space Mono labels, Lalezar only in the wordmark.

Workspace shell

  • New StudioDialog (four corner brackets, thin title, actions under a line) for the exit, discard and open-project dialogs.
  • 48px top bar, mono scene headings with the add button beside them, 20-segment audio level under layer names instead of a gradient in the text, context menus without shadows or rounding.
  • Add-panel labels are Polish in pl and sentence case in en.

Properties inspector

  • All cards restyled: outlined fields, mono labels, segmented audio meters, no hardcoded colors.
  • Docked as a resizable right column (400–760px, the preview gives way first), stacked vertically: header, preview, section tabs, card.
  • Transformation card is one form grid with a shared label column and a 2×2 crop block (new studio.properties.labels.crop).

Docs: .ai/docs/design-tokens.md and ui-design-rules.md describe Orbit.

✅ Checks: nuxt typecheck, ESLint, Stylelint, Prettier and Vitest (141/141) pass. In the browser: every inspector card and tab measured at an 800px window (nothing overflows the card), top bar, add panel, context menu and dialog checked visually.

Not covered: screen and camera capture flows (device access is blocked in the test browser); text and source cards still use left-aligned rows rather than the shared label grid.

The Orbit tokens now live in moonbase-core, so drop the local dark theme
override and the Inter/Lalezar Tailwind overrides. Fonts are declared once
in the core layer; declaring them here too duplicated the weights in the
Google Fonts request, which was rejected. Global headings use thin Space
Grotesk, the nav keeps Lalezar for the wordmark only, and the public
pages, entry cover and boot screen drop Roboto.
Add StudioDialog (four corner brackets, thin title, actions under a line)
and use it for the exit, discard and open-project dialogs. The top bar is
48px with the Lalezar wordmark, scene headings are mono labels with the
add button beside them, layer rows show audio level as 20 segments
instead of a gradient in the text, and context menus lose shadows and
rounding. Add panel labels are now Polish (and sentence case in English).
Every inspector card uses outlined fields, mono labels and segmented
audio meters, with no hardcoded colors left. The inspector moves from
the bottom row to a resizable right column (400-760px, the preview gives
way first) and stacks vertically: header, preview, section tabs, card.
The transformation card is one form grid with a shared label column and
a 2x2 crop block.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant