Design a dark-mode website section: dual-state infrastructure telemetry contrasting legacy friction against streamlined pipelines through glowing cobalt strokes and emerald verifications.
LAYOUT
Structured around a strict central vertical axis on an 1120px grid. The flow begins with a centralized pill tag, progresses downward to a stacked headline and two-line thesis statement, followed by the two primary comparison cards linked by a directional node. Directly below, an expansive horizontal shelf presents four quantified outcome metrics in a neat 4-column array, finishing with an ultra-minimal text link footer.
PALETTE (use these exact hex values)
- #06080d — Obsidian Ground: Master canvas background providing deep contrast for glowing technical borders
- #0c1017 — Card Slate: Fill color for comparison panels and the bottom stat container
- #1d4ed8 — Active Highlight Stroke: Border framing the 'After Shortkit' state to signify production readiness and superiority
- #1a2233 — Muted Stroke: Perimeter stroke on neutral cards, dividers, and default icon wells
- #38bdf8 — Neon Cyan: Hero text gradient stop, active list icons, and external links
- #22c55e — Production Emerald: Checkmark indicators, status dot, and production badge text
- #062820 — Status Pill Fill: Dark emerald container fill for the production ready status pill badge
- #f1f5f9 — Primary Text: Headline text, column headers, and stat numeric figures
- #8493a8 — Muted Text: Card subheadings, descriptive list body copy, and metric descriptions
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 18px heading, 32px display, 38px heading-lg. Tracking -0.02em for display headlines, 0em for body descriptions. The typographical tone is hyper-clean, utilitarian, and engineered, heavily reminiscent of modern developer tooling interfaces. Inter or Geist delivers clinical legibility with tight numerical spacing and compact vertical leading. The text scales systematically from dense 13px technical copy up to an authoritative 38px title with zero decorative flair.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1120px container, comfortable density.
DEPTH
Depth is strictly non-skeuomorphic, created purely via border luminosity and subtle dark value tiers. The background is pitch black (#06080d), while containers float barely above at #0c1017, separated by 1px hairline strokes. The 'After' container uses a radiant #1d4ed8 border to generate virtual z-axis prominence without casting blurred drop shadows.
IMAGERY
The visual system omits photographic imagery entirely in favor of lightweight, technical iconography (cloud upload, processing arrows, globe grid, telemetry bars, and lightning bolt). Icons are rendered as precise 1.5px monoline vectors encased in 36px rounded frames. Any photography, 3D clay graphics, or whimsical hand-drawn elements would instantly degrade the developer-grade aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric visual weight between identical card layouts: the 'Before' card is deliberately desaturated into technical background noise, while the 'After' card is galvanized by a vibrant cobalt perimeter stroke (#1d4ed8), glowing cyan icons, and emerald checkmark columns. Misusing this pattern by giving equal stroke weight or color saturation to both cards completely destroys the storytelling mechanic.
MUST
- Keep the 'Before' column low-contrast and muted to convey technical debt and friction.
- Use electric blue borders (#1d4ed8) exclusively on the modern 'After' card to focus eyes.
- Render the primary success indicators in crisp emerald (#22c55e) to signify validation.
- Apply cyan-to-sky gradient text sparingly, restricting it to positive headline outcomes.
AVOID
- Do not use red or aggressive alarm colors for the 'Before' card; maintain architectural neutrality.
- Never make the 'Before' border brighter or thicker than the 'After' container.
- Avoid solid bright fills for the status badge; keep it deeply tinted (#062820) with glowing text.
- Do not omit the checkmark column in the solved state, as it anchors resolution parity.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
