Brutalist Print Shop Pricing Section for Divi 5: Three-Tier Print Runs

Pricing E-commerce Bold

Bold brutalist pricing layout for risograph print shops. Three-tier cards (Zine, Small Press, Big Batch) with per-run pricing, feature checklists, and stark black-border CTA buttons. Ready to import into Divi 5.

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

This pricing section earns its brutalist label through deliberate restraint: a warm parchment background (#e8e4da) holds three equal-width columns, each framed by a 4px solid border with zero border-radius — no softening, no rounding. The section padding scales from 64px on desktop down to 32px on mobile, letting the cards breathe without ever going airy. Within each card, a 2px hairline rule divides the price header from the features list below, a quiet structural decision that keeps the eye moving downward without resorting to dividers or icons for decoration.

Typography carries most of the personality. The section headline is set in Archivo Black at 44px with -1px letter-spacing and forced uppercase — it reads like a print manifest, not a SaaS tagline. Tier names sit in 22px Archivo 700, and all feature text runs in Public Sans at 16px with a 1.5em line height, which is roomy enough to scan fast on a small screen. The overline label above the headline uses Space Mono at 13px with 2px letter-spacing — the same monospaced face returns on the "Best value" badge in the featured card, tying the typographic system together across two distinct UI roles.

The middle card, "Small press," is the intentional highlight: its column background is #ff3b00 — a saturated construction-orange that stops the eye without any badge shadow or star rating. The "Best value" pill is white with black Space Mono text, set on top of the orange field, and the features divider shifts to a semi-transparent black rule (rgba(0,0,0,0.4)) rather than solid black, so it reads against the colored background without going muddy. The outer two cards stay white with a solid black 4px border, which means the orange card visually "pops" purely through color contrast, not through size inflation.

On tablet the three-column row wraps; on phone it switches to flexDirection: column, stacking the cards vertically in source order (Zine, Small press, Big batch). Each card's padding drops proportionally and the large price figures step from 44px to 36px, keeping the hierarchy readable without overflow. The Order buttons are ghost-style on desktop (transparent fill, solid 4px border) with an invert hover, meaning they demand a click rather than beg for one.

What’s inside

Three-column pricing grid built with native `divi/column` modules set to equal flex widths (`8_24`) with 24px column and row gaps
Featured middle tier highlighted via a full-column `#ff3b00` background with a "Best value" Space Mono badge in a white pill group
Large Archivo Black price display (44px desktop / 36px phone) paired with a Public Sans 'per run' label, baseline-aligned in a flex row
Feature checklist rows built from `divi/icon` (Font Awesome checkmark, 15px) paired with `divi/text` in flex rows — no custom HTML required
Ghost CTA buttons with 4px solid border, zero border-radius, and fill-invert hover state, matching the brutalist card borders exactly
Responsive reflow: three columns wrap on tablet and stack to a single column on phone via Divi's built-in flex breakpoint controls
Two-font typographic system: Archivo for display and tier names, Public Sans for body and button labels, Space Mono reserved for overline and badge copy
Section-level parchment background (`#e8e4da`) with breakpoint-scaled padding (64px → 48px → 32px) baked into the section decoration

Who it’s for

Risograph studios, indie print shops, zine distros, screenprint houses, and short-run book publishers that need a pricing section which looks like it was designed by someone who actually runs a press. It also works for any creative service with volume-tiered pricing — photo labs, foil printers, letterpress studios, merch fulfillment shops, or independent publishers quoting edition sizes. The aesthetic is raw and confident, which makes it a poor fit for corporate SaaS or health services but an excellent fit for any brand where craft and materiality are part of the value proposition.

Customization tips

The fastest edit is the featured-tier color: swap #ff3b00 on the middle column's background and border to any single brand accent (deep indigo, forest green, or a second-brand red all work). Keep the pill badge background white and the text black — the contrast math holds for any saturated hue. For the section background, #e8e4da can shift to pure white or a darker kraft tone without touching anything else.

Tier names ("Zine," "Small press," "Big batch") and specs (copy count, page count, turnaround) are plain text inside divi/heading and divi/text modules — replace them directly. Keep tier names under 14 characters to avoid wrapping inside the 24px-padded column at narrow widths. The feature checklist uses one icon-plus-text group per row; you can add or remove rows freely, but keep all three tiers at the same row count so the 2px divider lines align across columns on desktop. Button labels are also plain text — "Order," "Get a quote," or "Choose plan" all fit comfortably at the current 28px horizontal padding.

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 Brutalist Print Shop Pricing Section for Divi 5: Three-Tier Print Runs

How does the layout reflow on mobile — do all three cards stay visible?

Yes. On phone the row switches to `flexDirection: column` and each column stretches to full width (`24_24`). Cards stack in source order: Zine first, Small press second, Big batch last. The featured orange card stays visually prominent because its background color is unchanged at every breakpoint.

Which modules make up the feature checklist inside each card?

Each checklist row is a `divi/group` set to horizontal flex, containing a `divi/icon` module (Font Awesome solid checkmark, 15px, black) and a `divi/text` module beside it. There is no blurb/list module involved — adding or removing a feature means duplicating or deleting one of these group blocks.

The middle card is orange — how do I change which tier is highlighted?

Open the column module for whichever tier you want to feature, set its background color to your accent and its border color to the same value. On the card you're de-featuring, reset the background to white and the border to `#000000`. Then move the 'Best value' group (the white pill) to the newly featured column's header group and remove it from the old one.

Does the layout use any imagery or video?

No. The section is entirely typographic and icon-based — no images, no background photos, no video. If you want to add a product thumbnail above the tier name, insert a `divi/image` module at the top of the card's header group; a 3:2 landscape crop fits the column width cleanly.

What fonts does this layout use and do I need to load them separately?

The layout uses Archivo, Public Sans, and Space Mono — all available in Google Fonts. Divi 5 loads Google Fonts automatically when you assign them via the font controls, so no manual enqueue is needed as long as your site has Google Fonts enabled in Divi's theme options.

Can I add a fourth pricing tier?

Yes, but the row is currently set to a strict 1/3 + 1/3 + 1/3 column structure. To add a fourth column, change the column structure to four equal parts in the row's advanced settings, duplicate one of the existing columns, and update the copy. On tablet and phone the row already wraps, so the fourth card will reflow naturally.

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.