Twingate

An original Postern homepage: a 32px Signal Violet clinic strip; a translucent 64px nav with a white Book a Demo pill and a ghost Start Free pill; a 480px left column holding a Graphite New eyebrow, a four-line 62px weight-300 headline ending in a chartreuse No tunnels., a Silver lead and one chartreuse pill; a 528×598px dot-matrix stage with a violet mono caption, teal orbits and nodes, and a policy window of four checked rows; and an 80px strip of invented wordmarks at the fold. Below: a feature trio, three platform cards with tinted product panels, a deploy band, a customer-stories grid, a rating pill and a quiet footer.

• Best forZero-trust access, security, networking and infrastructure products — any technical B2B tool that wants a calm, flat-dark first screen with one bright action instead of a glossy gradient 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; it needs no client JavaScript. Self-host Hanken Grotesk (variable, 300–600) and DM Mono (400), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the stage's dot matrix with a radial-gradient background and a mask, the orbits as bordered circles, the mark, nodes, chevrons and glyphs as inline SVG, and every product window as HTML and CSS, never an image or canvas, so every render is identical. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Twingate" kickstart — A zero-trust access homepage: a violet announcement strip over a near-black page, a four-line 62px light headline whose last line glows chartreuse, one chartreuse pill and a dot-matrix stage holding a policy window ringed by teal network nodes.

## Design
Build a rebrandable landing page for an identity-aware network access product: people, services and AI agents reach private resources through one policy, with no VPN tunnel to maintain.

Create a complete landing page for Postern, a fictional zero-trust access product. 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 near-black page lit by three rationed accents. Obsidian #0E0F11 is the page and every band. Graphite #1D2023 fills the eyebrow pill and the hero stage's hairline; Carbon #141617 is the nested surface inside cards. Paper #FFFFFF is headings, navigation and the white Book a Demo pill. Silver #CFCFD3 is the hero lead; Cloud #A1A1AA is body and feature copy; Smoke #8D8D96 is captions and the dot matrix. Ash #303438 is section hairlines; Steel #3A3D40 is the New chip and the logo strip's 0.5px rule. Live Wire #EEF35F is the single primary CTA fill — always with #000000 text — and the colour of the headline's last line, nowhere else in the first screen. Signal Violet #B6ABFF fills the announcement bar and colours mono labels in the stage; Slate #21223A fills the stage's policy rows. Circuit Teal #00CBAA strokes the stage's network nodes and orbits. No gradients, no drop shadows: depth is tonal stacking plus inset hairline highlights.

Typography: headings use "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif at weight 300 — the hero headline 62px/68.2px with -1px letter-spacing, section headings 48px/57.6px at -0.5px; the hero lead is the same family at weight 300, 22px/28.6px. Interface text is Hanken Grotesk 500: navigation and every button 15px (buttons on an 18px line, links on 22.5px), feature titles 17px/25.5px; body copy is weight 400 at 15px/22.5px, the announcement bar 16px/24px. Mono labels use "DM Mono", ui-monospace, Menlo, monospace at 400 — the stage caption 21px/25.2px and policy rows 13px/15.6px. Never set body copy below 14px or use weight 300 below 22px.

Layout: a 1440px viewport with a 1056px content column from x 192 to x 1248. Radii: 50px for every button and pill, 20px for the eyebrow, 24px for policy rows, 12px for the hero stage and cards, 6px for the stage window.

Announcement bar (id clinic): a 32px Signal Violet strip, its content centred: Live Setup Clinic in 16px weight 500 #0E0F11, then two tags each led by a 16px outline glyph — Workshop and Every Thursday — and 44px later Save a seat with a chevron, 15px weight 500.

Navigation: a 64px bar on rgba(14,15,17,0.4) under the strip, closed by a 1px hairline across the content column. Left: a 15×19px arched-gate mark and the wordmark Postern in 19px weight 500. Then Product, Docs, Customers, Resources, Partners and Pricing, 20px apart from x 298. Right: Sign in, then two 34px pills 8px apart — Book a Demo, white with black text, and Start Free, a ghost pill on rgba(245,245,255,0.1) with an inset 0 2.5px 0 -2px rgba(255,255,255,0.1) highlight.

