Design Guide

Live reference of named styles used across the site. Use these names when consolidating so you can pick one variant per pattern and refactor consistently.

Overview

This page is the design system. Every named style has a live preview and a reference block with exact classes and ids for copy-paste.

Sections: Colors, Typography, Buttons, Cards, Trusted by brands (component), Dark boxes, Badges, Inputs, Sections & heroes, Containers. Each preview shows a "Reference — classes / id" block with the exact classes and ids to use.

Colors

Brand and UI colors. Use these tokens for consistency.

om-orange (primary CTA)

#ED5A29

Reference — classes / id

h-14 rounded-lg — bg #ED5A29

om-purple

#7C10EE

Reference — classes / id

h-14 rounded-lg — bg #7C10EE

gray-900 (headings)

gray-900

Reference — classes / id

h-14 rounded-lg bg-gray-900

gray-600 (body)

gray-600

Reference — classes / id

h-14 rounded-lg bg-gray-600

Typography

Canonical heading scale H1–H5 (font sizes and weight). Use font-funnel for H1–H3 on marketing pages; H4–H5 can use font-funnel or default. Body and labels below.

H1 — Page title

Page title heading

Reference — classes / id

font-funnel font-bold text-4xl lg:text-5xl text-gray-900 (36px → 48px)

H2 — Section title

Section title heading

Reference — classes / id

font-funnel font-bold text-3xl lg:text-4xl text-gray-900 (30px → 36px)

H3 — Subsection / card title

Subsection or card title

Reference — classes / id

font-funnel font-bold text-2xl lg:text-3xl text-gray-900 (24px → 30px)

H4 — Small heading

Small heading

Reference — classes / id

font-funnel font-bold text-xl text-gray-900 (20px)

H5 — Smallest heading

Smallest heading

Reference — classes / id

font-funnel font-semibold text-lg text-gray-900 (18px)

H1 Hero Dark (on dark bg)

Popups, supercharged

Reference — classes / id

font-funnel font-semibold text-4xl md:text-5xl text-white leading-tight

H1 Hero Light

Proven optimization tactics

Reference — classes / id

text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 font-funnel leading-tight

Label Section (orange, uppercase)

Use case library

Reference — classes / id

