Attio

Build the "Attio" kickstart — Architectural editorial on white marble: centered display headlines, one cobalt accent and product UI cards that float on blue-tinted shadow.

## Design
Build a rebrandable relationship-workspace product landing page.

Create a complete landing page for Keelson, a fictional relationship workspace where a small team keeps every company, person and conversation in one editable data model. Its core idea: architectural editorial on white marble — a calm white canvas, exact type and the product's own interface as the only picture. This is a concept presentation, not a real product — no sign-up, accounts, prices, plans, customer logos, testimonials, integrations or claims about AI accuracy. Use original branding, artwork and copy throughout.

Color: near-monochrome plus one cobalt. Page Canvas #FFFFFF is the page and every card. Paper #F4F5F6 is the alternate section band and the product sidebar. Ink Black #1C1D1F is every heading and primary text. Graphite #232529 fills the primary button. Carbon #2E3238 is secondary dark text and hover states. Muted text is Slate #5F6977 on both white and Paper, so descriptions keep WCAG AA contrast (the source's lighter #6F7988 fails on Paper). Mist #E4E7EC is every border, divider, outlined button and input frame; Haze #EEEFF1 is the inset border inside inputs. Cobalt Core #266DF0 is the single accent: links, focus rings, the active icon in the product sidebar, the small square send button and selected checkboxes — only ever on white, never a large fill, never on body copy. Cobalt Soft #538BF3 fills the one NEW badge. Ice Wash #E4EDFF is a soft highlight behind the selected table row. Onyx #000000 is the promo banner and the footer; footer column titles are Mist 300 #B5BDC9 and links white. Shadows are blue-tinted and faint — rgba(28, 40, 64, 0.1) 0px 2px 3px -2px plus rgba(28, 40, 64, 0.04) 0px 4px 6px -2px for cards, rgba(28, 40, 64, 0.06) 0px 2px 6px 0px plus rgba(28, 40, 64, 0.08) 0px 6px 20px -2px for the product card — never warm grey or black. No gradients on buttons.

