Dark Developer Tool Landing Page for Divi 5: Log Tracing Platform

The layout runs across nine sections and uses two alternating surface tones, near-black #090b0a and a slightly lighter #131815, as its primary canvas, with a single amber accent (#ffb000) reserved for the closing CTA bar. Every border and divider is a 1px dashed line in #27302b, which gives the whole page a terminal-printout quality without hard rules or drop shadows. The typography pairing is fixed throughout: Space Grotesk at semibold or bold for all headings and display numerals, Azeret Mono for all body copy, labels, and button text. The combination reads as developer-adjacent without feeling cold, and it holds up at every viewport because both families are well-hinted Google Fonts.

The hero opens with a 50/50 flex row. The left column holds an Azeret Mono eyebrow line, a Space Grotesk H1 at 56px (stepping to 42px at tablet and 34px at phone), a short subheading paragraph at 18px, and a flex-wrapped button group. The primary button fills amber (#ffb000) with a dashed amber border; the secondary is a ghost with the same dashed border treatment in off-white. Across the gutter the right column holds a #131815 card with a dashed outer border and four spec-sheet rows in 14px Azeret Mono, each separated by a 1px dashed Divider module. This puts four concrete product facts in the same viewport as the headline, with no scroll required to reach the ingest rate, retention window, supported platforms, and support tier.

A full-width statistics section breaks from the dark palette to an off-white #e9ede9 background and places three metric cells in a CSS grid at 40px column gap. Each cell opens with a 2px dashed horizontal rule, then a 96px Space Grotesk numeral at bold weight and -2px tracking, followed by a short Azeret Mono label. At tablet the numerals drop to 64px; at phone the grid collapses to a single column. All three figures are plain Text modules, so they update instantly when you replace the placeholder copy. Three alternating image/text feature rows follow on the dark background, each built as a vertically centred 50/50 flex row with a 4:3 cover-fit image and a text column carrying a numbered eyebrow, an H3, a body paragraph constrained to a 480px Group, and an underlined inline link. The second row uses order: -1 on its image column at phone, so the image always stacks above its text regardless of which desktop column it occupies.

The page closes through four more sections: a before/after comparison block that pairs a dark Icon-and-Text card against a near-white one with the same structure and contrasting fills; a numbered setup walkthrough in an asymmetric 8/24 + 16/24 column split where each step number is an 80px Space Grotesk numeral separated from the next by a 1px dashed Divider; a single Testimonial module on a #131815 card with dashed border; a two-column pricing grid with individual CTA buttons per tier; a five-item Toggle FAQ accordion with the first item open and dashed bottom borders between questions; and an amber CTA bar that spans full width with a horizontal flex between headline and button group, stacking to a column on phone. Padding on every section steps from 88px desktop to 64px tablet to 40px phone, so proportions scale cleanly across device sizes.