create-ailk 0.6.0 → 0.7.0

package/site-templates/marketing-site/DESIGN.md

@@ -0,0 +1,162 @@
+---
+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: marketing-site
+  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.