Utopiaには、サイトの見た目を細かく調整できる「デザイン設定」画面が用意されています。カラー、見出しスタイル、フォント、カードデザイン、余白、ダークモードまで、CSSを書かずに管理画面の操作だけでブランドに合わせたデザインに近づけられます。
業種別のカラーパレットプリセットが用意されている
デザイン設定には、業種ごとの色彩心理学に基づいたカラーパレットプリセットが8種類用意されています。「信頼・誠実」（金融・医療・コーポレート向けの青系）、「活力・楽しさ」（飲食・エンタメ向けのオレンジ系）、「高級・洗練」（ファッション・ブライダル向けのパープル×ゴールド）など、業種に合わせたパレットをクリックするだけでメインカラー・サブカラー・テキスト色に反映されます。もちろん16進数カラーコードを直接入力して独自の配色にすることもできます。
見出しやボタン、カードのスタイルも選べる
H1からH4まで、見出しレベルごとに「左ボーダーライン」「下ボーダーライン」「背景ブロック」の3スタイルから選択できます。ボタンは「ソリッド」「アウトライン」「ラウンド」、カードは「フラット」「ボーダー」「シャドウ」「ミニマル」の中から選び、ボタンの角丸の数値やレイアウト全体の余白（コンパクト/ノーマル/スペーシャス）も調整可能です。
日本語対応フォントを含む19種類から選択
本文フォントと見出しフォントは、Inter・Poppins・Robotoなどの定番Google Fontsに加えて、Noto Sans JP・M PLUS 1p・Zen Kaku Gothicといった日本語向けフォントも含めて19種類から選べます。選択したフォントは自動的に読み込まれるため、Google Fontsを別途手動で設置する必要はありません。
ヘッダーの配色は本文と切り離して設定できる
ヘッダー・ナビゲーションの背景色や文字色は、基本カラー設定のテキスト色とは独立して設定する仕組みになっています。ヘッダー背景を濃い色にしてナビリンクを白にすれば、ダークヘッダーのデザインも作れます。設定画面にはライブプレビューが表示されるため、変更内容をその場で確認しながら調整できます。
ダークモードにも標準対応
ヘッダーに月/太陽アイコンのトグルボタンを表示し、訪問者がライト/ダークモードを切り替えられる機能も搭載しています。切り替えた設定はブラウザに保存されるほか、OS側のダークモード設定（prefers-color-scheme）にも自動で対応します。
まずは管理画面で試してみる
デザイン設定は「デザイン設定を保存」するとライブプレビューの内容がサイトに反映されます。まずはカラーパレットプリセットから業種に近いものを選んで試してみると、全体の雰囲気をつかみやすいはずです。
