How to Use Theme Builder & its features

Theme Builder in Kulp lets you fully control your project’s visual identity - colors, fonts, spacing, shadows, and even accessibility compliance - all from one place. It’s designed so you can make brand-wide style updates instantly and preview them live before applying.

Last updated 7 months ago

Accessing Theme Builder

  1. Open your project in Kulp Builder.

  2. In the top toolbar, click the Theme Builder icon (paint palette).

  3. The Theme Builder panel appears on the left, and your project preview stays on the right so you can see changes in real time.

  4. Once you have done all the changes are satisfied with the outcome , just click on Use this theme.

1. Change Colors

What it does: Lets you edit all key color tokens that define your theme, such as backgrounds, text, buttons, and accents.
Changing these updates your entire project consistently without manually editing each element.

You can adjust:

  • Primary & Primary Foreground – main brand color (e.g., button backgrounds) and its text/icon color.

  • Secondary & Secondary Foreground – secondary brand color and text/icon color for those elements.

  • Accent – highlight colors for calls-to-action or special states.

  • Base – main background color.

  • Card – backgrounds for card components.

  • Popover – tooltip, dropdown, or pop-up background.

  • Muted – subdued text or secondary backgrounds.

  • Chart, Sidebar, Border, Input – specific UI element colors.

2. Typography

What it does: Controls your project’s fonts and letter spacing.
You can select:

  • Sans Serif – clean and modern look (good for most interfaces).

  • Serif – traditional and formal style (good for editorial or formal products).

  • Monospace – technical/code-focused style.

You can also fine-tune letter spacing to improve readability or achieve a certain visual feel.

3. HSL Adjustments

What it does: Adjust Hue, Saturation, and Lightness for your colors without picking a completely new palette.

  • Hue – shifts the color family (e.g., blue → teal → green).

  • Saturation – makes colors more vivid or more muted.

  • Lightness – brightens or darkens the color.

4. Radius, Spacing, and Shadows

What it does: Controls how rounded, spread out, and elevated elements look.

  • Radius – makes corners sharper (0px) or more rounded (large radius).

  • Spacing – changes space between and inside elements (padding/margin).

  • Shadows – adds or removes depth for elements like cards or modals.

5. Preset Themes

What it does: Lets you instantly apply pre-designed color and style combinations.
Simply open the theme dropdown, preview, and apply.

6. Generate Themes via Chat

What it does: Uses AI to create or modify themes based on your text commands.
You can:

  • Create – “Make a theme inspired by nature.”

  • Remix – “Change my buttons to a warm orange and text to white.”

  • Tweak – “Slightly darken the background.”

7. Import CSS Variables

What it does: Applies a theme from existing CSS variables, mapping them to Theme Builder tokens.
Paste them in the provided format, and Theme Builder applies them instantly.

8. Undo and Reset

What it does: Lets you backtrack changes easily.

  • Undo – step back through recent edits one at a time.

  • Reset – restore the entire theme to its original state.

9. Contrast Checker

What it does: Analyzes all text-background pairs to check if they meet WCAG 2.0 AA accessibility standards (minimum 4.5:1 ratio).

  • Flags failing colors in the Issues tab.

  • Shows the contrast score for each token.

10. Toggle Inspector

What it does: Highlights the exact theme token applied to each element in your preview.
When you hover over an element, it shows the applied background, text, and hover styles.

Why it’s useful: Helps troubleshoot unexpected styles and verify that changes are applied correctly.