Brand visuals are the overall feel of your website. Fonts, colors, text size, density, rounded corners, and light/dark modes might seem like small details, but together they influence whether visitors perceive your site as clear, trustworthy, and aligned with your brand.
These settings apply site-wide. You don't need to reset fonts or brand colors on every page; once set, modules across your site will use the same guidelines.
Open the editor's "Settings" → "Design". As you adjust, use the desktop, tablet, and mobile previews to see the effects.
Try changing only one or two items at a time and observe the overall impact. If you change fonts, colors, spacing, and add a lot of images simultaneously, it's hard to tell which change made the site look off.
Typography is more than just picking a nice-looking font. You can set different fonts for different languages and adjust the text size for H1, H2, H3, and body text.
The "Design" section will first show font fields most relevant to your site's content language. By expanding "Multilingual Fonts," you can set fonts separately for English, Traditional Chinese, Simplified Chinese, Japanese, and Korean.
Here's an approximate number of curated fonts available per language:
| Language | Approx. Available Fonts |
|---|---|
| English | 170 options |
| Traditional Chinese | 60 options |
| Simplified Chinese | 30 options |
| Japanese | 70 options |
| Korean | 40 options |
Menus for each language are filtered by font support, so you don't have to worry about applying a font that only supports English to Chinese content. The list of available fonts may change with updates; currently, uploading your own font files is not supported.
If your site has both Chinese and English content, review how both languages look in headings, buttons, and body text. The principle for choosing fonts is "clarity over personality": your brand name or main headings can have some character, but long passages of text must be easily readable on mobile.
You can adjust the text size for H1, H2, H3, and body text separately, with 9 size levels for each. H1 is the most important heading on a page, H2 and H3 are used for section hierarchy, and body text is for general explanatory content.
Don't just make all text larger. Clear heading hierarchy helps visitors scan content and assists assistive technologies in understanding the page structure.
Kanorio's site-wide color settings are centralized in these three areas:
| Setting | What You Can Adjust |
|---|---|
| Brand Primary Color | The main color used for buttons, highlights, links, and some backgrounds; there's a separate set of colors for light and dark modes. |
| Brand Text Color | The color of text or icons displayed on the brand primary color background; the system can automatically determine black or white contrast, or you can manually override it for each mode. |
| Appearance Mode | Determines whether the public site follows the visitor's system setting, or uses a fixed light or dark appearance. |
There are currently no separate fields for site-wide secondary or background colors; use the brand primary color, module images, and content hierarchy to create visual emphasis.
The brand color picker offers 24 preset combinations, divided into classic vibrant, Morandi, and earthy/neutral palettes. Each set includes color pairings suitable for both light and dark modes.
If your brand already has color guidelines, you can also use the color picker or manually input Hex, RGB, or HSL color codes. The picker saves recently used colors for easy recall. After adjusting the light mode color, the system will also help generate starting suggestions for dark mode; be sure to switch between modes to check the results.
When buttons or blocks use the brand color as a background, the text needs sufficient contrast to be legible. The system defaults to automatically choosing black or white text and displays contrast warnings; you can also adjust it manually if your brand guidelines require a specific text color.
Don't rely solely on color to convey important information, such as only making error messages red. Use clear text, icons, or positional cues to ensure visitors with color vision differences can also understand.
| Option | Description |
|---|---|
| Follow system | Displays light mode when the visitor's device is set to light, and dark mode when set to dark. |
| Light always | All visitors see the light appearance. |
| Dark always | All visitors see the dark appearance. |
Before selecting "Follow system," check both modes. If your logo, photos, or brand colors are unclear on a dark background, consider switching to "Light always" or adjusting your brand colors for dark mode.
Density controls the spacing between modules, affecting how compact or spaced out your content appears. Kanorio offers two site-wide options:
| Density | Best For |
|---|---|
| Standard | The default option, offering a more relaxed reading rhythm, suitable for portfolios, brand stories, and general service websites. |
| Compact | Reduces module spacing for higher information density, suitable for services or informational pages with a lot of content. |
Check this in the mobile preview: overly compact settings can make buttons and paragraphs hard to read, while overly spacious ones require excessive scrolling.
Rounded corners control how square or rounded the edges of buttons, cards, and images are. This setting also applies site-wide.
| Corners | Visual Feel |
|---|---|
| Sharp | Edges are more square, giving a rational, crisp feel. |
| Medium | The default option, balancing clarity and softness. |
| Soft | More pronounced rounded corners, giving a friendly, relaxed feel. |
When choosing, align with your logo, product style, and photo atmosphere. You don't need to use a different style for every module.
The website icon (favicon) is the small graphic next to your browser tab and bookmarks. It's not set in the "Design" tab; adjust it in "Manage Site" → "General".
You can use the icon automatically generated from your logo or upload a custom one. Since favicons are very small, avoid including too much text or very fine lines.
Yes. Brand color is a site-wide setting, and changes will affect buttons, links, and visual elements using that setting. After changing, check all pages, especially for text contrast and buttons on images.
Not currently. Please choose from the platform's provided fonts, which are already filtered by language support. You can still set fonts separately for English, Traditional Chinese, Simplified Chinese, Japanese, and Korean.
Dark or light mode itself doesn't directly determine search rankings. What truly matters is content readability, whether your page has proper titles and descriptions, and if your public site loads correctly.
These are currently site-wide settings. If you want a specific page to have a different emphasis, use that page's images, copy, and module arrangement to create differentiation.
It's the color of text or icons displayed on the brand color background. The system defaults to easily readable black or white; if your brand guidelines require it, you can override this and check the contrast warnings.
