Your workplace has the answer. Just ask Dala for it.

Build the "Your workplace has the answer. Just ask Dala for it." kickstart — A shared-knowledge landing page with luminous constellations and connected sample notes.

## Design
Create a dark editorial product page for Threadspace, a fictional shared notebook for small teams. Use pure black #000000 for both background and surface; the border token is also #000000 because sections and content have no visible boxes, dividers, panels or shadows. Primary text is #FFFFFF, secondary text #9A9A9A, supporting paragraphs #BDBDBD. The one interactive accent is Electric Iris #8052FF, with #FFFFFF labels. Reserve #FFB829 amber and #15846E teal for decorative particles and a few large noninteractive accents. Never turn these into extra button colors. Use a 3px violet focus outline with an offset; preserve visible outlines on black and white. No gradients in controls or large surface fills.

Self-host Inter Variable with its OFL license, the open substitute for the licensed source face, at weights 200, 400 and 600. The font stack is Inter, system-ui, sans-serif, with system-ui only as a loading fallback. Headlines use regular 400 and -0.04em tracking, not bold; body copy is 18px/1.5 at 200. Navigation and labels use 12–14px at 600 with 0.025em tracking. Desktop hero type is 104px/1.02, secondary display type 78px/1.1, smaller headings 42px/1.2 and disclosure titles 24px/1.25. At narrow widths, use 48px hero and 42px section headings. Use a 6px spacing rhythm, a 1280px centered content maximum, 80px desktop gutters at 1440px, and 96–120px section spacing. Buttons are at least 48px high with 24px radii and generous horizontal padding. Keep all other content floating directly on the canvas.

At 1440×900, make an 88px transparent header. At left, draw an original mark of three offset violet strokes beside the lowercase wordmark threadspace. At right, How it works, Sample notes and Questions are plain muted navigation anchors; Explore the demo is the only filled violet pill in this first viewport, followed by a small diagonal arrow. Use no nav bar border, glass blur or enclosed logo panel.

Below it, a roughly 600px two-column hero. Left begins around x=80, y=205: a small uppercase label A SHARED MEMORY FOR SMALL TEAMS, then the three-line h1 Good work. / All / connected. at 104px. Place the 18px supporting text Bring the thinking, decisions and little discoveries into one shared place. Let the next idea start a little further ahead. in a 410px column. Beneath, an unboxed text anchor See how it works with a small downward arrow. Right contains the only hero artwork: an original procedural constellation of about 1100 tiny outlined triangles flowing around an irregular elliptical loop with a hollow center, occupying about 640×530px. Vary triangle sizes from 2 to 6px, with violet concentrated on the upper left, amber along the lower arc, teal and pale blue on the right. Use a fixed deterministic seed to distribute them across several warped rings and a sparse ambient scatter. Keep the center and the surrounding black space open; never draw the source's brain silhouette, logo or an interface screenshot. This is an original inline SVG decoration, aria-hidden, behind no text. Do not use photography, remote images, rasterized headings, large fuzzy glow blobs or a grid of cards. A tiny caption below the artwork reads MANY SMALL IDEAS. ONE SHARED PICTURE.

Begin the second section near y=745 so the first screenshot reveals a real next section. Its left column says Less searching. / More knowing. at 78px; its right column starts with 01 / CONNECT THE DOTS, followed by Make room for the next thought. and a brief explanation that the sample notes below show how one question can connect a decision, a project note and a useful next step. Continue with spacious alternating text sections, using white text and air rather than rules or surfaces.

The Sample notes section is a working local reading demo, not a chatbot. Give it a heading A question is a place to start. and three native details/summary disclosures numbered 01–03. Questions are Why did we simplify the launch?, What is ready to share?, and What should happen next? Closed summaries are white, generously spaced and keyboard operable with a plus that changes to a minus while open. The first is open by default. Each answer contains a short original paragraph and two inline text links to source notes further down this same page. The source notes section contains three titled articles with short readable prose, not card containers. Include the visible label Fictional sample notes. Everything stays on this page. No arbitrary input, search, account, upload or simulated loading is needed.

