Pages.

A page is one sheet with a known running order. Eight shapes cover the site. A new page starts from the closest one, keeps its order, and gets its own words.

Playground.

Each shape drawn as a sheet beside its running order. Point at a band to find it in the list, and switch the stock to see the same page on the reversed print.

Page
Stock

The whole argument in one scroll: the product working, who uses it, three claims, the proof, then the way in.

  1. 01Hero<Band>{/* eyebrow, h1, CTA pair */}</Band>
  2. 02The product, workingA live window on a dithered backdrop.<AssemblyDemo />
  3. 03Customer board<LogoFlip logos={CUSTOMER_LOGOS} />
  4. 04Intent to drawings<ContainerOne ... />
  5. 05Your CAD, integrated<ContainerOne flip ... />
  6. 06Security<ContainerOne ... />
  7. 07Proof<Quote ... />
  8. 08The numbers<StatStrip />
  9. 09The team<ContainerTwo flip ... />
  10. 10Recently shipped{/* release cards */}
  11. 11Try the Redliner<ContainerOne flip ... />
  12. 12Closing bandOn every page, from SheetShell.{/* SheetShell renders ClosingBand */}

Live/

<SheetShell>
  <Band>{/* eyebrow, h1, CTA pair */}</Band>
  <AssemblyDemo />
  <LogoFlip logos={CUSTOMER_LOGOS} />
  <ContainerOne ... />
  <ContainerOne flip ... />
  <ContainerOne ... />
  <Quote ... />
  <StatStrip />
  <ContainerTwo flip ... />
  {/* release cards */}
  <ContainerOne flip ... />
</SheetShell>

What every page keeps.

  • One sheet. SheetShell sets the width, the rails and the closing band, and Bands rule it into sections. The nav above and the title-block footer below share its edges, so the whole page reads as one document. See Layout.
  • One headline. A single H1 in sentence case ending in a period, under a mono eyebrow, with one graphite line beneath it.
  • One primary action. Book a demo, in the nav and in the closing band. A page adds its own only where it is the point of the page.
  • The same ending. Every page closes on “Go to manufacturing.” See Sections.
  • Its own metadata. A title, a description and a canonical path. The share card comes from the layout, and the title and description reach it on their own.

Choosing a stock.

The reversed print is an editorial decision, not a preference, and it is one class: sheet-reversed on SheetShell prints the whole surface on the dark stock, nav and footer included, with nothing passed to any component. A page goes dark when its world is dark: defense, aerospace, the shop. Reach for an existing stock before inventing one: a stock used by a single page is a hardcoded color under another name, and it drifts.

Built for themselves.

Three pages are their own shape and are not templates: /philosophy, a film in chapters on its own wrapper; the shop, a catalog; and the savings calculator. Reuse their parts, and start a new page from a template.

Best practices.

Do

  • Start a new page from the template it is closest to.
  • Keep the running order and change the words.
  • Lead with the words wherever a phone needs them first.
  • Let SheetShell end the page.

Don't

  • Do not open a product page on a photograph.
  • Do not invent a third stock for one page.
  • Do not add a second primary action.
  • Do not write a closing band by hand.

Go to manufacturing.

Book a demoOpen the Toolbox