Get Started

Quick Start

Get your design system up and running in 5 minutes.

This guide will help you set up OxyMade’s design system quickly using the 6-step setup wizard.

Before You Begin

Make sure you have completed the Installation steps, including:

  • Oxygen Builder 6.0+ installed and activated
  • Breakdance Elements for Oxygen installed and activated
  • Breakdance Forms for Oxygen installed and activated
  • OxyMade installed and activated

Important: The companion plugins (Breakdance Elements for Oxygen and Breakdance Forms for Oxygen) are required for OxyMade to function properly. Download them free from your Oxygen account dashboard.

The Setup Wizard

OxyMade includes a guided setup wizard that walks you through configuring your design system. Access it by navigating to OxyMade in your WordPress admin.

Setup Progress Tracker

The settings page displays a visual progress tracker showing which steps you’ve completed:

  • Green checkmark: Step completed
  • Gray circle: Step pending

The tracker helps you quickly see your setup status and identify any remaining steps. You can hide the progress tracker once all steps are complete.

Step 1: Choose Your Design Set

OxyMade provides design sets that are loaded from our API. When you open the setup wizard, you’ll see a selection modal with available templates.

Layers is the default design set, bundled locally with the plugin. Additional templates are available from our template library at oxymade.com/templates.

To select a design set:

  1. Click the design set selector in the setup wizard
  2. Browse the available templates in the modal
  3. Select the template that matches your project’s aesthetic
  4. If you’re using a template other than Layers, select it from the modal before proceeding

Note: Layers is the default and recommended starting point. Other templates are loaded from our API and provide different color palettes, typography scales, and styling presets.

Step 2: Install Variables

This step syncs OxyMade’s color and spacing variables with Oxygen:

  1. Click Install Variables
  2. Wait for the sync to complete
  3. Your colors and spacing values are now available in Oxygen

Tip: Variables are prefixed with -- in CSS or {var- in Oxygen’s variable picker.

Step 3: Set Up Typography

Install the typography system with fluid font sizes:

  1. Click Install Typography
  2. The type scale is configured based on your design set
  3. Font sizes from text-xs to hero are now available

Optional Toggles in Step 3:

  • Fluid Text Sizing: Enable for smooth responsive font scaling using CSS clamp()
  • Fluid Spacing: Enable for responsive spacing values that scale with viewport

Step 4: Global Settings (Optional)

Configure additional global styles:

  • Enable or disable specific feature modules
  • Set default element styling
  • Configure integration options

Step 5: Selectors & On-Demand Classes

OxyMade uses an on-demand class system — classes are loaded into Oxygen’s store only when you need them, keeping the builder fast.

  1. The autocomplete dropdown will suggest OxyMade classes as you type in the class input
  2. The Fix Styling button scans all pages and restores any missing selectors
  3. Classes are automatically injected when you paste elements or when invalid tokens are detected

Tip: You can also click the wrench icon in the builder toolbar to fix missing classes on the current page.

Step 6: Register Components

Import pre-built components (optional):

  1. Click Register Components
  2. Select which components to import
  3. Components are now available in Oxygen’s element library

Verification

After completing setup, verify everything is working:

  1. Open Oxygen Builder on any page
  2. Add a new element
  3. In the class picker, you should see OxyMade collections
  4. Color variables should appear in color pickers

What’s Next?

Need Help?

If you encounter issues during setup, check our FAQ or report a bug.