Building

Styling

The Style panel, the CSS panel, selectors, breakpoints and the cascade sitereal writes into.

Styling in sitereal is writing CSS — with fields instead of typing, and with the rule always in sight. There is no utility soup, no inline styles and no class you did not ask for.

One element, one rule

The selector picker at the top of the Style and CSS panels says which rule you are editing. For a selected element that is, in order of what wins:

1. its #id, if it has one,
2. its first class,
3. its element attribute — [builder-data-element="section"] — when it has neither.

That third case is why a nav part with no class is still styleable, and why the rule you write and the rule the design system already wrote are one rule.

The Style panel

A stack of folds, shut by default, each showing a count when it is closed and holding something:

Layout · Size · Spacing · Position · Typography · Background · Border · Transforms · Appearance · Effects · Overlays

Layout comes first because it is the question you ask of every element; Effects and Overlays come last because they are what an element does rather than how it looks. See Effects & states.

Every field writes one declaration and knows how to unwrite it: the × appears only while there is something to remove, so it costs no width in an empty row.

Values and variables

A value field shows the value at its left edge, then the braces button, then the ×. Bind a field to a variable and the box turns magenta and shows the variable's name instead of var(--…) — the notation is a hover away, because that is what the CSS says.

Only a value that is nothing but one reference becomes a chip. calc(var(--space-m) * 2) stays a value you can type in.

The variable picker is a panel, not a menu: search at the top, New variable under it, then your variables that suit this field, the design system's tokens, then everything else. See Variables.

Colours

One control everywhere: a swatch, the value, and the variable button. Solid · Linear · Radial · Conic · Image are tabs of the same control, because "what is this box filled with" has one answer and one declaration. Alpha is part of the value (#0f172acc), not a second field.

Any CSS colour is parsed by asking the browser what it computes to, so a notation nobody thought of still works. A value that is not a plain colour — var(--primary), currentColor — is shown and left alone, never flattened to a hex.

Transforms

Nine properties, none of them shown until you add one from the fold's +: Scale, Skew, Rotate, Offset, Depth, Perspective, Origin, Backface, Preserve 3D. They arrive neutral (scale: 1, rotate: 0deg) — a transform that moved the element on the way in would be the panel doing something you did not ask for.

Individual properties throughout (scale, rotate, translate), never the transform shorthand: a reveal writes translate and a scroll link writes transform, and a panel taking the shorthand would fight both for one slot. Skew is the exception CSS forces, and is written into transform alone.

The CSS panel

The same rule as text, with the selector fixed at the top:

.card {
  display: flex;
  gap: var(--space-s);
  border-radius: var(--radius-m);

  &:hover { border-color: var(--primary); }

  @media (max-width: 48rem) {
    flex-direction: column;
  }
}

• Completion for properties, values, and your own tokens — your variables and the design system's, resolved to what they actually are.
• Recipes: type ? for a shortcut that expands to plain CSS. ?auto-grid writes a grid that stacks itself with no media query; ?stack, ?row, ?center, ?cover, ?grid-2-3 and the rest expand the same way. What you get is ordinary CSS, still hand-editable afterwards.
• Format tidies the rule, and runs when you leave the field.

Nested rules are kept verbatim. The Style panel edits the declarations and leaves everything nested inside the rule alone, so &:hover, &::after and @media blocks survive being touched by fields.

Breakpoints

The canvas shows every breakpoint side by side — Desktop 1200, Tablet 768, Phone 390 by default, and you can add, rename or resize them. Working in a frame is what picks the breakpoint you are editing, so a change made in the tablet frame lands in that breakpoint's media query, inside the same rule:

.hero__title {
  font-size: var(--h1);

  @media (max-width: 768px) {
    font-size: var(--h2);
  }
}

The project's strategy — desktop-first or mobile-first — decides whether that query is a max-width or a min-width. Drag a frame's edge to see what happens between breakpoints without adding one.

Logical properties

Fields, generated defaults and completions all speak logical CSS: inline-size, block-size, margin-inline, padding-block, inset-block-start. The panel still reads a physical property so pasted CSS keeps working, and moves it to the logical name when you edit that field.

Where a rule lives

From the widest reach to the narrowest:

The design system's rules are wrapped in :where(), which contributes zero specificity — so anything you write beats them without !important, whatever the source order.