How the app works

Three modes, one document, and one rule underneath all of it.

The rule

If a value is not in your design system, no control here will produce it.

There is no field to type an arbitrary padding into, because there is no arbitrary padding. The constraint is applied while you design rather than when you export — which is why what comes out needs no conversion. It was already a web page.

That constraint is a rail, not a cage. When you need something the system does not have, the answer is to change the system, and every scale has a way through to it.

The three modes

The buttons at the top of the left rail.

Design system is where the tokens are made: palettes, the type scale, the spacing ratios. Change a ratio here and every element bound to that token moves on the canvas immediately.

Design is the canvas — a real browser rendering real CSS. What you see is not a preview of the page. It is the page.

Assets is an artboard with a pen on it, for the graphics the page needs. A logo drawn here keeps your colour tokens, so retuning the palette recolours it on the page it was placed on.

A working session

1. Start from the system. Open a project, or connect a globals.css. The scales you set here are the only values the rest of the app can produce.
2. Add a section. A page is a flat stack of sections, never nested — that is the Boosh CMS contract and it is what makes each one a component later.
3. Draw inside it. The tool bar decides what a drag means: Move, Corner, Spacing, Gradient. Whatever you draw is CSS on a real element.
4. Reach for the design system, not for numbers. Every control offers your tokens. Custom exists for the times none of them is the answer, and it marks itself so you can find it again.
5. Group and save components. Several layers become one element with ⌘G, and that element becomes a component. Using an element component more than once in a section is what makes it a repeat.
6. Save, then export. Saving keeps the working files. Exporting produces something to hand over, and there are three arrangements depending on who is receiving it.

Why it is arranged this way

The canvas is the browser. Not a drawing of one. So position: sticky sticks, a fluid type scale is fluid, and a hover state is a hover state — and none of it has to be translated on the way out.

Nothing is inferred from a gesture. A repeat is a repeat because you used a component twice, not because two things look alike. A layer is named because you named it. What the app knows is what you told it.

The output has to be defensible. Somebody will open the CSS. Every value in it traces to a token, every class is BEM, and there is no line in it that only makes sense if you know this app exists.