Sanity.io

An original Agatework content-operations page on #0B0B0B. A 36px announcement bar carries one centred 13px IBM Plex Mono line. The hero fills the rest of the first screen: behind it a dimmed, grainy scene — an empty stadium stand of rust-coloured seats under a grey roofline, blurred and darkened — overlaid by an annotation layer of 12px green and red crosses, a thin grey selection box and faint mono coordinate labels (x: 761 y: 505). On top, a 67px header: a four-stroke white mark at x 24, six 13px mono uppercase pill links from x 68, and at the right Log in, Contact sales, an ember Get started pill and an ember-outlined Ask agent pill. At x 24, y 220 the two-line 112px headline The Content / Operations Platform, each line underlined by a dotted ember rule; at y 491 a two-line 32px lead; at y 610 three 55px pills — Start building (#FF4100), Watch demo (#FFFFFF) and an outlined mono npm create agatework@latest with a copy glyph. A 72px #FF4100 strip at the foot of the screen holds eight invented customer wordmarks in #0B0B0B and a mono label. Below the fold: three proof stats, a 72px Studio headline over a framed live-preview site and four dark editor panes, an Automation section with a dotted function graph, a white numbered Get started section and a footer.

• Best forHeadless CMSs, content platforms, developer-first publishing tools and API products that want an editorial, engineer-annotated dark hero, a real product-UI showcase and one loud orange action.
• 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 server components; only the copy-command pill, the Studio editor tabs, the newsletter form and the mobile menu need small client islands holding state in memory. Self-host Inter (variable, so weight 425 resolves) and IBM Plex Mono (both SIL Open Font License) as woff2 through next/font/local — no remote font request. Draw the mark, the stadium scene, the annotation layer, the wordmarks, the hatching, the dotted graph and every icon as inline SVG and HTML; place the crosses and graph dots from fixed coordinate lists so the markup is identical on every render. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Sanity.io" kickstart — A near-black content-platform homepage: a left-anchored two-line 112px headline underlined in dotted ember, mono uppercase pill navigation, an ember Start building pill beside a white demo pill and an outlined npm command, all over a dimmed scene marked with green and red annotation crosses, closed by a full-width ember logo strip.

## Design
Build a rebrandable landing page for a structured-content operations platform: one content lake that a team models in code, edits in a customisable studio, automates with functions and agents, and publishes to every website, app and channel through an API.

Create a complete landing page for Agatework, a fictional content operations platform. 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 near-black page that turns white for one editorial section. Onyx #0B0B0B is the page, the hero, the announcement bar and every dark panel — never pure black. Canvas #FFFFFF is text on dark, the Watch demo pill and the Get started section's page. Ember #FF4100 is the only action colour: the Get started and Start building pills, the Ask agent outline, the dotted headline underline, the logo strip and a small Book a demo pill — never body text or decoration elsewhere. Graphite #212121 is hover fills, inputs and raised dark cards. Charcoal #353535 is dark hairlines, editor borders and the Publish button. Smoke #B9B9B9 is secondary text on dark: stat captions, placeholders and annotation boxes. Ash #D6D6D6 is light-mode hairlines. Mid #797979 is metadata, breadcrumbs and code comments. Signal Blue #0052EF is the focus ring and the skip link only. Annotation crosses use Plex Green #19D600 and Alarm Red #FF2B2B. Code tokens alone use #F500FF, #45FF00 and #027FFF. No gradients and no drop shadows anywhere.

Typography: headings use "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; body uses the same Inter stack; mono uses "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace with font-feature-settings "calt" 0. Hero headline 112px/112px weight 400, letter-spacing -4.48px. Section headlines 72px/72px weight 400, -2.88px. Sub-headlines 48px/51.6px weight 400, -1.68px. Hero lead 32px/35.2px weight 425, -0.32px. Stat figures 32px/35.2px weight 400, -0.32px. Hero pills 24px/26.4px weight 400, -0.24px. Body 18px/27px weight 400. Navigation, small pills, captions and labels 13px/16.9px IBM Plex Mono 400 uppercase; the announcement 13px/19.5px weight 500; code 13px/22px.

Layout: a 1440px canvas with 24px page gutters (content from x 24 to 1416); headlines are left-anchored, never centred, with a ragged right edge. Coordinates below are page coordinates. 96px between sections. Radii are binary: 99999px for every pill, button and tag; 3px for inputs, code and editor panes.

Announcement bar (id news): a 36px #0B0B0B strip with one centred 13px weight 500 mono line, Everything *[Fieldnotes] 2026: see what we shipped. →, linking to the proof stats.

