Theme Configuration
Layout tokens + border radius tokens, with optional responsive overrides
What is Theme Configuration?
Theme configuration defines the layout tokens your project uses (page width, horizontal offset, column gap) plus a consistent set of border radius tokens. You configure values once and then reuse the same CSS variables everywhere.
Key Features
- • Layout tokens: page width, offset, and column gap
- • Responsive overrides: Tablet ≤1024px, Mobile ≤768px
- • Border radius presets: S, M, L, Pill, Atom
- • Smart inheritance: only store values that differ from the parent breakpoint
Page Layout Settings
Configure the fundamentals 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
/* Base (desktop) layout tokens */
--page-width: 1440px; /* Max content width */
--min-offset: 32px; /* Minimum horizontal padding */
--page-gap: 24px; /* Gap between columns */
/* Breakdance integration (derived from layout) */
--bde-section-width: 1504px; /* page-width + 2 * min-offset */
--bde-section-horizontal-padding: 32px;
--bde-column-gap: 24px;Where these variables should live
These variables are designed to live in html:root / :root (global scope) so they apply to your whole site. When you export CSS from BreakColorUI, you paste it in your global stylesheet (or Breakdance Global Settings → Custom CSS).
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
/* Base (desktop) */
html:root {
--page-width: 1440px;
--min-offset: 32px;
--page-gap: 24px;
--bde-section-width: 1504px;
--bde-section-horizontal-padding: 32px;
--bde-column-gap: 24px;
}
/* Tablet (≤1024px): override only what changes */
@media (max-width: 1024px) {
html:root {
--min-offset: 24px;
--page-gap: 20px;
--bde-section-width: 1488px;
--bde-section-horizontal-padding: 24px;
--bde-column-gap: 20px;
}
}
/* Mobile (≤768px): override only what changes */
@media (max-width: 768px) {
html:root {
--min-offset: 16px;
--page-gap: 16px;
--bde-section-width: 1472px;
--bde-section-horizontal-padding: 16px;
--bde-column-gap: 16px;
}
}Border Radius Presets
A small set of border radius tokens for consistent 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 tokens */
--hrd-s: 6px; /* Small */
--hrd-m: 8px; /* Medium */
--hrd-l: 12px; /* Large */
--hrd-pill: 500px; /* Pill */
--hrd-atom: 6px; /* Atom (button-friendly) *//* Small elements */
.badge {
border-radius: var(--hrd-s);
}
/* Cards and modals */
.card {
border-radius: var(--hrd-m);
}
/* Hero sections */
.hero-image {
border-radius: var(--hrd-l);
}
/* Pill-shaped elements */
.tag {
border-radius: var(--hrd-pill);
}
/* Buttons */
.button {
border-radius: var(--hrd-atom);
}Configuring Theme
Set up your theme tokens 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:
/* Container with responsive layout */
.container {
max-width: var(--page-width);
padding-left: var(--min-offset);
padding-right: var(--min-offset);
margin: 0 auto;
}
/* Grid with responsive gap */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--page-gap);
}
/* Card with border radius */
.card {
border-radius: var(--hrd-m);
padding: var(--hsp-l);
}
/* Hero section */
.hero {
border-radius: var(--hrd-l);
padding: var(--hss-xxl);
}
/* Button with rounded corners */
.button {
border-radius: var(--hrd-atom);
padding: var(--hsp-m) var(--hsp-l);
}
/* Tag with pill shape */
.tag {
border-radius: var(--hrd-pill);
padding: var(--hsp-xs) var(--hsp-s);
}Responsive without media queries
Notice how you use the same CSS variables everywhere. Responsive behavior comes from the exported @media overrides — you don't need to write breakpoint logic inside 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.