Tag: css variables

In the age of component‑driven design, consistency is non‑negotiable. When a design system—like the one built for the WPCLONE project—is ported into WordPress, every detail matters: exact hex colors, font families, spacing units, border radii, and shadows. This post outlines best practices for preserving that fidelity across the entire theme.

Understanding the Core Elements

The WPCLONE design system defines:

• Palette: Primary #070D1A, Secondary #000314, Accent #0071A3.
• Typography: Sora for headings (64 px H1 down to 14 px labels) and Inter for body copy.
• Spacing Grid: 8 px increments for margins, paddings, and grid gutters.
• Borders & Shadows: 1 px borders, subtle shadows, border‑radius 4‑12 px.

Using CSS Custom Properties (Variables)

Define all core values as custom properties in style.css. This makes future updates straightforward and ensures that Elementor styles can reference the same variables.

:root {
  --color-primary: #070D1A;
  --color-secondary: #000314;
  --color-accent: #0071A3;
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --spacing-unit: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;
}

Applying Variables in Elementor

When building global widgets in Elementor, reference the variables with var(--color-primary) or var(--spacing-unit). This guarantees that any change to the design system propagates automatically.

Typography Management

WordPress themes usually rely on the theme.json file (since WordPress 5.8) for global typography settings. Include the following snippet:

{
  "settings": {
    "typography": {
      "fontFamilies": [
        { "fontFamily": "Sora", "slug": "sora" },
        { "fontFamily": "Inter", "slug": "inter" }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--font-body)"
    },
    "heading": {
      "fontFamily": "var(--font-heading)"
    }
  }
}

This ensures that Elementor’s heading widgets automatically pull the correct font family and sizing presets.

Spacing Consistency with Elementor Container Settings

Set the default container padding to calc(var(--spacing-unit) * 2) (16 px) and the gap between inner columns to var(--spacing-unit). This mirrors the original design’s 8 px grid.

Border and Shadow Standards

Create reusable CSS classes for common border and shadow patterns:

.border-1 { border: 1px solid var(--color-primary); }
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

Assign these classes to Elementor widgets via the “Advanced → CSS Classes” field.

Testing for Consistency

Use visual regression tools such as BackstopJS to compare the original React UI screenshots with the WordPress rendering. Flag any mismatches in color values, font sizes, or spacing and adjust the CSS variables accordingly.

Conclusion

By centralising design tokens in CSS variables, leveraging theme.json, and employing Elementor’s global widget system, you can faithfully recreate any modern design system inside WordPress. The result is a theme that feels native, is easy to maintain, and delivers the exact look and feel of the original site.