Brutalist Design Tool Pricing Table for Divi 5: Three-Plan Comparison

The comparison grid is a single divi/group module configured as CSS grid with four equal columns, a black (#000000) group background, and both column and row gaps set to 1px. The black background bleeding through those gaps is what creates the dividing lines between columns and rows; there are no borders, no custom HTML, and no table elements anywhere in the layout. Each of the 24 cells inside the grid is its own nested divi/group with an explicit background color: the Free and Team columns use the warm parchment (#e8e4da) that matches the section background, while every cell in the Pro column is set to white (#ffffff). That single background-color difference, applied cell by cell across every row, produces a column-highlight effect without any overlay module, ribbon, or badge on top.

The heading block above the grid is stacked in three distinct typographic registers. A Space Mono eyebrow at 13px, 700 weight, 2px letter-spacing, and uppercase sets a mechanical, grid-tool tone before the h2 lands. The h2 uses Archivo Black at 44px with -1px letter-spacing, uppercase, and text-wrap: balance, scaling to 36px on tablet and 30px on phone. A Public Sans body text module at 18px and 1.6em line-height carries the subheading copy underneath. The heading group is capped at 720px max-width and aligned left, keeping the text ragged-right rather than centered, which reinforces the utilitarian, tool-product character of the section. The outer content group uses a wider 1080px max-width that constrains the grid itself.

Inside the grid, feature availability is expressed in two ways. Included features use a divi/icon module with the Font Awesome solid checkmark (unicode f00c, 16px, black, center-aligned). Missing features use a divi/text module containing a plain mdash character in #4a4a4a gray, visually lighter than the black row labels. The one exception is the version history row, which replaces both icons and dashes with plain text values: 7 days, 30 days, and Forever, giving that row a quantitative reading that checkmarks alone cannot carry. The five feature rows escalate from universal access (unlimited drafts, all three plans) through shared features (version history, shared libraries in Pro and Team) to Team-exclusive capabilities (branching and review, admin controls), so the columns of dashes in Free and Pro build the upgrade argument visually.

The CTA button at the bottom is a standard divi/button module set in Public Sans, uppercase, 700 weight, with an orange-red fill (#ff3b00), a 4px solid black border, and strictly 0px border-radius on every corner. On hover, the background switches to black and the label switches to orange-red, a direct inversion with no transition fade. Responsive behavior operates at three independent levels: section padding steps from 64px to 48px to 32px, the h2 font size scales at each breakpoint, and cell horizontal padding compresses from 16px to 6px on phone, allowing the four-column structure to stay intact on narrow screens without collapsing to a stacked layout.