Dark Observability Pricing Section for Divi 5: Three-Tier Usage Plans

Pricing SaaS Dark

A dark-themed Divi 5 pricing section for observability and monitoring SaaS products. Three usage-based tiers (Hobby, Team, Scale) with feature lists and CTAs on a deep navy background.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Click to view the full page

Overview

The section opens on a deep navy canvas (#0b1020) with 100px vertical padding that scales down to 72px on tablet and 48px on mobile. A centered header block leads with a 13px uppercase Inter label in muted slate (#9aa4c0), then a 44px h2 headline constrained to 720px max-width, and a 640px-wide subheading paragraph — three stacked groups that create breathing room before the cards appear.

Below the header, three equal columns sit in a 24px-gap flex row. The outer two cards share a #151c33 background with a 1px #2a3558 border that shifts to near-white on hover. The center card breaks that rhythm entirely: a solid #7c9cff indigo fill makes it pop immediately, with all text flipped to dark #0b1020 for contrast. A small "Most popular" badge — dark-on-dark pill, 12px uppercase, 2px letter-spacing — floats above the plan name to direct the eye without competing with the price.

Each card is built with a consistent internal structure: a top group holds the plan name (h3, 22px, 600 weight), a one-line description, and a price block where the numeral and "per month" span sit on a flex baseline row. A dividing top-border group below grows to fill remaining card height via flexGrow, stacking three icon-and-text feature rows at 12px gap. Font Awesome checkmarks (15px) align to flex-start so they stay anchored to the first line of any longer feature copy. Each card closes with a full-width button at 14px vertical padding and 12px radius.

On tablet the three columns wrap to full width (24_24), and on phone the row switches to flexDirection: column so cards stack vertically. Price numerals step down from 44px to 40px (tablet) to 36px (phone), keeping the hierarchy readable without overflow.

What’s inside

Three-column layout using native `divi/column` modules with equal-width flex structure, 24px column gap, and `alignItems: stretch` so all cards reach the same height regardless of content
Highlighted center card with a solid `#7c9cff` indigo background and a dark-pill 'Most popular' badge built from a nested `divi/group` with its own background, border-radius, and uppercase text module
Per-card price block using a flex baseline row (`divi/group`) with separate `divi/text` modules for the numeral and the 'per month' label — allowing independent font sizing and color control
Three feature rows per card, each a horizontal `divi/group` pairing a `divi/icon` (Font Awesome checkmark, 15px) with a `divi/text` module, all anchored to `flex-start` for multi-line safety
Flexibly growing feature list area with a top-only 1px divider border, using `flexGrow/flexShrink` sizing so the feature block expands to fill card height and the CTA button always lands at the bottom
Section-level responsive padding: 100px desktop, 72px tablet, 48px phone — set directly on the `divi/section` decoration without custom CSS
Per-card hover border color transition on the two dark outer cards (border shifts to near-white `#f2f4fa`), plus button hover states that invert background and text color

Who it’s for

This section fits any SaaS product that charges by usage volume rather than seat count — observability platforms, log aggregators, analytics tools, API providers, and developer infrastructure services. It also works well for monitoring dashboards, data pipeline tools, and security products where event or data throughput is the meaningful unit of value. The three-tier Hobby/Team/Scale structure maps cleanly onto a freemium-to-enterprise funnel, making it a practical drop-in for any early-stage SaaS that needs to communicate clear upgrade milestones.

Customization tips

Start by updating the plan names (Hobby, Team, Scale) and the three feature rows inside each card — these carry the most product-specific information and the copy is short enough that one sentence per row is the safe limit before the icon misaligns. The price numerals are standalone text modules, so changing $0 / $49 / $249 is a single edit per card with no layout impact.

To retheme the palette, swap #0b1020 (section background) and #151c33 (card background) together as a pair — they are exactly 1 step apart in lightness, and preserving that gap keeps the card separation readable. The indigo highlight (#7c9cff) on the center card can be replaced with any brand accent; just confirm that dark text (#0b1020) passes contrast against it before publishing. The Inter font family is set module-by-module, so a global find-and-replace in the Divi visual builder is the fastest way to switch typefaces.

How to install this layout

Download the layout JSON file from this page.
Open the target page in the Divi 5 builder.
Open the portability panel (up/down arrows icon) and choose the Import tab.
Upload the JSON. Tick “replace existing content” only for full-page imports.
Check the page at desktop and mobile widths, then swap in your copy and images.

Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.

Questions about Dark Observability Pricing Section for Divi 5: Three-Tier Usage Plans

How do the cards behave on mobile?

The three-column row has `flexDirection: column` on phone, so cards stack vertically in order: Hobby, Team, Scale. Each column switches to `24_24` (full width) on both tablet and phone. The center highlight card keeps its indigo background, so it still reads as the featured tier when stacked.

What modules make up each pricing card?

Each card is a `divi/column` containing nested `divi/group`, `divi/heading`, `divi/text`, `divi/icon`, and `divi/button` modules — all native Divi 5 blocks, no third-party dependencies. There are no shortcodes, no custom HTML blocks, and no widgets.

Is there any imagery or background media in this section?

No. The section uses only solid color backgrounds — `#0b1020` on the section, `#151c33` on the two outer cards, and `#7c9cff` on the center card. There are no images, gradients, or videos to replace or optimize.

What should I edit first to adapt this for a different SaaS product?

Change the h2 headline and the subheading paragraph in the header block — they set the pricing philosophy ('Pay for signal, not seats.'). Then update the three feature rows per card with your actual plan limits. The plan names and price numerals are the last thing to touch, since they depend on getting the feature list right first.

Can I add a fourth pricing tier without breaking the layout?

Yes, but the row's `columnStructure` is set to `1_3,1_3,1_3` (three equal columns). Adding a fourth column requires changing that structure to `1_4,1_4,1_4,1_4` in the row's advanced settings. On tablet the columns already wrap, so the fourth card will naturally fall to a second row at full width.

How do I make the 'Most popular' badge appear on a different card?

The badge is a `divi/group` containing a single `divi/text` module, sitting inside the header group of the center (Team) column. Cut that group and paste it into the header group of whichever column you want to highlight, then update the highlighted column's background and text colors to match.

Which Divi version does this layout need?

Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.

Can I use this layout on client websites?

Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.