Elementor

Elementor's visual system is a high-contrast monochrome stage where black and near-white alternate as the sole performers — no brand color claims the throne, just pure #000000 and #f6f6f6 pushed to 19:1 contrast ratios. The hero is a full-bleed moody lifestyle photograph with massive weight-900 Roobert headlines in white overlay, commanding attention through scale rather than color. Roobert's 'ss14' feature and tight negative letter-spacing (-0.02em at display sizes) give the type a compressed urgency. Black-filled CTA buttons and white-filled secondary buttons create the only color distinction on the page — the entire interactive vocabulary runs on this two-tone switch. Cards flip between pure black (#000000, 16px radius, 24px padding) and pure white (#ffffff, 16px radius, 48px/32px padding), creating a checkerboard depth without any shadow or elevation. Use Roobert 900 with letter-spacing -0.02em for all display headlines at 56px and above — never swap to a lighter weight for main hero text Apply 8px border-radius to all buttons and badges; apply 16px to all cards and large image containers Alternate section backgrounds strictly between #000000 and #f6f6f6/#ffffff — never use a third background color to break the binary rhythm Set white cards (padding 48px 32px) on black sections; set black cards (padding 24px) on white/light sections — always invert card color relative to section Keep all interactive focus to black-fill or white-fill buttons with 24px horizontal padding — no colored CTAs, no gradients on buttons Use #69727d for supporting body text and icon strokes — never use it for headings or primary navigation Apply fontFeatureSettings '"ss14"' whenever rendering Roobert to activate the intended alternate letterforms Never add box-shadow to any card, button, or navigation element — depth is created through surface color inversion, not elevation Never introduce a chromatic brand color (the CSS token pinks/magentas) into the main marketing page UI — these are reserved for product-feature illustration contexts only Never use weight 400 for headings at 32px and above — minimum weight for heading-sm and up is 600, display sizes require 900 Never set a card background that matches its parent section background — every card must contrast against its container (#fff on #000, #000 on #fff or #f6f6f6) Never use border-radius above 16px on interactive components or cards — the 160px pill radius is exclusive to image crops, not UI elements Never use #69727d or #a6a6a6 for button labels or CTA copy — these gray tones are body/meta text only, never interactive labels Never stack multiple black sections or multiple white sections consecutively — the alternating binary rhythm must be maintained across every section boundary