Deno

An original Brindle homepage: a 68px mint announcement bar, a 96px white header with a striped-circle logo, five navigation items and a ⌘K search field, and a 774px night hero whose blurred streak field fades in from the left. The copy column holds a v4.0 pill, the two-line headline TypeScript, without the setup, a lead, a bold claim and two rounded graphite buttons; beside it a masked mono ticker of built-in tools runs through one mint highlight row. Below: an install band with a terminal card, a feature split with a file window and a mint button, and a plain footer.

• Best forRuntimes, CLIs, compilers, package managers and other open-source developer tools that want one confident headline and a list of what is built in.
• 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 announcement dismiss, the install tabs and the copy button need small client islands holding their state in memory. Self-host Inter (400 and 700) and JetBrains Mono (400 and 700), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the hero's streak field as one committed inline SVG of horizontal rects blurred 8px in CSS, never a runtime canvas or random generator, so every render is identical. Draw the Brindle mark and every glyph as inline SVG. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Deno" kickstart — A developer-runtime homepage: a mint announcement bar over a white header, a night hero streaked with blurred colour, a 72px Inter headline and a mono tool ticker with one mint highlight row.

## Design
Build a rebrandable landing page for an open-source JavaScript and TypeScript runtime: one small binary that runs TypeScript directly, installs npm packages and ships its own test runner, bundler, formatter and linter.

Create a complete landing page for Brindle, a fictional JavaScript and TypeScript runtime. 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 night hero framed by a mint announcement bar and a white header, then light sections below. Night #001319 is the hero's base; over it a blurred field of thin horizontal streaks in teals, blues and violets, darkened from the left by a linear-gradient from Offblack #121417 through rgba(18,20,23,0.55) at 50% to transparent, under a 15% fractal-noise grain in color-burn. White #FFFFFF is the headline, the button labels and the ticker text, and the header and install backgrounds. Silver #C2C4C7 is the hero lead. Pale #E5EAEA is the bold claim line and the version pill's text. Electric Mint #70FFAF is the one chromatic note: the announcement bar, the version chip, the ticker's highlight row and its blurred glow, the terminal prompt and the feature button; text on mint is always Offblack #121417 or the bar's Pine #172723, never white. Graphite #25272B fills the two hero buttons. Fog #868789 is the search placeholder, the ⌘K key and the pill arrow; Mist #9EA0A5 is the key's outline. Chalk Line #E5E7EB is every hairline below the hero; Paper #F8F8F8 is the feature band.

Typography: headings use "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif — the hero headline at 72px/79.2px weight 700 with -1.8px letter-spacing and balanced wrapping, section headings at 36px/40px (-0.9px) and 44px/48.4px (-1.1px). The same Inter family sets all UI: navigation 18px/36px weight 400 (the current item, Products, weight 700); the announcement 16px/20px weight 700; the lead and the claim 18px/28px (claim weight 700); buttons 16px/24px; the pill text 14px/20px weight 500; the ⌘K key 12px weight 700. Code, the version chip and the ticker use Menlo, "JetBrains Mono", ui-monospace, SFMono-Regular, monospace: the ticker 20px/28px weight 500, the chip 12px/16px weight 700, the terminal 16px/24px. Self-host Inter and JetBrains Mono; Menlo is used only where the visitor already has it.

Layout: content sits on a 1168px column centred in a 1440px viewport (x 136 to 1304). Radii are 6px for cards, the announcement button and the highlight row, 8px for the search field, 4px for the key, and fully rounded for the pill, the chip and every hero button. Shadows are only the header's 0 1px 3px rgba(0,0,0,0.1) and the cards' 0 10px 15px -3px rgba(0,0,0,0.1).

Announcement bar: a 68px #70FFAF band across the top. Centred, Brindle 4.0 ships built-in SQLite in 16px weight 700 #172723, then 16px later a 36px Read the post -> button with a 2px #172723 border, 6px radius and 4px 8px padding; a 24px dismiss cross sits 16px from the right edge.

Navigation: a 96px header, rgba(255,255,255,0.9) with the 1px shadow above. At x 136 the 149×48px Brindle logo: a 44px black circle crossed by three diagonal white stripes with a small mint dot, then the lowercase wordmark brindle in Inter 32px weight 700 (-1.2px). From x 333, Products, Docs, Packages, Community and Blog, 16px apart with 8px side padding and 14px chevrons on the three menus. At the right edge a 256×34px search field with a 1px #868789 border, an 18px magnifier, a Search placeholder and a ⌘K key in a 26px white box with a 1px #9EA0A5 border and 4px radius.

