Utopia includes a dedicated Design Settings screen for fine-tuning how your site looks — colors, heading styles, fonts, card design, spacing, even dark mode — all through the dashboard, with no CSS required.
Industry-based color palette presets
Design Settings ships with eight color palette presets, each built around color psychology for a specific type of business: “Trust & Integrity” (a blue palette suited to finance, healthcare, and corporate sites), “Energy & Fun” (orange tones for restaurants and entertainment), “Luxury & Refinement” (purple and gold for fashion and bridal brands), and more. Click a preset and it instantly applies to your main color, sub color, and text color — or skip the presets and enter your own hex codes directly.
Headings, buttons, and cards each get their own style options
Heading levels H1 through H4 can each be set independently to one of three styles: a left border, a bottom border, or a solid background block. Buttons come in solid, outline, or rounded styles, and cards can be flat, bordered, shadowed, or minimal. Button corner radius and overall layout spacing (compact, normal, or spacious) are adjustable too.
19 fonts, including Japanese typefaces
Body and heading fonts are chosen separately from a list of 19 options — standard Google Fonts like Inter, Poppins, and Roboto, alongside Japanese-optimized fonts such as Noto Sans JP, M PLUS 1p, and Zen Kaku Gothic. Whichever font you pick loads automatically, so there’s no need to manually enqueue Google Fonts yourself.
Header colors are managed separately from body text
Header and navigation background and text colors are configured independently from the main text color setting. Set a dark header background with white nav links, for example, and you get a dark-header design without affecting the rest of the page. A live preview on the settings screen shows your changes as you make them.
Dark mode support is built in
Utopia can display a sun/moon toggle in the header that lets visitors switch between light and dark mode. The choice is saved in the visitor’s browser, and the theme also automatically respects the OS-level dark mode preference (prefers-color-scheme).
Try it from the dashboard
Changes in Design Settings apply as soon as you save, and the live preview shows the result immediately. Starting from a color palette preset close to your industry is an easy way to get a feel for the overall look before fine-tuning further.
