Build a five-page marketing site for a software or AI product, with graphite backgrounds, soft off-white text, fine borders and one mint accent. Mint Noir uses a large italic-serif word inside bold headlines and a code-drawn product window to carry the opening. Product, Pricing, Resources, Events and Changelog share one navigation system and footer, so the offer and its supporting content can be reviewed together.
What you get
A Product page that introduces the promise through an announcement, a two-line gradient headline with an italic-serif emphasis, download/browser actions and a five-avatar trust row. The code-drawn app window has a sidebar, four KPI tiles with deltas, a revenue sparkline and a key finding; selecting a sample task changes the report. Below it sit six named integration marks, three feature cards and a five-part bento covering an agent portrait, integrations, models, approval and scheduling. A serif customer quotation with four proof measures leads into the closing action. The sample product, people, quotations and figures are fictional.
A Pricing page with monthly/yearly recalculation, three example tiers, emphasis on the middle plan, a comparison table and billing questions. Replace prices and inclusions together so the toggle, comparison and FAQ describe the same offer.
A Resources page with a search field and popular-query chips, six category cards, numbered articles, tutorials labeled by level and a support card. Search filters the provided categories, articles and tutorials. Events pairs a featured workshop with its host, four-part countdown and agenda, followed by session-type filters, registration rows, three replay cards and a validated newsletter field.
A Changelog page with version/date entries, release tags, preview panels and checklists along a timeline whose active node follows the viewport. Load older releases reveals hidden entries, then reports that the list is complete. Subscribe, RSS, replay, trial, support and registration actions in the template show local feedback; they do not deliver those services.
The installation contains a single HTML template, style/page/icon/framework references, third-party notices and a Node.js static validator. It provides the composition and local interaction scripts, rather than a ready-deployed framework application. The template still references Google Fonts and has unfilled portrait image elements; local fonts and supplied or generated people images must be resolved for a self-contained delivery.
Before you choose
Review the site as a connected promise. A visitor should see the same feature names, plan limits and next steps on Product, Pricing and Resources. Put the styling aside for one pass and check whether the app example explains the claim, whether an event can actually be joined and whether release notes describe real changes.
Good fit
A software team is launching or relaunching a product and needs more than a single teaser screen: pricing, help, events and release notes should speak the same visual language.
Your product has concrete features, supported integrations and approved measures that can populate the app window and supporting sections without invented customer proof.
You want the design implemented within an existing framework or a new routed project, while preserving the authored typography, spacing and interaction states.
Not for
A light, multicolor or playful brand direction. The authored identity relies on graphite surfaces, restrained glow and a single accent rather than large colored cards.
A working authentication, billing, registration or content-indexing backend. The included controls demonstrate local state and validation; real services and access enforcement must be connected separately.
A large editorial or documentation platform with hundreds of managed articles. The included resource search operates over the content provided for this site, not a full publishing system.
A real AI application created by the marketing mockup. The app window is drawn to explain the product and does not by itself implement its capabilities.
How to use
You say/mint-noir-saas-site Build the marketing site for Ledgerly, an AI bookkeeping assistant for small online shops.
Prepare the product name and category, a concise main promise, primary and secondary action labels, supported integrations and feature details. Supply the app-window measures with their units and deltas, chart meaning and key finding. Collect plan prices and inclusions, resource content, actual event dates and release notes; keep missing proof clearly identified instead of publishing sample statistics. Include one approved customer story with proof numbers and the particular headline word to emphasize in serif. Help articles, future events and release notes may be supplied later, but empty or fictional entries must be identified before publication.
Choose the implementation target from the brief and repository. The current package uses the requested or existing stack, and defaults to Next.js App Router with TypeScript when there is no repository or preference. A standalone HTML file is intended when explicitly requested. Port pages into routes, repeated elements into components and lists into data rather than embedding the template in an iframe.
Read the style and page references before changing the composition. Preserve one accent, off-white text hierarchy, fine surface borders, pill buttons and the sans/italic-serif headline pairing. Keep the five-page navigation unless a page has been deliberately removed, then update the footer and all related links. The reference uses a 1200px content width, 24px gutters (16px on small phones), 120px section padding (80px below 900px) and a 69px sticky header. Geist headings/body, Geist Mono labels and Instrument Serif emphasis carry the hierarchy. Use inline Lucide SVG for controls and monochrome marks beside actual integration names; keep their notices with the handoff.
Replace fictional copy, people, numbers, prices, events and releases. Keep the app window and diagrams in code. Use supplied people photos where available, or separately authorized generated portraits, exporting local WebP assets at suitable resolution; inline them only when delivering a single file. Keep different people’s portraits distinct.
Wire each visible control to an honest result: prices recalculate, search and filters change the provided collection, countdowns use the intended event time, accordions open and forms validate. Clearly report which buttons only change local state or show a toast, and connect production services separately. Replace the template’s relative countdown, which starts again from the opening time, with the actual event timestamp. Replace demonstration messages claiming an email was sent, a seat saved or a trial started with truthful states until the corresponding service exists.
For standalone HTML, use Node.js to run node scripts/validate-site.mjs presentation.html; for a framework site, also run its relevant build and lint checks. The validator checks source patterns, not end-to-end behavior: missing pages and remaining REPLACE comments are warnings, an img alt attribute alone does not prove a portrait is filled, and its required mint literal must be reconciled if changing the accent. Inspect every page at 1440px and 390px, mobile navigation, comparison-table scrolling, image crops, form errors, real action destinations and reduced motion. CSS animation suppression does not by itself stop every JavaScript timer or pricing tween. Report files, image provenance and local-only actions.
Requirements and costs
You bring
Product name, one-line category and the hero line with one word to set in serif · Real integrations, key features and one customer story with proof numbers · Plans with monthly and yearly prices and an includes list · Optional: help articles, upcoming events and release notes
Dependencies
A modern browser for preview and visual review · Node.js for the included static validator · The selected framework tooling for a generated website · A host image tool or owned photos for team and customer portraits
Outside costs
Generating new portraits may incur a separate image-provider charge. The included example can be viewed without any generation.
Publisher testing
v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
FAQ
It follows the stack requested in the brief or detected in the repository. The current package defaults to Next.js App Router with TypeScript when neither exists. A standalone self-contained HTML file is a separate explicitly requested deliverable; the catalog example does not require every implementation to remain a single file.
Yes: change the shared accent token while preserving the neutral graphite surfaces and the headline hierarchy. Mint is the authored reference. The included HTML checker explicitly requires #6ee7c8, so a custom accent also needs the validation rule reconciled; a color-token edit alone is not a completed custom build.
The documented front-end interactions include recalculated prices, local filtering and search, a ticking event countdown, openable accordions and validated forms. They are not real payment, registration or message delivery until the corresponding services are connected. Inspect the actual output rather than treating the instructions as a completed runtime test.
No. Most of the product UI and visual effects are built from HTML, CSS and SVG. Photography is limited primarily to people, including avatars and an agent-card portrait. Use approved supplied images when available; generating new portraits is optional and can incur a provider charge.
No. Its product, people and proof values are fictional. Replace them with approved material for a real launch, omit unsupported claims or keep a demo explicitly fictional. The same applies to integration marks and customer quotations.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.
