Your logo, appearance mode, brand colors, fonts, and border radius define your brand identity across all touchpoints—not just on your website, but also on checkout pages, customer login pages, the customer portal, automated emails, and course completion certificates. Kanorio centralizes these settings in "Site Settings › Brand", ensuring consistency everywhere with a single update.
This applies regardless of how you build your site: if you build with Kanorio, these settings apply automatically. For headless websites, your checkout, login, and emails will still use these settings, while your frontend can retrieve the same values via the Content Delivery API's brand object or Kanorio Elements (see "Using with Headless" below).
| Item | Description | Recommendation |
|---|---|---|
| Brand Logo | Upload an image or choose a built-in icon; you can also upload a separate version specifically for dark backgrounds. | When the appearance mode is set to "Auto" or "Dark," we recommend adding a dark-mode version so your logo remains visible against dark backgrounds. |
| Favicon | The small icon displayed next to your browser tab and bookmarks. It is automatically generated from your brand logo by default: icon-based logos are rendered in your brand color on a white background. It updates whenever you change your logo or brand color. The preview below shows how it will look after saving. | If your logo is too detailed or contains long text, turn off the auto-generation and upload a small square icon instead. |
| Appearance Mode | Choose whether your website, checkout, login, and customer portal use a light or dark theme: "Auto" follows the visitor's device settings, while "Light" and "Dark" force a consistent look for all visitors. For headless websites, this setting controls the checkout, login, and customer portal provided by Kanorio. | When selecting "Auto," check both light and dark modes. If you fix one mode, you only need to set the brand color for that specific mode. |
| Brand Color | The primary color for buttons, links, accent icons, and brand-colored sections. You can set different colors for light and dark modes. Choose from our curated palettes or enter a custom hex code. | The brand color for dark mode can be slightly brighter than the light mode version to ensure it remains legible against dark backgrounds. |
On the right side of the page (or below the form on mobile), you will find a live preview showing how your brand appears across your website, checkout, login, and emails (the "website" preview is hidden for headless setups). You can toggle between light and dark modes. Note that email card and button styles are fixed, though they inherit your logo's border radius; logo size and positioning for emails are managed in .
Changes take effect immediately after you click "Save" at the bottom of the page—no need to go back to the editor and click "Publish":
brand values and Kanorio ElementsText size and module density are layout settings managed in the editor's "Design" panel, which require a "Publish" action to take effect. The "Design" panel displays your current brand settings and links back to this page for modifications. Custom buttons, brand-related URLs, and merchant information are managed in the editor's "Brand Info" panel; see for details.
For headless websites, Kanorio-hosted pages (checkout, login, portal, and emails) will automatically use these settings. You can sync your own frontend with these brand values in two ways:
brand object in GET /site provides pre-calculated color palettes (light and dark, including accessible text colors), your selected appearance mode, logos for both backgrounds, font families, stylesheet URLs, and border radius values for direct use in your layout.For technical details, please refer to the .
Brand colors, appearance mode, fonts, and border radius are used globally—including on checkout, login, and email pages. Centralizing them in "Site Settings › Brand" prevents inconsistencies. The "Design" panel simply displays your current brand and provides a link to update it here, while layout-specific settings like text size and density remain in the "Design" panel.
Brand settings take effect immediately without needing a publish action. If you don't see the changes, please refresh your page; browsers may occasionally cache old styles.
Yes, it is recommended. Even if you host your own website pages, Kanorio still provides the checkout, login, customer portal, and emails. Configuring this ensures your logo and brand colors are consistent across all Kanorio-hosted touchpoints. Your frontend can also use the API and Elements to stay perfectly in sync.
| The text color displayed on top of brand-colored buttons or backgrounds. It defaults to black or white based on contrast, but you can also specify it manually. |
| When specifying manually, keep contrast in mind. The preview on the right side of the page will show the result in real-time. |
| Fonts | Displays the body font for your website's primary language. Expand "More language fonts" to select specific fonts for English, Traditional Chinese, Simplified Chinese, Japanese, and Korean. All fonts are hosted by the platform; custom font file uploads are not supported. | For websites with mixed Chinese and English content, selecting separate fonts for each language will provide a better visual experience. |
| Corner Radius | Uniformly adjust the corner curvature for buttons, cards, input fields, and images: choose from Square, Regular, or Rounded. | The preview will show both buttons and cards simultaneously; simply pick the one that best matches your brand's aesthetic. |