Choosing colors and fonts

  • colors
  • fonts
  • palette
  • typography
  • customizer
  • site-editing

Your palette and type carry across pages, blocks, and forms. Set colors here, then finish fonts with the dedicated guides.

Set the color palette

  1. Go to Appearance → Customize → Styles → Palette.
  2. Start with Primary, Secondary, and Accent for brand hues.
  3. Set Text and Muted so body copy and captions stay readable.
  4. Adjust Canvas for cards and panels.
  5. Use White, Black, Gray, Variant, Success, and Failure as needed for contrast and form feedback.
  6. Click Publish.

Body Background (the color behind entire pages) lives under Appearance → Customize → Settings → General, not in the Palette panel.

Choose your fonts next

Path Guide
Bundled Dirigible Fonts library Choosing a Dirigible font
Google Fonts or Adobe Fonts (Typekit) Using Google or Adobe fonts

Both paths end in Appearance → Customize → Styles → Fonts, where you set Display Font Stack, Body Font Stack, and Alternate Font Stack.

After the basics

Tune sizes and weights under Styles → Header 1 through Header 6 and Styles → Paragraphs once colors and stacks feel right.

Tips

  • Keep a fallback (serif or sans-serif) at the end of each font stack.
  • Check a heading and paragraph in the block editor after publishing — the editor should match the front end.
  • Pair a readable Text color with your page Body Background and header logos from Adding a logo and header.