Design Sets

OxyMade includes four pre-configured design sets that provide complete, cohesive styling for your projects.

Overview

Design sets are pre-configured collections of:

• Color palettes
• Typography scales
• Spacing values
• Component styles
• Variable definitions

Choose a design set that matches your project’s aesthetic, then customize as needed.

Available Design Sets

Layers (Default)

The most comprehensive design set with 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)

Minimal

Clean, minimal design with subtle colors and refined aesthetics.

Best For:

• Minimalist portfolios
• Art/design showcases
• Photography sites
• Luxury brands

Characteristics:

• Neutral-focused palette
• Subtle color variations
• Tight spacing
• Major Second (1.125) type scale

Primary Color: #71717a (Neutral Gray)

Modern

Bold, contemporary design with strong visual impact.

Best For:

• Tech startups
• Creative agencies
• Bold brand sites
• App landing pages

Characteristics:

• Vibrant primary color
• High contrast
• Medium spacing
• Minor Third (1.200) type scale

Primary Color: #3b82f6 (Blue)

Classic

Traditional, elegant design with timeless appeal.

Best For:

• Professional services
• Corporate sites
• Law firms, finance
• Traditional brands

Characteristics:

• Conservative color palette
• Refined typography
• Generous whitespace
• Major Third (1.250) type scale

Primary Color: #059669 (Emerald)

Choosing a Design Set

During Setup

1. Navigate to OxyMade settings
2. In the setup wizard, select your design set
3. Complete the remaining setup steps
4. Your design set is now active

Changing Design Sets

To switch to a different design set:

1. Go to OxyMade > Settings
2. Select a new design set
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

Typography Scale

Spacing Configuration

Customizing Design Sets

Override Colors

After selecting a design set, customize the primary color:

1. Open the OxyMade color panel
2. Adjust the primary color
3. Secondary colors automatically regenerate
4. Save to apply changes

Modify Typography

1. Go to OxyMade > Typography
2. Adjust type scale ratios
3. Modify base sizes
4. Re-sync with Oxygen

Custom Variables

Add custom variables alongside design set defaults:

1. Go to OxyMade > Settings
2. Find Custom Variables section
3. Add your variable definitions
4. These are preserved when changing design sets

Design Set Files

Design sets are defined in JSON files:

/data/layers.json      → Layers design set
/data/minimal.json     → Minimal design set
/data/modern.json      → Modern design set
/data/classic.json     → Classic design set

Data Structure

{
  "meta": {
    "name": "Layers",
    "version": "1.0",
    "description": "Modern comprehensive design"
  },
  "colors": {
    "primary": {
      "base": "#6366f1",
      "shades": {...}
    },
    ...
  },
  "typography": {
    "scale_mobile": 1.25,
    "scale_desktop": 1.333,
    "base_mobile": 16,
    "base_desktop": 18
  },
  "spacing": {
    "s1": "0.25rem",
    "s2": "0.5rem",
    ...
  }
}

Best Practices

Start with the Right Set

Choose the design set closest to your vision:

• Need flexibility? → Layers
• Want simplicity? → Minimal
• Bold statements? → Modern
• Professional feel? → Classic

Customize After Selection

1. Start with a design set
2. Adjust primary color to match brand
3. Fine-tune typography if needed
4. Add custom variables for gaps

Preserve Customizations

When updating OxyMade:

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

Document Your Changes

Keep track of customizations:

Design Set: Layers
Primary Color: #6366f1 → #4f46e5
Typography Ratio: 1.333 → 1.25
Custom Vars: --brand-gradient

Comparison Table

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
2. Verify sync mode settings
3. Compare with design set defaults
4. Reset and re-apply if needed

Missing Variables

1. Ensure design set files exist
2. Re-run the variables installation
3. Check for file permission issues
4. Review error logs

Related

• Color Palette System
• Typography System
• Configuration