Tines

Build the "Tines" kickstart — A lavender observatory under glass: whisper-weight serif headlines, violet ink on parchment, and a workflow drawn as a calm row of nodes.

## Design
Build a rebrandable SaaS landing page for a workflow-automation workspace.

Create a complete landing page for Larkspur, a fictional workspace where operations and security teams wire small automated flows — receive an alert, enrich it, decide, act — on a calm canvas instead of in scripts. Its core idea: a lavender observatory under glass — a soft warm-white canvas, deep violet ink at every edge, and specimen cards in pastel tints, each labelled like a botanical sample. This is a concept presentation, not a real product — no sign-up, pricing, customer logos, integration brand logos, awards, real people or real reviews. Use original branding, UI and copy throughout.

Color: violet ink on parchment. Deep Iris #4D3E78 is primary text, every default border, icon stroke and link — never pure black, and never a gray-only neutral. Amethyst #6956A8 is secondary text, secondary borders and decorative iconography. Iris Glow #745FBB is the only filled button colour, with white #FFFFFF text. Parchment #FCF9F5 is the page canvas — never a pure-white full-bleed background; white is reserved for cards and the product frame. Lilac Mist #F3ECF7 is the soft violet surface for nav hover, table rows and the alternate band; Lavender Veil #EADFF8 is the subtle 1px frame border and hairline divider. Specimen cards each take one accent family, a pastel surface plus a 2px border from the same family: Rose Quartz #FFDCE8 with Orchid Pink #A54B7A, Apricot Wash #FEEDE0 with Tangerine #B74D1A, Sky Tint #CCDCF8 with Cobalt #3C699B, Licheno #E9F3E7 with Forest Fern #1F7A57. The vivid accents live only as 2px borders, status dots and small line illustration — never as large filled regions or hero washes. No gradients, no box-shadows anywhere: depth is borders, tints and contrast.

Typography: headlines in a whisper-weight editorial serif at weight 300 only — "Cormorant Garamond", Georgia, "Times New Roman", serif — standing in for the source's Reckless, always with negative tracking: 72px/0.98 at -2.16px for the hero, 52px/1.0 at -1.04px for section headings and specimen figures, 28px/1.05 at -0.42px for card titles. Everything functional — body, nav, buttons, labels — in one geometric grotesque, Geist, Inter, system-ui, -apple-system, "Segoe UI", sans-serif, standing in for Roobert: 18px/1.4 subheads, 16px/1.4 body, 14px weight-500 nav and captions, 12px weight-600 uppercase eyebrows at 0.06em. Never set a headline at weight 600 or above; never use a third family. Locally installed fonts only, no remote font request. Shapes: 14px radius on every card, button and major container — the system's defining shape — and 7px on the items inside the navigation pill. Spacing: 8px base, 24px card padding, 80px between sections, content in a 1200px column with 48px side padding.

Navigation: sticky on Parchment. Left: an original wordmark — a small five-petal larkspur glyph drawn in 1.5px Deep Iris strokes and larkspur in the serif at 26px weight 300. Centre: a floating white #FFFFFF pill, 1px Lavender Veil #EADFF8 border, 4px padding, holding 14px weight-500 Deep Iris links — Flows, Specimens, Build one, Questions — each a 7px-radius item with 8px 14px padding whose hover and focus background is Lilac Mist #F3ECF7. Right, outside the pill: a Log in text link that jumps to Questions, and one filled button, Try the sample — Iris Glow #745FBB, white 14px weight-600 text, 14px radius, 10px 20px padding.

