How to create a Custom Style Kit | How to transfer your branding into your website design

It’s all about being unique these days. Stand out from the crowd. Be different. Be bold. Be you. Show your personality. Be charming. Be true. Be authentic. Yet nobody tells you how to do that. There’s no guidebook. No instructions. You simply need to sit there and figure it out on your own. YAY… With certain things like photography, filmmaking, art it’s true – there’s no 1 answer fits them all. You need to experiment and find your style. Yet, with website design – it doesn’t have to be THAT HARD.

In this article we’ll help you better understand how to stylize your Flothemes website, how to apply your branding correctly, so your online presentation is always remarklable and on point. 

You will learn:

  • how to tweak and personalize your typography and color palettes
  • how to create a custom style kit or tweak an existing one
  • how to smoothly transfer your brand book into your website design

But before we dive into the process, let’s make sure you’re familiar with the basics – what is a style kit, how does Flex Admin work, what’s the difference between having a global style kit and applying fonts and colors manually inside each website section. All this information you can find in this article – Flex Admin & How to get started with Style Kits.

How to create a custom style kit & reset original settings

When you install your theme, you get its default style kit with the predefined fonts and colors. You can find it inside Flex Admin → Purchased. To create your own custom style kit, you need to Duplicate an existing Style Kit and work inside that copy. This allows you to safely test any concepts without messing up your live site. Plus, you can always revert back to the original settings if the customisations don’t look good on your site.

To create a duplicate of your style kit – click on the style kit. A sidebar will appear on the right of your screen. Find the 3 little dots at the bottom of the sidebar, next to the “Preview” button and click on them. You’ll find the “Duplicate” option in the menu that expands. 

Note: you can also spot the “Reset” option under the “Duplicate”. In case you made some changes to your original style kit and want to revert back to the original settings you can do so by clicking on “Reset”. This will restore the original fonts and colors that come with the style kit.

Once you click on it, you’ll be redirected to the Custom tab where your style kit copy is stored, with a little label that says “custom”. 

Click on it to trigger the right side bar, and rename your style kit copy. After you give it a proper name, go ahead and click on “Edit” at the bottom of the sidebar. 

This will open the Edit Style tab, with all your typography and color settings. Now we can dive into the actual customizations. 

How to customize & replace fonts on your website

There are 2 case scenarios here. One is where you like the default fonts included inside your theme, and want to make tiny edits here and there. Two, is when you want to replace certain fonts, and upload new custom ones. 

#1. Making small edits to the default fonts inside your theme

These edits can be tweaking the size of the font, the spacing between letters, the way it’s presented (all upper or lower case), etc. For that, all you have to do is select the font style you want to edit, click on it and proceed with any adjustments. In this section, you can also customize the way this particular font style is displayed on mobile. The live preview helps you see all the changes you’re implementing. Once done just hit on “Save Font Style” and these changes will apply. 

#2. Adding a custom font to your website

You can add a new font to your website either from your Adobe Typekit by copying the code of the font, you can select one from Google’s fonts library or you can upload a font as a file from your computer. Here’s our in-house designer explaining the whole process:

How to customize colors on your website

First things first. Inside your Colors tab you will notice that there are 2 collections of colors, called Scheme 1 and Scheme 2. Scheme 1 includes the main colors for your website, which is predominantly applied to your layouts. Scheme 2 are the secondary color options that allow to diversify and spice up the mood dictated by Scheme 1. 

If speaking in numbers, 60% of your theme’s predefined blocks use Scheme 1, and 40% use Scheme 2. Yet it’s up to you how you mix and match various blocks inside your page layouts + you can always tweak those colors to achieve the desired look, be that a dark website, a colorful or pastel one. 
Each scheme consists of a few main color categories – Background colors for your blocks, Text colors, Overline colors and Button color settings

To start editing and customizing the colors, simply click on one of them, make your adjustments then click on “Save”. Here’s our in-house designer explaining the whole process. 

Part 1
Part 2

How to transfer your branding into your website design

The process is very similar to the previous steps. All you have to do is tweak the existing fonts and color numbers inside your style kit. Yet, maybe your branding includes only 2 fonts and 2 color options – how do you transfer those into a fully functioning style kit? How do you make sure that it will look good and work well in combination with the layout designs? 

Our designer explains how to transfer everything through and make it work, even when you have fewer variations inside your brand book. 

We recommend creating a test page, hidden from your audience, adding a bunch of random blocks to it and applying this new custom style kit only to that 1 page. This will allow you to safely test all the changes you’re implementing to fonts and colors, without any one else seeing your experiments. 

Applying your brand typography | How to combine font styles correctly 

Also watch this quick tutorial that explains how to combine various font styles within your blocks and page layouts, so no matter what changes you apply – your website always looks professional and polished.

Applying your brand colors

Perks of using multiple Style Kits on one website

If you have several brands or types of services that you offer, and you want to keep them all on one website, yet diversify their presentation, style kits can help you do that. It’s simple. You can have multiple style kits activated on one website. Which means, you can have a separate collection of fonts and colors for each sub-brand. For example, if you do wedding photography, but also boudoir, your wedding services can be presented as elegant and classic, while the boudoir portfolio can have a moody and bold aesthetic. 

All you have to do is apply selected style kits on specific pages. Here’s how you can apply a style kit to a single page.  

This also comes in handy for those who do a lot of marketing and sales funnels, build landing pages for specific products, offerings or target audiences. Each landing page can look very different and tailored to its content and end user.  

Premade Style Kits available via subscription

Having the ability to create your own custom style kits and apply them to your entire website with one simple click is exciting and fun. Yet, if you prefer to work with predefined options created by our design team – you can always opt for access to our Style Kit library. With 17 style kits currently available for use (and more coming soon) – you get access to a variety of beautiful, easy to implement website looks. Each style kit comes with a combination of fonts and colors, plus 20 unique page blocks. Therefore, by subscribing you get access to all 17 stylekits (plus any upcoming ones) and 340 unique blocks to spice up your website and make it look more original. 

This Style Kit subscription is available only for Flextheme users (those who have Lyra, Elise, Verso, Velvet, June, Faro, Mono or any Flextheme that follows). You can subscribe directly from this link, or click on“purchase” when you explore the style kits inside your dashboard, in Flex Admin → Explore. 

Flothemes Team,
Supporting You

What Are You Looking For ?
We need cookies to run our site optimally, by continuing to browse you agree to our cookie policy for our required cookies. If you’d like to update your cookies, check out how to clear cookies for your browsers here.