# Dark devtool landing page > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The marketing home page for **Kiln**, a fictional edge image-rendering API. It scrolls through a sticky nav, a two-column hero (four-line 72px headline on the left, a tabbed code card on the right), a customer logo strip, a six-cell hairline feature grid, a latency section with 112px numerals and per-region bars, a three-tier pricing teaser and a footer with a ghosted 228px wordmark. The palette is graphite with one acid-lime accent. What makes it worth copying is the code card: it reads like a real terminal. It has line numbers, a syntax palette tuned for dark backgrounds, a response pane next to a gradient "rendered image" thumbnail, and a timing strip whose bar replays every time you switch language. ## Reference behaviour 1. Initial state: page scrolled to top. The first 800px show the nav, the eyebrow pill, the four-line headline ending in a lime "18ms.", the lede, both CTAs, the `npm i @kiln/sdk` install chip, the three meta stats, and the full code card with the `curl` tab selected. 2. On load the timing bar inside the code card grows from 0 to 18% width over 700ms (expo out). 3. Click `node.js` or `python`: that tab becomes selected (lighter background, full ink), its panel fades up 4px over 280ms and the others hide. The timing bar replays its 700ms grow. 4. With a tab focused, ArrowLeft/ArrowRight move selection cyclically and focus follows (roving tabindex). 5. Click **Copy** in the card header: the visible sample's text, without line numbers, goes to the clipboard. The button turns lime and reads "Copied" for 1400ms, then reverts. If the clipboard API is blocked, the visual confirmation still runs. 6. Click the copy icon in the install chip: copies `npm i @kiln/sdk` and flashes the same way (icon tints lime). 7. Scroll: the nav stays pinned (60px, 82% opaque graphite with a 10px backdrop blur and a hairline bottom border). 8. Hover a feature cell: its background fills with `--panel`. Hover a nav link: colour goes from `--ink-2` to `--ink`. 9. The footer ends with a 228px lowercase "kiln" wordmark in `--panel-2` (barely visible), then a fine-print row. ## Structure ``` 1280 × 800 (first frame) page height ≈ 3230px ┌──────────────────────────────────────────────────────────────────────────┐ │ ■ Kiln Docs Product Network Pricing Changelog ● All systems Sign in [Get key] │ 60 sticky ├──────────────────────────────────────────────────────────────────────────┤ │ (v3.2) AVIF encoding… ┌─ ● ● ● curl node.js python [Copy] ┐│ │ │ 1 curl -X POST api.kiln.dev/v1/render ││ │ Images, 72px │ 2 -H "Authorization: …" ││ code card │ rendered at │ … 8 lines, min-height 236 ││ 560 wide │ the edge in ├───────────────────────────┬──────────┤│ │ 18ms. (lime) │ // 200 OK {json} │ thumb ││ │ lede 18px, 470 max ├───────────────────────────┴──────────┤│ │ [Start free →] [Read the docs] │ fetch 4.1 · encode 11.2 · ━━━ 17.8ms ││ │ $ npm i @kiln/sdk ⧉ └──────────────────────────────────────┘│ │ 41B 99.995% SOC 2 │ ├── logos strip 22px pad, hairline top + bottom ───────────────────────────┤ │ // PRIMITIVES h2 48px │ 3×2 hairline grid of feature cells │ │ // NETWORK h2 · 18ms 61ms (112px) │ region bars card │ │ // PRICING h2 · three tiers, middle one lime-tinted │ │ footer: 2fr + 4×1fr columns · ghost wordmark 228px · fine print │ └──────────────────────────────────────────────────────────────────────────┘ gutter 64px · hero grid 1fr 560px gap 56px · section padding 96px 0 ``` - `