Theme Configuration

Configure page layout, responsive breakpoints, and border radius

What is Theme Configuration?

Theme configuration controls your page layout, responsive breakpoints, and border radius presets. BreakColorUI provides desktop-first defaults with optional tablet and mobile overrides.

Key Features

• Page width and offset configuration
• Column gap settings for grid/flex layouts
• Responsive breakpoints (Tablet ≤1024px, Mobile ≤768px)
• Border radius presets (S, M, L, Pill, Atom)
• Automatic value inheritance and cleanup

Page Layout Settings

Configure the fundamental layout properties that control your page structure:

Page Width

Maximum content width. Typical values: 1200px, 1440px, 1920px

Offset (Padding)

Horizontal page padding. Common values: 20px, 32px, 48px

Column Gap

Gap between grid/flex columns. Typical: 16px, 24px, 32px

Page Layout CSS Variablescss

/* Desktop (base) values */
--hcl-page-width: 1440px;      /* Max content width */
--hcl-offset-min: 32px;        /* Horizontal padding */
--hcl-column-gap: 24px;        /* Grid/flex gap */

Responsive Breakpoints

BreakColorUI uses a cascading breakpoint system where smaller viewports inherit from larger ones:

Desktop (Base)

Default values for all properties - the foundation of your responsive system

Tablet (≤1024px)

Optional overrides for tablet. Inherits from Desktop if not specified

Mobile (≤768px)

Optional overrides for mobile. Inherits from Tablet or Desktop if not specified

Smart Inheritance System

• Desktop → Tablet: Tablet inherits Desktop values unless you override them
• Tablet → Mobile: Mobile inherits Tablet (or Desktop) values unless you override them
• Only store differences: Values that match parent breakpoints are automatically cleaned up
• Visual indicators: Blue dots show which breakpoints have custom values

Responsive Breakpoint Examplecss

/* Desktop (base) - all devices get these by default */
:root {
  --hcl-page-width: 1440px;
  --hcl-offset-min: 32px;
  --hcl-column-gap: 24px;
}

/* Tablet (≤1024px) - only override what's different */
@media (max-width: 1024px) {
  :root {
    --hcl-offset-min: 24px;      /* Reduced padding */
    --hcl-column-gap: 20px;      /* Smaller gap */
    /* page-width inherits 1440px from desktop */
  }
}

/* Mobile (≤768px) - only override what's different */
@media (max-width: 768px) {
  :root {
    --hcl-offset-min: 16px;      /* Even smaller padding */
    --hcl-column-gap: 16px;      /* Even smaller gap */
    /* page-width still inherits 1440px from desktop */
  }
}

Border Radius Presets

Five pre-configured border radius values for consistent, harmonious rounding across your UI:

Small (S)

Subtle rounding for small elements. Typical: 4px

Medium (M)

Standard rounding for cards and modals. Typical: 8px

Large (L)

Large rounding for hero sections. Typical: 16px

Pill

Fully rounded for badges and pills. Fixed: 9999px

Atom

Optimized for small UI elements like buttons

Border Radius CSS Variablescss

/* Border radius presets */
--hcl-r1: 4px;     /* Small - subtle rounding */
--hcl-r2: 8px;     /* Medium - cards, modals */
--hcl-r3: 16px;    /* Large - hero sections */
--hcl-rpill: 9999px;  /* Pill - fully rounded */
--hcl-rbutton: 6px;   /* Atom - buttons */

Practical Usagecss

/* Small elements */
.badge {
  border-radius: var(--hcl-r1);  /* 4px */
}

/* Cards and modals */
.card {
  border-radius: var(--hcl-r2);  /* 8px */
}

/* Hero sections */
.hero-image {
  border-radius: var(--hcl-r3);  /* 16px */
}

/* Pill-shaped elements */
.tag {
  border-radius: var(--hcl-rpill);  /* 9999px */
}

/* Buttons */
.button {
  border-radius: var(--hcl-rbutton);  /* 6px */
}

Configuring Theme

Set up your theme system in the dashboard:

Configuration Steps

1. Open Theme Tab - Navigate to your project's Theme section
2. Configure desktop layout - Set page width, offset, and column gap
3. Enable responsive mode - Toggle on to add tablet/mobile overrides (optional)
4. Set tablet overrides - Only configure values that differ from desktop
5. Set mobile overrides - Only configure values that differ from tablet/desktop
6. Configure border radius - Set your 5 radius presets (S, M, L, Pill, Atom)
7. Save - Click save to generate CSS variables

Auto-cleanup in action

When you set a tablet or mobile value that matches its parent breakpoint, BreakColorUI automatically removes it. This keeps your configuration clean and prevents storing redundant data. Watch for the blue dot indicators - they show which breakpoints have truly custom values.

Real-World Example

Here's how theme variables work together in a complete page layout:

Complete Theme Implementationcss

/* Container with responsive layout */
.container {
  max-width: var(--hcl-page-width);  /* 1440px on all devices */
  padding-left: var(--hcl-offset-min);  /* 32px → 24px → 16px */
  padding-right: var(--hcl-offset-min);
  margin: 0 auto;
}

/* Grid with responsive gap */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hcl-column-gap);  /* 24px → 20px → 16px */
}

/* Card with border radius */
.card {
  border-radius: var(--hcl-r2);  /* 8px */
  padding: var(--hcl-space-comp-l);
}

/* Hero section */
.hero {
  border-radius: var(--hcl-r3);  /* 16px */
  padding: var(--hcl-space-sec-3xl);
}

/* Button with rounded corners */
.button {
  border-radius: var(--hcl-rbutton);  /* 6px */
  padding: var(--hcl-space-comp-m) var(--hcl-space-comp-l);
}

/* Tag with pill shape */
.tag {
  border-radius: var(--hcl-rpill);  /* 9999px */
  padding: var(--hcl-space-comp-xs) var(--hcl-space-comp-s);
}

Responsive without media queries

Notice how you use the same CSS variables everywhere. The responsive behavior happens automatically through the @media queries in the generated CSS - you don't need to write any breakpoint logic in your component styles!

Next Steps

With your complete design system configured (colors, typography, spacing, and theme), you're ready to export and use it:

Ready to export!

Head to Export & CSS to learn how to export your CSS variables and integrate them with Breakdance or any other project.