What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Mint Noir SaaS Site

When to use

• Your SaaS product needs a full marketing site — home, product, pricing, and docs entry — not just a single landing page
• A light, generic template makes your product look like every other SaaS, and you want a distinctive dark identity with mint as the signature accent
• You are launching a developer- or data-oriented tool where a dark interface feels native to the audience
• Your current site grew page by page with no shared system, and you need a rebuild around one palette, one type scale, and one voice
• A rebrand has settled on mint + noir and you need every marketing page rebuilt in it

Workflow

1. Map the site before designing it (input: your product and audience → output: a page map)
   List the pages the site must have and the one job of each: Home (convince in ten seconds), Product or Features (show how it works), Pricing (make the choice easy), Docs or Guides entry (get people started), and About or Contact (prove there are real people behind it). Give each page one primary action and write it on the map. If two pages would do the same job, merge them — a five-page site where every page earns its place beats a twelve-page site where half the pages are filler. The map is the contract for the whole build.
2. Set the mint-noir system (input: page map → output: the design system)
   Define the palette once: near-black backgrounds (not pure black — a soft charcoal that stays comfortable over long reads), off-white text, mint as the single accent for links, active states, key numbers, and the primary button, and one muted grey for secondary text and borders. Pick two typefaces — a confident sans for headlines, a readable sans for body — and one spacing rhythm used on every page. Every page, every section, every button uses this system; the mint accent is the signature, so it appears sparingly and always means the same thing: "this is interactive" or "this matters."
3. Build the home page as the corridor (input: design system → output: home page)
   The home page moves a visitor from headline to signup in a fixed order: hero (outcome headline, one supporting line, primary action, one product visual), a proof strip (real customer names, or honest placeholders until you have them), how it works (three steps, each one line), feature sections (two or three, each with a visual and a concrete benefit), one testimonial or evidence block, pricing teaser (the shape of the plans, not the full table), FAQ (four to six real questions), and the final signup block. Every section ends pointing forward; nothing on the home page is a dead end.

Template preview

Mint Noir SaaS Site — Site Template

A complete marketing site in mint on noir. Same system on every page; mint means "interactive / this matters."

Page map (one job + one action per page)

Design system (set once, use everywhere)

• Background: near-black charcoal {hex} — not pure black
• Text: off-white {hex}
• Accent (mint): {hex} — primary button, links, active states, one key number per section
• Secondary: muted grey {hex} — secondary text and borders
• Headline typeface: {one confident sans}
• Body typeface: {one readable sans}
• Spacing rhythm: {e.g. 8 px base, section padding 96 px desktop / 56 px mobile}

Buy the full skill pack — $4.99 Pro — all 471 skills