steel.dev

A dev-infrastructure landing page that swaps the usual dark-techno look for a pale, airy, engineered feel. The hero is a sky wash (#e2f3fd) crossed by a fine blue wireframe perspective drawing, with a 60px regular-weight grotesk headline (schengenA, -1.2px tracking) set flush left in black. Everything functional speaks monospace: uppercase 12px nav, buttons, labels and timestamps in schengenAMono, so the page reads like a terminal that went to design school. Below the fold it runs as a stack of alternating split rows. Each row pairs a flat, saturated pastel panel (peach, mint green, sky, lilac, each a different hue) holding one small UI vignette with a two-tone heading and a 2×2 grid of icon-led features. Black interrupts twice: once as an enterprise band and once in the CTAs. Radii stay at 4px throughout, shadows are near-absent, and the footer closes on a giant red wordmark.

Build on a warm off-white (#fdfdfc) with near-black ink (#0c0d0e) and a cool gray ramp for secondary text: #606b71 body-muted, #808a90 subheads, #a1acb2 and #c6ced2 for hairlines and disabled states. The brand accent is a sky blue: use #6fcbff for line art and highlights, #a8dffe for mid fills and #e2f3fd for large hero and panel washes. Pair one regular-weight grotesk for display with its monospace sibling for everything else. Display is 60/61px with -0.02em tracking, h2 40/40px, h3 24/31px, all weight 400 and never bold. Mono runs at 12px for body, nav, labels and buttons; set buttons and labels in uppercase with +0.015em tracking. Buttons are 32px tall with a 4px radius, 12px left padding and a trailing 16px keycap square showing a hotkey letter. Make the primary button solid black with white text. Make the secondary button white with a hairline border, or a light-gray fill. Use 4px for every radius and keep shadows to a faint lift on floating UI cards only. Illustrate with thin 1px single-color wireframe linework, not gradients or 3D renders. Lay out feature sections as 50/50 splits that alternate sides. Give each one a flat pastel panel in its own hue (peach, mint, sky, lilac, butter) holding a single small white UI vignette with mono timestamps or chips. Opposite the panel, put a two-tone heading (black line, gray line, same size) and a 2×2 grid of 16px icon + medium title + gray two-line descriptions. Close each section with an uppercase mono text link and an arrow. Allow one full-bleed black band for the enterprise or trust story. Save a single loud off-palette color (red) for one closing brand moment.