Setting Up Your Brand Identity in Webey

A consistent brand identity is the foundation of a professional website. In Webey, you set your brand colors, fonts, and logo centrally, and they are automatically applied across your entire website. In this article, you will learn how to optimally configure your brand settings.

Accessing Brand Settings

You can find the brand settings in your dashboard under Site Settings (or Brand). Here you manage all visual aspects of your website: colors, fonts, and your logo. Changes you make here are immediately applied to all pages of your site.

Setting the Primary Color

The primary color is the main color of your website and is used for buttons, links, active menu items, and accents. The default value in Webey is brand-navy, a dark blue that looks professional and trustworthy. You can change this color to any desired shade via the color picker or by entering a hex code.

The primary color is automatically applied to:

• The background color of primary buttons
• Links in text
• Active and hover states in the navigation menu
• Selection and focus indicators in forms
• Icons and accents in blocks such as features and stats

Setting the Accent Color

The accent color is a secondary color used for visual variety and to make specific elements stand out. The default value is brand-orange, a warm orange that contrasts nicely with the dark blue primary color. The accent color appears in secondary buttons, badges, highlights, and decorative elements.

Choosing Colors That Fit Your Brand

When choosing your colors, there are a few principles to keep in mind:

• Contrast — make sure your primary and accent colors differ enough from each other. A dark primary color pairs well with a bright accent color.
• Readability — text on colored backgrounds must always be easily readable. Webey automatically adjusts the text color (white or dark) based on contrast.
• Brand recognition — use the colors from your existing brand identity. If you already have a logo, business cards, or social media channels, use the same colors on your website.
• Limited palette — two to three colors are sufficient. Too many colors make your website look cluttered and unprofessional.

Setting Fonts

Webey offers two font settings that determine how text on your website looks:

• Heading font — the font for all headings (h1 through h6). A strong, eye-catching font works well for headings. Popular choices are sans-serif fonts like Inter, Poppins, or Montserrat.
• Body font — the font for paragraph text, lists, and other running text. Choose a highly readable font. Both serif and sans-serif fonts work fine, depending on the look you are going for.

A popular combination is a striking sans-serif for headings and a calm, highly readable font for body text. You can also use the same font for both if you want a uniform appearance.

Uploading Your Logo

Upload your logo via the brand settings. Your logo appears in the header of your website and optionally in the footer. Webey supports PNG, JPG, SVG, and WebP formats. Tips for your logo:

• Preferably use an SVG or transparent PNG so your logo looks good on any background color
• Make sure the logo is not too large — a width of 150-250 pixels works well in the header
• Have a dark logo? Consider uploading a light variant as well for use on dark backgrounds

How Brand Settings Are Applied

All brand settings are applied to your website as CSS variables. This means that any change to your colors or fonts is automatically applied to all pages and blocks. You do not need to manually adjust colors per block or page — the system handles this centrally.

The blocks in Webey are designed to respect your brand identity. Buttons use your primary color, headings use your heading font, and the overall appearance is consistent across your entire website.

Dark Mode Support

Webey supports dark mode. When you enable dark mode, background colors are inverted to dark shades and text is colored light. Your primary and accent colors are preserved but automatically adjusted for optimal contrast on dark backgrounds. Dark mode is a great option for tech websites, portfolios, or businesses that want a modern look.

Button Styling

The style of buttons on your website is determined by your brand settings. Primary buttons use your primary color as background with white text. Secondary buttons have a transparent background with a border in your primary color. The border-radius (corner rounding) of buttons can be adjusted from sharp corners to fully rounded, depending on the style you are aiming for.

Tips for a Consistent Look

• Document your colors — note down the hex codes of your primary and accent colors so you can use them outside Webey as well
• Test on multiple screens — view your website on desktop, tablet, and phone to verify that your colors and fonts work well everywhere
• Be sparing with color usage — use your accent color only for elements you want to emphasize
• Check the contrast — make sure text always has sufficient contrast with the background for good readability
• Keep it simple — a consistent, understated brand identity looks more professional than an overload of colors and fonts

By carefully configuring your brand identity in Webey, you build a website that looks professional and recognizable — on every page and on every device.