Themes & Design

Design a site that feels intentional.

Choose the right editing approach, create reusable patterns and keep performance and accessibility in the design system.

🧱

Native block theme

Best for teams that want the Site Editor, patterns and fewer external dependencies.

  • Global styles
  • Template parts
  • Pattern library
🎛️

Classic theme + customizer

Useful when an established theme ecosystem or existing site already depends on it.

  • Familiar controls
  • Mature child themes
  • Broad compatibility

Visual builder

Good for faster visual production when the team commits to one builder system.

  • Fast page creation
  • Reusable templates
  • Design controls
Design system

Decide the rules before designing every page.

A small design system keeps the site consistent and makes future editing much faster.

  • One headline scale and one body text scale
  • A primary, secondary and neutral color palette
  • Standard spacing between sections and cards
  • Reusable buttons, forms, alerts and content cards
  • Accessible contrast and visible keyboard focus
  • Image ratios for hero, card and article media
Starter tokens

Simple visual foundation

Container: 1180px maximum
Body: 16–18px
Line height: 1.6–1.75
Section spacing: 64–96px
Card radius: 16–24px
Tap target: at least 44px

Treat these as starting points and validate them on actual devices.

Page templates

Reusable layouts to create first

Landing page

Hero, proof, benefits, process, FAQ and focused CTA.

Resource hub

Filters, categories, featured guides and search.

Article

Readable width, table of contents, examples and related content.

Contact

Expectations, qualifying questions and alternate channels.