Palette and Typography

Your palette and fonts are the foundation of the site. Set them once in the Customizer and every page, block, and form inherits the same look.

Open the Styles panels

  1. Go to Appearance → Customize.
  2. Open Styles → Palette for colors.
  3. Open Styles → Fonts for heading and body type.

Changes preview immediately. Click Publish when the site looks right.

For how global styles reach the block editor and front end, see Global Styles and Live Preview.

Choose your palette

In Palette:

  1. Start with Primary and Secondary — these drive buttons, links, and accents across the site.
  2. Set Background and Text so body copy stays readable on your main page color.
  3. Adjust Accent and supporting swatches when blocks or sections need extra contrast.
  4. Use the color picker or type a hex value for exact brand colors.

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

Choose your fonts

In Fonts:

  1. Pick a Heading family for titles and nav labels.
  2. Pick a Body family for paragraphs, lists, and form fields.
  3. Adjust weight and style options when the font supports them (variable fonts offer more range).

Dirigible Fonts bundles many families on the site. If you need a Google Font that is not bundled, add it under Scripts & Embeds → Embed Fonts — see Embed Fonts.

Tune heading and body styles

After palette and fonts, refine how type actually looks:

Panel What it controls
Header 1 through Header 6 Size, weight, color, and spacing for each heading level
Paragraphs Body text size, line height, and color
Links Standalone link appearance
Inline Links Links inside paragraphs
Buttons Fill, border, radius, and hover states
Navigation Main menu link styling
Tags Category and tag pills on blog cards
Forms Gravity Forms and other form fields

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 block and confirm colors align with Buttons.

The editor is designed to mirror the live site. See True-to-Site Block Editor for what syncs automatically.

Common adjustments

  • Headings feel too large on mobile — reduce size in the relevant Header panel; widths also affect how type sits on narrow screens (Widths and Layout).
  • Low contrast on hero sections — set a Reverse or light-on-dark palette usage in blocks, and upload a Reverse logo under Header & Menus → Logo.
  • Forms look off-brand — open Forms after palette and buttons are set.

Copy palette to another site

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

Related guides