The Style Panel

The Style panel is where you set how a selected element looks: layout, spacing, typography, color, borders, and effects. It is the visual front end for one thing — the element's utility class string in its .astro source. Whatever you change in the panel is written straight into that string, and whatever you hand-write into the class shows up in the panel. The two are the same data.

This article covers driving the panel. For the underlying model — how the class engine works, the responsive cascade, and the full property reference — read the styling guide and the style properties reference.

Where it lives

Select an element on the canvas or in the structure tree, and the Style panel appears in the sidebar. It is grouped into sections so you do not have to remember property names:

• Layout — display, flexDirection, justifyContent, alignItems, gap, gridTemplateColumns

• Spacing — padding and margin (and their per-side variants)

• Typography — fontSize, fontWeight, lineHeight, textAlign, color

• Border — border, borderRadius, borderColor

• Effects — boxShadow, opacity, transition, and other visual properties

Set a control and Meno writes the utility into the element's class string. A flex row with a gap, set in the Layout section, becomes:

<div class="flex gap-3">

That utility class="…" string is the on-disk source of truth — Meno's own Tailwind-looking engine — and it round-trips losslessly. You can hand-write it or let the panel manage it; a style({…}) call appears only for the dynamic values a static class can't express.

Breakpoints: base, tablet, mobile

Styling is desktop-first. A breakpoint switcher at the top of the panel toggles between base (desktop), tablet, and mobile. The same number-key shortcuts that resize the canvas also switch which breakpoint the panel writes to.

base is your default and applies at every screen size. When you switch to tablet or mobile, the panel only records the properties you actually change — those become overrides layered on top of base. Anything you leave alone keeps inheriting from base, so you only restate what differs.

<section class="flex flex-row gap-8 max-lg:flex-col max-lg:gap-6 max-sm:gap-4">

Here flex is set once, unprefixed, and applies everywhere; max-lg: flips the direction and tightens the gap; max-sm: only shrinks the gap further. A utility with no breakpoint variant simply keeps its base value at every width.

Colors and tokens

When you edit a color property (color, backgroundColor, borderColor), the picker shows your project's palette from [theme.css](/docs/project-config). Pick a swatch and the value is written as a CSS variable — var(--text), var(--primary), var(--bg) — not a raw hex.

<span class="text-(--text)">

Always pick from tokens rather than typing a hex value. Tokens keep your colors consistent across the project and let theme switching (light/dark) work — the same var(--text) resolves to the right value per theme.

Interaction states

The panel can also style states an element enters on interaction. Simple hover, focus, and active states become hover:/focus:/active: class variants, written straight into the class string:

<button class="bg-(--bg-light) hover:bg-(--bg-hover)">

For a state a class variant can't reach — a JS-toggled .is-open, or an ancestor context — Meno records a rule in a style() call's interactive array, each with a prefix/postfix selector and its own responsive style. This is how you build open/closed states and context styles without a separate CSS file. For the full pattern, including targeting child elements and wiring states from JavaScript, see interactive styles.

Prop-bound style mappings

Inside a component, a style value can be driven by a prop instead of being fixed. In the panel you bind a property to a prop and supply the per-value table; Meno writes it as a _mapping object — or, for a losslessly-convertible mapping, a variants(__props, table) class:

backgroundColor: {
  _mapping: true,
  prop: "variant",
  values: { primary: "var(--primary)", secondary: "var(--bg-light)" }
}

Now each instance picks its background from the variant prop it is given. See component props for how the prop itself is declared.

The panel is a convenience, not a separate format. Every control writes the same utility class string you would write by hand, with the same tokens and the same breakpoint prefixes. Edit visually, edit the .astro directly, or do both — Meno's codec round-trips between them losslessly, so the panel and the source never drift apart.