Hero (id top): two columns, 480px and 528px with a 48px gap, starting 64px under the nav. Left: at y 160 a 35px Graphite eyebrow pill, padding 4px 14px 4px 4px, holding a Steel New chip and Postern for MSPs with a chevron. At y 213 the four-line headline Every door, / every agent, / one policy. / No tunnels. — the last line in Live Wire. At y 505 the 472px Silver lead: Identity-aware access for people, services and AI agents that installs in an afternoon, reaches every resource and retires your VPN. At y 615 the 34px Live Wire Start Postern Free pill with a chevron, and 20px right a plain white Book a Demo text link with a chevron. Right, from y 160: a 528×598px stage — Obsidian, 12px radius, 1px Graphite border — filled with a 10px Smoke dot matrix that fades out around a clear centre. Across its top, 43px down, the centred mono caption Access by intent, not address in Signal Violet. Two concentric teal orbits (380px dashed, 250px solid at low opacity) ring five 44px teal-outlined nodes — lock, person, database, laptop, chip. Over their centre a 342×222px window with a 1px Signal Violet border, three Steel dots and a dashed inner frame stacks four 32px Slate rows — Identity, Posture, Network, Schedule — each a 13px violet mono label with an 18px black check badge drawn in Live Wire.

Logo strip: from y 820 an 80px band ruled by a 0.5px Steel line, one row of ten original monochrome white wordmarks in mixed styles, 52px apart from x 171, running past the right edge.

Feature trio: three 320px columns, 48px apart, 58px under the strip — Precise Control, Direct Speed and Calm to Run — each a 17px weight 500 white title hung 32px left on a 22px outline glyph over 15px Cloud copy.

Platform (id platform): a centred 48px heading The Postern Access Platform, then three 1056px cards (Obsidian, 12px radius, 1px #1D2023 border, 10px inset) each split into text and a product panel: a teal eyebrow, a 48px three-line weight-300 heading, a Graphite Learn more pill, three linked capabilities at the foot, and on the right a tinted panel (Live Wire, Signal Violet, then Circuit Teal at 60% over a 32px grid) holding a dark product window drawn in HTML — an activity log, a blocked-domains list, a resource sheet.

Deploy band: a #1D2023 band with a centred two-line 48px heading Serious security, / switched on by lunch.

Customer stories (id stories): a centred two-line 48px heading, a Graphite Explore stories pill, then a three-column grid of 200px story tiles 20px apart; three tiles are lit — Signal Violet, Live Wire and Paper — each with a 13px company and sector line, a 24px weight-300 headline and an arrow; the others are empty #141617 tiles holding one white wordmark.

Rating pill: a 208×50px Obsidian pill, 50px radius, with an inset white hairline: 4.8 in 32px weight 300, five white stars and a 12px mono caption from 60+ reviews.

Footer: Obsidian with an Ash hairline on top, four columns of 15px Cloud links under white 13px headings, the mark and © 2026 Postern Labs.

## 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; it needs no client JavaScript. Self-host Hanken Grotesk (variable, 300–600) and DM Mono (400), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the stage's dot matrix with a radial-gradient background and a mask, the orbits as bordered circles, the mark, nodes, chevrons and glyphs as inline SVG, and every product window as HTML and CSS, never an image or canvas, so every render is identical. 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 Postern clearly fictional and rebrandable: no real company, customer, review site or person — every wordmark in the logo strip and stories grid is invented and set in type, and no platform or vendor logo is reproduced. Keep one filled call to action per screen: Live Wire #EEF35F fills only Start Postern Free and always carries #000000 text; Signal Violet never fills a button. Text pairs clear WCAG AA: #FFFFFF, #CFCFD3 and #A1A1AA on #0E0F11, #0E0F11 on #B6ABFF, #B6ABFF on #21223A, and #000000 on #EEF35F and #FFFFFF. 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; pills brighten over 150ms on hover, the logo strip stays static, and every transition stops for prefers-reduced-motion. Every control shows a 2px #EEF35F focus ring with a 2px offset. The stage, orbits and product windows are hidden from assistive technology. At 360px the announcement bar keeps its first label and Save a seat, the nav keeps the mark, Start Free and a Menu button, the headline drops to 40px/44px at -0.6px, the stage moves under the CTAs at full width with a 4:5 frame, the logo strip scrolls horizontally inside itself, features and platform cards stack in one column, 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.