Style an element: the Design tab

For designers. Double-click into a section or switch to Design to style any element. The panel speaks a designer's language and always says, before you change anything, where the change will land.

The Design tab is the full style panel: layout, type, color, effects, states, breakpoints and motion. Every change shows on the page at once and is one step you can undo.

Open it

• Double-click a background, a button or any element that isn't text or an image.
• Or switch to Design in the top bar (⇧I switches between Content and Design), then click an element.

In Design, further clicks in the same section select its elements; a click in another section brings you back to the section and Content. Esc goes one level up. Inside a component you're taken straight into it.

Where the change lands

The first line says it in words: Desktop · Default · This button — the screen size, the state and what you're styling.

Who should change? offers the choices with their reach across the whole site: "This button", "Every small button", "14 on 6 pages", "Title in every Hero". Hover one and every match is outlined on the page. When a change would reach more than you meant, the panel warns you ("Changes them on every page") and offers "Only this link".

How the panel is laid out

The groups are always in the same order: Content, Layout, Style, Interactions. The panel shows what makes sense for what you selected, whether it's text, a link or button, an image or video, an icon, a container or a form field. The rest is a one-line summary or a +, like + Spacing or + Add motion. Click a word in a summary, such as "Auto × Auto", to open exactly that field.

• Find & add (⌘K or /): type "hover color" or a CSS property and the panel jumps to the field. Type a declaration and it's written.
• Show CSS switches the labels to CSS names and shows the exact code a change writes, with Copy CSS.
• The panel can be 320 to 480 px wide and remembers which groups you keep open.

Values from your design system

Every number field offers ticks from your site's rhythm: tokens first, then the values your site uses most. Let go on a tick and the token is written; the field shows "M · 12 px". Colors come from your roles and palette; a color from outside gets "Not one of this site's colors" and the nearest token. Type $ or -- to pick a token, as in Figma.

Why does it look like this?

Each field shows where its value comes from: set here, inherited from elsewhere, the default, or from code, an interaction or the agent. The origin card explains it in plain words, for example "Comes from the Small button style of the design system", and offers a fix: change only here, change the winner, edit the design system, or remove your value. If the panel can't explain a value, it says so.