Style Manager overview

The Style Manager is the heart of Kinflo: one place that controls how your entire app looks and feels. Every change you make renders instantly in a live phone mockup on the right, and saving pushes it to your real app within seconds.

The five tabs

Along the top sit five tabs, each a distinct job:

• Styles, the design controls themselves: colours, typography, buttons, cards and every other visual detail, organised into accordion sections.
• Homepage, choose what your app's home tab shows, or build a custom homepage from blocks. See The homepage builder.
• Menus, arrange your app's tab bar and drawer navigation. See Menus: the tab bar and drawer.
• Onboarding, design the screens new members see on first launch. See The onboarding flow builder.
• Branding, your logo, app icon and custom fonts. See Branding: logo, icon and app name.

The Scope dropdown

On the Styles tab, a Scope dropdown sits above the section list. It filters the sections to one area of your app:

• Global covers app-wide styles: Colour Palette, Typography, Buttons, Avatars, Headers & Status Bar, Inputs & Forms, Tabs & Segments, Theme Mode and Miscellaneous.
• Feed, Storefront, Courses, Content and Loyalty each show that feature's own controls. Only features you have enabled appear in the list.

This is where all per-feature styling lives, the feature pages themselves manage content, not appearance. More in Per-feature styling.

The live preview

The right-hand panel is a live phone mockup. Its controls sit above it:

• Previewing picks which screen you are looking at (Profile, Feed, Home, Shop and so on). Opening a section automatically switches to the most relevant screen.
• Device chooses the phone frame, iPhone 16 Pro and friends.
• Phone / Web toggles between the mobile mockup and the web app layout, on screens that have a web variant.
• A light / dark toggle appears when your theme mode lets members choose.

The floating Preview on device button opens the same design on your real phone, see The floating preview button.

Saving, undoing and history

The header gives you full control over your changes:

• Save writes your changes to your live app. Until you save, edits exist only in your session, and the browser warns you before you navigate away with unsaved changes.
• Undo / Redo (Cmd-Z and Cmd-Shift-Z) step through your edits.
• Reset appears when you have unsaved changes and discards them.
• History opens a drawer of previous saves, pick any entry and Revert to restore it, then save to apply.