MotherFluxer Docs

Your App's design system ​

What a design system does for your App ​

Your App has one set of design choices — its colors, its text sizes, its corner roundness, its name and logo — and everything in the App follows them. Change a color once and every button, heading and panel that uses it changes with it. You do not edit any code, and it costs nothing to change.

It also keeps the AI in line. When you ask for a new screen, the AI is told your design choices and is required to build with them, so a new page looks like the rest of your App instead of arriving in its own style.

Open Format ​

In the App editor, open Develop › Format. The settings sit in a column down the left, and your App keeps running beside them, so every change you make shows up in it live.

A reel of design presets runs across the top of the column — Clean, Warm editorial, Midnight, Playful, Brutalist, Soft pastel, Corporate and Forest. Picking one stamps the whole design system, brief included. The lit card is the preset you started from and counts what you have changed since; it reads Custom when your design matches none, and picking the lit card again puts that preset's values back.

Format is on every App. It styles your App's web pages, so it works once your App has one — an HTML page anywhere in the project, or a framework App that compiles to one. Which file you have open never matters: a website that also holds a README still gets its full design system. An App with no web page yet (only notes, a diagram or a server) shows No web page · add a page where Format would be, and its settings appear the moment you add one. Every page your App publishes carries the same design system.

The six sections ​

Below the reel and the Select / Navigate choice, the column holds six sections. Press one to open its settings beneath it; one is open at a time, and while Select is on your running App outlines what that section paints.

  • Brand — your App's name (App name and Short name), its Tagline, its Logo and Logo on dark, its Browser-tab icon and Home-screen icon, and the Share image (with a Share image description) that shows when someone shares a link to it. Each picture is a link to the image. This is the single home for all of them: your App's install name, its browser tab icon and its link preview all read from here.
  • Colors — the colors of your App, named by what they are FOR rather than by their shade: the main action color, the page background, a surface, a muted area, a warning. Each has a Light and a Dark version. Naming them by role is what lets the AI pick the right one without seeing your palette.
  • Text — the Typefaces your App uses, and its Sizes, Weights, Line height and Letter spacing.
  • Shape — Spacing, Corners and Shadows, plus Your own tokens for anything that belongs to no group.
  • Motion — your Icons (Outline, Solid or Duotone, their Line weight and Icon sizes), how fast things animate (Speed and Easing), Respect reduced motion, which follows a visitor's system setting to reduce motion, and Animations. Press the search on the Animations row to add one you saved, or one from Community: it stands in the row as a named chip, and your App's pages play it as the class mf-motion-<name>. Your App keeps its own copy, so changing the saved animation later changes nothing here, and anything a page can't play is named when you add it. An App holds up to 24 animations, and one that runs too long or moves too much for a page to play is refused, with the reason. Respect reduced motion stops these too, and picking a preset or a saved design leaves them in place.
  • Brief — a plain-English description of how your App should feel, written in your own words.

Each setting is labelled with its own name — the exact name your App's code and the AI use for it.

Click something in your App to change it ​

You do not have to know which setting paints a thing. The first row of the Format column is a choice: Select or Navigate.

On Select, clicking anything in your running App picks it. A small card opens next to what you clicked, listing every design setting that gives that thing its look. Each one offers two changes: edit the setting itself, and every other part of your App on that same setting moves with it — or use Change only this, which points that one thing at a different setting (Use instead) and moves nothing else. Press Escape or the card's ✕ to put it down.

Switch to Navigate when you want to use your App normally — follow its links, press its buttons, walk to another page — then switch back to Select to keep picking.

A few things a click will tell you rather than change. Text says to double-click it in the App to rewrite the words in place. A picture or video says its file is changed in the App itself. And if your App builds something as it runs rather than writing it down, the card says so and points you at the AI, because there is nothing on the page to edit.

Write a style brief ​

Colors and sizes cannot express taste. The Brief section is a few sentences in your own words — "clean and airy, generous whitespace, one accent color used sparingly, no drop shadows" — and the AI reads it word for word every time it builds something for you.

This is the fastest way to steer the look of your App. A brief that says what you want AND what you do not want works better than a list of adjectives.

Adding your own values ​

If your design needs a value none of the built-in settings covers — a second accent, a specific brand shade — add it with the + on the heading of the group it belongs to: + on Colors adds a color, + on Corners adds a corner. Give it a name, a value and optionally a note about what it is for (press Escape in any of its fields to cancel without adding anything), and it becomes available everywhere, including to the AI. It then sits under that same heading with the built-in ones, editable the same way.

The AI can add one too when it genuinely needs a value your set does not have. Anything it adds appears in Format straight away and is yours to edit from then on. One it adds that matches no group of its own lands under Your own tokens.

Reuse your design in another App ​

Press the search on the reel of themes: the star on its Starred row stars your design system — colors, text, shape and motion, without your brand, your Brief or your Animations — and the button at the end of its Community row posts it on its own. Both are offered once your design matches no preset; a preset you have not changed is already there to pick. Starred lists the designs you have starred in any of your Apps and Community the ones other people have shared, and using one replaces your App's current design while keeping your App's own brand and brief; the running App shows the result at once. Ask AI, in the same search, designs one from what you type.

A design system is your App's theme, a setting of its own: it can be starred, posted and put into another App.

Star · Post · Copy

The rule the AI cannot break ​

Your App's code is checked when it is built and again when you publish. If any part of it uses a raw color or size instead of one of your design settings, the build says so and names the file, the value it found and the setting it should have used. That is what stops your App drifting back into a patchwork of one-off colors over time.

If you hit that message on your own code, either use one of the existing settings or add the value with the group's + first.