Theme Studio is the visual workspace for a Design System. Start with foundations, inspect components, and save the decisions that make your product feel like your brand.
Open a system
Open Frontfriend, choose a Design System and enter Studio. Access depends on your Workspace and role. Starter includes Studio access with editing limited to Quick Setup in Style & Foundations. Component editing, semantic token editing and all other Studio editing require Cloud Self-serve or a managed workflow. See Plans and access for details.
Tune the foundations
Studio includes editors for global color palettes, semantic Light and Dark families, typography and font scales, spacing, density, radius, borders, effects, motion and responsive layout. The preview should follow the setting you are editing.
Start with brand color and typography, then evaluate controls at their actual size. Use density and spacing together so a compact form still has usable targets and readable labels.
Typography and line height
Foundations → Typography controls the font sizes, weights, line heights and letter spacing used by the application. Regular sets the weight used by font-normal. If the system has an explicit Normal weight, that value takes precedence.
Use Line Height per Size to set the line height of a text size such as text-sm. Enter a unitless ratio from 1 to 2: for example, 1.5 gives a 14 px font a 21 px line height. Leave the field blank to keep Tailwind’s default for that size. Reset restores the source value, or clears the field if the source has no value.
The separate Line Height scale controls classes such as leading-tight and text-sm/tight. These classes override the line height set for the size.
For MCP edits, use describe_foundation_controls with sections: ["typography"]. Set a size ratio with a change such as { "op": "set", "path": "typography.fontSizeLineHeight.sm", "value": 1.5 }. Use op: "reset" on that path to restore the source value.
Refine component properties
Choose a component and navigate its variants and named properties. Supported component classes are exposed through a derived property layer with human-readable labels. Interactive states and breakpoints are addressable where the configuration supports them.
A root property can affect the whole component. A slot property affects a specific part. Review that scope before changing a value shared across variants.
Review, save and share
Check the affected components in both appearances, then save a version. The implementation includes version origin and property-level diff support. The Frontfriend team can share a read-only preview of your system through a revocable link.
Saving is not permission to discard a conflicting change. Retain a known-good version and inspect a diff before a broad change.
Work without Figma
Use Brand Import to create a starting point from an existing brand, or begin directly with Studio’s controls. Figma sync is an optional workflow, not a prerequisite.
Open Brand Import to create your system.