Design Lab

The Ultimate Foundation for Fluid, Accessible, and High-Performance Design.
The Kadence Design Lab is a professional-grade utility designed to bridge the gap between abstract design theory and theme implementation. Built by a designer, for designers, this tool eliminates the “manual math” of fluid typography and the tedious config of global color palettes.

🎨 Design Studio v1.0

Kadence Global Palette
#3182ce
#2b6cb0
#ebf8ff
#1a202c
#2d3748
#4a5568
#718096
#edf2f7
#f7fafc
#ffffff
Initializing Specimen…
Element Min (rem) Max (rem) Fluid Clamp Code Line Height Hex Color

Live Contrast Score

💡 How It Works

Base Pixels: Sets 1rem = X pixels (browser default is 16px).
Screen Min/Max: Viewport range for fluid scaling.
Scale Type: The multiplier ratio between heading sizes.

Why Use the Lab?

Setting up a new project often involves repetitive math and hunting for hex codes. This Studio acts as your Design Engine, allowing you to visually orchestrate your brand’s fundamental DNA in one place, then “inject” it directly into the Kadence Theme.

  • Zero-Math Fluidity: Generate CSS clamp() values that scale perfectly from mobile to ultra-wide desktop.
  • Instant Palette Injection: Export the full 15-color Kadence JSON object for a 1-click site-wide update.
  • Accessibility-First: Real-time contrast scoring ensures your H1 vs. Background stays ADA-compliant.

How to Harness the Power

1. Set Your Fluidity (The “Clamp” Logic)

Enter your project’s Screen Min and Screen Max (e.g., 320px to 1440px). Choose a Scale Type (multiplier) to define the ratio between your headings. The tool instantly calculates the linear interpolation math required for perfectly responsive type.

2. Orchestrate Your Palette

Adjust the first 9 swatches to map to the Kadence Global Palette structure (Accents, Contrast, and Backgrounds). The Lab automatically includes the hidden 6 utility colors to ensure your JSON export is complete and error-free.

3. Export & Implement

Global Colors

  1. Click “Copy Kadence JSON” in the Design Studio.
  2. In WordPress, navigate to Appearance > Customize > Colors & Fonts > Colors: Global Palette.
  3. Click the Portfolio Briefcase icon located directly below the Notice Colors section.
  4. Select the Export/Import tab in the popup window.
  5. Paste your code into the field and click import to update your site-wide palette.

Typography (The Clamp Method)

  1. Click the “Copy” button in the data table for your Min (rem) and Max (rem) values.
  2. In the Customizer, go to Colors & Fonts > Typography and select your desired element (e.g., H1).
  3. Click on the Font Size unit (where it displays PX, EM, or REM).
  4. In the popup window, click the Clamp Font Size icon (the first icon immediately following the “Font Size” title).
  5. Click the “Clamp Settings” button.
  6. Change the Font Size Range unit from PX to REM.
  7. Paste your Min and Max values from the Design Lab into the corresponding fields.

Scope & Limitations (Read This First)

This Lab provides a mathematically perfect starting foundation, but great design still requires a human eye.

  • Trust Your Eyes: Different typefaces (e.g., a condensed sans vs. a wide serif) have different visual weights. Use the math as your North Star, but tweak the Base PX if your specific font looks too heavy or light.
  • Manual Finishing: This tool focuses on Size and Color. Once your foundation is in Kadence, manually adjust your Line Height, Letter Spacing, and Text Transform in the Customizer to match your brand’s personality.
  • The 90/10 Rule: This lab handles 90% of the technical setup. The final 10%—the soul of the design—is your creative signature.

Pro Tips for Kadence Power Users

  • The Content Match: Set your Screen Max to match your “Large Display” or “Content Max Width” in the Kadence Global Layout settings for the most accurate scaling.
  • Service vs. Editorial: Use a 1.200 (Minor Third) scale for professional service sites (trustworthy/stable). Use 1.333 (Perfect Fourth) for bold, creative agencies (dynamic/editorial).