Hero (id flows): centred on Parchment. A 12px uppercase Amethyst eyebrow, A SAMPLE AUTOMATION WORKSPACE; a 72px Deep Iris serif headline at weight 300 on two lines, Quiet automation for teams / who answer the alarms.; an 18px Amethyst subhead, max 560px, Larkspur lets you draw the steps you already take — receive, enrich, decide, act — and run them for you, the same way every time.; then two buttons side by side, 16px apart: a ghost Read the flow (transparent, 1.5px Deep Iris border and text, 14px radius, 12px 24px padding) and a filled Build a sample flow (Iris Glow #745FBB, white text). Hand-drawn line illustrations in 1.5px Deep Iris strokes float at the hero's edges — a small cloud at the top left and a paper plane with a dashed looping trail at the top right — original inline SVG, never filled. Below, 48px down, a 1040px-wide product frame: white #FFFFFF, 14px radius, 1px Lavender Veil border, 8px padding, with a thin toolbar row (three 8px Lavender Veil dots, a 12px Amethyst breadcrumb Sample / Alert triage, and a small Forest Fern #1F7A57 Running pill with a dot) above a Parchment canvas holding a left-to-right workflow graph drawn in HTML and CSS: five rounded white 14px nodes — Receive alert, Look up sender, Check reputation, Decide, Notify on-call — joined by 1.5px Deep Iris connector lines, each node with a 12px uppercase Amethyst type label, a 16px Deep Iris title and a small status dot (Forest Fern for done, Tangerine #B74D1A for waiting). The Decide node forks into two lower nodes, Close as benign and Open a case. No screenshot image.

Specimens (id specimens): Parchment, a 12px uppercase eyebrow SPECIMENS, a 52px serif heading Four small things it does well., then a four-column grid of specimen cards, 14px radius, 24px padding, 2px accent border on its pastel surface: Rose Quartz with Orchid Pink — a 52px serif 12 steps, the longest sample flow; Apricot Wash with Tangerine — 0 scripts to maintain in the sample; Sky Tint with Cobalt — 3 ways to start a flow: a webhook, a schedule or a button; Licheno with Forest Fern — 1 canvas, every step visible. Each card carries a 12px uppercase specimen label in its accent colour (No. 01 … No. 04), a 14px weight-500 Amethyst caption at 0.05em, and a small original line glyph. Every figure is labelled sample.

Build one (id build): a Lilac Mist #F3ECF7 band, two columns. Left: eyebrow BUILD ONE, a 52px serif heading Pick a step. Watch the flow change., a 16px Amethyst body at max 440px, and a ghost button Reset the sample. Right: a white 14px card holding a working local builder — four 7px-radius step toggles, Receive, Enrich, Decide, Act, as a segmented row on a Lavender Veil track; choosing one highlights that node in a small four-node chain below (the active node gets a 2px Iris Glow border) and shows a 16px Deep Iris explanation plus a 12px Amethyst sample input/output pair in a Parchment code block. Everything is local state; nothing runs, is sent or is stored.

Questions (id questions): Parchment, eyebrow QUESTIONS, a 52px serif heading Questions, and native details rows on 1px Lavender Veil hairlines with 20px Deep Iris summaries and a thin plus that becomes a minus: Is Larkspur real? — no, it is a fictional concept. Does the sample connect to anything? — no; every step is local sample data. Can I rename the steps? — yes, in your own build.

Footer: Parchment, a 1px Lavender Veil top border, 64px padding, the serif wordmark with its glyph, a 14px Amethyst line Larkspur is a fictional concept. Every flow, figure and step is sample content., and 14px Deep Iris anchor links to Flows, Specimens, Build one and Questions.

At 760px and below: 16px page padding, the navigation keeps the wordmark and Try the sample while the link pill scrolls horizontally inside itself, the hero headline drops to 44px and section headings to 36px, the hero buttons stack, the workflow graph becomes a vertical list of nodes with vertical connectors, the specimen grid becomes two columns then one at 480px, and the Build one columns stack. The page fits a 360px viewport with no horizontal page overflow. Use semantic landmarks, one h1, a skip link, visible 2px Iris Glow #745FBB focus outlines offset 2px on every control, a radiogroup with arrow-key support for the step toggles, a live region announcing the chosen step, and keyboard-operable disclosures.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties
- Native HTML disclosures

Use Next.js App Router, React and TypeScript with plain CSS custom properties and original inline SVG for the larkspur wordmark glyph, the cloud and paper-plane line illustrations and the specimen glyphs. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client component is the Build one step picker, which keeps local React state and runs nothing. Draw the hero product frame and its workflow graph in HTML and CSS — no product screenshot image. Native details and anchors need no JavaScript. Use local font stacks only — no remote font, image, logo, workflow backend or analytics host. 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 Larkspur clearly fictional and rebrandable: no Tines wordmark or product UI, customer or integration brand logos, pricing, awards, review quotes, statistics presented as real, or real people. Every flow, step and figure is labelled sample. Colour stays ink-like: Deep Iris #4D3E78 carries text and borders; Iris Glow #745FBB is the only filled button; Parchment #FCF9F5 is the canvas and white is reserved for cards and the product frame; Orchid Pink #A54B7A, Tangerine #B74D1A, Cobalt #3C699B and Forest Fern #1F7A57 appear only as 2px card borders, status dots and small line work on their pastel partners. No box-shadows, no gradients, no headline heavier than weight 300. Every link leads to a real section on the page; nothing is sent, run or stored. Content is initially visible — no scroll reveals, typewriter effects, marquees or parallax; hover and focus are a 150ms change of background or border and the step picker's node highlight is a 150ms border change, all disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair, keyboard-operable step toggles and disclosures, and a 360px layout without horizontal page overflow.

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