Doppler

An original Keyfold secrets-manager page on a violet-black canvas: a 72px header inset from the edges with an Iron Edge outline and rounded bottom corners, six navigation items, a Get Demo link, a signal-green Start for Free button and an outlined Sign In; a left-aligned three-line 48px headline whose last line runs violet to ember, a soft lead and one green button; thin stone curves and a blurred neon-violet aurora behind an HTML-drawn projects dashboard with a guided-tour pill; then identity cards, an invented wordmark band, an integrations orbit, product-crop feature cards, customer stories, overlapping stat tiles, an outlined closing panel and an inset footer.

• Best forSecrets managers, credential vaults, identity and access tools, and other developer-security SaaS that proves itself with a dark product dashboard.
• 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, gradient, radius and spacing token. Render the page as server components; only the header's dropdowns and the mobile menu need small client islands, holding their state in memory. Self-host Onest (variable 400–700, SIL Open Font License) as a woff2 file through next/font/local — no remote font request. Draw the Keyfold mark, the invented wordmarks, every icon, the hero curves and every product crop as inline SVG and HTML built from committed sample arrays, never bitmap screenshots, so the markup is identical on every render. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Doppler" kickstart — A violet-night secrets-manager homepage: an inset outlined header, a three-line 48px headline ending in a violet-to-ember gradient, one rationed signal-green button and a dark product dashboard floating on a blurred violet aurora.

## Design
Build a rebrandable landing page for a secrets manager: one platform that stores, rotates, scopes and audits API keys, database passwords and tokens for every engineer, pipeline and AI agent on a team.

Create a complete landing page for Keyfold, a fictional secrets manager. 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 dark, violet-tinged night page. Midnight Plum #1C1624 is the page canvas and the header. Shadow Plum #2D2734 is chips, kbd keys and nested panels; feature cards sit on a translucent rgba(242,241,237,0.04) wash. Bone White #F1F0EC is every headline, the Sign In outline and its label — never pure #FFFFFF text. Ash Veil #D0C9C4 is navigation, leads, the Get Demo link and Learn More links; Mid Ash #A5A2A5 is placeholder and metadata text; card body copy is rgba(242,241,237,0.64). Iron Edge #55505B is the header's 1px outline and resting input borders; other hairlines are #E5E7EB at 10–15% opacity. Signal Green #00F575 is the one filled button per viewport, with Midnight Plum #1C1624 text. Lavender Spark #B997FF is section headings and the highlighted stat figure. Neon Violet #6B13F5 is the blurred aurora glow behind the product window and the closing panel. The signature is the third hero line: linear-gradient(91deg, #855AFF 14.92%, #FF5632 90.53%) clipped to text, Spark Violet #855AFF into Ember Orange #FF5632. Thin 1px Stone #8B877D curves at about 55% opacity sweep across the hero behind everything.

Typography: one family. Headings and body use "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif — a geometric grotesk standing in for the source's custom face. Hero headline 48px/57.6px weight 450, letter-spacing -0.96px; section headings 32px/38.4px weight 450, -0.64px; card headings 24px/33.6px weight 700, -0.24px; leads 18px/25.2px weight 400, -0.18px; navigation, buttons and links 15px/15px weight 700, +0.15px; body 16px/24px weight 400; card copy 14px/21px weight 400, +0.42px; eyebrows 12px/18px weight 400, +0.36px uppercase. Text 48px and above tracks -0.02em; 12px text tracks +0.03em.

Layout: a 1440px canvas, content from x 94 to 1346 (1252px). Spacing on an 8px base; 120px or more between sections. Radii: 16px for the header's bottom corners and the product window, 12px for every button, 20px for every card, 8px for tags. No drop shadows on cards — surfaces step by tone and hairlines.

Navigation: a 72px header inset 14px from each edge (x 14 to 1426), #1C1624 with a 1px #55505B outline on the sides and bottom and 16px bottom radii, sticky. At x 35 the 30px Keyfold mark — two overlapping rounded squares, one filled and one outlined, in the violet-to-ember gradient — beside the 30px weight 700 wordmark Keyfold. From x 223 six items, each with 28px 8px padding: Platform, Solutions and Resources with 14×9px chevrons, then Keyfold for Agents, Customers and Pricing, all #D0C9C4. Right: the Get Demo text link, the 36px Signal Green Start for Free button (10px 16px padding, a 14px arrow) and the 37px Sign In button outlined 1px #F1F0EC, ending at x 1405.

Hero (id top): left column from x 94. At y 184 the three-line headline One vault. / Every credential. / People or agents. — the last line in the gradient with 6px vertical padding. At y 381 a 450px #D0C9C4 lead Each engineer now ships alongside a fleet of AI agents and pipelines that need credentials too. Keyfold issues, rotates and audits them all — in your cloud or on your own racks. At y 538 a 44px Start for Free button (14px 16px padding). Behind the right half a 985×492px #6B13F5 blob with 120px radii, blurred about 140px at 55% opacity, starting at x 525, y 77; a 275px gradient from transparent to #1C1624 closes the hero at y 622.

