SST
A one-screen infrastructure-as-code homepage: a monospaced two-line headline beside a syntax-coloured config window on a dot grid, an npm install line and text-only links on a flat white page.
An original Kiln homepage that fits in one 1440×900 screen: a 64px translucent white header with a stacked-slab mark and boxed wordmark, Blog, Docs and Examples links, a star count, a joined AI and Search control and an outlined Console button; a 410×500px config window on a faint 16px dot grid showing kiln.config.ts in four syntax colours; a two-line IBM Plex Mono headline, a Rubik lead, an npm i kiln install line, an outlined NEW announcement, two plain text links and a strip of invented grey wordmarks; and a one-line footer.
- Best forInfrastructure-as-code frameworks, deploy tools, CLIs, SDKs and other open-source developer tools whose code sample is the whole pitch.
- Tech stack- Next.js (App Router) - React - TypeScript - CSS custom properties Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius and spacing token. Render the page as a server component; only the install-line copy button and the search control need small client islands holding their state in memory. Self-host Rubik (variable 300–900) and IBM Plex Mono (400 and 600), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Store the config sample as a committed array of typed tokens (keyword, name, new, string, quote, punctuation, plain) and render it to spans, so the colours are deterministic and no syntax-highlighting library is needed. Draw the Kiln mark, the wordmarks and every glyph as inline SVG. Provide page metadata. Build and run the production page before capturing its preview.
The prompt. 1537 words, self-contained.
Build the "SST" kickstart — A one-screen infrastructure-as-code homepage: a monospaced two-line headline beside a syntax-coloured config window on a dot grid, an npm install line and text-only links on a flat white page.
## Design
Build a rebrandable landing page for an infrastructure-as-code framework: a TypeScript library where one config file declares every database, mailer, service and site an app needs, and one command deploys them.
Create a complete landing page for Kiln, a fictional infrastructure-as-code framework. This is a concept presentation, not a real company — no real product, customer, person or logo. Use original branding, artwork and copy throughout.
Color: a flat, cool, light page. Canvas #FFFFFF is the whole page; never add a second background colour, gradient or texture. Lavender Mist #E8E8F2 is the only tint — the header's bottom border, the outline of every header control, the dot grid and inline-code fills. Ink #303055, a dark indigo, is the headline, navigation, text links, the NEW label and the install command's package name — never pure black for prose. Slate #403F53 is plain identifiers inside code. Fog #737380 is the lead, the header control labels, the announcement line and the npm i text. Mist #A8A8B0 is the file name, the Ctrl K hint, the eyebrow and the footer. Harbor #5196B3 is a single quiet accent: the NEW badge's 1px outline and nothing else; if it ever carries text, that text is Obsidian #111111. Code colour lives only inside the config window: Code Plum #8844AE for keywords, punctuation and object keys; Code Cobalt #3B61B0 for variable, class and method names; Code Teal #096E72 for new; Code Rust #984E4D for string contents, with the quote marks in Obsidian #111111.
Typography: two families with strict roles. Headings use "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace — the hero headline at 48px/52.8px weight 600 with -1px letter-spacing — and the same mono family sets all code at 14px/25.2px weight 400, the install line at 18px/32.4px and the star count at 14px. Body text uses "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif: the lead 20px/30px weight 400; navigation 14px/17px weight 500; header controls 13px; text links 16px; the announcement 14px/25.2px; the eyebrow 13px/23.4px uppercase with +0.5px tracking; the badge 9px/16px weight 500 uppercase +0.5px; the footer 14px/25.2px. Never mix the two within one role.
Layout: the page is exactly one screen — a 1440×900 canvas with a fixed header, one centred two-column cluster and a fixed footer, and no scrolling at desktop size. Radii are 4px for controls and badges and 8px for the config window, nothing larger. No drop shadow anywhere except the config window.
Navigation: a 64px fixed header, rgba(255,255,255,0.8) with a backdrop blur and a 1px #E8E8F2 bottom border, padded 12px 12px 12px 16px. At x 16 the Kiln mark: a 28×22px three-slab stack drawn in 2.2px #303055 strokes, then a 48×24px #303055 box with 5px radii holding the word kiln in white Rubik 17px weight 800. On the right, Blog at x 868, Docs and Examples (31px apart), then a star glyph with 18K in IBM Plex Mono 14px #737380; then a joined segmented control — a 53px AI button with a sparkle glyph and a 126px Search button with a magnifier and a right-aligned Ctrl K hint — and finally an outlined 75px Console button ending 12px from the right edge. All three controls are 36px tall at y 14.
Hero (id top): a two-column cluster. The left column holds the Config window; the right column starts at x 749 with the two-line headline Your whole / stack, typed. in #303055 at y 208 (400px wide), then at y 323 the 400px lead Define every database, queue and site your app needs in one config. in #737380.
Config window (id config): a 410×500px window at x 291, y 208 — 8px radius, a fill running #FCFCFD to #F8F8FB from 40% to 70%, and a 1px border painted with linear-gradient(#EFEFF6 0%, #EFEFF6 35%, #E5E5F0 65%, #E5E5F0 100%) on the border box. Its shadow is layered and pale: 0 1px 1.5px, 0 5px 10px, 0 18px 40px and 0 40px 90px in cool greys at 4–22% opacity, plus a wide white bloom. Behind it, a 602×644px field from x 195, y 136 of 1px #E8E8F2 dots on a 16px grid, masked by a radial gradient so it fades out at the edges. A 32px title bar holds three 9px #DCDCEA dots from x 308 and the centred 14px Rubik file name kiln.config.ts in #A8A8B0. Then the code at 16px side padding, first line at y 246: const db = new kiln.Postgres("Db"); a blank line; const mail = new kiln.Mailer("Mail", { sender: "[email protected]" }); a blank line; const api = new kiln.Service("Api", { memory: "4 GB", image: "./django", link: [db, mail] }); a blank line; const web = new kiln.Site("Web", { link: [api], path: "./astro", domain: "example.com", dns: kiln.edge.zone() }) — object members indented two spaces, each closing }) on its own line.
Install command (id install): at y 440 a 32px button with no chrome: a > prompt in #C9C9D3, npm i in #737380 and kiln in #303055, IBM Plex Mono 18px. Clicking copies npm i kiln.
Announcement (id news): at y 528 an outlined NEW badge — 1px #5196B3, 4px radius, #303055 label — beside the 14px #737380 link Self-hosted runners in beta and a 12px chevron. Below it, 13px apart, two 16px #303055 text links: What is Kiln and Get Started. No filled button anywhere on the page.
Logo strip (id customers): at y 649 the eyebrow Trusted by teams of every size in #A8A8B0, then a 30px row of five invented grey wordmarks 13px apart — halden, a play-square Pike Way lockup, a crossed-circle mark, BRIGHTVALE and an italic TOLL — all in #8E8E99.
Footer: a fixed 50px band along the bottom edge with no border: © 2026 Kiln Labs at x 16 in #A8A8B0; on the right Guide, About and Contact 24px apart, then five 16px generic glyphs 13px apart — a video tile, a chat bubble, code brackets, a feed and a plus-circle — ending at the right edge.
## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties
Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius and spacing token. Render the page as a server component; only the install-line copy button and the search control need small client islands holding their state in memory. Self-host Rubik (variable 300–900) and IBM Plex Mono (400 and 600), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Store the config sample as a committed array of typed tokens (keyword, name, new, string, quote, punctuation, plain) and render it to spans, so the colours are deterministic and no syntax-highlighting library is needed. Draw the Kiln mark, the wordmarks and every glyph as inline SVG. Provide page metadata. Build and run the production page before capturing its preview.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.
## Everything else
Keep Kiln clearly fictional and rebrandable: no real company, product, cloud provider, customer, statistic or person — every name, number and wordmark is invented. Keep the system text-first: no filled call-to-action, no gradient or texture behind content, no shadow except the config window, and code colours never leave the code. Text pairs clear WCAG AA: #303055, #403F53 and #737380 on #FFFFFF, and #111111 on #5196B3; #A8A8B0 appears only on decorative or duplicated text (file name, eyebrow, key hint, footer) and the footer links stay readable at 14px. Every link leads to a real anchor on the page, and the page loads no analytics or tracking script and shows no cookie banner. Content is initially visible with no typing effect, counter or scroll reveal; hovers take 150ms and every transition stops for prefers-reduced-motion. Every control shows a 2px #303055 focus ring with a 2px offset. The config window is a labelled figure and its decorative dots are hidden from assistive technology. At 360px the header keeps the mark, Search and a Menu button; the headline drops to 34px/40px; the right column comes first, the config window follows it at full width and scrolls horizontally inside its own frame; the logo strip wraps; the footer stacks into two rows; and the page scrolls vertically without ever overflowing horizontally.
### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.
Build the whole page end to end and show me the result running — not a description of it.