text-sm font-medium tracking-wider uppercase text-[#ed5a29]

Lead Hero Light

Boost conversions with ready-made conversion optimization strategies.

Reference — classes / id

text-base md:text-lg text-gray-600 max-w-xl

Body / Body Small

Default body text. Secondary: text-gray-500.

Reference — classes / id

text-gray-600 text-sm (secondary: text-gray-500)

Buttons

Use the Button component for primary/secondary/ghost. Section CTAs (Show more, Check all) and hero variants listed below.

Button Primary

Reference — classes / id

Button variant=primary — bg-[#ed5a29] text-white rounded-lg

Button Secondary (border only)

Reference — classes / id

Button variant=secondary — border-2 border-[#ed5a29] text-[#ed5a29] rounded-lg

Button Ghost

Reference — classes / id

Button variant=ghost — text-[#ed5a29]

Button Hero Dark (white on dark)

Reference — classes / id

bg-white text-gray-900 font-medium px-6 py-3 rounded-xl hover:bg-white/90

Button Hero Ghost (glass on dark)

Reference — classes / id

bg-white/10 hover:bg-white/15 backdrop-blur-xl border-2 border-white/20 text-white px-6 py-3 rounded-xl

Button Ghost / Link style

Reference — classes / id

text-[#ed5a29] font-semibold hover:underline

Button Section CTA (Show more use cases)

Reference — classes / id

Button variant=secondary + group gap-2, arrow group-hover:translate-x-1

Pill Industry (Examples section tabs)

FashionBeautyTechnology

Reference — classes / id

Active:px-5 py-2.5 rounded-full text-sm font-medium bg-gray-900 text-white shadow-lg

Inactive:px-5 py-2.5 rounded-full text-sm font-medium glass-subtle text-gray-600

Cards & boxes

Card styles used across features, use cases, pricing, and CTAs.

Card Filter Panel

Filter by tags

Reference — classes / id

border border-gray-200 rounded-2xl shadow-sm bg-white p-5

Card Glass

Light glass panel (backdrop blur + border).

Reference — classes / id

glass rounded-2xl p-6 (globals.css .glass)

Box Glass Gradient (glass + corner orbs)

Glass panel with orange (top-right) and purple (bottom-left) gradient orbs. Use on home/popups examples block.

Reference — classes / id

box-glass-gradient glass-strong rounded-3xl p-6 (globals.css)

Card Use Cases (glass, hover purple shadow)

Image

Countdown Timers

Create urgency with dynamic countdown campaigns.

Learn more

Reference — classes / id

card-use-cases (globals.css) + aspect-[4/3] image, p-6 content

Card Results (sidebar card)

Expected results

Difficulty: Easy

Industry: Ecommerce

Reference — classes / id

bg-white/80 backdrop-blur-xl rounded-xl border border-gray-200/60 p-6 shadow-sm

Card CTA Peach

Want us to set this up for you?

Book a call with our CRO specialists.

Reference — classes / id

rounded-3xl p-6 bg-gradient-to-br from-[#FFF7F2] to-[#FFEEE5]

Card Content Block

Agency packages

Manage several clients? Talk to our team for a custom plan.

Reference — classes / id

border border-gray-200 rounded-2xl overflow-hidden shadow-sm bg-white

Card Integration tile

Logo

Reference — classes / id

bg-white rounded-xl h-20 flex items-center justify-center shadow-sm border border-gray-100 hover:shadow-md transition-shadow p-6

Section box Integrations (gray rounded)

Integrations

Gray rounded section wrapper.

Reference — classes / id

bg-gray-50 rounded-[40px] p-8 md:p-16 relative

Trusted by brands (component)

Logo marquee only: horizontal scrolling logos with gradient fade edges. Use block id trusted-by-brands on the homepage and pricing page.

Block Trusted by brands — live preview

Reference — classes / id

Section:id="trusted-by-brands"mt-20

Viewport:relative overflow-hidden max-w-[1200px] mx-auto

Left fade:absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-white to-transparent z-10

Right fade:absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-white to-transparent z-10

Track:flex w-max

Logo group (each copy):flex items-center gap-12 pr-12 shrink-0 animate-marquee-trusted-by will-change-transform

Logo img:max-w-[200px] w-auto h-auto object-contain shrink-0

Animation: animate-marquee-trusted-by (65s, translateX -100% per copy). Gradients: from-white to-transparent on pricing page; here from-gray-50 to match preview background.

Dark boxes & sections

All dark-background section wrappers and cards.

Section Dark 'Popups built to convert' (wrapper)

Popups built to convert

Purple-tinted dark gradient strip. FeaturesSection.

Reference — classes / id

rounded-3xl overflow-hidden bg-gradient-to-br from-[#1a1625] via-[#1e1b2e] to-[#18181b] boxShadow: 0 8px 20px rgba(0,0,0,0.15)

Card Dark Feature (glass) – inner card

A/B testing

Title + image. FeaturesSection card.

Reference — classes / id

rounded-3xl overflow-hidden p-6 background: rgba(39,39,42,0.6) backdrop-blur border border-purple-200/20

Section Dark 'More features to discover' (wrapper)

More features to discover

Feature detail pages bottom strip.

Reference — classes / id

rounded-2xl overflow-hidden bg-gradient-to-b from-[#111827] to-[#1f2937]

Card Dark 'More features' – inner card

Smart Editor

Icon + title + description + Learn more.

Learn more →

Reference — classes / id

rounded-2xl p-6 backdrop-blur-xl bg-white/10 border border-white/10 hover:border-om-orange/50

Card Problem (dark)

How acquisition works now

Sophisticated, fast, AI-powered

ProblemSection left column.

Reference — classes / id

bg-gray-900 rounded-2xl p-10 relative overflow-hidden + orange blur orb

Card Dark 'Manual way' (AiPopups)

The Manual Way

AiPopupsContent comparison column.

Reference — classes / id

rounded-2xl p-8 bg-white/5 backdrop-blur-sm border border-white/10

Card Dark 'AI way' (AiPopups)

The AI way

AiPopupsContent comparison column.

Reference — classes / id

rounded-2xl p-8 bg-gradient-to-br from-om-purple/20 to-om-orange/20 backdrop-blur-md border border-white/20

Badges & tags

Pills and small labels for categories, difficulty, and metrics.

Badge Orange Pill

Use case name

Reference — classes / id

px-4 py-1.5 rounded-full bg-[#ED5A29]/10 text-[#ED5A29] font-medium text-sm border border-[#ED5A29]/20

Badge Dark Pill (on dark)

Smart A/B Testing

Reference — classes / id

px-4 py-2 rounded-full bg-white/10 border border-white/20 text-white uppercase

Tag Difficulty

Easy

Reference — classes / id

px-2 py-0.5 bg-gray-100 text-[10px] font-medium text-gray-500 rounded-full border border-gray-200

Tag Metric (result)

+21% conversions

Reference — classes / id

bg-[#2CC896] text-white text-lg font-bold px-4 py-2 rounded-lg

Tag Blog category

CRO

Reference — classes / id

bg-om-orange/10 text-om-orange text-sm font-semibold px-4 py-1.5 rounded-full

Tag Featured (solid orange)

Featured

Reference — classes / id

bg-om-orange text-white text-xs font-semibold px-3 py-1.5 rounded-full

Label Section (text only, uppercase)

Integrations

Reference — classes / id

text-om-orange font-bold tracking-wider text-sm block uppercase

Inputs

Search, URL input, and form controls.

Input Search

Reference — classes / id

rounded-xl border border-gray-200 px-3 py-2 text-sm focus:border-[#ed5a29] focus:ring-2 focus:ring-[#ed5a29]/20

Input Hero Dark (mock)

Reference — classes / id

backdrop-blur-2xl bg-black/40 border border-white/10 rounded-[28px] (hero URL input)

Sections & heroes

Background and layout patterns for hero and content sections.

Hero Light Gradient (strip)

Page title

Soft gradient strip for use-case detail, pricing hero.

Reference — classes / id

rounded-2xl bg-gradient-to-b from-[#F5F5F4] to-white

Hero Library (icon + title + subtitle)

Use case library

Proven optimization tactics

Boost conversions with ready-made strategies.

Reference — classes / id

rounded-2xl bg-gradient-to-b from-gray-100 to-white pt-40 pb-8

Section White / Section Gray

Section White

Section Gray

Reference — classes / id

White:bg-white

Gray:bg-gray-50

Containers

Max-width and padding for content. Prefer Container Main everywhere.

Container Main (max-w-7xl)

max-w-7xl mx-auto px-4 sm:px-6 lg:px-8

Reference — classes / id

max-w-7xl mx-auto px-4 sm:px-6 lg:px-8

Container Narrow (max-w-4xl)

max-w-4xl mx-auto px-4 — for hero text, narrow content

Reference — classes / id

max-w-4xl mx-auto px-4 (or max-w-5xl)