Navigation: a 67px header laid over the top of the hero, 24px from each edge. At x 24 a 32×28px mark of four parallel white diagonal strokes with round caps. From x 68 six nav pills: Products, Solutions, Resources, Docs, Enterprise, Pricing. At the right: Log in and Contact sales pills, the Get started pill (#FF4100 fill, #0B0B0B label) and the Ask agent pill (1px #FF4100 border, white label), 4px apart.

Hero (id top): the first screen, 864px below the announcement bar on #0B0B0B. Behind everything, an original inline-SVG scene: a dim stadium stand — rows of rust #5A2A22 rounded seats receding under a grey #2D2C2A roofline with two outlined scoreboard frames — blurred 5px, covered by a 42% #0B0B0B scrim and a faint 5% noise grain. Over it an annotation layer: about twenty 10px crosses drawn with 2.4px square-capped strokes, mostly #19D600 and a few #FF2B2B, clustered right of centre; a thin #B9B9B9 selection box about 200×155px around x 626, y 496 with a smaller box beside it; and faint 17px mono labels x: 761 y: 505 and x: 751 y: 519 with rows of tiny pixel values, at 40–50% opacity so the copy always wins. At x 24, y 220 the two-line headline The Content / Operations Platform, white, each line underlined by a dotted #FF4100 rule (2px dots every 5px) that runs exactly the width of its line. At y 491 the two-line lead Structure every story once, ship it to every surface. / Every channel, one content lake. in white. At y 610 three pills 8px apart: Start building, Watch demo, and the outlined command npm create agatework@latest with a copy glyph that copies it.

Logo strip (id logos): the last 72px of the first screen, y 828 to 900, a full-width #FF4100 band, 24px side padding, items spaced between: eight invented customer wordmarks in #0B0B0B, each in its own type style (a heavy condensed MERIDIAN, an italic serif Halvard, a widely tracked NORTHWOOD, a black KOVA, tallow with a superscript +co, BRISK, a ringed outfield and an italic parcel), with the mono label Trusted by teams that publish daily between the sixth and seventh.

Proof (id proof): on #0B0B0B, three columns 48px apart. Each starts with an invented customer wordmark in white, then a 32px figure on a 30px band of fine diagonal #212121 hatching — −72%, 40k, 60h — and a 13px mono uppercase #B9B9B9 caption (localisation turnaround with agents; reusable structured content pieces; editorial hours saved per month) ending in a white Read more →. A centred 35px Book a demo pill in #FF4100 follows.

Studio (id studio): the 72px headline Model how your content team actually works, two lines, with a dotted ember underline. Below, a 1px #353535 framed live-preview site — a 28px header with three grey dots, a green mono PROD tag, centred HOME ABOUT SHOP links and LOGIN CART [1] — showing a 48px Page title beside a 24px Page description goes here. Overlapping its lower edge, four 3px-radius #0B0B0B editor panes with #353535 borders: a code pane hero.ts / terminal with a defineType schema in syntax colours, a form pane (breadcrumb Studio / Homepage / Hero, Title and Description inputs, an Image field and a Publish button), a History pane with an empty state, and a New Content Release pane listing four documents with Add, Change and Publish actions in #19D600 and #FFFF00 and a Run release button.

Automation (id automation): a 48px two-line headline Content operations without the busywork on the left and a 24px lead on the right (Functions, agents and scheduled jobs handle the manual work before and after publish.). Below, a 1376px #0B0B0B panel bordered #353535 in three columns: left, a dotted field of small mono labels (LOOK UP ALL ARTICLES, FOCUS ON THE LAST EDIT) with a notification card (an avatar, Studio, Ada published a new product: Field Jacket, Just now) over a TRIGGER chip; centre, a document-event handler in mono code with a FUNCTION chip; right, a graph of white dots labelled UPDATE PRODUCTS, UPDATE LISTINGS, BLOG POST 2 leading to an ember OUTPUT square, and a Learn more → link.

Get started (id start): the one white section — #FFFFFF page, #0B0B0B text. A 72px headline Start with a schema, end with every channel, then four numbered rows separated by 1px #D6D6D6 rules: a mono 01–04 with a #797979 uppercase label (MODEL, EDIT, AUTOMATE, DELIVER) on the left, a 48px headline and an 18px paragraph with three short bullet points on the right. Close with a Start building pill and an outlined Contact sales pill with a #0B0B0B border.

Footer (id footer): on #0B0B0B, the white mark and wordmark agatework, five 13px mono uppercase link columns in #B9B9B9 (Product, Developers, Solutions, Company, Legal), a newsletter input with 3px radius and an ember Subscribe pill, a status line with a #19D600 dot reading All systems normal, and the line © Agatework sample · a fictional content operations platform. 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, radius and spacing token. Render the page as server components; only the copy-command pill, the Studio editor tabs, the newsletter form and the mobile menu need small client islands holding state in memory. Self-host Inter (variable, so weight 425 resolves) and IBM Plex Mono (both SIL Open Font License) as woff2 through next/font/local — no remote font request. Draw the mark, the stadium scene, the annotation layer, the wordmarks, the hatching, the dotted graph and every icon as inline SVG and HTML; place the crosses and graph dots from fixed coordinate lists 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 Agatework clearly fictional and rebrandable: no real company, product, customer, statistic, photograph or person; every customer is an invented wordmark. #FF4100 appears only on actions, the dotted underlines and the logo strip — never on body text or as a second decoration. Never use pure #000000 for a surface. No gradients and no drop shadows; depth comes from #0B0B0B, #212121 and #FFFFFF alone. Headlines stay left-aligned and regular weight. Text pairs #FFFFFF and #B9B9B9 on #0B0B0B, #0B0B0B on #FFFFFF and on #FF4100, and #797979 on #FFFFFF clear WCAG AA. Every link leads to a real section on the page; start, demo and sales actions scroll to the Get started section, and the newsletter form validates locally and sends nothing. The page loads no analytics or tracking script and shows no cookie banner. Content is initially visible: no video, marquee, typing effects, counters, parallax or scroll reveal; hovers take 150ms and every transition stops for prefers-reduced-motion. Every control shows a 2px #0052EF focus ring with a 2px offset, and a Skip to content link in a #0052EF pill appears on focus. The scene, annotation layer and hatching are decorative and hidden from assistive technology. At 360px the navigation collapses into a Menu pill, the hero headline drops to 48px/50px with -1.6px tracking, the lead to 22px, the three hero pills stack full width, the logo strip becomes a 2-row grid, the proof columns and editor panes 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.