Get Started

CSS Variables Reference

Complete reference for all CSS variables provided by OxyMade.

This reference documents all CSS variables provided by OxyMade’s design system.

Color Variables

Primary Color

VariableDescription
--primaryBase primary color
--bg-primaryPrimary background (50)
--surface-primaryPrimary surface (100)
--subtle-primaryPrimary subtle (200)
--border-primaryPrimary border (300)
--muted-primaryPrimary muted (400)
--hover-primaryPrimary hover (600)
--text-primaryPrimary text (700)
--active-primaryPrimary active (800)
--heading-primaryPrimary heading (900)
--dark-primaryPrimary dark (950)

Secondary Color

VariableDescription
--secondaryBase secondary color
--bg-secondarySecondary background (50)
--surface-secondarySecondary surface (100)
--subtle-secondarySecondary subtle (200)
--border-secondarySecondary border (300)
--muted-secondarySecondary muted (400)
--hover-secondarySecondary hover (600)
--text-secondarySecondary text (700)
--active-secondarySecondary active (800)
--heading-secondarySecondary heading (900)
--dark-secondarySecondary dark (950)

Tertiary Color

VariableDescription
--tertiaryBase tertiary color
--bg-tertiaryTertiary background (50)
--surface-tertiaryTertiary surface (100)
--subtle-tertiaryTertiary subtle (200)
--border-tertiaryTertiary border (300)
--muted-tertiaryTertiary muted (400)
--hover-tertiaryTertiary hover (600)
--text-tertiaryTertiary text (700)
--active-tertiaryTertiary active (800)
--heading-tertiaryTertiary heading (900)
--dark-tertiaryTertiary dark (950)

Accent Color

VariableDescription
--accentBase accent color
--bg-accentAccent background (50)
--surface-accentAccent surface (100)
--subtle-accentAccent subtle (200)
--border-accentAccent border (300)
--muted-accentAccent muted (400)
--hover-accentAccent hover (600)
--text-accentAccent text (700)
--active-accentAccent active (800)
--heading-accentAccent heading (900)
--dark-accentAccent dark (950)

Neutral Color

VariableDescription
--neutralBase neutral color
--bg-neutralNeutral background (50)
--surface-neutralNeutral surface (100)
--subtle-neutralNeutral subtle (200)
--border-neutralNeutral border (300)
--muted-neutralNeutral muted (400)
--hover-neutralNeutral hover (600)
--text-neutralNeutral text (700)
--active-neutralNeutral active (800)
--heading-neutralNeutral heading (900)
--dark-neutralNeutral dark (950)

Base Colors

VariableDescription
--base-whiteWhite (#ffffff)
--base-blackBlack (#101010)

RGB Values

For use with rgba():

VariableDescription
--primary-rgb-valsPrimary RGB values
--secondary-rgb-valsSecondary RGB values
--tertiary-rgb-valsTertiary RGB values
--accent-rgb-valsAccent RGB values
--neutral-rgb-valsNeutral RGB values
--base-white-rgb-valsWhite RGB values
--base-black-rgb-valsBlack RGB values

Usage:

.overlay {
  background: rgba(var(--primary-rgb-vals), 0.5);
}

Spacing Variables

Numeric Scale

VariableTypical Value
--s10.25rem
--s20.5rem
--s30.75rem
--s41rem
--s51.25rem
--s61.5rem
--s71.75rem
--s82rem
--s92.25rem
--s102.5rem
--s123rem
--s143.5rem
--s164rem
--s205rem
--s246rem
--s287rem
--s328rem
--s369rem
--s4010rem
--s4411rem
--s4812rem
--s5614rem
--s6416rem
--s7218rem

Section Spacing

VariableDescription
--ss-noneNo spacing (0)
--ss-xxsExtra extra small
--ss-xsExtra small
--ss-smSmall
--ss-mdMedium
--ss-lgLarge
--ss-xlExtra large
--ss-xxlExtra extra large

Border Radius Variables

VariableDescription
--radius-smSmall radius
--radius-mdMedium radius
--radius-lgLarge radius
--radius-xlExtra large
--radius-2xl2x large
--radius-3xl3x large
--radius-fullFully rounded (9999px)

Typography Variables

Font Sizes

VariableDescription
--text-xsExtra small
--text-smSmall
--text-baseBase/body
--text-lgLarge
--text-xlExtra large
--text-2xl2x large
--text-3xl3x large
--text-4xl4x large
--text-5xl5x large
--text-6xl6x large
--text-7xl7x large
--text-heroHero size

Font Weights

VariableValue
--font-normal400
--font-medium500
--font-semibold600
--font-bold700

Using Variables

In CSS

.card {
  background: var(--surface-neutral);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-lg);
  padding: var(--s6);
}

.card-title {
  color: var(--heading-neutral);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.button-primary {
  background: var(--primary);
  padding: var(--s3) var(--s6);
  border-radius: var(--radius-md);
}

.button-primary:hover {
  background: var(--hover-primary);
}

In Oxygen

Use the {var- prefix in Oxygen’s input fields:

{var-primary}
{var-s8}
{var-radius-lg}
{var-text-lg}

With calc()

Combine variables with calc():

.element {
  padding: calc(var(--s4) * 2);
  margin-bottom: calc(var(--s8) + var(--s2));
}

With rgba()

Use RGB variables for transparency:

.overlay {
  background: rgba(var(--primary-rgb-vals), 0.8);
}

.shadow {
  box-shadow: 0 4px 12px rgba(var(--neutral-rgb-vals), 0.15);
}

Variable Naming Convention

Pattern

--[shade]-[color]
--[utility]-[size]

Colors

  • Base: --primary, --secondary, etc.
  • With shade: --bg-primary, --hover-secondary, etc.

Spacing

  • Numeric: --s1, --s2, etc.
  • Semantic: --ss-sm, --ss-lg, etc.

Typography

  • Sizes: --text-sm, --text-lg, etc.
  • Weights: --font-bold, --font-medium, etc.

Default Values

Default values depend on your selected design set. See Design Sets for specific values.

Layers Design Set (Default)

:root {
  --primary: #6366f1;
  --secondary: #10b981;
  --tertiary: #f59e0b;
  --accent: #ec4899;
  --neutral: #71717a;
  --base-white: #ffffff;
  --base-black: #101010;
}

Customizing Variables

Via OxyMade Settings

  1. Go to OxyMade settings
  2. Adjust color palette
  3. Save and sync with Oxygen

Via Custom CSS

Override variables in your custom CSS:

:root {
  --primary: #your-color;
}

Note: Custom CSS overrides will be lost if you re-sync with Replace mode.