create-ailk 0.6.1 → 0.8.0

package/site-templates/_base/content/en/UseCase/persona-2.mdx

@@ -0,0 +1,69 @@
+---
+type: "UseCase"
+slug: "persona-2"
+title: "{Use case 2: the job this customer hires your product to do}"
+description: "{Two sentences on who this customer is and the result they get}"
+sections:
+  [
+    {
+      "id": "hero",
+      "type": "hero",
+      "data":
+        {
+          "eyebrow": "Use cases",
+          "headline": "{Use case 2: the job this customer hires your product to do}",
+          "subheadline": "{Two sentences on who this customer is and the result they get}",
+          "primaryCta": { "label": "{Primary CTA}", "href": "/contact" },
+          "secondaryCta":
+            {
+              "label": "{Secondary CTA}",
+              "href": "/pricing",
+              "variant": "outline",
+            },
+        },
+    },
+    {
+      "id": "detail",
+      "type": "feature",
+      "data":
+        {
+          "headline": "{How this customer uses your product}",
+          "description": "{Two or three sentences on how it works and what changes for the reader}",
+          "features":
+            [
+              {
+                "title": "{First point}",
+                "description": "{One sentence that makes the point concrete}",
+              },
+              {
+                "title": "{Second point}",
+                "description": "{One sentence that makes the point concrete}",
+              },
+              {
+                "title": "{Third point}",
+                "description": "{One sentence that makes the point concrete}",
+              },
+            ],
+        },
+    },
+    {
+      "id": "cta",
+      "type": "cta",
+      "data":
+        {
+          "variant": "box",
+          "headline": "{Talk to us about your own use case}",
+          "description": "{One sentence on what happens when they get in touch}",
+          "primaryCta": { "label": "{Primary CTA}", "href": "/contact" },
+          "secondaryCta":
+            {
+              "label": "{Secondary CTA}",
+              "href": "/pricing",
+              "variant": "outline",
+            },
+        },
+    },
+  ]
+---
+
+{/* Rendered from frontmatter `sections[]`. Placeholder copy — replace every {brace} with your own words before you launch. */}

package/site-templates/_base/content/en/UseCase/persona-3.mdx

@@ -0,0 +1,69 @@
+---
+type: "UseCase"
+slug: "persona-3"
+title: "{Use case 3: the job this customer hires your product to do}"
+description: "{Two sentences on who this customer is and the result they get}"
+sections:
+  [
+    {
+      "id": "hero",
+      "type": "hero",
+      "data":
+        {
+          "eyebrow": "Use cases",
+          "headline": "{Use case 3: the job this customer hires your product to do}",
+          "subheadline": "{Two sentences on who this customer is and the result they get}",
+          "primaryCta": { "label": "{Primary CTA}", "href": "/contact" },
+          "secondaryCta":
+            {
+              "label": "{Secondary CTA}",
+              "href": "/pricing",
+              "variant": "outline",
+            },
+        },
+    },
+    {
+      "id": "detail",
+      "type": "feature",
+      "data":
+        {
+          "headline": "{How this customer uses your product}",
+          "description": "{Two or three sentences on how it works and what changes for the reader}",
+          "features":
+            [
+              {
+                "title": "{First point}",
+                "description": "{One sentence that makes the point concrete}",
+              },
+              {
+                "title": "{Second point}",
+                "description": "{One sentence that makes the point concrete}",
+              },
+              {
+                "title": "{Third point}",
+                "description": "{One sentence that makes the point concrete}",
+              },
+            ],
+        },
+    },
+    {
+      "id": "cta",
+      "type": "cta",
+      "data":
+        {
+          "variant": "box",
+          "headline": "{Talk to us about your own use case}",
+          "description": "{One sentence on what happens when they get in touch}",
+          "primaryCta": { "label": "{Primary CTA}", "href": "/contact" },
+          "secondaryCta":
+            {
+              "label": "{Secondary CTA}",
+              "href": "/pricing",
+              "variant": "outline",
+            },
+        },
+    },
+  ]
+---
+
+{/* Rendered from frontmatter `sections[]`. Placeholder copy — replace every {brace} with your own words before you launch. */}

package/site-templates/designs/minimalism/DESIGN.md

