UI Examples

This guide provides practical examples of building common UI patterns using OxyMade’s utility classes and built-in elements.

Buttons

OxyMade Button Element

OxyMade includes a dedicated Button Element in the builder that provides a GUI for creating buttons with all OxyMade styling options.

To add an OxyMade button:

Open Oxygen Builder on any page
Add a new element
Find OxyMade Button in the element library
Configure using the GUI controls

Button Controls

The OxyMade Button element provides these configuration options:

Control	Options
Label	Button text
Link	URL and target settings
Icon	Optional icon with left/right placement
Size	Small, Medium, Large
Color	Black, Primary, Secondary, Tertiary, Accent, White
Style	Default (solid), Outline, Text link, Light shade
Border Radius	9 options from none to fully rounded
Fullwidth	Breakpoint selector for responsive full-width

Button Styles

Default (Solid) - Filled background with contrasting text

Best for primary actions
High visual prominence

Outline - Transparent background with colored border

Best for secondary actions
Pairs well with solid buttons

Text Link - No background or border

Best for tertiary actions
Minimal visual weight
Optional horizontal padding toggle

Light Shade - Subtle background tint

Best for softer call-to-actions
Uses the color’s surface shade

Using Utility Classes

You can also create buttons manually using utility classes:

<a class="bg-base-primary text-white px-6 py-3 rounded-md font-medium">
  Get Started
</a>

<a class="border-primary text-primary px-6 py-3 rounded-md font-medium surface-primary">
  Learn More
</a>

Button Group

<div class="flex gap-4">
  <a class="bg-base-primary text-white px-6 py-3 rounded-md font-medium">Primary</a>
  <a class="border-neutral text-neutral px-6 py-3 rounded-md font-medium">Secondary</a>
</div>

Cards

Basic Card

<div class="surface-neutral border-neutral rounded-lg p-6 shadow-sm">
  <h3 class="h4 heading-neutral mb-2">Card Title</h3>
  <p class="text-neutral text-base">Card description text goes here.</p>
</div>

Feature Card with Icon

<div class="surface-neutral border-neutral rounded-xl p-8 shadow-md">
  <div class="bg-primary rounded-lg p-4 w-1by6 mb-6 centered">
    <svg class="text-white">...</svg>
  </div>
  <h3 class="h4 heading-neutral mb-3">Feature Title</h3>
  <p class="text-neutral text-base mb-4">Feature description that explains the benefit.</p>
  <a class="text-primary font-medium flex gap-2">
    Learn more <svg>→</svg>
  </a>
</div>

Horizontal Card

<div class="grid grid-cols-3 gap-6 surface-neutral border-neutral rounded-xl overflow-hidden shadow-md lg-grid-cols-1">
  <div class="col-span-1 bg-cover bg-center h-full" style="background-image: url(...)"></div>
  <div class="col-span-2 p-8 lg-col-span-1">
    <span class="text-xs text-primary font-semibold tracking-wide">CATEGORY</span>
    <h3 class="h3 heading-neutral mt-2 mb-4">Card Headline</h3>
    <p class="text-neutral text-base">Description text goes here...</p>
  </div>
</div>

Pricing Card

<div class="surface-neutral border-neutral rounded-2xl p-8 shadow-lg centered">
  <span class="text-sm text-muted-neutral font-medium">Pro Plan</span>
  <div class="my-6">
    <span class="text-5xl font-bold heading-neutral">$49</span>
    <span class="text-muted-neutral">/month</span>
  </div>
  <ul class="space-y-4 mb-8 text-neutral">
    <li class="flex gap-3">
      <svg class="text-secondary">✓</svg>
      <span>Unlimited projects</span>
    </li>
    <li class="flex gap-3">
      <svg class="text-secondary">✓</svg>
      <span>Priority support</span>
    </li>
    <li class="flex gap-3">
      <svg class="text-secondary">✓</svg>
      <span>Advanced analytics</span>
    </li>
  </ul>
  <a class="bg-base-primary text-white px-8 py-4 rounded-lg font-medium w-full centered">
    Get Started
  </a>
</div>

<header class="flex justify-between items-center px-6 py-4 surface-neutral border-b">
  <a class="h4 heading-neutral font-bold">Logo</a>
  <nav class="flex gap-8 md-hidden">
    <a class="text-neutral font-medium">Home</a>
    <a class="text-muted-neutral font-medium">Features</a>
    <a class="text-muted-neutral font-medium">Pricing</a>
    <a class="text-muted-neutral font-medium">Contact</a>
  </nav>
  <a class="bg-base-primary text-white px-5 py-2 rounded-md font-medium md-hidden">
    Sign Up
  </a>
</header>

