Brand your website
with your Magnt kit.
Your logo, colors and fonts, applied in the site builder you already use: Squarespace, Wix, Shopify, WordPress, Carrd or Webflow.
To be clear up front: Magnt doesn’t build or host websites. It gives you the logo files, color codes and font names your site is styled with. This page shows how to put them to work.
Three things your website needs from your brand
Every site builder asks for the same inputs: a logo image, a set of colors and a pair of fonts. A Magnt brand kit gives you exactly those, decided once, so you aren’t choosing colors inside a template at midnight.
High-res PNG logo files
Your chosen logo at 1024 px and 2048 px. Large enough for a sharp header logo on high-density screens and for cropping a square favicon.
5-color palette with HEX codes
Five colors with exact HEX values you can paste straight into any site builder’s color picker, so buttons, links and backgrounds match everywhere.
Heading + body font pairing
Two free Google Fonts: one for headings, one for body text. Most site builders list Google Fonts in their font picker or let you add them.
Why your site should match the rest of your brand
For most small businesses, the website is where a first impression gets checked. Someone sees your sign, your Instagram profile or your business card, then looks you up. If the site uses a different shade of blue, a stock template font and a blurry logo, the visitor has to work out whether they’ve landed in the right place. Matching colors and type remove that moment of doubt.
Consistency also saves you time. When the palette and fonts are fixed, every new page, banner or product listing starts from the same settings. You stop making small design decisions over and over, and the site keeps looking like one business even as it grows.
For the wider picture (voice, imagery, layout and how your site fits with your other touchpoints), read our website branding guide. This page stays practical: where each file goes and what to check.
The order that saves the most rework
- Set global styles before touching pages. Enter your five HEX codes and your two fonts in the builder’s site-wide style or theme settings first. Every page and section then inherits them, and you avoid restyling blocks one at a time.
- Assign roles to your colors. Decide which color is for primary buttons, which is for links, which (if any) is a section background, and which is only an accent. Write the roles down; your 1-page brand summary PDF is a good place to keep the HEX codes next to them.
- Add the logo and favicon. Upload the header logo, set its display size, then crop and upload a square favicon.
- Clean up template leftovers. Templates often hard-code colors in footers, forms, announcement bars and pop-ups. Click through each one and switch them to your palette.
- Check on a phone. Plenty of your visitors will arrive on a phone. Confirm the logo size, button color and text size there before you call it done.
Where your kit goes in each site builder
Menu names change as these products update, but the places to look stay roughly the same. Magnt has no plug-in or connection to any of them; you download your files and enter your values by hand, which takes a few minutes.
Squarespace
Upload your logo in the site header settings and your favicon in the browser icon setting. Colors live in the site styles panel as a palette, so enter your five HEX codes there once and assign them to section themes. Fonts are set globally for headings and paragraphs in the same styles panel; choose your two fonts by name.
Wix
Add your logo through the header, and set the favicon in the site settings (a paid plan is needed to replace the Wix favicon). The theme manager holds your site colors and text styles: enter your HEX codes as theme colors and set heading and paragraph styles to your fonts. Wix also lets you upload font files if a font is missing from its list.
Shopify
In the theme editor, the header section takes your logo and lets you set its display width. Theme settings hold colors (as color schemes in current themes) and typography. Shopify’s font picker uses its own font library, which includes many Google Fonts; if yours isn’t listed, pick the closest match rather than hacking theme code.
WordPress
With a block theme, the Site Editor’s Styles panel controls your palette and typography site-wide, and the Site Logo and Site Icon blocks/settings handle your logo and favicon. Recent versions include a font library where you can add Google Fonts. Classic themes vary: look for Appearance → Customize, or your theme’s own options page.
Carrd
Carrd is built for one-page sites, so branding is mostly per element: add your logo as an image element, set background and button colors with HEX values, and choose your fonts in each text element’s settings. Set up one styled button and text block first, then duplicate them so every copy inherits the same settings.
Webflow
Add your Google Fonts in the site settings, then define them on the Body and heading tags so they cascade everywhere. Save your five HEX codes as color swatches (or variables) and use them on classes instead of typing values by hand. Upload your favicon in the site settings and your logo as an image in a navbar component.
Eight things to check before you publish
Want a longer, printable version? Use the full website branding checklist.
Favicon
Crop a square from your logo PNG around the icon or initial, not the full wordmark. At 16 to 32 pixels, text becomes an unreadable smudge. Preview it in a browser tab next to other sites before you publish.
Header logo size
Most headers look right with a logo roughly 40 to 80 pixels tall on desktop, a little smaller on mobile. Upload the larger PNG file and let the builder scale it down so it stays crisp on high-density screens. Check that it doesn’t push the navigation onto two lines.
Button color
Pick one palette color for primary buttons and use it only for actions. If the same color is also used for headings and decoration, buttons stop standing out.
Link color
Links need to look clickable. Use a palette color that contrasts with body text, and keep underlines on links inside paragraphs.
Backgrounds
Most sites use a white or very light background for reading and one or two palette colors for accent sections. A full page of saturated color is tiring to read.
Fonts
Set the heading font on H1 to H3 and the body font on paragraphs, lists and buttons. Resist adding a third font. Body text around 16 to 18 pixels reads comfortably on most screens.
Contrast
Check text and button colors against their backgrounds with any free contrast checker. WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text. If a palette color fails as a text color, use it for backgrounds or shapes instead.
Consistency pass
Open every page on a phone and a laptop. Look for leftover template colors, default fonts on forms and footers, and an old favicon. These are the details people notice without knowing why.
A note on light and dark backgrounds. Your logo files are PNG images, so they appear exactly as delivered. Before placing the logo on a dark header or a colored section, preview it there. If it doesn’t read clearly, keep the header light, or put the logo on a light band instead of forcing it onto a background it wasn’t chosen for.
What to decide before choosing a site builder
If you don’t have a site yet, the brand kit won’t choose a builder for you, and it doesn’t need to: the same logo, colors and fonts work in all of them. Choose based on what the site has to do.
- Selling products? A commerce-first platform such as Shopify handles inventory, checkout and shipping settings. Squarespace and Wix also sell, and suit smaller catalogs.
- Taking bookings or appointments? Check which builders offer scheduling natively or through a tool you already use, before you fall for a template.
- Publishing regularly? WordPress is built around posts and categories. Most other builders include a blog, with fewer options.
- Just need a single page? Carrd is inexpensive and quick for a one-page site with a contact link. You can move to something larger later without changing your brand.
- Want fine design control? Webflow gives the most control over layout and styles, at the cost of a steeper learning curve.
Then weigh the ongoing monthly cost, who will update the site, and whether you can take your content with you if you switch. If you write books or run a personal brand, our comparison of the best website builders for authors walks through these tradeoffs in detail.
One practical tip: get your brand kit before you pick a template. Templates are designed to look good with their own demo colors and fonts. When you already have a palette and pairing, you can judge a template by its layout alone, and you’re less likely to end up with a site that matches the template better than it matches your business.
Frequently Asked Questions
Does Magnt build or host websites?
No. Magnt does not build, design or host websites, and it does not sell domains. Magnt gives you the brand pieces a site is styled with: 5 logo concepts to choose from, your chosen logo as high-res PNG files, a 5-color palette with HEX codes, a heading and body font pairing, and a 1-page brand summary PDF. You apply those in the site builder you already use.
Which site builders can I use my Magnt kit with?
Any builder that lets you upload an image, enter HEX color values and choose fonts. That covers Squarespace, Wix, Shopify, WordPress, Carrd and Webflow, as well as most others. There is no special connection between Magnt and these tools: you download your files and enter your values yourself.
Will my Magnt fonts be available in my site builder?
Your pairing uses two free Google Fonts. Squarespace, Wix, WordPress (through its font library), Carrd and Webflow all support Google Fonts in some form. Shopify uses its own font library, which includes many Google Fonts; if yours is missing, choose the closest available match for the same feel.
How do I make a favicon from my logo?
Open your high-res PNG logo in any image editor or in Canva, crop a square around the most recognizable part (usually the icon or first letter), and export it as a square PNG. Upload that file in your builder’s favicon or site icon setting, then check it in a browser tab to make sure it still reads at small size.
What should I decide before choosing a site builder?
Decide what the site must do first: sell products, take bookings, publish articles, or simply explain what you do and collect enquiries. Then weigh monthly cost, how much design control you want, and who will update it. Your brand kit works the same way in all of them, so choose on function, not on looks.
What does the Magnt kit cost?
$19 one-time (regular price $29). No subscription. You get 5 logo concepts, your chosen logo as high-res PNG files, a 5-color palette with HEX codes, a font pairing, a 1-page brand summary PDF, full commercial rights and a 7-day money-back guarantee.
Get the brand pieces your site needs.
5 logo concepts to choose from, your logo as high-res PNG files, a 5-color palette with HEX codes, a heading and body font pairing, and a 1-page brand summary PDF. Ready in about two minutes.
$19 one-time. Full commercial rights. 7-day money-back guarantee.
Get Your Brand Kit for $19One-time payment · No subscription · Magnt doesn’t build or host websites