Launch

A theme for shipping software. Dark or light, hairline grids, tight display type, and a product screenshot that carries the page.

It borrows the two shapes that modern software marketing has settled on: the near-black, hairline-ruled, mono-eyebrowed scroll (Linear), and the high-contrast geometric one with the asymmetric hero (Vercel). Both are reachable from the same tokens — flip Colour scheme and pick a homepage layout.

---

The three homepages

Three page types, all producing a homepage, all fed by the same vocabulary of metadata so switching between them keeps most of your content. Set whichever you want as the site's homepage.

Page type	Shape	Use it when
Launch — centre stage	Eyebrow, one centred headline, two buttons, the screenshot directly beneath. Then a logo wall, hairline feature columns, alternating product sections, numbers, quotes.	The product has one clear claim and one screenshot worth staring at.
Launch — split hero	Headline and buttons left, product mark or screenshot centre, three short claims right. Then platform blocks pairing a screenshot with a customer sentence and a feature list.	You are selling infrastructure, or the headline is two words long.
Launch — bento grid	Left-aligned headline block, then everything as one tiled grid — screenshot, features, numbers, a quote and a logo strip on the same surface.	The product has several stories and none of them is obviously first.

Each also has an optional Latest writing strip that pulls posts by tag.

The other page types

• Feature deep-dive — one capability, properly. Quiet hero, alternating screenshot sections, a spec table, related links. This is what a navigation dropdown should point at.
• Pricing — plan cards, a grouped comparison table, questions. All metadata, so a price change is an edit.
• Changelog — a dated release timeline built from tagged posts, with one pinned release you write by hand.
• Customers — logo wall, the numbers, a featured quote, a quote grid, and case studies pulled from posts by tag.
• Blog — the writing index, with tag chips and three post layouts.

Turning sections off

Every section on every page type has its own Show the … boolean, defaulting to on and sitting at the top of that section's settings group. Untick it and the whole section leaves the markup — not hidden with CSS, not left as an empty padded band.

The toggle is an AND with the content, so a section still needs something to show. Ticking Show the quotes on a page with no quotes renders nothing rather than an empty bordered strip. That means the two ways to remove a section — clear its content, or untick its box — both work, and the box is the one that keeps your content around for later.

Section headings follow the same rule: a comparison table with no title prints the table without a heading rather than an empty rule.

Two exceptions worth knowing:

• The navigation bar has always had its own show_navigation toggle, in Appearance rather than in a section group.
• The footer call to action is a theme token, not page metadata, because it is site-wide. Clear its heading to hide it everywhere.

The product screenshot

Every app image on the site is dressed by the Product shot tokens, so you set the look once and every page follows:

• Frame — browser chrome (three dots and an address bar), window bar (dots only), hairline (a bordered box), or none.
• Glow, drop shadow, tilt — the lighting. Glow uses your accent colour. Tilt is a slight 3D lean; off is the safer look.
• Per page you also choose width (contained, wide, full bleed) and whether to crop the bottom off, which is the trick that makes a screenshot run into the next section instead of ending politely.

The demo ships three SVG mockups in assets/ — a board, a triage queue and an insights dashboard — so the preview shows a real product rather than a grey box. Replace them with your own screenshots.

Tags

Several page types pull posts by tag: the writing strips, the changelog timeline, the customers case studies, the blog's tag lock.

Type the tag the way you wrote it on the post — Case study, Changelog, The Economy. Capitals and spaces do not matter; the template normalises to the same slug Masthead uses. Specifically it lowercases, collapses & to a space, turns / into a space, and replaces spaces with hyphens.

Two conventions the demo uses:

• Changelog versions. The timeline prints a post's last tag as a version chip. Tag a release post ["Changelog", "3.0.0"] and you get both the filter and the version.
• Case studies. Tag them Case study and they appear on the customers page without being listed twice.

Tokens worth knowing

• Colour scheme has three values. dark and light each ship a complete palette and ignore the seven individual colour tokens. custom is what makes those tokens live. There is no "unset" state for a colour picker — it always holds a value — so an opt-in switch is the only way a scheme can stay in charge of its own palette.
• Accent is the exception: it applies in every scheme, because it is a brand colour rather than a light/dark one.
• Display tracking — tight is the modern look, normal reads calmer at small sizes.
• Eyebrow style — mono uppercase, sentence case or pill. This one changes the character of the whole site more than its size suggests.
• Hairline column rules — the vertical and horizontal rules that divide feature columns and the logo wall. Turning them off makes the page float.
• Navigation uses the same parent/child list as a section rail: leave Drops down under empty for a top-level link, or fill it with another link's label to nest it into that link's menu, with an optional one-line note.

Content shapes

Two metadata fields take one item per line rather than a repeatable list, because a list of single strings is more clicking than it is worth:

• section bullet lists and platform-block feature lists
• pricing comparison columns and each row's values (write yes or no for a tick or a dash)

A comparison row with a group heading set becomes a section divider in the table and ignores its own values.

Local preview

masthead preview          # http://localhost:4010
masthead preview --no-editor
masthead validate
masthead package

The preview corpus in preview/ is a fictional product called Ridewell. It exists to exercise every page type and token; delete it or ignore it.