Design Sets

OxyMade provides design sets that give you complete, cohesive styling for your projects right out of the box.

Overview

Design sets are pre-configured collections of:

• Color palettes (5 semantic colors with 11 shades each)
• Typography scales
• Spacing values
• Component styles
• Variable definitions

Available Design Sets

Layers (Default)

Layers is the default design set bundled locally with OxyMade. It’s the most comprehensive option with a rich color palette and extensive utilities.

Best For:

• Modern web applications
• SaaS products
• Marketing websites
• Portfolio sites

Characteristics:

• Rich indigo primary color
• 11 shade variants per color
• Generous spacing scale
• Perfect Fourth (1.333) type scale

Primary Color: #6366f1 (Indigo)

Additional Templates

Beyond Layers, OxyMade offers additional templates that are loaded from our API. You can browse all available templates at oxymade.com/templates.

Each template provides:

• Unique color palettes tailored for specific use cases
• Pre-configured typography settings
• Customized spacing scales
• Ready-to-use component styles

To use a different template, select it from the design set selector modal in the setup wizard before completing the installation steps.

Choosing a Design Set

During Setup

1. Navigate to OxyMade settings
2. In the setup wizard, click the design set selector
3. Browse available templates in the modal
4. Select your preferred template
5. Complete the remaining setup steps

Changing Design Sets

To switch to a different design set:

1. Go to OxyMade > Settings
2. Select a new design set from the modal
3. Click Apply Design Set
4. Re-sync variables with Oxygen

Warning: Changing design sets will update your color and typography variables. Existing designs may change appearance.

Design Set Contents

Color Palette

Each design set includes:

Primary     → Base brand color + 11 shades
Secondary   → Complementary + 11 shades
Tertiary    → Supporting + 11 shades
Accent      → Highlight + 11 shades
Neutral     → UI colors + 11 shades
Base White  → #ffffff
Base Black  → #101010

Shade Variants

Each semantic color comes with 11 shade variants:

Typography Scale

Design sets include fluid typography with:

• Text sizes from text-xs to text-7xl
• Heading classes from h1 to h6 plus hero
• Configurable type scale ratios
• Responsive sizing

Spacing Configuration

All design sets use a consistent spacing system:

• 24-value numeric scale (s1 through s72)
• Section spacing utilities (ss-none through ss-xxl)
• Border radius values (radius-sm through radius-full)

Customizing Design Sets

Override Colors

After selecting a design set, customize colors using the color panel:

1. Open the OxyMade color panel in the builder toolbar
2. Adjust the primary color
3. Click “Generate” to create all shade variants
4. Save to apply changes

Using the Color Panel

The color panel provides:

• Spectrum color picker for each semantic color
• Auto-generation of all 11 shades from primary
• Manual shade adjustment
• Alpha/transparency options
• Real-time preview

Data Loading

Design sets are loaded differently based on their type:

• Layers: Bundled locally in /data/layers.json
• Other templates: Fetched from our API when selected

This ensures Layers is always available offline, while additional templates give you access to our growing library of designs.

Best Practices

Start with the Right Set

1. Browse templates at oxymade.com/templates
2. Choose one that matches your project’s aesthetic
3. Use Layers if you want maximum flexibility

Customize After Selection

1. Start with a design set
2. Adjust primary color to match your brand
3. Fine-tune typography if needed
4. Use the color panel for quick adjustments

Preserve Customizations

When updating OxyMade:

• Custom color overrides are preserved
• Custom variables are preserved
• Re-sync may be required for new features

Troubleshooting

Design Set Not Applying

1. Verify selection was saved
2. Check the setup wizard completed
3. Re-sync variables with Oxygen
4. Clear Oxygen’s cache

Colors Look Different

1. Check if custom overrides exist in the color panel
2. Verify sync mode settings
3. Compare with design set defaults
4. Reset and re-apply if needed

Template Not Loading

1. Check your internet connection (templates load from API)
2. Try selecting Layers (bundled locally)
3. Refresh the page and try again

Related

• Color Palette System
• Typography System
• Configuration