End with a Questions section of native disclosures and a compact footer. Use one h1, semantic landmarks, an initially hidden skip link that becomes visible on keyboard focus, and descriptive anchor text. At 760px and below use 24px gutters, wrap visible nav links, stack every two-column section and fit the artwork inside the viewport. Long content must wrap without horizontal page overflow down to 360px. All content and every disclosure must work without JavaScript. Keep the constellation static; only short 160ms color transitions are allowed, and remove them for reduced motion. Never hide content pending animation.

## Tech stack
Use Next.js App Router, React, TypeScript, CSS custom properties and inline SVG. Retain equivalent tools already in the host repository. Server-render all page content and native details/summary disclosures; this demo needs no client state or client component. Generate the SVG deterministically on the server from fixed mathematical coordinates or a seeded generator, never ambient Math.random during render. All artwork, fonts and styles are local. Inter Variable may be self-hosted with its OFL license; do not fetch a font, icon or image at runtime from another service. No UI kit, database, authentication, external API, AI model, analytics, paid service or persistence is required. Provide dev, build and start scripts. Run a production build and start it before taking the preview screenshot. Include a README for setup and customization.

Technology list:
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties
- Inline SVG
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
Build the complete fictional Threadspace knowledge-product page, using original copy and the art direction above. The gallery name identifies the inspiration only: the sample page must use Threadspace and its own stroke mark, with no source brand, source URL, logo, testimonials or borrowed copy. It describes an idea for a shared notebook; the live demonstration is only three local sample questions and notes.

Navigation: How it works and See how it works link to #how-it-works. Sample notes and Explore the demo link to #sample-notes. Questions links to #questions. The wordmark points to #top. Every destination exists. The demo uses native disclosures, with the first open on load. They can be opened independently, by pointer or keyboard, and closing one never clears the other answers. There is no pretend message composer or live answer generation.

Question 01, Why did we simplify the launch?: We chose one clear path through the notebook so a new teammate can find a decision, read its context and keep moving. The extras can wait until that path feels effortless. Link to Launch decision (#launch-decision) and First-week notes (#first-week).
Question 02, What is ready to share?: The welcome guide and the sample notebook are ready for an internal walkthrough. The team still needs to review the language before sharing them outside the group. Link to First-week notes and Release checklist (#release-checklist).
Question 03, What should happen next?: Walk through the notebook with someone who has not seen it. Note where they hesitate, revise the guide and review the checklist together. Link to Launch decision and Release checklist.

Source articles: Launch decision / Keep the first release focused on a readable shared notebook. Defer integrations and notifications until the basic reading path is clear. First-week notes / The welcome guide explains where decisions live and how to add context. The sample notebook is ready for a team walkthrough; external sharing still needs a language review. Release checklist / Invite a fresh reader, record confusing moments, revise the guide, then agree together on what is ready to share. Label these as fictional examples, not customer evidence. The sample never connects to workplace tools, sends a question, persists a choice or makes a real AI request.

FAQ: Is this connected to my work? / No. These are fictional sample notes stored in this page. Can I ask a different question? / This demo has three prepared questions. Change the local content to add your own examples; there is no live AI service. Can I make it my own? / Yes. Replace the identity, copy, colors, note content and original constellation in the local project. Use a sample mailto:[email protected] contact in the footer labeled Sample contact, alongside Threadspace is a fictional product study. No data is sent or stored. Include no fake customers, pricing, promises about actual integrations or signup flow.

Build a rebrandable knowledge-product landing page with an original particle constellation and native sample-note disclosures. Preserve this page structure:
1. Transparent wordmark navigation with one violet action
2. Oversized editorial hero and original triangular constellation
3. Two-column explanation of shared context
4. Three linked sample-question disclosures
5. Three fictional source notes
6. Native questions and sample-contact footer

### 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.