Customization

Brand Colors

KitFront starter kits include color variables inside assets/css/core.css. These variables control the default page colors, section background helper classes, and button colors.

Core Colors

Core colors are used for the default page background, body text, and common white or black values used across the starter kit.

#ffffff

Body Background

--kf-body-bg

#1c1d25

Body Text

--kf-body-text

#ffffff

White

--kf-white

#1c1d25

Black

--kf-black

Brand Colors

Brand colors are the main accent colors in KitFront. They are used by helper classes like .kf-bg-brand-1 and .kf-bg-brand-2, and can also be used by sections for accents, icons, badges, or highlights.

#ff2056

Brand 1

--kf-brand-color-1

#fe9a00

Brand 2

--kf-brand-color-2

Light Section Backgrounds

Light background variables are used by .kf-bg-light-1, .kf-bg-light-2 and .kf-bg-light-3. These classes apply the light background and text colors are set to .kf-black.

#fff1f5

Light 1

--kf-bg-light-1

#fff6e8

Light 2

--kf-bg-light-2

#f5f7f9

Light 3

--kf-bg-light-3

Dark Section Backgrounds

Dark background variables are used by .kf-bg-dark-1 and .kf-bg-dark-2. These classes apply the dark background and text colors are set to .kf-white.

#111827

Dark 1

--kf-bg-dark-1

#1f2937

Dark 2

--kf-bg-dark-2

Gradient Backgrounds

Gradient variables are used by .kf-bg-gradient-1 and .kf-bg-gradient-2. These classes apply the gradient background and text colors are set to .kf-white

gradient

Gradient 1

--kf-bg-gradient-1

gradient

Gradient 2

--kf-bg-gradient-2

Button Colors

Button color variables control the default and hover states for KitFront button classes such as .btn-primary, .btn-secondary, .btn-light, and .btn-dark.

#ff2056

Primary

--kf-btn-primary-bg

#e61c4d

Primary Hover

--kf-btn-primary-bg-hover

#fe9a00

Secondary

--kf-btn-secondary-bg

#e58b00

Secondary Hover

--kf-btn-secondary-bg-hover

#f8f9fa

Light

--kf-btn-light-bg

#f3f4f6

Light Hover

--kf-btn-light-bg-hover

#111827

Dark

--kf-btn-dark-bg

#1f2937

Dark Hover

--kf-btn-dark-bg-hover

Using Your Own Colors

You can replace any of these values inside assets/css/core.css with your own brand colors. Once updated, all KitFront sections and helper classes will automatically follow your new color system.

If your project requires additional colors, you can create new variables and helper classes following the same naming convention used throughout the starter kit.

/* Add a new color variable */
--kf-brand-color-3: #2563eb;

/* Create a helper class */
.kf-bg-brand-3 {
  background: var(--kf-brand-color-3) !important;
  color: var(--kf-white) !important;
}

Tailwind

Font Family