Docs/Site Style

Site Style

Set your site's design tokens (colors, fonts, spacing, radius, shadows, motion and breakpoints) with a live preview, presets and AI, and write them to theme.css.

Site Style

Site Style sets the design tokens for your whole site: colors, typography, spacing, border radius, shadows, motion and breakpoints. You see every change in a live preview, and when you apply it, PhantomStudio writes the tokens to src/styles/theme.css.

Site Style replaces Theme Studio. It pairs with the Style tab in the editor: Style changes the selected element, Site Style changes the whole site.

Opening Site Style

Open Site ▾ › Site Style (in the Design column), or press ⌘K (Ctrl+K) and type "Site Style". Searching for "theme studio" finds it too.

Site Style fills the main area of the editor. Your page, Builder and code stay where they were underneath, so closing it (the X at the top right, or Esc) returns you to what you were doing.

Layout

The rail on the left lists the sections, grouped as Start (Presets), Tokens (Colors, Typography, Spacing, Radius, Shadows, Motion, Breakpoints) and Manage (Library). Use Search at the top to jump to a setting.
The middle shows the section you picked.
The preview shows the tokens applied. My Site shows your own site; Demo Scenes shows sample pages (Landing, Dashboard, Form, Components, Article). Switch between mobile, tablet and desktop widths with the device buttons.
The AI assistant opens from its button and can propose whole themes or tweaks.

Light and dark

The switch at the top picks what you edit and preview: Light only, Dark only or Both. Both shows light and dark side by side and needs Demo Scenes in the preview.

Advanced settings (the sliders icon) sets how dark mode turns on:

Option	Behavior
Class-based	Dark mode turns on with a `.dark` class on `<html>` or `<body>`. Most Tailwind setups use this
Auto (system)	Follows the visitor's system setting (`prefers-color-scheme`)

Site Style detects which one your project uses.

Presets

Presets is the quickest starting point.

Looks set the whole site's personality: typography, shape, spacing, shadows and color direction.
The palettes below them change colors only. Search them, or filter by All, Light or Dark.

Click one to apply it to the preview. Nothing is written to your project until you apply the theme.

Tokens

Each token section has a Suggest… button (Suggest pairing, Suggest scale, Suggest roundness and so on) that asks the AI assistant for values that fit your current theme.

Colors

Edit your brand colors; the lighter and darker shades are derived automatically. Expand any group for fine control. In Both mode, switch between editing Light and Dark, and use Derive dark to build the dark brand colors from your light palette.

Typography

Pick the fonts for your content and code:

Body, heading & content font: one font for all text. Turn on Use a different font for headings to get a separate Heading font (the first field then becomes Body & content font).
Code font: for code blocks and inline code.

Fonts you've installed appear first in each list, under Installed. Browse all opens the full font catalog: pick a font, then Install & use adds it to your project and selects it, or Use for … selects a font that's already installed.

Type scale sets font sizes, font weights, line heights and letter spacing.

Spacing

On Tailwind projects, spacing comes from one base number: change it and every p-*, m-* and gap-* on your site rescales together. The named ramp below it (--space-*) is for your own CSS. Choose a scale (Compact, Default, Comfortable or Spacious) to reseed the ramp.

On plain-CSS projects, layout uses the named --space-* tokens. Use them in your stylesheets, for example padding: var(--space-md).

Radius

Sets the corner rounding for every container. Pick a Roundness preset (Sharp, Soft, Rounded or Pillowy), then adjust individual sizes.

Shadows

Defines elevation for cards, dialogs and floating UI. The sliders edit a shadow's first layer; paste raw CSS to define shadows with several layers.

Motion

Durations and easing curves for hover, focus, dialogs and page transitions. Try it › Play shows them in action.

Breakpoints

The viewport widths where responsive styles kick in. The defaults match Tailwind v4. The viewport ladder shows where each one sits.

Library

Library saves, loads, imports and exports themes.

Save current theme: give it a name. Saved themes are stored in your browser, so they're available in all your projects on this browser but not on other devices. They're listed under Your saved themes.
Export: Download CSS, Copy as JSON, or Download tokens.json (DTCG) in the W3C Design Tokens format, which works with Style Dictionary and Tokens Studio for Figma.
Import: paste CSS with --color-* variables or a JSON export, then click Import. Upload theme.css imports a whole theme.css written by another project's Site Style, with every token, not only colors. ⌘Z (Ctrl+Z) undoes an import.

The AI Assistant

Describe a theme ("Warm minimal portfolio", "Bold dark editorial"), ask for a tweak ("Make it darker", "Fix contrast issues"), or paste a brand description. Each proposal stays in the chat with its colors; click Use this on any of them to make it the active theme. ⌘Z undoes.

Applying Your Theme

The bar at the bottom has:

Action	What it does
Reset	Puts every token back to its default
Undo / Redo	Step through your changes (⌘Z, ⇧⌘Z)
More actions	Save as preset (opens the Library), Copy CSS, Download theme.css
Discard	Closes without writing anything to your project
Apply Theme	Writes the theme to your project and closes Site Style (⌘Enter)

Applying does two things:

Writes src/styles/theme.css with your tokens as CSS variables (a Tailwind v4 @theme block on Tailwind projects, :root variables on plain-CSS projects), including the dark mode values.
Updates font imports: the @fontsource imports for the fonts you picked go in the frontmatter of src/layouts/BaseLayout.astro, and old font imports are removed.

The tokens become classes such as bg-primary, text-content, border-outline and font-heading that you can use anywhere:

<section class="bg-surface p-8">
    <h2 class="font-heading text-3xl text-content">Welcome</h2>
    <p class="text-content-light">Body text with a lighter color.</p>
    <a href="/start" class="bg-primary text-on-primary rounded-lg px-4 py-2 hover:bg-primary-dark">
        Get started
    </a>
</section>

Like any other edit, the new theme.css goes live when you publish.

If your project already has a theme.css, Site Style reads it when it opens, so you continue from your current theme.

Troubleshooting

The theme doesn't show on the site

Check that src/styles/theme.css exists (Code mode, file tree).
Check that your layout imports theme.css.
Refresh the preview.

A font is missing from the list

Install it with Browse all › Install & use, or from the Font Manager. Your workspace must be connected to install fonts.

Dark mode doesn't turn on

Check the strategy under Advanced settings.
For Class-based, something on your site has to add the .dark class to <html> or <body>.
For Auto (system), switch your operating system to dark mode to test.

Next Steps

Font Manager: browse and install fonts
Design mode: the Builder, the preview and the Style tab
Component Library: sections that use your tokens

Page Rendering

Forms