Quick Start

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

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.

Step 1: Choose Your Design Set

Select a pre-configured design template to start with:

Click your preferred design set to continue.

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

Step 4: Global Settings (Optional)

Configure additional global styles:

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

Step 5: Sync Selectors

Register all CSS utility classes in Oxygen:

1. Click Sync Selectors
2. OxyMade’s utility classes are now available in Oxygen’s class picker
3. Classes are organized in collections for easy navigation

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?

• Learn about the Color Palette System
• Explore Typography options
• Understand Spacing utilities
• Dive into Grid & Flexbox layouts

Need Help?

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