Get Started

Design Sets Explained

Deep dive into BreakMade design sets and how they form the foundation of your designs.

Design sets are the foundation of every BreakMade design. They configure your global styles, ensuring all blocks and templates look consistent and professional.

What Is a Design Set?

A design set is a pre-configured collection of:

  • Color palette with all shades
  • Typography presets for headings and body
  • Spacing configuration
  • Border radius values
  • Component defaults

When you install a design set, your entire Breakdance environment is configured with coordinated styles.

Available Design Sets

Layers (Default)

The flagship BreakMade design set:

  • Style: Clean, modern, versatile
  • Colors: Professional palette with vibrant accents
  • Typography: Contemporary sans-serif
  • Use case: Suitable for any project type

Layers is recommended for most projects and is the foundation for all BreakMade blocks.

Future Design Sets

Additional design sets may include:

  • Industry-specific styles
  • Different aesthetic directions
  • Seasonal variations
  • Client-specific configurations

Check breakmade.com for the latest available sets.

Installing a Design Set

First-Time Setup

  1. Go to BreakMade in WordPress admin
  2. Find the Design Set section
  3. Click Set Default Design Set
  4. Select Layers (or your preferred set)
  5. Confirm installation

What Gets Installed

When you install a design set:

ComponentWhat Happens
ColorsAdded to Breakdance global colors
TypographyPresets added to Breakdance
VariablesCSS file regenerated
SelectorsCan be registered separately

Design Set Components

Color Palette

Each design set includes 5 main colors:

  1. Primary: Main brand/action color
  2. Secondary: Supporting color
  3. Tertiary: Additional accent
  4. Accent: Special emphasis
  5. Neutral: Grays for text/backgrounds

Each color has 11 shades:

  • base, bg, dark, surface, heading
  • subtle, active, border, text, muted, hover

Typography

Design sets configure:

Headings (H1-H6):

  • Font sizes (responsive)
  • Font weights
  • Line heights
  • Letter spacing

Body Text:

  • Base font size
  • Line height (160%)
  • Paragraph spacing

Spacing

Design sets use the BreakMade spacing scale:

  • 24 fluid spacing variables (s1-s72)
  • Section spacing variants
  • All using CSS clamp() for responsiveness

Border Radius

Coordinated radius values:

  • --radius-sm: Small (buttons, inputs)
  • --radius-md: Medium (cards)
  • --radius-lg: Large (containers)
  • --radius-full: Pills/circles

Design Set + Designs Relationship

How They Connect

Design Set (Foundation)
    ↓
├── Provides: Variables, Colors, Typography
    ↓
Templates & Blocks (Use Foundation)
    ↓
└── Reference: var(--s8), var(--primary-base), etc.

Why This Matters

Blocks and templates reference design set variables:

/* A block might use: */
.hero {
  padding: var(--s32);
  background: var(--primary-surface);
}

.hero-title {
  color: var(--primary-heading);
}

If you haven’t installed the design set, these variables won’t exist, and styles will break.

Customizing Design Sets

Changing Colors

After installing a design set, customize colors:

  1. Go to BreakMade settings
  2. Use the color picker interface
  3. Modify any color
  4. Click Save Palette
  5. All references update automatically

Adjusting Typography

Typography can be modified through:

  1. Breakdance’s global typography settings
  2. Element-level overrides
  3. Custom CSS

Keeping the Foundation

Even when customizing:

  • Keep the variable structure
  • Maintain shade relationships
  • Use consistent naming
  • Don’t delete core variables

Design Set Best Practices

For New Projects

  1. Install design set first
  2. Then customize colors
  3. Then add blocks/templates
  4. This ensures proper variable availability

For Existing Projects

Adding BreakMade to an existing site:

  1. Install BreakMade
  2. Review existing global styles
  3. Decide: replace or merge
  4. Install design set carefully
  5. Test throughout site

For Multiple Projects

Using BreakMade across projects:

  1. Start each with fresh design set
  2. Customize per-project
  3. Don’t assume settings carry over
  4. Document client customizations

Troubleshooting

Styles Don’t Match Preview

Designs look different than breakmade.com:

  1. Check design set: Is Layers installed?
  2. Check colors: Has palette been modified?
  3. Check variables: Are CSS outputs enabled?

Missing Variables

If variables show as undefined:

  1. Re-install design set
  2. Check BreakMade CSS is enabled
  3. Clear all caches
  4. Regenerate CSS file

Colors Look Wrong

If colors don’t match:

  1. Compare your palette to default
  2. Check if sync is enabled
  3. Verify HeadSpin mode setting
  4. Re-install default palette

Design Set FAQ

Can I use multiple design sets?

No, one design set per site. But you can:

  • Customize the active set
  • Create custom variations via CSS
  • Use different sets for different projects

Will updating BreakMade change my design set?

Plugin updates don’t overwrite your:

  • Custom color choices
  • Typography modifications
  • Other customizations

Can I export my customized design set?

Currently, export isn’t built-in. To preserve:

  • Document color hex values
  • Note typography settings
  • Keep configuration records

Do I need a design set for blocks?

Yes, blocks reference design set variables. Without a design set:

  • Spacing may not work
  • Colors won’t appear
  • Typography may be off