Styles hold the design your whole theme shares: its fonts, colors, shadows, corners, widths, spacing and motion. Every page, layout and pattern reads them, so one change in Styles changes the whole site. Open them with the paintbrush icon, Styles, in the icon rail, the narrow bar of icons along the edge of the editor.
What Styles cover
The Styles panel has one screen per area:
Screen
What it sets
Typography
The font pair, the fonts for headings and body text, how each kind of text looks, and the font sizes
Colors
The color scheme, light or dark mode, and gradients
Shadows
The shadows blocks can draw
Corners
How round corners are, and the default for cards and sections
Layout
Page widths, the space between sections, and the spacing sizes
Motion
The page transition, and the speeds and curves of animations
Custom CSS
Your own CSS for the whole theme
Posts and pages you write in Ghost Admin follow the same styles. A heading, a quote or a caption in a post takes the look you set here.
Presets are named values blocks pick
Font sizes, shadows, gradients, corners and spacing are presets. A preset is a named value, such as Medium or Large. A block never stores the number itself. It stores the preset's name, so when you change the Large corner from 16 px to 20 px, every block set to Large corners changes with it.
Font sizes are under Typography, gradients under Colors, and spacing under Layout; shadows and corners have screens of their own. Click a preset to open its settings in a panel beside the list. Each list has two parts:
Theme presets come with every project. You can change their values, but not rename or delete them.
Custom presets are the ones you add with the plus button. You can rename and delete them. Each list holds up to 24.
Fantasma deletes a custom preset without asking, even when blocks use it. Press ⌘Z to bring it back. The blocks that used it fall back. A deleted font size becomes Medium. A deleted corner takes the Cards and sections value. A deleted shadow or spacing draws nothing.
Text styles work the same way. A Heading block set to level 2 uses the Headings style for H2, so a change to H2 in Styles changes every second-level heading on the site.
The Style book shows every style on one sheet
When Styles open, the canvas shows the Style book. It is one sheet with a sample of every font, text style, color, gradient, shadow, corner, width, spacing size and motion. Click a sample to open its settings. The switch at the top of the canvas changes between Style book and the page you were editing, so you can see a change on a real page.
Used by shows where a preset or text style appears
Open a preset or a text style, and the panel on the other side of the canvas lists what uses it under Used by. It names the text styles that use a font size, then each page, layout and pattern with the sections and blocks that draw it. Click an entry to go there. Links, captions, quotes and code show no list, because each one styles every link inside text, every caption, every quote or every code block.
Reset a screen to the theme default
Each screen has a menu, the three dots next to its title. Its reset item puts that screen back to the theme default:
Screen
Menu item
What it resets
Styles
Reset all styles
Everything below, plus every text style and the values of every theme preset
Typography
Reset fonts
The font pair
Colors
Reset colors
The color scheme and the color mode
Corners
Reset corner settings
Cards and sections
Layout
Reset Container widths and Between sections
The four widths and the space between sections
Motion
Reset motion
The page transition, durations and easings
A text style or a theme preset has Reset to default in the menu of its own settings. Shadows and Custom CSS have no reset of their own. A reset keeps your custom presets, custom color schemes, custom font pairs and Custom CSS. The item is grayed out when the screen already matches the default. To take a reset back, press ⌘Z. On Windows, use Ctrl in place of ⌘ in every shortcut here.
Styles hold the design your whole theme shares: its fonts, colors, shadows, corners, widths, spacing and motion. Every page, layout and pattern reads them, so one change in Styles changes the whole site. Open them with the paintbrush icon, Styles, in the icon rail, the narrow bar of icons along the edge of the editor.
What Styles cover
The Styles panel has one screen per area:
Posts and pages you write in Ghost Admin follow the same styles. A heading, a quote or a caption in a post takes the look you set here.
Presets are named values blocks pick
Font sizes, shadows, gradients, corners and spacing are presets. A preset is a named value, such as Medium or Large. A block never stores the number itself. It stores the preset's name, so when you change the Large corner from 16 px to 20 px, every block set to Large corners changes with it.
Font sizes are under Typography, gradients under Colors, and spacing under Layout; shadows and corners have screens of their own. Click a preset to open its settings in a panel beside the list. Each list has two parts:
Fantasma deletes a custom preset without asking, even when blocks use it. Press ⌘ Z to bring it back. The blocks that used it fall back. A deleted font size becomes Medium. A deleted corner takes the Cards and sections value. A deleted shadow or spacing draws nothing.
Text styles work the same way. A Heading block set to level 2 uses the Headings style for H2, so a change to H2 in Styles changes every second-level heading on the site.
The Style book shows every style on one sheet
When Styles open, the canvas shows the Style book. It is one sheet with a sample of every font, text style, color, gradient, shadow, corner, width, spacing size and motion. Click a sample to open its settings. The switch at the top of the canvas changes between Style book and the page you were editing, so you can see a change on a real page.
Used by shows where a preset or text style appears
Open a preset or a text style, and the panel on the other side of the canvas lists what uses it under Used by. It names the text styles that use a font size, then each page, layout and pattern with the sections and blocks that draw it. Click an entry to go there. Links, captions, quotes and code show no list, because each one styles every link inside text, every caption, every quote or every code block.
Reset a screen to the theme default
Each screen has a menu, the three dots next to its title. Its reset item puts that screen back to the theme default:
A text style or a theme preset has Reset to default in the menu of its own settings. Shadows and Custom CSS have no reset of their own. A reset keeps your custom presets, custom color schemes, custom font pairs and Custom CSS. The item is grayed out when the screen already matches the default. To take a reset back, press ⌘ Z. On Windows, use Ctrl in place of ⌘ in every shortcut here.
When your Ghost site shows a change
Fantasma saves every change in Styles as you make it, and the preview shows it at once. Your Ghost site shows it after you publish your theme or download it and upload it in Ghost.
To start, change your fonts or change your colors.