create-ailk 0.6.1 → 0.8.0

package/site-templates/saas-product/DESIGN.md

@@ -1,6 +1,6 @@
 ---
-name: SaaS product (Pro) — saas-product
-description: The multi-tenant SaaS template — registered and installable, its visual design still to come.
+name: Standard
+description: The standard design — the black-on-white foundation any shape wears by default: full navigation, a multi-column footer, the document-scroll home.
 colors:
   bg: "#ffffff"
   fg: "#000000"
@@ -18,20 +18,21 @@ colors:
 typography:
   display:
     fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
-    fontSize: "6rem"
-    fontWeight: 400
-    lineHeight: 1
-    letterSpacing: "-0.05em"
+    fontSize: "3.5rem"
+    fontWeight: 700
+    lineHeight: 1.1
+    letterSpacing: "normal"
   heading-section:
     fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
-    fontSize: "2.25rem"
-    fontWeight: 400
-    lineHeight: 1.25
-    letterSpacing: "-0.05em"
+    fontSize: "3rem"
+    fontWeight: 700
+    lineHeight: 1.1
+    letterSpacing: "normal"
   heading-item:
-    fontSize: "1.25rem"
-    fontWeight: 600
+    fontSize: "2rem"
+    fontWeight: 700
     lineHeight: 1.375
+    letterSpacing: "normal"
   body:
     fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
     fontSize: "1.125rem"
@@ -43,32 +44,43 @@ typography:
     lineHeight: 1.4
     letterSpacing: "0.05em"
 rounded:
-  button: "0.25rem"
+  button: "0.5rem"
   card: "0.75rem"
 spacing:
-  section: "4rem"
+  section: "7rem"
+  section-mobile: "4rem"
   card: "1.5rem"
   grid: "1.5rem"
   container: "1280px"
+  measure: "36rem"
 ---
 
 <!--
   Source template: saas-product
+  Design: standard
   Version: create-ailk {{CREATE_AILK_VERSION}}
-  Extends: _base — installing this template replaces the base scaffold's
-  DESIGN.md with this file. Its tokens are the base foundation's, unchanged:
-  this template carries no theme of its own.
+
+  This is the `standard` design's DESIGN.md. Its one authored source is
+  create-ailk's site-templates/designs/standard/DESIGN.md; every template on
+  this design ships a copy of it that differs only in the "Source template"
+  line above, and a template installed with `--template <name>` replaces the
+  base scaffold's DESIGN.md with its own. The impeccable design skill reads
+  it at the start of every design session, so an agent building a new page
+  stays on-system.
+  Edit the canonical file, never a copy — a test holds every copy to it.
 
   The tokens above describe what the site RENDERS today. Colours come from
   content/_site.mdx (`theme.colors`); type, radius and spacing are platform
   defaults a site cannot override yet — see "Where this is heading" below.
 -->
 
-# SaaS product (Pro)
+# Standard
 
 ## Overview
 
