Styles, live

1. 1

   Choose the part

   Select it on the page (P) or in Layers. See Picking and the Inspector.

2. 2

   Open Style

   Press Style in the toolbar or in the part’s action bar on the page, or choose Edit ▾ › Try a style in the Inspector. Style has no key of its own: S is Compare’s slider and On a Mac, ⇧S·; on Windows and Linux, Shift+S is Snap.

   

3. 3

   Move a control

   Each value shows on the page as you change it, before it is an edit. Over an edit the layer already shows, the new value shows too.

   Picture: to come

   A screenshot of the real app, with the demo’s data, of what the title above says.

4. 4

   Choose what it is for

   Under For, choose this element, or Every one of its kind, which says what that reaches and how many elements that is on this page before you choose it, and shows the style on every one as you try it.

   Picture: to come

   A screenshot of the real app, with the demo’s data, of what the title above says.

5. 5

   Keep it

   Show it on the page, or Enter in a field, keeps it in the layer as a draft. Reset takes the values back. Done, or choosing another part, takes the preview away.

Every length is a slider and a number box bound together: move either and the other follows, and the page shows it as you go. The arrow keys step both, and On a Mac, ⇧·; on Windows and Linux, Shift with an arrow takes ten steps. A range widens for a value already past it rather than cutting it short. The slider starts at the value the site gives the part, and marks it on the track once you move away from it.

Each field you change has its own undo beside it, and Reset puts every field back. Only what you change is tried and kept, and Enter in any field keeps the style, once.

A colour field offers the colours your site already uses, under the swatch, in groups that say where each came from: the palette the platform declares (on WordPress, the theme’s and global styles’ colours, read through the site helper; Drupal core declares none), the theme’s own colour tokens, and the colours the page itself uses most, by how much of the page each covers. A palette colour or a token is written as the site writes it (var(--wp--preset--color--accent), var(--brand)), so it follows the site if the theme changes it. Nothing is made up: a group with none is left out, and a palette not read yet, such as a page builder’s own colours, is said.

A style is for the one element you chose unless you say otherwise. Every one of its kind reaches what the site makes the same way, said in the site’s terms:

• “every Card component”, or “the heading in every Card component” for an element inside one;
• “the Body field of every article”;
• “every card inline block placed in a layout”, a Layout Builder block on Drupal;
• “every main menu block placed in a region”, a block placed in Block layout.

Before you choose it, the option says how many elements that is on this page; while you try, the style shows on every one. It is offered only when the part has a kind: a menu link, a template or a theme’s template file has none beyond itself.

1. 1

   Open the token

   In the style panel, open A token, for the whole site.

2. 2

   Name it and set it

   Type the Custom property, such as --color-accent, and its Value, then press Change it for the whole site.

   Picture: to come

   A screenshot of the real app, with the demo’s data, of what the title above says.

It is set on the page’s root, so everything that reads the property from there repaints together; a part that sets the property itself keeps its own value. Only a custom property, a name starting with --, changes for the whole site.

A style you keep is a draft in the design layer, and the page goes on showing it. Wanigan never writes a style into the theme’s stylesheets by hand: a style belongs in the theme’s CSS, so an agent makes it, from a brief, when you hand it over.

1. In Edits (On a Mac, ⇧E·; on Windows and Linux, Shift+E), the style’s state says: “In Wanigan’s layer: the page shows it. Make it real hands it to an agent to put in the theme; once it is there, Verify finds it in the site.”
2. Make it real keeps the page as it is now, for Verify to compare with later (the card says “Keeping the page as it is now, for Verify, and writing the brief…”), answers “A style goes into the theme’s CSS: in phase 1 an agent makes it from a brief, on your click.” and opens a note with the brief written out.
3. Add anything you want to say, then Add to notes, send it to an agent that is running, or, when none runs, press the button that starts one with it (Start Claude Code with this, for example). Nothing starts by itself.
4. Once the agent, or you, has put the style in the theme, choose Verify on the draft. Verify renders the site without the layer and compares it with the design: when the style is there, the edit becomes Verified. When it is not there yet, its card says “Not in the site yet”, which step failed and at what widths, and the first differences, such as “At 1440 px, the title: font-size is 52px in the site, 63px in the design.”, and the edit stays a draft until you verify again.
5. One element is one check. If you also retyped that element’s words and made them real, Verify on either card checks the words and the style together, in the same renders, and both cards get the verdict. A style nobody has handed to an agent yet is left out unless it is the card you pressed, so verifying words never waits on a style.

Make real in the toolbar saves the words on the page and leaves each style waiting in Edits, saying what it needs.

A note from the live view of https://northstar-demo.ddev.site/:

1. Change this style.
   Made by (innermost first): ‹each part around the element: its name, kind, component, template and block›
   An edit in Wanigan’s design layer, shown on the page but not in the site yet: ‹the element, as Edits names it›, for this element.
   Its element: ‹the element, then what the site stores it as and the path inside it›.
   Why Wanigan did not make it real itself: A style goes into the theme’s CSS: in phase 1 an agent makes it from a brief, on your click.
   Style in the layer (not saved): color ‹the colour the page showed› → #1e6fd9
   Make it in the site’s own styles, the way this theme already styles things (its classes or CSS), not as an inline style.

A picture of each part, as it looked, is attached in the same order.