Foundations

Backgrounds

Use background helpers to apply KitFront brand, light, dark, and gradient backgrounds. Choose the tab that matches your starter.

Color background classes

Bootstrap color background classes apply the background color and matching text color.

Background	Class	Default	Text Color
Brand 1	`.kf-bg-brand-1`	#ff2056	White
Brand 2	`.kf-bg-brand-2`	#fe9a00	White
Light 1	`.kf-bg-light-1`	#fff1f5	Body text
Light 2	`.kf-bg-light-2`	#fff6e8	Body text
Light 3	`.kf-bg-light-3`	#f5f7f9	Body text
Dark 1	`.kf-bg-dark-1`	#111827	White
Dark 2	`.kf-bg-dark-2`	#1f2937	White

Color background tokens

These defaults are defined in assets/css/core.css.

Background	Token	Default
Brand 1	`--kf-brand-color-1`	`#ff2056`
Brand 2	`--kf-brand-color-2`	`#fe9a00`
Light 1	`--kf-bg-light-1`	`#fff1f5`
Light 2	`--kf-bg-light-2`	`#fff6e8`
Light 3	`--kf-bg-light-3`	`#f5f7f9`
Dark 1	`--kf-bg-dark-1`	`#111827`
Dark 2	`--kf-bg-dark-2`	`#1f2937`

Use color backgrounds

Add the class to a section or block.

<section class="kf-section kf-bg-light-1">
  ...
</section>

<section class="kf-section kf-bg-dark-1">
  ...
</section>

Gradient background classes

Gradient background classes apply the gradient background and white text color.

Background	Class	Default	Text Color
Gradient 1	`.kf-bg-gradient-1`	gradient	White
Gradient 2	`.kf-bg-gradient-2`	gradient	White

Gradient background tokens

These defaults are defined in assets/css/core.css.

Background	Token	Default
Gradient 1	`--kf-bg-gradient-1`	`linear-gradient(135deg, #ff2056, #c4003a)`
Gradient 2	`--kf-bg-gradient-2`	`linear-gradient(135deg, #fe9a00, #d97706)`

Use gradient backgrounds

Add the gradient class to a section or block.

<section class="kf-section kf-bg-gradient-1">
  ...
</section>

Color background utilities

Tailwind color background utilities use the KitFront theme tokens.

Background	Classes	Default
Brand 1	`bg-kf-brand-color-1 text-white`	#ff2056
Brand 2	`bg-kf-brand-color-2 text-white`	#fe9a00
Light 1	`bg-kf-bg-light-1 text-kf-body-text`	#fff1f5
Light 2	`bg-kf-bg-light-2 text-kf-body-text`	#fff6e8
Light 3	`bg-kf-bg-light-3 text-kf-body-text`	#f5f7f9
Dark 1	`bg-kf-bg-dark-1 text-white`	#111827
Dark 2	`bg-kf-bg-dark-2 text-white`	#1f2937

Color background tokens

These defaults are defined in src/assets/css/input.css.

Background	Token	Default
Brand 1	`--color-kf-brand-color-1`	`#ff2056`
Brand 2	`--color-kf-brand-color-2`	`#fe9a00`
Light 1	`--color-kf-bg-light-1`	`#fff1f5`
Light 2	`--color-kf-bg-light-2`	`#fff6e8`
Light 3	`--color-kf-bg-light-3`	`#f5f7f9`
Dark 1	`--color-kf-bg-dark-1`	`#111827`
Dark 2	`--color-kf-bg-dark-2`	`#1f2937`

Use color backgrounds

Add the background and text utility classes to a section or block.

<section class="kf-section bg-kf-bg-light-1 text-kf-body-text">
  ...
</section>

<section class="kf-section bg-kf-bg-dark-1 text-white">
  ...
</section>

Gradient background utilities

Use gradient direction, color stop, and text color utilities together.

Background	Classes	Default
Gradient 1	`bg-linear-to-br from-kf-gradient-1-start to-kf-gradient-1-end text-white`	gradient
Gradient 2	`bg-linear-to-br from-kf-gradient-2-start to-kf-gradient-2-end text-white`	gradient

Gradient background tokens

These defaults are defined in src/assets/css/input.css.

Background	Token	Default
Gradient 1 Start	`--color-kf-gradient-1-start`	`#ff2056`
Gradient 1 End	`--color-kf-gradient-1-end`	`#c4003a`
Gradient 2 Start	`--color-kf-gradient-2-start`	`#fe9a00`
Gradient 2 End	`--color-kf-gradient-2-end`	`#d97706`

Use gradient backgrounds

Add the gradient utilities to a section or block.

<section class="kf-section bg-linear-to-br from-kf-gradient-1-start to-kf-gradient-1-end text-white">
  ...
</section>

Section Structure

Text Utilities