-The multi-tenant SaaS template. It is registered and installs cleanly, but its page compositions and visual design have not been authored yet (tracked in ai-launch-kit-internal#5470). Until they are, it renders on the base foundation unchanged, and this file is its placeholder: replace it when the template's design lands.
+The foundation reads like a well-made wireframe: nothing on the page but the words, black on white, with rules where other sites use shadows and colour. It is the look of a site whose owner has not chosen a brand yet and does not pretend otherwise — every placeholder reads as a placeholder, and the structure of the argument is what the visitor sees. A brand is applied on top of it; it is not one.
+
+Every page is composed from the AI Launch Kit component library (`@working-theory/ui`). Nothing is hand-built: a page is a list of registered sections, each with a bounded set of variants. Each section is one full-width band with a lot of air around it.
 
 ## Colors
 
@@ -92,31 +104,31 @@ System sans throughout; no web font.
 
 ### Hierarchy
 
-| Role            | Size     | Weight | Notes                                                                       |
-| --------------- | -------- | ------ | --------------------------------------------------------------------------- |
-| Hero headline   | 6rem     | 400    | Tracking -0.05em, line-height 1                                             |
-| Section heading | 2.25rem  | 400    | Tracking -0.05em — light and tight, not bold                                |
-| Item heading    | 1.25rem  | 600    | Card, feature and step titles                                               |
-| Body            | 1.125rem | 400    | `#333333`, line-height 1.5                                                  |
-| Section label   | 0.875rem | 600    | Uppercase, +0.05em tracking today — the small label above a section heading |
+| Role            | Size     | Weight | Notes                                                                                 |
+| --------------- | -------- | ------ | ------------------------------------------------------------------------------------- |
+| Hero headline   | 3.5rem   | 700    | Normal tracking, line-height 1.1; 2.5rem below 1024px                                 |
+| Section heading | 3rem     | 700    | Normal tracking, line-height 1.1; 2.25rem below 1024px, always under the hero         |
+| Item heading    | 2rem     | 700    | Card, feature and step titles; 1.5rem below 1024px                                    |
+| Body            | 1.125rem | 400    | `#333333`, line-height 1.5; section copy capped at 36rem (about 70 characters a line) |
+| Section label   | 0.875rem | 600    | Uppercase, +0.05em tracking today — the small label above a section heading           |
 
-Measured from the rendered scaffold (1440px wide), not transcribed from tokens.
+Measured from the rendered scaffold (1440px and 390px wide), not transcribed from tokens. Bold headings at normal tracking follow the foundation's pinned direction (#6493).
 
 The small label above a section heading is **kept** as part of this foundation's voice (operator-disposed 2026-09-22) and is headed toward the treatment below.
 
 ## Layout
 
-Not designed yet — its pages come from its modules' defaults on the base layout. See `TEMPLATE-MANIFEST.md` in this directory for the roster. Shared foundation: a 1280px container, sections at 4rem, card grids at 1.5rem, breakpoints 320 / 768 / 1024 / 1440.
+Full navigation; a multi-column footer; the default home. The home-only announcement banner is off by default (`layout.announcementBanner`). Every page this site carries is listed in its roster of record, `.ailk-site-manifest.json` at the site root. Shared foundation: a 1280px container, sections at 7rem (4rem below 1024px), card grids at 1.5rem, breakpoints 320 / 768 / 1024 / 1440.
 
 ## Shapes
 
-Two radii today: buttons at 0.25rem, cards and outlined boxes at 0.75rem. Headed toward square corners — see below.
+Square corners everywhere (`theme.corners: square`) — buttons, cards, the auth card, image placeholders; the tokens above are the base foundation's defaults a site overrides.
 
 ## Components
 
 ### Buttons
 
-Primary: black fill, white label, 0.25rem corners. Secondary: transparent with a black 1px outline and black label. Both are the library `Button`.
+Primary: black fill, white label, 0.5rem corners. Secondary: transparent with a black 1px outline and black label. Both are the library `Button`.
 
 ### Cards / Containers
 
@@ -124,20 +136,22 @@ White panels with a black 1px outline, 0.75rem corners, `card` (1.5rem) padding.
 
 ### Navigation
 
-Base navigation, unchanged.
+Full navigation: wordmark left, page links, an outlined and a filled button at the far right. A black hairline separates it from the page. Page links are 16px at weight 400. The two buttons are 42px tall on a 44px touch target and keep the 0.5rem button radius; square corners arrive with the platform radius change below, not in the nav alone (#6508). The Product link opens, on hover or keyboard, a 640px two-column panel whose items each show an icon, a title and a one-line description.
 
 ## Where this is heading
 
-The foundation's pinned direction is the pacing of a classic wireframe marketing kit — `standardissue.webflow.io` is the reference for rhythm, type scale, spacing density and section pacing only; no image, copy or code is taken from it. Six parts of that direction cannot be expressed through a site's theme today, so they wait on a platform change rather than being hand-coded. Until they land, this file describes the rendered site above, not these targets.
+The foundation's pinned direction is the pacing of a classic wireframe marketing kit — `standardissue.webflow.io` is the reference for rhythm, type scale, spacing density and section pacing only; no image, copy or code is taken from it. The four traits this section used to list as blocked now ship as settings, so the rendered site matches the reference:
 
-| Target                                            | Reference value                                                                                                                  | Blocked by                                                                                               |
-| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| Square corners on buttons, cards and inputs       | radius 0                                                                                                                         | A site's `theme:` block accepts colours only — no radius                                                 |
-| Bold, tighter headings                            | hero ~3.6rem and section headings ~2.9rem, both at weight 700 with tracking about -0.02em (today 6rem and 2.25rem at weight 400) | No per-site type-role override                                                                           |
-| Generous section pacing                           | about 10rem between sections, not 4rem                                                                                           | No per-site section-spacing override; `spacious` (6rem) is not author-selectable                         |
-| Section label in sentence case, bold, no tracking | "Core Features", not "CORE FEATURES"                                                                                             | The eyebrow role bakes in uppercase and tracking                                                         |
-| Whitespace between sections, not rules            | no rule between bands                                                                                                            | Section dividers share the one `border` colour with card outlines, so black outlines make black dividers |
-| Outlined steps in "how it works"                  | three plain outlined columns                                                                                                     | The steps section renders dark filled cards; no outlined variant                                         |
+| Trait                                                  | How it is set                                                                                     |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
+| Square corners on buttons, cards and inputs            | `theme.corners: square` in `_site.mdx`                                                            |
+| Section label in sentence case, bold, no tracking      | `theme.eyebrowCase: sentence`                                                                     |
+| Solid grey image placeholders, no outline              | `theme.placeholders: fill`                                                                        |
+| Bare check and cross marks, no circle badge            | `theme.checkmarks: plain`                                                                         |
+| Plain, uncarded feature and step items                 | per section: `itemStyle: plain`, and `variant: steps` for an image beside a numbered list         |
+| A left hero whose headline wraps at half the container | `measure: narrow` on the hero (pricing); `gapBelow: tight` where a list follows the hero directly |
+| A three-up post grid on the blog index                 | `blog-list` `variant: grid` (cover · date · read time · title · excerpt · Read more)              |
+| A plans section that leads its page                    | drop the hero; the pricing section owns the `<h1>` (`ownsPageTitle`)                              |
 
 ## Do's and Don'ts
 
@@ -146,3 +160,8 @@ The foundation's pinned direction is the pacing of a classic wireframe marketing
 - **Don't** add a colour accent. The foundation's one idea is black on white; a brand pass adds colour deliberately, through the theme.
 - **Don't** replace a black rule with a shadow or a grey fill.
 - **Don't** hard-code the "heading toward" values above into a page. They arrive through the platform, or not at all.
+
+## Revisions
+
+- **2026-09-24 — tile hover is outline-only (operator ruling, /build-starter live pass, #6687).** A comparison tile (`items` in `variant: tile`) hovers by shifting its border to the accent only — no lift, no glow — matching the Positionary `/alternatives` ruling of 2026-08-29. Expressed as the bounded `tileHover: "outline"` option (Card `wash-outline`); the library default `lift` is unchanged for every other site.
+- **2026-09-25 — the before-after section's rulings (operator, /build-starter live pass, #6687).** One layout, not two variants: a panel body is an image or rows of content under the same label bar. The label bar is the tone's fill (brand → black bar, white text) at the heading-4 role; a `neutral` panel keeps a white bar. The view selector is underline tabs with the underline under the current tab only (no full-width baseline), active black, inactive muted, black on hover. The pager is a ghost "‹ Previous" at the left edge and "Next ›" at the right edge. The catalyst column carries no icon tile — it starts at the arrow, or at an image when one is set. No back-to-all link and no tag chips on the seed pages.

package/site-templates/saas-product/TEMPLATE-MANIFEST.md

@@ -22,13 +22,21 @@
 
 ## 2. Roster — the base rows, as the registry declares them
 
-`saas-product` reuses `TEMPLATE_BASE_ROSTER` (`template-manifest.ts`) and declares no rows of its own. The ten base routes:
+`saas-product` reuses `TEMPLATE_BASE_ROSTER` (`template-manifest.ts`) plus the two portfolio rows every paid roster appends (`PORTFOLIO_ROWS`, #6687 — operator disposition 2026-09-24, Pro and up). The ten base routes:
 
 ```
 /  ·  /how-it-works  ·  /features  ·  /pricing  ·  /about
 /faq  ·  /contact  ·  /sign-in  ·  /privacy  ·  /terms
 ```
 
+The portfolio rows — before/after project comparisons; the detail row's `contentDir` installs the seeds (#6646 D1):
+
+```
+/portfolio             PortfolioList · schema CollectionPage — the hub on the /alternatives stack
+/portfolio/<slug>      PortfolioItem · schema WebPage + CreativeWork — one `before-after` section per comparison
+                       (seed pages sample-one · sample-two · sample-three · sample-four, `_base` layer)
+```
+
 Module-contributed rows arrive from `MODULE_SLICES[*].pageContributions` and are listed here so the page set reads as one:
 
 ```

package/site-templates/shapes/local-business-service/TEMPLATE-MANIFEST.json

@@ -0,0 +1,369 @@
+{
+  "template": "local-business-service",
+  "requires": ["marketing"],
+  "categories": [
+    "hvac",
+    "roofing",
+    "plumbing",
+    "electrical",
+    "landscaping",
+    "auto-repair"
+  ],
+  "shape": "local-business-service",
+  "design": "standard",
+  "generatedHash": "5a75067bc0b4f11911289cef648460e7fdb302b746900f7e1d37e004d0bd1188",
+  "layout": {
+    "nav": "full",
+    "footer": "columns",
+    "announcementBanner": false,
+    "home": "default"
+  },
+  "theme": {
+    "corners": "square",
+    "eyebrowCase": "sentence",
+    "placeholders": "fill",
+    "checkmarks": "plain",
+    "colors": {
+      "light": {
+        "bg": "#ffffff",
+        "bgMuted": "#ffffff",
+        "surface": "#ffffff",
+        "border": "#000000",
+        "text": "#000000",
+        "textMuted": "#333333",
+        "primary": "#000000",
+        "primaryFg": "#ffffff",
+        "accent": "#000000"
+      },
+      "dark": {
+        "bg": "#000000",
+        "bgMuted": "#000000",
+        "surface": "#000000",
+        "border": "#ffffff",
+        "text": "#ffffff",
+        "textMuted": "#cccccc",
+        "primary": "#ffffff",
+        "primaryFg": "#000000",
+        "accent": "#ffffff"
+      }
+    }
+  },
+  "rows": [
+    {
+      "route": "/",
+      "kind": "page",
+      "pageType": "HomePage",
+      "schema": "HomePage",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "hero",
+          "component": "Hero"
+        },
+        {
+          "type": "items",
+          "component": "Items",
+          "options": {
+            "columns": 3
+          }
+        },
+        {
+          "type": "cta",
+          "component": "CTA"
+        }
+      ]
+    },
+    {
+      "route": "/services",
+      "kind": "page",
+      "pageType": "ServicesList",
+      "schema": "ServicesList",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "hero",
+          "component": "Hero"
+        },
+        {
+          "type": "items",
+          "component": "Items",
+          "options": {
+            "columns": 3
+          }
+        },
+        {
+          "type": "cta",
+          "component": "CTA"
+        }
+      ]
+    },
+    {
+      "route": "/services/[slug]",
+      "kind": "page",
+      "contentDir": "content/en/Service",
+      "seeds": [
+        "content/en/Service/first-job.mdx",
+        "content/en/Service/second-job.mdx",
+        "content/en/Service/third-job.mdx"
+      ],
+      "pageType": "Service",
+      "schema": "Service",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": []
+    },
+    {
+      "route": "/about",
+      "kind": "page",
+      "pageType": "AboutPage",
+      "schema": "AboutPage",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "content-block",
+          "component": "ContentBlock"
+        },
+        {
+          "type": "cta",
+          "component": "CTA"
+        }
+      ]
+    },
+    {
+      "route": "/contact",
+      "kind": "page",
+      "pageType": "ContactPage",
+      "schema": "ContactPage",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "hero",
+          "component": "Hero"
+        }
+      ]
+    },
+    {
+      "route": "/faq",
+      "kind": "page",
+      "pageType": "FAQPage",
+      "schema": "FAQPage",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "hero",
+          "component": "Hero",
+          "options": {
+            "gapBelow": "tight"
+          }
+        },
+        {
+          "type": "faq",
+          "component": "FAQ"
+        },
+        {
+          "type": "faq",
+          "component": "FAQ"
+        }
+      ]
+    },
+    {
+      "route": "/glossary",
+      "kind": "page",
+      "pageType": "GlossaryList",
+      "schema": "GlossaryList",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "hero",
+          "component": "Hero"
+        },
+        {
+          "type": "glossary-index",
+          "component": "GlossaryIndex"
+        }
+      ]
+    },
+    {
+      "route": "/newsletter",
+      "kind": "page",
+      "pageType": "NewsletterSignup",
+      "schema": "NewsletterSignup",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "hero",
+          "component": "Hero"
+        },
+        {
+          "type": "faq",
+          "component": "FAQ"
+        }
+      ]
+    },
+    {
+      "route": "/book-a-call",
+      "kind": "page",
+      "pageType": "BookCall",
+      "schema": "BookCall",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "hero",
+          "component": "Hero"
+        },
+        {
+          "type": "items",
+          "component": "Items",
+          "options": {
+            "columns": 3
+          }
+        }
+      ]
+    },
+    {
+      "route": "/purchase-policy",
+      "kind": "page",
+      "pageType": "PurchasePolicyPage",
+      "schema": "PurchasePolicyPage",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "document-chassis",
+          "component": "DocumentChassis",
+          "options": {
+            "layout": "article"
+          }
+        }
+      ]
+    },
+    {
+      "route": "/privacy",
+      "kind": "page",
+      "pageType": "PrivacyPage",
+      "schema": "PrivacyPage",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "document-chassis",
+          "component": "DocumentChassis",
+          "options": {
+            "layout": "article"
+          }
+        }
+      ]
+    },
+    {
+      "route": "/terms",
+      "kind": "page",
+      "pageType": "TermsPage",
+      "schema": "TermsPage",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "document-chassis",
+          "component": "DocumentChassis",
+          "options": {
+            "layout": "article"
+          }
+        }
+      ]
+    },
+    {
+      "route": "/blog",
+      "kind": "page",
+      "pageType": "BlogList",
+      "schema": "BlogList",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "hero",
+          "component": "Hero",
+          "options": {
+            "gapBelow": "tight"
+          }
+        },
+        {
+          "type": "blog-list",
+          "component": "BlogList"
+        },
+        {
+          "type": "logoCloud",
+          "component": "LogoCloud",
+          "options": {
+            "layout": "inline"
+          }
+        },
+        {
+          "type": "testimonials",
+          "component": "Testimonials"
+        }
+      ]
+    },
+    {
+      "route": "/portfolio",
+      "kind": "page",
+      "pageType": "PortfolioList",
+      "schema": "PortfolioList",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": [
+        {
+          "type": "hero",
+          "component": "Hero",
+          "options": {
+            "gapBelow": "tight",
+            "size": "display",
+            "surface": "wash-secondary"
+          }
+        },
+        {
+          "type": "items",
+          "component": "Items",
+          "options": {
+            "surface": "none",
+            "columns": 2
+          }
+        },
+        {
+          "type": "cta",
+          "component": "CTA"
+        },
+        {
+          "type": "faq",
+          "component": "FAQ",
+          "options": {
+            "surface": "gray-100"
+          }
+        }
+      ]
+    },
+    {
+      "route": "/portfolio/[slug]",
+      "kind": "page",
+      "contentDir": "content/en/PortfolioItem",
+      "seeds": [
+        "content/en/PortfolioItem/sample-four.mdx",
+        "content/en/PortfolioItem/sample-one.mdx",
+        "content/en/PortfolioItem/sample-three.mdx",
+        "content/en/PortfolioItem/sample-two.mdx"
+      ],
+      "pageType": "PortfolioItem",
+      "schema": "PortfolioItem",
+      "shell": "MarketingShell",
+      "chrome": "on",
+      "sections": []
+    }
+  ]
+}