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 style({…}) call in its .astro source. Whatever you change in the panel is written straight into that call, and whatever you hand-write into that call shows up in the panel. The two are the same data.

This article covers driving the panel. For the underlying model — how style() 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 property into the element's class={style({…})}. A flex row with a gap, set in the Layout section, becomes:

<div class={style({ base: { display: "flex", gap: "12px" } })}>

You never type a raw class="…" string — Meno does not use Tailwind or hand-written class strings, and they would not round-trip. Every styled element carries exactly one style({…}) call, and the panel is how you edit it.

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={style({
    base: { display: "flex", flexDirection: "row", gap: "32px" },
    tablet: { flexDirection: "column", gap: "24px" },
    mobile: { gap: "16px" }
  })}>

Here display is set once on base and inherited everywhere; tablet flips the direction and tightens the gap; mobile only shrinks the gap further. Empty tablet: {} / mobile: {} blocks mean "no overrides" — leave them be.

Colors and tokens

When you edit a color property (color, backgroundColor, borderColor), the picker shows your project's palette from [colors.json](/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={style({ base: { color: "var(--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: hover, focus, active, or a custom class like .is-open that your JavaScript toggles. Add a state, set its properties, and Meno records it as a second argument to style() under interactive:

<button class={style({
    base: { backgroundColor: "var(--bg-light)" }
  }, {
    interactive: [
      { name: "onHover", postfix: ":hover",
        style: { base: { backgroundColor: "var(--bg-hover)" } } }
    ]
  })}>

Each entry has a postfix (the selector suffix — :hover, :focus, .is-open) and its own responsive style object. This is how you build hover effects, focus rings, and open/closed states 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 inline as a _mapping object:

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 style({…}) call you would write by hand, with the same key order and the same breakpoint structure. 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.