Hero (id top): the night stage, 774px tall with 144px vertical padding, holding a two-column grid — a 624px copy column and a 416px Tool ticker 128px apart, vertically centred. The copy column stacks with 16px gaps: at y 340 a 34px pill on #121417 with a 1px rgba(112,255,175,0.4) border and 4px 10px 4px 4px padding holding the mint v4.0 chip, What’s new in Brindle and a #868789 arrow; at y 390 the two-line headline TypeScript, / without the setup; at y 564 a two-line 560px lead Brindle is a small, open-source TypeScript runtime with npm support and every tool you reach for built right in.; then the bold claim One binary. No config files to babysit.; then, 32px lower, two 60px fully rounded #25272B buttons 8px apart with 16px 24px padding and 16px gaps — Get started with a white 24px Brindle mark and a chevron, and Source with a code-bracket glyph and a chevron.

Tool ticker (id tools): a 416×360px figure at x 888 listing built-in tools as 40px rows in 20px mono white with 12px left padding — doc generator, REPL, package manager, test runner, bundler, formatter, linter, task runner, type checker — masked top and bottom by linear-gradient(transparent 2%, black 40%, black 60%, transparent 98%). The fifth row sits under a 288×32px #70FFAF highlight with 6px radius in which the same list repeats in #121417 and a 20px check glyph sits 12px from the right; behind it a 264×32px rgba(112,255,175,0.35) glow blurred 40px. The figure is labelled with the full tool list.

Install (id install): a white band with 64px padding. Centred, Install Brindle in 36px weight 700 with the version 4.0.2 on a mint 4px-radius chip, an italic underlined 12px Release notes link, then 64px lower a 672px terminal card — 1px #E5E7EB border, 6px radius, the card shadow — with a 28px two-tab strip (macOS/Linux active, Windows on #F3F3F3 in #9EA0A5) above an #121417 panel showing a mint $ and curl -fsSL https://brindle.example/install.sh | sh in 16px mono white.

Feature split (id feature): a #F8F8F8 band with 128px padding on the same 624px/416px grid. Left, a white 6px-radius file window with a 38px title bar (three dots, server.ts in 14px weight 700) and a short serve example in 14px/22px mono #0A0E1C. Right, the 44px heading TypeScript and npm, no setup, an 18px/28px #25272B paragraph with an inline brindle check code chip, and a 56px fully rounded #70FFAF npm in Brindle button with #121417 text and a chevron.

Footer: a white band with a 1px #E5E7EB top rule and 48px padding: © 2026 Brindle Labs on the left and Docs · Packages · Blog · Status on the right in 14px #56575A.

## 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 announcement dismiss, the install tabs and the copy button need small client islands holding their state in memory. Self-host Inter (400 and 700) and JetBrains Mono (400 and 700), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the hero's streak field as one committed inline SVG of horizontal rects blurred 8px in CSS, never a runtime canvas or random generator, so every render is identical. Draw the Brindle mark 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 Brindle clearly fictional and rebrandable: no real company, runtime, mascot, customer, statistic or person — every name, number and version is invented, and the install URL uses the reserved example domain. Keep the system monochrome with one accent: Electric Mint never carries white text and never appears outside the announcement bar, the version chip, the ticker highlight and glow, the terminal prompt and the feature button. Text pairs clear WCAG AA: #FFFFFF, #C2C4C7 and #E5EAEA on #001319 and #25272B, #121417 and #172723 on #70FFAF, #000000 on the white header, and the search placeholder #868789 is never the only label. 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; the ticker is static at rest and may slowly scroll one row every 2.5 seconds only when motion is allowed — every animation and transition stops for prefers-reduced-motion. Every control shows a 2px #70FFAF focus ring with a 2px offset on dark and a 2px #121417 ring on light. The streak field, the ticker reels and the glow are hidden from assistive technology. At 360px the announcement wraps to two lines, the header keeps the logo, a search icon and a Menu button, the headline drops to 44px/48px, the ticker follows the copy at full width, the buttons stack full width, the terminal scrolls horizontally inside its own frame, and the page never overflows 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.