Brand Visuals and Style Settings

Overview

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.

Where to Set Them

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.

Fonts and Text Size

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.

Set Fonts by Language

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:

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.

Adjust Text Size

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.

Brand Color, Text Color, and Appearance Mode

Kanorio's site-wide color settings are centralized in these three areas:

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.

Choosing a Brand Primary Color

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.

Checking Brand Text Color and Contrast

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.

Choosing an Appearance Mode

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.

Module Density

Density controls the spacing between modules, affecting how compact or spaced out your content appears. Kanorio offers two site-wide options:

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

Rounded corners control how square or rounded the edges of buttons, cards, and images are. This setting also applies site-wide.

When choosing, align with your logo, product style, and photo atmosphere. You don't need to use a different style for every module.

Website Icon (Favicon)

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.

Pre-Publish Checklist

1. Switch between light and dark previews to check contrast for your logo, buttons, and text.
2. Switch to mobile preview to check if headings are too long and buttons are easy to click.
3. Ensure buttons, cards, and headings of the same type use a consistent style.
4. Once complete, update your public site from "Publish".

Quick Tips

• If you don't have brand guidelines, start by choosing one brand primary color, a font direction, one density, and one corner style. Avoid using too many styles at once.
• Use a real mobile device for checks, not just your desktop screen; small text and low contrast are more likely to cause issues on mobile.
• Achieving a sophisticated look doesn't require more colors; whitespace, consistency, and clear hierarchy are usually more important.

Related Documentation

• Site-wide Settings and Management
• Designing Header and Footer
• Images and Media Assets
• Drafts, Saving, and Publishing