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.

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: 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?

Need Help?

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