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. Existing account access does not imply entitlement to every v4 authoring capability.
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.
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. Shared previews use revocable snapshot links subject to access controls.
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.