<header class="flex justify-between items-center px-8 py-5 bg-base-white">
  <nav class="flex gap-6 lg-hidden">
    <a class="text-neutral font-medium">Products</a>
    <a class="text-muted-neutral">Solutions</a>
  </nav>
  <a class="h3 heading-neutral font-bold">Brand</a>
  <div class="flex gap-4 items-center lg-hidden">
    <a class="text-neutral font-medium">Login</a>
    <a class="bg-base-primary text-white px-5 py-2 rounded-md">Get Started</a>
  </div>
</header>

<nav class="flex gap-2 items-center text-sm">
  <a class="text-muted-neutral">Home</a>
  <span class="text-muted-neutral">/</span>
  <a class="text-muted-neutral">Products</a>
  <span class="text-muted-neutral">/</span>
  <span class="text-neutral font-medium">Current Page</span>
</nav>

Layouts

Hero Section

<section class="section-py-xl px-6 bg-neutral centered">
  <div class="max-w-3xl mx-auto">
    <span class="bg-primary text-white text-xs font-semibold px-4 py-2 rounded-full mb-6 inline-block">
      New Release
    </span>
    <h1 class="hero heading-neutral mb-6">
      Build Websites<br>10x Faster
    </h1>
    <p class="text-xl text-muted-neutral mb-10 max-w-prose mx-auto">
      A complete design system for Oxygen Builder. Get colors, typography,
      spacing, and utility classes out of the box.
    </p>
    <div class="flex gap-4 justify-center md-vertical">
      <a class="bg-base-primary text-white px-8 py-4 rounded-lg font-medium">
        Get Started
      </a>
      <a class="border-neutral text-neutral px-8 py-4 rounded-lg font-medium">
        View Demo
      </a>
    </div>
  </div>
</section>

Split Hero (Image + Text)

<section class="grid grid-cols-2 gap-16 items-center section-py-lg px-8 lg-grid-cols-1 lg-vertical">
  <div class="space-y-6 lg-order-2">
    <h1 class="h1 heading-neutral">Design System for Modern Websites</h1>
    <p class="text-lg text-muted-neutral">
      Everything you need to build beautiful websites with Oxygen Builder.
    </p>
    <div class="flex gap-4">
      <a class="bg-base-primary text-white px-6 py-3 rounded-md font-medium">Start Free</a>
      <a class="text-primary font-medium flex items-center gap-2">Watch Demo →</a>
    </div>
  </div>
  <div class="rounded-2xl overflow-hidden shadow-xl lg-order-1">
    <img src="..." class="w-full h-full object-cover">
  </div>
</section>

Three Column Feature Grid

<section class="section-py-lg px-6">
  <div class="max-w-6xl mx-auto">
    <div class="centered mb-16">
      <h2 class="h2 heading-neutral mb-4">Everything You Need</h2>
      <p class="text-lg text-muted-neutral max-w-2xl mx-auto">
        A complete toolkit for building modern websites.
      </p>
    </div>
    <div class="grid grid-cols-3 gap-8 lg-grid-cols-2 md-grid-cols-1">
      <!-- Feature 1 -->
      <div class="p-8 surface-neutral rounded-xl border-neutral">
        <div class="bg-primary rounded-lg p-3 w-12 h-12 centered mb-6">
          <svg class="text-white">...</svg>
        </div>
        <h3 class="h4 heading-neutral mb-3">Color System</h3>
        <p class="text-neutral">Advanced palette with 60+ variables.</p>
      </div>
      <!-- Feature 2 -->
      <div class="p-8 surface-neutral rounded-xl border-neutral">
        <div class="bg-secondary rounded-lg p-3 w-12 h-12 centered mb-6">
          <svg class="text-white">...</svg>
        </div>
        <h3 class="h4 heading-neutral mb-3">Typography</h3>
        <p class="text-neutral">Fluid type scale with responsive sizes.</p>
      </div>
      <!-- Feature 3 -->
      <div class="p-8 surface-neutral rounded-xl border-neutral">
        <div class="bg-tertiary rounded-lg p-3 w-12 h-12 centered mb-6">
          <svg class="text-white">...</svg>
        </div>
        <h3 class="h4 heading-neutral mb-3">Spacing</h3>
        <p class="text-neutral">Consistent scale for perfect rhythm.</p>
      </div>
    </div>
  </div>
</section>

<div class="grid grid-66-33 gap-12 lg-grid-cols-1">
  <main class="space-y-8">
    <article class="surface-neutral border-neutral rounded-xl p-8">
      <h2 class="h2 heading-neutral mb-4">Article Title</h2>
      <p class="text-neutral text-lg">Article content goes here...</p>
    </article>
  </main>
  <aside class="space-y-6 lg-order-first">
    <div class="surface-neutral border-neutral rounded-xl p-6 sticky sticky-md">
      <h3 class="h5 heading-neutral mb-4">Sidebar Widget</h3>
      <ul class="space-y-3">
        <li><a class="text-neutral">Link One</a></li>
        <li><a class="text-neutral">Link Two</a></li>
        <li><a class="text-neutral">Link Three</a></li>
      </ul>
    </div>
  </aside>
