72 lines
3.4 KiB
Plaintext
72 lines
3.4 KiB
Plaintext
|
---
|
|||
|
|
title: Styling your site
|
|||
|
|
description: Set colours, fonts, and link styles once with Site Design Tokens; reach for Advanced when you need finer control.
|
|||
|
|
sidebar:
|
|||
|
|
order: 4
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
import { Aside } from '@astrojs/starlight/components';
|
|||
|
|
import Beta from '~/content/partials/beta-callout.mdx';
|
|||
|
|
import Support from '~/content/partials/support-link.mdx';
|
|||
|
|
|
|||
|
|
<Beta />
|
|||
|
|
|
|||
|
|
The **Styles** panel on the right side of the editor controls site-wide design. Set a colour or font here and every block that uses it updates everywhere — no need to edit each page.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Site Design Tokens (Basic)
|
|||
|
|
|
|||
|
|
The default **Basic** view exposes the most common controls:
|
|||
|
|
|
|||
|
|
- **Primary Color** — used for buttons, accents, and important highlights.
|
|||
|
|
- **Secondary Color** — used for secondary buttons, hover states, and supporting accents.
|
|||
|
|
- **Accent Color** — used for callouts, badges, and small decorative touches.
|
|||
|
|
- **Heading Font** — applies to all heading blocks (H1–H6).
|
|||
|
|
- **Body Font** — applies to paragraph text and other body copy.
|
|||
|
|
- **Link Color** — used for inline links inside text blocks.
|
|||
|
|
|
|||
|
|
Each colour has a hex input plus an eight-swatch quick-pick row (a curated palette of vibrant brand colours). Click a swatch to apply it, or paste your brand hex into the input.
|
|||
|
|
|
|||
|
|
<Aside type="tip">
|
|||
|
|
Tokens are saved with your site, so visiting the editor again preserves your palette and fonts. Changes apply immediately on the canvas — but, like everything else in Site Builder, they go live only when you click **Publish**.
|
|||
|
|
</Aside>
|
|||
|
|
|
|||
|
|
## Advanced
|
|||
|
|
|
|||
|
|
Click **Advanced** in the Site Design Tokens header to expose finer controls:
|
|||
|
|
|
|||
|
|
- Extended palette — backgrounds, surfaces, borders, muted text, and inversions for dark sections.
|
|||
|
|
- Type scale — adjust the relative size between H1–H6 and body text.
|
|||
|
|
- Spacing scale — tune the default padding and margin used by sections and containers.
|
|||
|
|
|
|||
|
|
If you make a mess, click **Reset to Defaults** at the bottom of the panel — it restores the original token set without touching your content.
|
|||
|
|
|
|||
|
|
## Per-block overrides
|
|||
|
|
|
|||
|
|
The tokens above are the default for the whole site. When you need a single block to deviate (a one-off red CTA, for instance), select that block on the canvas; its block-settings panel on the right has its own colour controls that take precedence over the site tokens.
|
|||
|
|
|
|||
|
|
Use per-block overrides sparingly. The point of tokens is consistency — if you find yourself overriding the same value on every block, change the token instead.
|
|||
|
|
|
|||
|
|
## Picking fonts
|
|||
|
|
|
|||
|
|
The Heading and Body font dropdowns include a curated list of web fonts. If you need a font that isn't in the list:
|
|||
|
|
|
|||
|
|
1. Add a `<link>` to the font's CSS via [Custom head code](/whp/site-builder/publishing/#custom-head-code).
|
|||
|
|
2. Type the font's exact family name into the font picker.
|
|||
|
|
|
|||
|
|
The dropdown is forgiving about custom names — anything you type will be applied as the `font-family`.
|
|||
|
|
|
|||
|
|
## Live preview at different widths
|
|||
|
|
|
|||
|
|
The desktop / tablet / mobile toggles at the top of the editor switch the canvas viewport. Layout decisions (column counts, padding, font size) often look fine at one width and break at another — switch through all three before publishing.
|
|||
|
|
|
|||
|
|
## Related
|
|||
|
|
|
|||
|
|
- [Blocks & pages](/whp/site-builder/blocks-and-pages/) — what the tokens apply to.
|
|||
|
|
- [Publishing & code injection](/whp/site-builder/publishing/) — add a custom font via `<head>`.
|
|||
|
|
|
|||
|
|
## Still stuck?
|
|||
|
|
|
|||
|
|
<Support />
|