Product window (id product): at x 690, y 210, a 656×346px dark dashboard, #1A1521 with a 1px rgba(241,240,236,0.16) border and 16px radius. A 122px sidebar holds the mark, a Larkhill Labs workspace switcher and items — Projects, Access Requests, Activity, Members, Connections, Service Keys, Billing, Settings, then Docs, Forum and Share a Secret. The main area has a search field with a ⌘ K key, a Projects heading with a + chip, filter controls, and a 3×3 grid of project cards (billing-core, geo-lookup, edge-gateway, sandbox, agent-runner, event-queue, shared, import_vault, ci_actions), each with a one-line description and an N configs chip. Over the middle row floats a violet Take the guided tour pill with a pointer glyph. Draw it all in HTML at 6–12px type; it is a labelled figure.

Identity cards (id platform): at y 778 the centred 32px #B997FF heading Made for every identity and a 650px 18px lead. Then three 396×288px cards with 32px gaps — Agents ask natively, Flat seat pricing, Audit trail built in — each with a 60px line icon, a 24px weight 700 heading, 14px copy and a Learn More → link.

Logo marquee (id customers): the centred 32px line 81B+ secrets read each month with 81B+ in #B997FF, over a 1280px band lit by a horizontal violet-pink-violet gradient at low opacity, and a row of invented monochrome wordmarks — Ostlund, Pinecrest, Tallyho, Marrow&Co, Quillfeather, Brackwater, Lumen Ferry — static, no marquee motion.

Integrations (id integrations): left, an orbit of round 56px #2D2734 tiles holding generic drawn glyphs (cloud, container, pipeline, cluster, function) around a glowing Keyfold mark; right, the 32px #B997FF heading One vault for your whole stack, an 18px lead and a 36px outlined See Integrations button.

Why Keyfold (id why): the centred 32px #B997FF heading Why teams switch to Keyfold, then three cards and two wider cards, each topped by a small HTML-drawn product crop (a member table, a compliance seal, a permissions checklist, an environment pipeline, a dynamic-credential menu) and a 24px heading — For people and machines, Audit-ready controls, Agent-scoped access, End credential sprawl, Credentials that expire.

Customer stories (id stories): three 20px-radius cards with a 12px uppercase industry eyebrow, an invented wordmark and a 22px quote-style headline, and a Read More → link.

Stats (id results): the centred 64px weight 450 heading Guarding the keys that run the internet, then three soft, overlapping rounded tiles — 58,000+ teams protected, 81B+ secrets read each month, 99.99% historical uptime — on #2D2734 with faint hairline rims.

Closing CTA: a 1252px panel with a 1px rgba(241,240,236,0.5) outline and 48px radii over a #6B13F5 glow: the 48px heading The secrets manager built for agents, an 18px lead, an outlined Start for Free button and a Signal Green Get Demo button.

Footer: a #1C1624 panel inset 20px with 20px radii, a small green All Systems Operational pill, seven 14px link columns (Product, Resources, Developers, Integrations, Community, Company, Legal) with #B997FF column labels and #F1F0EC links, and the line © Keyfold sample · a fictional secrets manager. Not a real company.

## 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, gradient, radius and spacing token. Render the page as server components; only the header's dropdowns and the mobile menu need small client islands, holding their state in memory. Self-host Onest (variable 400–700, SIL Open Font License) as a woff2 file through next/font/local — no remote font request. Draw the Keyfold mark, the invented wordmarks, every icon, the hero curves and every product crop as inline SVG and HTML built from committed sample arrays, never bitmap screenshots, so the markup is identical on every render. 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 Keyfold clearly fictional and rebrandable: no real company, product, customer, statistic or person — every logo, number and project name is invented. Ration Signal Green #00F575: at most one filled green button per viewport, always with #1C1624 text; never use green or #B997FF as a large background. Keep the gradient to the one hero line. No drop shadows on cards; separate surfaces with tone steps and low-opacity hairlines. Text pairs clear WCAG AA: #F1F0EC and #D0C9C4 on #1C1624 and #2D2734, #1C1624 on #00F575, #B997FF only at 24px and above. Every link leads to a real section on the page; Start for Free scrolls to a small in-page sign-up form that sends nothing. The page loads no analytics or tracking script and shows no cookie banner. Content is initially visible: no typing effects, counters, parallax, marquee motion or scroll reveal; hovers take 150ms and every transition stops for prefers-reduced-motion. Every control shows a 2px #B997FF focus ring with a 2px offset. Product crops are labelled figures; decorative curves and glyphs are hidden from assistive technology. At 360px the header collapses to the mark, Start for Free and a Menu button, the headline drops to 36px/42px, the lead to 16px/24px, the product window sits under the hero text and scrolls inside its own frame, every card grid stacks, the wordmark row wraps into rows of two, the stat tiles stack, 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.