Palette and Typography

Your site colors and fonts set the look of everything else. Choose them once in the Customizer and every page, block, and form uses them.

Open the Styles panels

  1. Go to Appearance → Customize.
  2. Open Styles → Palette for colors.
  3. Open Styles → Fonts for your display, body, and alternate fonts.

The preview updates as you change things. Click Publish when the site looks right.

For how these styles reach the block editor and the live site, see Global Styles and Live Preview.

Choose your palette

In Palette:

  1. Start with Primary, Secondary, and Accent, your main brand colors. Buttons and links inside paragraphs use Primary by default.
  2. Set Text and Muted so body copy and captions are easy to read.
  3. Adjust Canvas (cards and panels) and supporting swatches such as Variant, Gray, Success, and Failure as needed.
  4. Use the color picker or type a hex value for exact brand colors.

The page background itself is Body Background under Settings → General.

Tip: If you ran Guided Theme Setup, your palette may already be filled in. Adjust it here rather than starting over.

Choose your fonts

  1. Activate font families in Dirigible Fonts. See Getting started.
  2. In Styles → Fonts, paste each family's Stack into Display Font Stack, Body Font Stack, or Alternate Font Stack.
Stack Typical use
Display Large headings (H1–H3), hero titles
Body Paragraphs, buttons, navigation, forms
Alternate Smaller headings (H4–H6), tags, standalone links

Adjust weights and widths on the Fonts admin screen (Managing fonts). If a family isn't included in Dirigible Fonts, load it with Scripts & Embeds → Embed Fonts. See Embed Fonts.

Fine-tune headings and body text

After colors and fonts, refine how text looks:

Panel What it controls
Header 1 through Header 6 Font, size, mobile size, weight, color, letter spacing, and line height for each heading level
Paragraphs Body text font, size, weight, and line height
Links Standalone text links such as "Learn More"
Inline Links Links inside paragraphs
Buttons Font, padding, corner radius, border, and colors
Navigation Main menu link font, size, and hover fill
Tags Category and tag pills
Forms Form fields and labels, including Gravity Forms

Work top-down: get Header 1 and Paragraphs right first, then buttons and navigation.

Check the block editor

  1. Open any page in the block editor.
  2. Add a heading and a paragraph. They should match your Customizer choices.
  3. Insert a button and check that it matches Buttons.

The editor is built to match the live site. See True-to-Site Block Editor.

Common adjustments

  • Headings are too large on phones: lower Mobile Size in the matching Header panel.
  • Text is hard to read over photos: use the light-on-dark (reverse) options in your blocks, and upload a Reverse Logo under Header & Menus → Logo.
  • Forms look off-brand: open Forms after your palette and buttons are set.

Copy your styles to another site

Export styles from Dirigible → Import/Export and import them on the other site. See Import and Export Theme Settings.

Related guides