Typography: body, buttons and navigation in Inter, ui-sans-serif, system-ui, sans-serif at weight 500 (not 400 — 500 is the system's voice); headings in "Inter Display", Inter, ui-sans-serif, system-ui, sans-serif weight 600. Turn on font-feature-settings 'ss03' everywhere. Display 64px/1.0 at -0.02em, heading-lg 56px/1.07 at -0.015em, heading 40px/1.1 at -0.01em, heading-sm 32px/1.19, subheading 20px/1.3, body 16px/1.38 at -0.01em, captions 12px/1.33. Tracking is never positive except the 12px uppercase eyebrow at 0.06em. One serif, "Tiempos Text", Georgia, serif at 40px/1.1 weight 400, appears exactly once, in the editorial statement. All faces installed locally, no remote font request. Shapes: 10px radius on every button, input and tab; 7px on tags, badges and eyebrow pills; 12px on feature cards; 14px on the product card. Page max-width 1200px inside a 1440px frame, 96–120px between sections, 24px card padding, 8–12px gaps inside cards.

Dark promo banner: full-width, 48px tall, Onyx #000000, a centered 14px weight 500 white line Keelson is a design study — every record on this page is a sample. and a white Read the fine print → link to the questions.

Navigation header: 68px, white, a 1px Mist bottom border, content max 1200px. Left: an original inline-SVG knot mark (two interlocking rounded squares in Ink Black) beside Keelson in 18px weight 600. Centre: Records, Workflows, Reports, Questions as 15px weight 500 ghost links in Carbon, hover Ink Black. Right: a ghost link Fine print that goes to the questions, and the Graphite primary button Try the sample (white 15px weight 500, 10px radius, 40px tall, 12px 16px padding). Every link is an anchor to a real section.

Centered hero with two buttons: 120px top padding, a centered stack max 960px. An eyebrow pill (7px radius, 1px Mist border, 12px weight 500 Slate text, 6px 12px padding) holding the Cobalt Soft NEW badge and Sequences now read your notes. Then the h1 The workspace that remembers every relationship. at 64px/1.0 weight 600 Ink Black at -0.02em across two lines, a 20px/1.3 Slate paragraph (max 560px) Keelson turns every email, call and meeting into records your whole team can shape, sort and trust., and two buttons side by side: Graphite Try the sample and the white outlined See how it works (1px Mist border, Ink Black text).

Product screenshot card: directly under the hero, a 1120px-wide white card, 14px radius, zero internal padding, the blue-tinted product shadow, holding a real HTML interface rather than an image — a 220px Paper sidebar with 14px weight 500 items (Home, Companies selected with a Cobalt icon, People, Deals, Sequences, Reports) and 16px 1.5px-stroke line icons; a top bar with a Companies · 128 sample records title, a view switcher and a search input with a 28px Cobalt send square; and a six-row record table with 1px Mist row rules: a checkbox, a 24px initials avatar, the company name, a 7px-radius stage tag (Lead, Qualified, In review, Won in quiet greys), an owner and a last-touch date. Every company is fictional and labelled sample. The second row sits on an Ice Wash highlight.

Tab bar feature tour (id workflows, Paper band): a centered 40px heading One model, four ways in. and a horizontal tab strip — Ask, Records, Sequences, Reports — 15px weight 500, inactive Slate, active Ink Black with a 2px Ink Black underline, no fill. Tabs are real buttons with aria-selected in a tablist; switching swaps a white 14px-radius product card beneath (a question-and-answer panel with a chat input, a record detail with attribute rows, a three-step sequence, a bar chart drawn in inline SVG with one Cobalt bar) from local state and sends nothing.

Three feature cards (id records): a three-column grid of white 12px-radius cards with the two-layer card shadow and 24px padding: a 20px weight 600 heading and a 16px Slate paragraph over a small HTML illustration — Shape your own data model (attribute chips), Keep every thread attached (a stacked conversation list), See the pipeline move (a four-stage bar).

Serif editorial statement (id reports, Paper band): 120px vertical padding, a single centered sentence in the Tiempos Text serif at 40px/1.1 Ink Black, max 760px — A relationship is a record that keeps changing. Your tools should keep up. — with a 12px uppercase Slate eyebrow A PRINCIPLE above it. It is a statement, never a quote or testimonial, and carries no name.

Native questions (id questions, white): a 32px heading Fine print and details elements on 1px Mist rules, max 760px, 16px weight 600 summaries with a thin + that turns to − when open, 16px Slate answers: Is Keelson real? — no, a fictional workspace for this page. Are these companies real? — no; every record is a sample. Can I sign up? — no; there are no accounts, plans or prices.

Closing call to action (Paper band): a centered 56px heading Start with the records you already have., a 20px Slate line, and the same Graphite and outlined buttons; the primary leads to the product card and the outlined to the questions.

Black footer: full-bleed Onyx #000000, 96px vertical padding, the knot mark and Keelson in white top-left, a four-column grid — Product, Records, Resources, Company — with 15px weight 500 #B5BDC9 titles and 14px weight 500 white links, each an anchor to a real section, a 1px Carbon rule, then 14px #B5BDC9 Keelson is a fictional concept. Not a real product or service. and Back to top.

At 760px and below: 16px gutters, navigation links collapse to the mark and the primary button, a 40px hero h1, the product card scrolls its table horizontally inside the card only with the sidebar hidden, tabs scroll horizontally, feature cards in one column, a 28px serif statement, and the footer in two columns. The page fits a 360px viewport with no horizontal page overflow. Use semantic landmarks, one h1, a skip link, visible 2px Cobalt Core focus rings offset 2px on every control, a text alternative for the knot mark and the chart, and keyboard-operable tabs, disclosures and buttons.

## 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, the product UI built as real HTML and original inline SVG for the knot mark, the line icons and the chart. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client component is the tab bar feature tour, which keeps local React state and sends nothing. Native details and anchors need no JavaScript. Use local font stacks only — no remote font, image, logo, icon, video 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 Keelson clearly fictional and rebrandable: no source wordmark, product screenshots or illustrations, no customer or partner logos, no real brand, company or person names in the sample records, no prices, plans, testimonials, endorsements, integrations named after real products or claims about AI accuracy. Every record, figure and chart value is labelled sample. Cobalt Core marks links, focus rings, the active sidebar icon, the send square and selected checkboxes only; shadows stay blue-tinted and faint, and no button takes a gradient. Every link leads to a real section on the page; nothing is sent or stored. Deliver initially visible content with no scroll reveals, marquees, autoplay, video or carousel; hover and focus are a 150ms colour or shadow change, disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair, keyboard-operable tabs, disclosures and buttons, 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.