</div>

Lists & Content

Feature List with Icons

<ul class="space-y-6">
  <li class="flex gap-4">
    <div class="bg-secondary rounded-full p-2 flex-none">
      <svg class="text-white w-5 h-5">✓</svg>
    </div>
    <div>
      <h4 class="h5 heading-neutral mb-1">Feature Name</h4>
      <p class="text-muted-neutral">Brief description of this feature.</p>
    </div>
  </li>
  <li class="flex gap-4">
    <div class="bg-secondary rounded-full p-2 flex-none">
      <svg class="text-white w-5 h-5">✓</svg>
    </div>
    <div>
      <h4 class="h5 heading-neutral mb-1">Another Feature</h4>
      <p class="text-muted-neutral">Brief description of this feature.</p>
    </div>
  </li>
</ul>

Stats Row

<div class="grid grid-cols-4 gap-8 py-12 border-t border-b lg-grid-cols-2 sm-grid-cols-1">
  <div class="centered">
    <span class="text-4xl font-bold text-primary">500+</span>
    <span class="text-sm text-muted-neutral mt-2 block">Utility Classes</span>
  </div>
  <div class="centered">
    <span class="text-4xl font-bold text-primary">60+</span>
    <span class="text-sm text-muted-neutral mt-2 block">CSS Variables</span>
  </div>
  <div class="centered">
    <span class="text-4xl font-bold text-primary">4</span>
    <span class="text-sm text-muted-neutral mt-2 block">Design Sets</span>
  </div>
  <div class="centered">
    <span class="text-4xl font-bold text-primary">100%</span>
    <span class="text-sm text-muted-neutral mt-2 block">Responsive</span>
  </div>
</div>

Testimonial Card

<div class="surface-neutral rounded-2xl p-8 shadow-md">
  <div class="flex gap-1 mb-4 text-tertiary">
    ★ ★ ★ ★ ★
  </div>
  <blockquote class="text-lg text-neutral mb-6">
    "OxyMade has completely transformed how I build websites with Oxygen.
    The utility classes save hours of work on every project."
  </blockquote>
  <div class="flex gap-4 items-center">
    <img src="..." class="w-12 h-12 rounded-full object-cover">
    <div>
      <p class="font-semibold heading-neutral">Jane Smith</p>
      <p class="text-sm text-muted-neutral">Web Developer</p>
    </div>
  </div>
</div>

Forms

Basic Form Input

<div class="space-y-2">
  <label class="text-sm font-medium text-neutral">Email Address</label>
  <input type="email" class="w-full px-4 py-3 border-neutral rounded-lg text-neutral surface-neutral">
</div>

Form with Labels

<form class="space-y-6 max-w-md">
  <div class="space-y-2">
    <label class="text-sm font-medium heading-neutral">Full Name</label>
    <input type="text" class="w-full px-4 py-3 border-neutral rounded-lg surface-neutral text-neutral">
  </div>
  <div class="space-y-2">
    <label class="text-sm font-medium heading-neutral">Email</label>
    <input type="email" class="w-full px-4 py-3 border-neutral rounded-lg surface-neutral text-neutral">
  </div>
  <div class="space-y-2">
    <label class="text-sm font-medium heading-neutral">Message</label>
    <textarea rows="4" class="w-full px-4 py-3 border-neutral rounded-lg surface-neutral text-neutral"></textarea>
  </div>
  <button class="w-full bg-base-primary text-white py-4 rounded-lg font-medium">
    Send Message
  </button>
</form>

<div class="flex gap-3 max-w-lg md-vertical">
  <input type="email" placeholder="Enter your email"
         class="flex-1 px-4 py-3 border-neutral rounded-lg surface-neutral text-neutral">
  <button class="bg-base-primary text-white px-6 py-3 rounded-lg font-medium flex-none">
    Subscribe
  </button>
</div>

Badges & Tags

Simple Badge

<span class="bg-primary text-white text-xs font-semibold px-3 py-1 rounded-full">
  New
</span>

Status Badges

<div class="flex gap-2">
  <span class="bg-secondary text-white text-xs font-medium px-3 py-1 rounded-full">Active</span>
  <span class="bg-tertiary text-white text-xs font-medium px-3 py-1 rounded-full">Pending</span>
  <span class="bg-accent text-white text-xs font-medium px-3 py-1 rounded-full">Urgent</span>
  <span class="bg-neutral text-white text-xs font-medium px-3 py-1 rounded-full">Inactive</span>
</div>

Outline Tags

