Elementor

# Elementor — Style Reference
> High-stakes monochrome printing press — a system where black and white do all the heavy lifting, Roobert's compressed weight-900 headlines stamped like bold ink on paper.
Theme: light

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.

## Colors
| Name | Value | Role |
|------|-------|------|
| Press Black | `#000000` | Primary text, nav borders, button fills, card backgrounds, footer — the single dominant ink color driving the entire system's contrast logic |
| Charcoal Ink | `#212121` | Body copy, secondary headings, list items — one step off pure black for long-form text |
| Blank Canvas | `#ffffff` | Card backgrounds, button fills (secondary), icon fills — the pure white counterpart to Press Black |
| Fog Sheet | `#f6f6f6` | Page section backgrounds, hero overlay text, badge fills — the off-white that softens full-white sections |
| Ash Border | `#d1d1d1` | Nav dividers, separator lines |
| Slate Text | `#a6a6a6` | Muted link text, de-emphasized body labels |
| Steel Gray | `#69727d` | Body text, icon strokes, link defaults — mid-gray for supporting content hierarchy |
| Deep Void | `#0c0d0` | Near-black nav text, alternate heading color |
| Pixel Blush | `#FFB8E5` | Token-defined accent — appears as CSS variable; reserved for product-feature highlights and gradient transitions |
| Neon Loop | `#ED01EE` | Token-defined vivid accent — CSS variable; reserved for on-brand product UI illustrations and feature callouts |
| Codeberry | `#620856` | Token-defined dark magenta — CSS variable; reserved for deep accent backgrounds in product feature sections |

## Typography
| Family | Role |
|--------|------|
| Roobert | The site's entire typographic identity. Weight 900 at 56–88px drives hero headlines — the extreme weight creates impact that substitutes for color. Negative letter-spacing (-0.02em at display, -0.01em at subheading) compresses letterforms into a dense, printed-matter feel. 'ss14' feature setting activates alternate letterforms. Used for headings, nav, buttons, badges, body at every weight. |
| Times | System serif fallback — appears in nav, body, and footer contexts. Likely a browser fallback for edge cases rather than an intentional brand serif. Not a signature choice. |