Styles

Every block can be styled on its own: its layout, size, spacing, type, colors, borders, shadows and more. You do it in the block's Design tab, and the page updates as you go.

#Style a block

1. Select a block on the page.
2. Open Design in the settings on the right.
3. Change what you need, section by section.

Layout only shows on blocks that hold other blocks.

#Use your design system

Fields for colors, sizes and spacing show a small diamond when you point at them, Design Tokens. Click it and pick a value from your design system, like primary or space 8.

A block that uses a token keeps matching the rest of your site: change the token, and the block follows. Prefer tokens over typed-in values whenever one fits.

#Style for tablets and phones

Styles work desktop first. You design for a large screen, then adjust what needs to change on smaller ones.

1. Choose Tablet or Phone in the editor's top bar. The page switches to that layout, and a line at the top of the Design tab says which screens your changes reach, with Back to Desktop.
2. Change what should be different, like three columns becoming one.

A change for Tablet applies to tablets and phones; one for Phone only to phones.

Field labels tell you where a value comes from. A darker label is set here, on this screen size and state: click it to reset it. A label with a small dot is inherited from a larger screen or from the default state.

#Style hover, focus and other states

The track at the top of the Design tab chooses which state you're styling: Default, Hover, Pressed or Focus. Pick Hover, change the color, and the block changes color when visitors point at it.

More States, the + at the end of the track, has more:

Add a Transition in the default state, and the change between states animates.

#Custom states

A custom state is a name, like open or active, that something else switches on and off. You style it here, and the block changes when it switches.

• An interaction sets it: a menu is open while its button has been clicked.
• A behavior sets it: Scroll States marks a header scrolled once the page scrolls.
• Data sets it: a link is active when it points to the page the visitor is on.

States the block or its parents set appear on the track by themselves, and a state with styles of its own carries a small dot. Choose a parent's state, like in open, to style this block while its parent is open. No script is needed.

#For developers

#How styles are stored

A block's style maps a variant to CSS properties in camelCase:

{
  "type": "box",
  "props": { "tag": "section" },
  "style": {
    "base": { "display": "grid", "gridTemplateColumns": "repeat(3, 1fr)", "gap": "token:space.8", "paddingBlock": "token:space.section" },
    "tablet": { "gridTemplateColumns": "1fr 1fr" },
    "mobile": { "gridTemplateColumns": "1fr" },
    "hover": { "transform": "translateY(-2px)" },
    "mobile:hover": { "transform": "none" }
  }
}

About 140 properties are allowed; blocks/types lists them with their inspector section. A few shorthands are accepted and stored under their full name: paddingX/paddingY (paddingInline/paddingBlock), marginX, marginY, radius, shadow, bg, direction, justify, align.

#Values

Anything that could break out of a declaration, such as braces, semicolons, a hand-written url() or comments, is refused.

#Screen sizes

#States

Combine a screen size and a state with a colon: mobile:hover, tablet:is-open.

Custom states come from logic.states ({ "open": "open" } adds is-open while the open variable is true), from behaviors (Scroll States adds is-scrolled, Scroll Spy adds is-current) and from data (bind: { "state:active": "item.active" }).

#How it reaches the page

Each declaration becomes one short class (.s4k2j9{gap:var(--space-8)}), shared by every block with the same declaration, and only the classes a page uses are written into it. The editor and the public site use the same renderer and the same style data.