Variables
Colors, corner radii and spacing live in Elementor's own variables. Brand presets set the colors in one step, Dark Mode switches them, and every class that uses a variable follows when you change it.
34 variables tie it together
Nori's classes are built on Elementor variables. Change primary-np once and every button follows. Change size-gap-m-np and every medium gap on the site updates.
Colors
11 · free Elementorprimary-np#111827secondary-np#4B5563text-np#111827accent-np#D6FF00on-accent-np#111827background-np#FFFFFFsurface-np#F8F9FAline-np#E2E3E5muted-np#5D626Cband-np#111827on-band-np#FFFFFFBorder radius
7 · Elementor Prosharp-np0pxxs-np6pxsoft-np8pxs-np14pxm-np24pxl-np45pxpill-np9999pxSpacing
16 · Elementor ProGaps
Padding
Section spacing
Side gutter
- Desktop follows the variable. A class like
gap-m-npusessize-gap-m-npon desktop, so the design stays consistent everywhere. - Tablet and mobile keep their own numbers. Smaller screens can step down without touching the variable.
- Classes bring their variables. Add a class and Nori adds the variables it uses, and tells you which ones before you save.
- Deleting a variable never breaks a class. The class keeps the value and shows as edited. Reset it to reconnect.
Without Elementor Pro, Elementor has no size variables, so radius and spacing classes simply use their numbers. Module settings become variables too: colors on any site, sizes and timings with Pro.