# steel.dev

Source: https://steel.dev/
Captured: 2026-10-09
Tags: saas, landing, light, both, swiss, minimal, bento, technical, confident, calm, optimistic
Colors: #e2f3fd, #a8dffe, #6fcbff, #c6ced2, #a1acb2, #808a90, #606b71, #0c0d0e
Type (h1): schengenA · 60px/60.6px · 400 · tracking -1.2px — "Browser Infrastructure for AI Agents"
Type (h2): schengenA · 40px/40px · 400 · tracking -0.8px — "1,500,000+"
Type (h3): schengenA · 24px/31.2px · 400 · tracking -0.48px — "Steel is an API that lets you control fleets of browsers. Spin up thousands of s"
Type (body): schengenAMono · 12px/19.2px · 400 — "Search the web for this week's biggest AI agent launches and summarize each one."
Type (small): schengenAMono · 12px/16px · 400 · tracking 0.18px — "BROWSER INFRA"
Type (button): schengenAMono · 12px/16px · 400 · tracking 0.18px — "CONTACT SALES C"
Button: "Contact SalesC" — fill #fdfdfc, text #000000, radius 4px, border 0px, padding 0px 7px 0px 12px, height 32px, type 12px/400
Radii: 4px (48)

## Images

- Hero (desktop): https://media.lvly.design/library/steel-dev/hero.webp?v=26a0ea57
- Page crop (mid-1): https://media.lvly.design/library/steel-dev/mid-1.webp?v=dab9fa1f
- Page crop (mid-2): https://media.lvly.design/library/steel-dev/mid-2.webp?v=6a98a464
- Hero (mobile): https://media.lvly.design/library/steel-dev/mobile-hero.webp?v=3aabb527
- Full page (desktop): https://media.lvly.design/library/steel-dev/full.jpg?v=acedfd56
- Full page (mobile): https://media.lvly.design/library/steel-dev/mobile-full.jpg?v=0b4ae6b3
- Clip preview (mp4): https://media.lvly.design/library/steel-dev/video-iy9wnc.preview.mp4?v=236f16da

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.

## Steal-worthy details

- Keyboard-shortcut keycaps inside buttons: every CTA ends in a small tinted square holding its hotkey letter (`C`, `S`), so the button doubles as a shortcut hint and makes the product feel built for power users
- The hero art is a thin-line blue wireframe of skewed planes converging to a vanishing point. It is architectural and technical with zero gradients or glow, and it stays legible as texture behind the headline
- A "Copy agent prompt" split button with a row of model logos and a chevron sits beside the primary CTA, a secondary action aimed at AI agents rather than humans
- Two-tone section headings: a black statement line ("Antibot & stealth browser") sits directly over a gray (`#808a90`) payoff line at the same size, so the heading and subhead share one block with no size step
- Every feature row gets its own flat pastel panel (peach `#f6d5a8`-ish, mint, sky, lilac) with a single tiny UI vignette centered in it: trace cards, labeled cursors around a CAPTCHA, a globe with city tags. The palette rotates and the layout stays fixed
- Labeled agent cursors: arrow pointers carrying monospace role chips (SHOPPER, QA TESTER) in contrasting fills, a playful way to show many agents at once without people imagery
- Footer signs off with an edge-to-edge red wordmark: the only red on the page, saved for the last screen

## Style recipe

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.