<div class="flex gap-2 flex-wrap">
  <span class="border-primary text-primary text-xs font-medium px-3 py-1 rounded-full">Design</span>
  <span class="border-secondary text-secondary text-xs font-medium px-3 py-1 rounded-full">Development</span>
  <span class="border-tertiary text-tertiary text-xs font-medium px-3 py-1 rounded-full">Marketing</span>
</div>

<footer class="section-py-md px-6 bg-base-black">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-4 gap-8 mb-12 lg-grid-cols-2 sm-grid-cols-1">
      <div>
        <h3 class="h4 text-white mb-4">Brand</h3>
        <p class="text-muted-neutral text-sm">Building better websites, faster.</p>
      </div>
      <div>
        <h4 class="text-sm font-semibold text-white mb-4">Product</h4>
        <ul class="space-y-2 text-sm text-muted-neutral">
          <li><a>Features</a></li>
          <li><a>Pricing</a></li>
          <li><a>Documentation</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-sm font-semibold text-white mb-4">Company</h4>
        <ul class="space-y-2 text-sm text-muted-neutral">
          <li><a>About</a></li>
          <li><a>Blog</a></li>
          <li><a>Contact</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-sm font-semibold text-white mb-4">Legal</h4>
        <ul class="space-y-2 text-sm text-muted-neutral">
          <li><a>Privacy</a></li>
          <li><a>Terms</a></li>
        </ul>
      </div>
    </div>
    <div class="border-t pt-8 flex justify-between items-center md-vertical md-gap-4">
      <p class="text-sm text-muted-neutral">© 2025 Brand. All rights reserved.</p>
      <div class="flex gap-4">
        <a class="text-muted-neutral">Twitter</a>
        <a class="text-muted-neutral">GitHub</a>
        <a class="text-muted-neutral">Discord</a>
      </div>
    </div>
  </div>
</footer>

Responsive Patterns

Card Grid (Responsive)

<div class="grid grid-cols-4 gap-6 xl-grid-cols-3 lg-grid-cols-2 sm-grid-cols-1">
  <div class="surface-neutral border-neutral rounded-lg p-6">Card 1</div>
  <div class="surface-neutral border-neutral rounded-lg p-6">Card 2</div>
  <div class="surface-neutral border-neutral rounded-lg p-6">Card 3</div>
  <div class="surface-neutral border-neutral rounded-lg p-6">Card 4</div>
</div>

Stack on Mobile

<div class="flex gap-8 md-vertical md-gap-4">
  <div class="w-1by2 md-w-full">Left column</div>
  <div class="w-1by2 md-w-full">Right column</div>
</div>

Reverse Order on Mobile

<div class="grid grid-cols-2 gap-8 lg-grid-cols-1">
  <div class="lg-order-2">Content (shows first on desktop)</div>
  <div class="lg-order-1">Image (shows first on mobile)</div>
</div>

Hide/Show Elements

<div class="flex items-center gap-4">
  <!-- Desktop navigation - hidden on mobile -->
  <nav class="flex gap-6 md-hidden">
    <a>Home</a>
    <a>About</a>
    <a>Contact</a>
  </nav>

  <!-- Mobile menu button - only shown on mobile -->
  <button class="hidden md-flex">
    <svg>Menu</svg>
  </button>
</div>

Utility Combinations

Centered Everything

<div class="flex centered h-screen">
  <div class="max-w-md centered">
    <h1 class="h1">Centered Content</h1>
    <p class="text-muted-neutral">Both horizontally and vertically.</p>
  </div>
</div>

<aside class="sticky sticky-md">
  <div class="surface-neutral rounded-xl p-6 border-neutral">
    Sticky content that stays visible while scrolling
  </div>
</aside>

Full-Width Breakout

<section class="breakout-100 bg-primary py-20">
  <div class="max-w-6xl mx-auto px-6 text-white centered">
    <h2 class="h2">Full-width section that breaks out of container</h2>
  </div>
</section>

Image Scroller Effect

<div class="image-scroller rounded-xl shadow-lg h-64"
     style="background-image: url(your-tall-image.jpg)">
  <!-- Image scrolls from top to bottom on hover -->
</div>

Quick Reference

Common Class Combinations

Purpose	Classes
Primary button	`bg-base-primary text-white px-6 py-3 rounded-md font-medium`
Card container	`surface-neutral border-neutral rounded-xl p-6 shadow-sm`
Section padding	`section-py-lg px-6`
Centered content	`flex centered` or `centered`
Max width + center	`max-w-6xl mx-auto`
Responsive grid	`grid grid-cols-3 lg-grid-cols-2 sm-grid-cols-1 gap-6`
Stack on mobile	`flex gap-6 md-vertical`

Breakpoint Quick Reference

Prefix	Max Width	Use For
(none)	All sizes	Base/mobile styles
`sm-`	479px	Phone portrait
`md-`	767px	Phone landscape
`lg-`	1023px	Tablet portrait
`xl-`	1119px	Tablet landscape