@@ -0,0 +1,162 @@
+---
+name: Minimalism
+description: The minimalism design — the same black-on-white foundation, presented as a nine-slide scroll-snap deck home with a mark-only navigation and a centred footer.
+colors:
+  bg: "#ffffff"
+  fg: "#000000"
+  surface: "#ffffff"
+  surface-secondary: "#ffffff"
+  border: "#000000"
+  text-muted: "#333333"
+  brand: "#000000"
+  fg-on-brand: "#ffffff"
+  accent: "#000000"
+  bg-dark: "#000000"
+  fg-dark: "#ffffff"
+  border-dark: "#ffffff"
+  brand-dark: "#ffffff"
+typography:
+  display:
+    fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
+    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: "3rem"
+    fontWeight: 700
+    lineHeight: 1.1
+    letterSpacing: "normal"
+  heading-item:
+    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"
+    fontWeight: 400
+    lineHeight: 1.5
+  eyebrow:
+    fontSize: "0.875rem"
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: "0.05em"
+rounded:
+  button: "0.5rem"
+  card: "0.75rem"
+spacing:
+  section: "7rem"
+  section-mobile: "4rem"
+  card: "1.5rem"
+  grid: "1.5rem"
+  container: "1280px"
+  measure: "36rem"
+---
+
+<!--
+  Source template: designs/minimalism
+  Design: minimalism
+  Version: create-ailk {{CREATE_AILK_VERSION}}
+
+  This is the `minimalism` design's DESIGN.md. Its one authored source is
+  create-ailk's site-templates/designs/minimalism/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.
+-->
+
+# Minimalism
+
+## Overview
+
+The minimalism design is the standard foundation — the same black-on-white wireframe, the same type and the same components — presented as a deck. The home page is a nine-slide deck that snaps one slide per scroll, so the site reads like a presentation before it reads like a website; the rest of the site is quiet and document-like. Its character comes from structure, not a palette: it carries no theme of its own.
+
+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.
+
+## Colors
+
+### Primary
+
+**Black** (`brand` `#000000`) fills the primary button; its label is white. The secondary button is white with a black hairline and black label.
+
+### Neutral
+
+Pure white ground (`bg` `#ffffff`), pure black ink for headings (`fg` `#000000`), and near-black `#333333` for body copy — well above AA on white. **Borders are black** (`#000000`): card outlines, the rule under the navigation, the rules between sections and the rule above the footer are all 1px black lines. Cards are white, not tinted (`surface-secondary` is white too). There is no accent colour — `accent` is black.
+
+Dark mode inverts: black ground, white ink, white rules, white primary button with black label.
+
+### Named Rules
+
+- **Rules, not fills.** A container is drawn with a black hairline on the white ground. Grey fills are reserved for image placeholders.
+
+## Typography
+
+System sans throughout; no web font.
+
+### Hierarchy
+
+| 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 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
+
+Home is the `deck` layout: nine full-viewport slides with scroll-snap. The navigation is `mark-only`, the footer is `centered`, and there is no announcement banner (`layout.home: deck`, `layout.nav: mark-only`, `layout.footer: centered` — the design's own knobs, which any template on this design gets without declaring a `layout`). 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
+
+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.5rem corners. Secondary: transparent with a black 1px outline and black label. Both are the library `Button`.
+
+### Cards / Containers
+
+White panels with a black 1px outline, 0.75rem corners, `card` (1.5rem) padding. The one exception today: the "how it works" steps render as dark filled cards (see below).
+
+### Navigation
+
+Mark-only: the logomark alone, top left. No link row and no buttons in the header.
+
+## 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. The four traits this section used to list as blocked now ship as settings, so the rendered site matches the reference:
+
+| 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
+
+- **Do** keep every page built from registered sections. If a section you need does not exist, request it rather than writing one-off markup.
+- **Do** change colours in `content/_site.mdx` `theme.colors`; they reach every section.
+- **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.

package/site-templates/designs/standard/DESIGN.md

@@ -0,0 +1,167 @@
+---
+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"
+  surface: "#ffffff"
+  surface-secondary: "#ffffff"
+  border: "#000000"
+  text-muted: "#333333"
+  brand: "#000000"
+  fg-on-brand: "#ffffff"
+  accent: "#000000"
+  bg-dark: "#000000"
+  fg-dark: "#ffffff"
+  border-dark: "#ffffff"
+  brand-dark: "#ffffff"
+typography:
+  display:
+    fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
+    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: "3rem"
+    fontWeight: 700
+    lineHeight: 1.1
+    letterSpacing: "normal"
+  heading-item:
+    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"
+    fontWeight: 400
+    lineHeight: 1.5
+  eyebrow:
+    fontSize: "0.875rem"
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: "0.05em"
+rounded:
+  button: "0.5rem"
+  card: "0.75rem"
+spacing:
+  section: "7rem"
+  section-mobile: "4rem"
+  card: "1.5rem"
+  grid: "1.5rem"
+  container: "1280px"
+  measure: "36rem"
+---
+
+<!--
+  Source template: designs/standard
+  Design: standard
+  Version: create-ailk {{CREATE_AILK_VERSION}}
+
+  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.
+-->
+
+# Standard
+
+## Overview
+
+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
+
+### Primary
+
+**Black** (`brand` `#000000`) fills the primary button; its label is white. The secondary button is white with a black hairline and black label.
+
+### Neutral
+
+Pure white ground (`bg` `#ffffff`), pure black ink for headings (`fg` `#000000`), and near-black `#333333` for body copy — well above AA on white. **Borders are black** (`#000000`): card outlines, the rule under the navigation, the rules between sections and the rule above the footer are all 1px black lines. Cards are white, not tinted (`surface-secondary` is white too). There is no accent colour — `accent` is black.
+
+Dark mode inverts: black ground, white ink, white rules, white primary button with black label.
+
+### Named Rules
+
+- **Rules, not fills.** A container is drawn with a black hairline on the white ground. Grey fills are reserved for image placeholders.
+
+## Typography
+
+System sans throughout; no web font.
+
+### Hierarchy
+
+| 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 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
+
+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
+
+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.5rem corners. Secondary: transparent with a black 1px outline and black label. Both are the library `Button`.
+
+### Cards / Containers
+
+White panels with a black 1px outline, 0.75rem corners, `card` (1.5rem) padding. The one exception today: the "how it works" steps render as dark filled cards (see below).
+
+### Navigation
+
+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. The four traits this section used to list as blocked now ship as settings, so the rendered site matches the reference:
+
+| 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
+
+- **Do** keep every page built from registered sections. If a section you need does not exist, request it rather than writing one-off markup.
+- **Do** change colours in `content/_site.mdx` `theme.colors`; they reach every section.
+- **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.