One foundation, two surfaces: where Studio deliberately differs.
Part of the Konjo design language. 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/ — 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 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 and the IA and screen inventory is here.
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), and the anti-patterns 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. 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. 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.