Foundations
Brand Colors
Brand color tokens control page colors, background helpers, gradients, and button colors. Choose the tab that matches your starter.
Core colors
Bootstrap color tokens live in assets/css/core.css.
| Color | Token | Default | Preview |
|---|---|---|---|
| Body Background | --kf-body-bg | #ffffff | #ffffff |
| Body Text | --kf-body-text | #1c1d25 | #1c1d25 |
| White | --kf-white | #ffffff | #ffffff |
| Black | --kf-black | #1c1d25 | #1c1d25 |
Brand colors
Used by helpers like .kf-bg-brand-1, .kf-bg-brand-2, buttons, icons, badges, and highlights.
| Color | Token | Default | Preview |
|---|---|---|---|
| Brand 1 | --kf-brand-color-1 | #ff2056 | #ff2056 |
| Brand 2 | --kf-brand-color-2 | #fe9a00 | #fe9a00 |
Light backgrounds
Used by .kf-bg-light-1, .kf-bg-light-2, and .kf-bg-light-3.
| Color | Token | Default | Preview |
|---|---|---|---|
| Light 1 | --kf-bg-light-1 | #fff1f5 | #fff1f5 |
| Light 2 | --kf-bg-light-2 | #fff6e8 | #fff6e8 |
| Light 3 | --kf-bg-light-3 | #f5f7f9 | #f5f7f9 |
Dark backgrounds
Used by .kf-bg-dark-1 and .kf-bg-dark-2.
| Color | Token | Default | Preview |
|---|---|---|---|
| Dark 1 | --kf-bg-dark-1 | #111827 | #111827 |
| Dark 2 | --kf-bg-dark-2 | #1f2937 | #1f2937 |
Gradient backgrounds
Used by .kf-bg-gradient-1 and .kf-bg-gradient-2.
| Color | Token | Default | Preview |
|---|---|---|---|
| Gradient 1 | --kf-bg-gradient-1 | linear-gradient(135deg, #ff2056, #c4003a) | gradient |
| Gradient 2 | --kf-bg-gradient-2 | linear-gradient(135deg, #fe9a00, #d97706) | gradient |
Button colors
Used by button classes like .btn-primary, .btn-secondary, .btn-light, and .btn-dark.
| Color | Token | Default | Preview |
|---|---|---|---|
| Primary | --kf-btn-primary-bg | #ff2056 | #ff2056 |
| Primary Hover | --kf-btn-primary-bg-hover | #e61c4d | #e61c4d |
| Secondary | --kf-btn-secondary-bg | #fe9a00 | #fe9a00 |
| Secondary Hover | --kf-btn-secondary-bg-hover | #e58b00 | #e58b00 |
| Light | --kf-btn-light-bg | #f8f9fa | #f8f9fa |
| Light Hover | --kf-btn-light-bg-hover | #f3f4f6 | #f3f4f6 |
| Dark | --kf-btn-dark-bg | #111827 | #111827 |
| Dark Hover | --kf-btn-dark-bg-hover | #1f2937 | #1f2937 |
Use your own colors
Replace token values in assets/css/core.css. Sections and helpers using those tokens update automatically.
--kf-brand-color-1: #2563eb;
--kf-brand-color-3: #2563eb;
.kf-bg-brand-3 {
background: var(--kf-brand-color-3) !important;
color: var(--kf-white) !important;
}Core colors
Tailwind color tokens live in src/assets/css/input.css inside @theme.
| Color | Token | Default | Preview |
|---|---|---|---|
| Body Background | --color-kf-body-bg | #ffffff | #ffffff |
| Body Text | --color-kf-body-text | #1c1d25 | #1c1d25 |
| White | --color-kf-white | #ffffff | #ffffff |
| Black | --color-kf-black | #1c1d25 | #1c1d25 |
Brand colors
These create utilities like bg-kf-brand-color-1 and text-kf-brand-color-1.
| Color | Token | Default | Preview |
|---|---|---|---|
| Brand 1 | --color-kf-brand-color-1 | #ff2056 | #ff2056 |
| Brand 2 | --color-kf-brand-color-2 | #fe9a00 | #fe9a00 |
Light backgrounds
Use with utilities like bg-kf-bg-light-1 and text-kf-body-text.
| Color | Token | Default | Preview |
|---|---|---|---|
| Light 1 | --color-kf-bg-light-1 | #fff1f5 | #fff1f5 |
| Light 2 | --color-kf-bg-light-2 | #fff6e8 | #fff6e8 |
| Light 3 | --color-kf-bg-light-3 | #f5f7f9 | #f5f7f9 |
Dark backgrounds
Use with utilities like bg-kf-bg-dark-1 and text-white.
| Color | Token | Default | Preview |
|---|---|---|---|
| Dark 1 | --color-kf-bg-dark-1 | #111827 | #111827 |
| Dark 2 | --color-kf-bg-dark-2 | #1f2937 | #1f2937 |
Gradient colors
Used with utilities like from-kf-gradient-1-start and to-kf-gradient-1-end.
| Color | Token | Default | Preview |
|---|---|---|---|
| Gradient 1 Start | --color-kf-gradient-1-start | #ff2056 | #ff2056 |
| Gradient 1 End | --color-kf-gradient-1-end | #c4003a | #c4003a |
| Gradient 2 Start | --color-kf-gradient-2-start | #fe9a00 | #fe9a00 |
| Gradient 2 End | --color-kf-gradient-2-end | #d97706 | #d97706 |
Button colors
Used by starter button classes like .btn-primary, .btn-secondary, .btn-light, and .btn-dark.
| Color | Token | Default | Preview |
|---|---|---|---|
| Primary | --color-kf-btn-primary-bg | #ff2056 | #ff2056 |
| Primary Hover | --color-kf-btn-primary-bg-hover | #e61c4d | #e61c4d |
| Secondary | --color-kf-btn-secondary-bg | #fe9a00 | #fe9a00 |
| Secondary Hover | --color-kf-btn-secondary-bg-hover | #e58b00 | #e58b00 |
| Light | --color-kf-btn-light-bg | #f8f9fa | #f8f9fa |
| Light Hover | --color-kf-btn-light-bg-hover | #f3f4f6 | #f3f4f6 |
| Dark | --color-kf-btn-dark-bg | #111827 | #111827 |
| Dark Hover | --color-kf-btn-dark-bg-hover | #1f2937 | #1f2937 |
Use your own colors
Replace token values in src/assets/css/input.css. Tailwind regenerates the matching utilities into output.css.
--color-kf-brand-color-1: #2563eb;
--color-kf-brand-color-3: #7c3aed;