# Studio — the desktop dialect One foundation, two surfaces: where Studio deliberately differs. > Part of the [Konjo design language](../konjo-design-language.md). The laws in the spine apply here unless this chapter contradicts them. One foundation, two surfaces. Everything above holds unless contradicted here. **Calibrated and confirmed**, not assumed: shared laws, palette, spacing ramp, voice and accessibility floor — shipped as [`packages/design-tokens/`](../../../packages/design-tokens/tokens.ts) — but never shared components. The two surfaces are different products for different postures and should look related, not identical. ## Mobile (`src/`) — 128 screens Touch. Light-first, dark at parity. 44pt targets. `spacing.page` 20. Bottom tabs: four base (Train | Events | Learn | Social) plus a conditional Teach for instructors. The hero formula applies to all five tab homes. Phosphor icons via [src/components/Icon.tsx](../../../src/components/Icon.tsx) only. ## Studio (`apps/studio/`) — ~60 screens Desktop 1280–1440. **Light only** — the dark rail is brand, not a dark theme. Denser than mobile: rows 46, more per screen, tables first-class. The 236px ink rail stands; the numbers are in [Studio metrics](metrics.md) and the IA and screen inventory is [here](ia-and-inventory.md). **Studio's page is `surface.page`, the same tinted ground as mobile.** An earlier version of this chapter cited the old brief for a `#FAFAFA` page and a "~10px" radius. Both are wrong and the brief itself now says so: `#FAFAFA` is `surface.muted`, and a `#FAFAFA` page under white cards is the 1.044:1 inversion L3 exists to correct. Radius comes from the shared scale — 4, 8, 12, 16, 24, 999 — and there is no 10. Where Studio differs deliberately: | | Mobile | Studio | |---|---|---| | Density | one hero, then a little | dense and operational | | Theme | light + dark | light only | | Hero blocks | yes, one per tab home | **never** — no marketing composition in the dashboard | | Icons | Phosphor | Lucide | | Touch target | 44pt | 32pt (pointer input) | The red budget (L4), the uppercase budget (L5), the spacing ramp (L2), the accessibility floor (L1), the voice ([voice](../voice/voice.md)), and the [anti-patterns](../../../.claude/skills/design/references/anti-patterns.md) apply identically to both. --- ## Public surfaces Studio also serves the pages nobody signs in to reach — the dojo storefront, the trial and waiver forms, event registration, the family wallet, the lobby kiosk. They are a third dialect, not a Studio screen and not a mobile one, and they have their own chapter: [public surfaces](public-surfaces.md). The one thing to carry away without reading it — the gradients and hover lift on `/d/[slug]` are a **named exception for the marketing storefront only**, and they do not travel to any other session-less page. ## Floating surfaces Studio's drawer, menu, dropdown and transient confirmation have their own chapter: [overlays](overlays.md). The one thing to carry away without reading it — a floating surface's outer boundary is `border.control`, not `border.hairline`. The hairline divides things on the same plane and cannot say "this is a different surface"; on a card it is 1.22:1.