Styling & advanced options
Your blocks already follow your brand colors and fonts. For the times you want one thing to look different, such as a dark section, a bigger headline, or extra space, Studio lets you add style classes: short keywords like bg-gray-900 or text-5xl, each of which changes one thing.
Where you can add styles
| Where | Field | Affects |
|---|---|---|
| A whole page | Page background in Page Settings | The page's background and text color, edge to edge. |
| A whole block | Class (in Edit props) | The block's outer area: background, spacing, borders. |
| Part of a block | Headline Class, Title Class, Description Class | Just that text. |
| A form's button or message | Submit Class, Success Class | The submit button, or the success message. |
| Some text in the page body | Select the text, then Span style | Only the selected words. Enter classes, or CSS such as color: tomato; font-weight: 600;. |
| Any inner part of a block | Ui (code editor only) | See Advanced: the Ui field. |
Separate several classes with spaces: uppercase italic tracking-wide.
A class you add replaces the block's built-in style of the same kind rather than adding to it. For example, text-6xl on a title replaces the title's normal size.
Class cheat sheet
| To change | Classes | Examples |
|---|---|---|
| Text size | text-xs text-sm text-base text-lg text-xl text-2xl … text-7xl | text-5xl |
| Boldness | font-light font-normal font-medium font-semibold font-bold font-black | font-black |
| Text style | italic uppercase lowercase capitalize underline | uppercase italic |
| Letter spacing | tracking-tight tracking-wide tracking-widest | tracking-wide |
| Text color | text-white text-black text-primary text-{color}-{shade} | text-gray-900, text-blue-600 |
| Background | bg-white bg-black bg-primary bg-{color}-{shade} | bg-gray-900, bg-amber-50 |
| Space above and below | py-0 py-4 py-8 py-16 py-24 py-32 | py-24 |
| Space on one side | pt-* (top), pb-* (bottom), mt-* / mb-* (outside) | pb-0 |
| Width | max-w-sm max-w-md max-w-xl max-w-3xl max-w-full | max-w-xl mx-auto |
| Centering | mx-auto (a block or image), text-center (text) | mx-auto |
| Rounded corners | rounded-none rounded-lg rounded-2xl rounded-full | rounded-2xl |
| Borders | border border-2 border-{color}-{shade} | border border-gray-200 |
Colors are slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose. Shades run from 50 (lightest) through 100, 200, … 900, to 950 (darkest).
Different on different screens: prefix a class with a screen size and it applies only at that width and wider. sm: is about 640 pixels and up (large phones and tablets), md: 768 and up, and lg: 1024 and up (laptops). For example, text-4xl lg:text-6xl gives a 4xl title on phones and a 6xl title on laptops.
bg-… and text-… colors) works instantly in the editor. A class that isn't used anywhere on your site yet, such as a new text size or spacing value, might not show in the editor preview until you publish and the site rebuilds. It works on your preview and live site. If a class seems to do nothing, publish, wait for Deployment complete, and reload.Page backgrounds
Set Page background in a page's Page Settings. There are two kinds of value:
| Kind | Examples | Behavior |
|---|---|---|
| Theme colors (adapt) | bg-default text-default, bg-elevated, bg-muted, bg-inverted text-inverted | Follow your Appearance setting. They switch between light and dark automatically. |
| Fixed colors (always the same) | bg-white text-gray-900, bg-gray-950 text-white, bg-amber-50 | Look identical in light and dark mode. |
If your site uses Appearance: Light (the default), either kind works. If you switch to Dark or System, prefer theme colors, or check every fixed-color page in dark mode.
bg-gray-950 text-white), so the text stays readable.Common styling recipes
A dark band around one section. On the block's Class:
bg-gray-950 text-white py-24
A bigger, bolder hero title. On the Page Hero's Title Class:
text-5xl sm:text-7xl font-black tracking-tight
An all-caps eyebrow in your brand color. On Headline Class:
uppercase tracking-widest text-primary
Less space above a block. On the block's Class:
pt-0
A narrower, centered description. On Description Class:
max-w-xl mx-auto
Advanced: the Ui field
Every block also has a Ui field. It can style any inner part of a block, not just the title and description. For example, it can style a hero's button row, or the cards inside a feature grid.
In the code editor, add ui: to the block's props, then one line per part:
::page-hero
---
title: Welcome
ui:
root: bg-gray-950
title: text-white text-6xl
description: text-gray-300
links: gap-6
---
::
Parts you can style on the most common blocks:
| Block | Parts |
|---|---|
| Page Hero | root, container, wrapper, header, headline, title, description, body, footer, links |
| Page Section | root, container, wrapper, header, leading, headline, title, description, body, features, footer, links |
| Page CTA | root, container, wrapper, header, title, description, body, footer, links |
| Cta | base, label, leadingIcon, trailingIcon |
| Faq | root, item, header, trigger, content, body, label |
| Banner | root, container, left, center, right, icon, title, actions, close |
Feature Grid uses Grid Ui (the grid) and Feature Ui (each card). Testimonials uses Grid Ui and Card Ui. Write them the same way, for example featureUi: followed by root: bg-white rounded-2xl.
If you're not sure which part to target, use Class, Title Class, and Description Class first. They cover most needs.