create-ailk 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/cli.js +54 -5
- package/dist/copy.d.ts +14 -0
- package/dist/copy.js +38 -1
- package/dist/lib/extract-module-bundle.d.ts +20 -1
- package/dist/lib/extract-module-bundle.js +64 -5
- package/dist/lib/module-license-gate.d.ts +6 -1
- package/dist/lib/module-license-gate.js +6 -1
- package/dist/lib/pro-callout.js +1 -1
- package/dist/modules/commerce/0.6.0.tar.gz +0 -0
- package/dist/modules/docs-blog/0.6.0.tar.gz +0 -0
- package/dist/modules/multi-tenant/0.6.0.tar.gz +0 -0
- package/dist/modules/scheduling/0.6.0.tar.gz +0 -0
- package/dist/modules/signal-collectors/0.6.0.tar.gz +0 -0
- package/dist/modules/workspace/0.6.0.tar.gz +0 -0
- package/dist/programmatic.js +14 -10
- package/package.json +3 -3
- package/site-templates/marketing-site/DESIGN.md +148 -0
- package/site-templates/marketing-site-free/DESIGN.md +148 -0
- package/site-templates/minimalism-site/DESIGN.md +148 -0
- package/site-templates/saas-product/DESIGN.md +148 -0
- package/site-templates/simple-service/DESIGN.md +148 -0
- package/templates/CLAUDE.md +2 -3
- package/templates/DESIGN.md +155 -0
- package/templates/README.md +42 -8
- package/templates/apps/web/PRODUCT.md +86 -0
- package/templates/apps/web/lib/__tests__/site-theme.test.ts +135 -20
- package/templates/apps/web/lib/site-brand.tsx +4 -8
- package/templates/apps/web/middleware.ts +1 -1
- package/templates/apps/web/src/lib/commerce-sections.ts +35 -3
- package/templates/content/_site.mdx +18 -3
- package/templates/database/CHANGELOG.md +7 -0
- package/templates/database/package.json +3 -2
- package/versions.json +33 -33
- package/templates/apps/web/public/logo-dark.svg +0 -21
- package/templates/apps/web/public/logo-light.svg +0 -21
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Standard (Free) — marketing-site-free
|
|
3
|
+
description: The Free starter: nine-beat marketing home and core pages on the black-on-white foundation.
|
|
4
|
+
colors:
|
|
5
|
+
bg: "#ffffff"
|
|
6
|
+
fg: "#000000"
|
|
7
|
+
surface: "#ffffff"
|
|
8
|
+
surface-secondary: "#ffffff"
|
|
9
|
+
border: "#000000"
|
|
10
|
+
text-muted: "#333333"
|
|
11
|
+
brand: "#000000"
|
|
12
|
+
fg-on-brand: "#ffffff"
|
|
13
|
+
accent: "#000000"
|
|
14
|
+
bg-dark: "#000000"
|
|
15
|
+
fg-dark: "#ffffff"
|
|
16
|
+
border-dark: "#ffffff"
|
|
17
|
+
brand-dark: "#ffffff"
|
|
18
|
+
typography:
|
|
19
|
+
display:
|
|
20
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
21
|
+
fontSize: "6rem"
|
|
22
|
+
fontWeight: 400
|
|
23
|
+
lineHeight: 1
|
|
24
|
+
letterSpacing: "-0.05em"
|
|
25
|
+
heading-section:
|
|
26
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
27
|
+
fontSize: "2.25rem"
|
|
28
|
+
fontWeight: 400
|
|
29
|
+
lineHeight: 1.25
|
|
30
|
+
letterSpacing: "-0.05em"
|
|
31
|
+
heading-item:
|
|
32
|
+
fontSize: "1.25rem"
|
|
33
|
+
fontWeight: 600
|
|
34
|
+
lineHeight: 1.375
|
|
35
|
+
body:
|
|
36
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
37
|
+
fontSize: "1.125rem"
|
|
38
|
+
fontWeight: 400
|
|
39
|
+
lineHeight: 1.5
|
|
40
|
+
eyebrow:
|
|
41
|
+
fontSize: "0.875rem"
|
|
42
|
+
fontWeight: 600
|
|
43
|
+
lineHeight: 1.4
|
|
44
|
+
letterSpacing: "0.05em"
|
|
45
|
+
rounded:
|
|
46
|
+
button: "0.25rem"
|
|
47
|
+
card: "0.75rem"
|
|
48
|
+
spacing:
|
|
49
|
+
section: "4rem"
|
|
50
|
+
card: "1.5rem"
|
|
51
|
+
grid: "1.5rem"
|
|
52
|
+
container: "1280px"
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
<!--
|
|
56
|
+
Source template: marketing-site-free
|
|
57
|
+
Version: create-ailk {{CREATE_AILK_VERSION}}
|
|
58
|
+
Extends: _base — installing this template replaces the base scaffold's
|
|
59
|
+
DESIGN.md with this file. Its tokens are the base foundation's, unchanged:
|
|
60
|
+
this template carries no theme of its own.
|
|
61
|
+
|
|
62
|
+
The tokens above describe what the site RENDERS today. Colours come from
|
|
63
|
+
content/_site.mdx (`theme.colors`); type, radius and spacing are platform
|
|
64
|
+
defaults a site cannot override yet — see "Where this is heading" below.
|
|
65
|
+
-->
|
|
66
|
+
|
|
67
|
+
# Standard (Free)
|
|
68
|
+
|
|
69
|
+
## Overview
|
|
70
|
+
|
|
71
|
+
The Standard (Free) template is the base scaffold's own page set, recorded as a template. Its home is a conversion argument in nine beats — the offer, the logos, old way versus new way, what you get, what it connects to, how to start, the ask, why it exists, and the demo — each one full-width band with a lot of air around it. It carries no content or theme of its own: everything it renders comes from the base foundation.
|
|
72
|
+
|
|
73
|
+
## Colors
|
|
74
|
+
|
|
75
|
+
### Primary
|
|
76
|
+
|
|
77
|
+
**Black** (`brand` `#000000`) fills the primary button; its label is white. The secondary button is white with a black hairline and black label.
|
|
78
|
+
|
|
79
|
+
### Neutral
|
|
80
|
+
|
|
81
|
+
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.
|
|
82
|
+
|
|
83
|
+
Dark mode inverts: black ground, white ink, white rules, white primary button with black label.
|
|
84
|
+
|
|
85
|
+
### Named Rules
|
|
86
|
+
|
|
87
|
+
- **Rules, not fills.** A container is drawn with a black hairline on the white ground. Grey fills are reserved for image placeholders.
|
|
88
|
+
|
|
89
|
+
## Typography
|
|
90
|
+
|
|
91
|
+
System sans throughout; no web font.
|
|
92
|
+
|
|
93
|
+
### Hierarchy
|
|
94
|
+
|
|
95
|
+
| Role | Size | Weight | Notes |
|
|
96
|
+
| --------------- | -------- | ------ | --------------------------------------------------------------------------- |
|
|
97
|
+
| Hero headline | 6rem | 400 | Tracking -0.05em, line-height 1 |
|
|
98
|
+
| Section heading | 2.25rem | 400 | Tracking -0.05em — light and tight, not bold |
|
|
99
|
+
| Item heading | 1.25rem | 600 | Card, feature and step titles |
|
|
100
|
+
| Body | 1.125rem | 400 | `#333333`, line-height 1.5 |
|
|
101
|
+
| Section label | 0.875rem | 600 | Uppercase, +0.05em tracking today — the small label above a section heading |
|
|
102
|
+
|
|
103
|
+
Measured from the rendered scaffold (1440px wide), not transcribed from tokens.
|
|
104
|
+
|
|
105
|
+
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.
|
|
106
|
+
|
|
107
|
+
## Layout
|
|
108
|
+
|
|
109
|
+
Full navigation with the announcement banner; a multi-column footer; the default home. Every page and its sections are listed in `TEMPLATE-MANIFEST.md` in this directory. Shared foundation: a 1280px container, sections at 4rem, card grids at 1.5rem, breakpoints 320 / 768 / 1024 / 1440.
|
|
110
|
+
|
|
111
|
+
## Shapes
|
|
112
|
+
|
|
113
|
+
Two radii today: buttons at 0.25rem, cards and outlined boxes at 0.75rem. Headed toward square corners — see below.
|
|
114
|
+
|
|
115
|
+
## Components
|
|
116
|
+
|
|
117
|
+
### Buttons
|
|
118
|
+
|
|
119
|
+
Primary: black fill, white label, 0.25rem corners. Secondary: transparent with a black 1px outline and black label. Both are the library `Button`.
|
|
120
|
+
|
|
121
|
+
### Cards / Containers
|
|
122
|
+
|
|
123
|
+
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).
|
|
124
|
+
|
|
125
|
+
### Navigation
|
|
126
|
+
|
|
127
|
+
Full navigation: wordmark left, page links, an outlined and a filled button at the far right, the announcement banner above. A black hairline separates it from the page.
|
|
128
|
+
|
|
129
|
+
## Where this is heading
|
|
130
|
+
|
|
131
|
+
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.
|
|
132
|
+
|
|
133
|
+
| Target | Reference value | Blocked by |
|
|
134
|
+
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
135
|
+
| Square corners on buttons, cards and inputs | radius 0 | A site's `theme:` block accepts colours only — no radius |
|
|
136
|
+
| 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 |
|
|
137
|
+
| Generous section pacing | about 10rem between sections, not 4rem | No per-site section-spacing override; `spacious` (6rem) is not author-selectable |
|
|
138
|
+
| Section label in sentence case, bold, no tracking | "Core Features", not "CORE FEATURES" | The eyebrow role bakes in uppercase and tracking |
|
|
139
|
+
| 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 |
|
|
140
|
+
| Outlined steps in "how it works" | three plain outlined columns | The steps section renders dark filled cards; no outlined variant |
|
|
141
|
+
|
|
142
|
+
## Do's and Don'ts
|
|
143
|
+
|
|
144
|
+
- **Do** keep every page built from registered sections. If a section you need does not exist, request it rather than writing one-off markup.
|
|
145
|
+
- **Do** change colours in `content/_site.mdx` `theme.colors`; they reach every section.
|
|
146
|
+
- **Don't** add a colour accent. The foundation's one idea is black on white; a brand pass adds colour deliberately, through the theme.
|
|
147
|
+
- **Don't** replace a black rule with a shadow or a grey fill.
|
|
148
|
+
- **Don't** hard-code the "heading toward" values above into a page. They arrive through the platform, or not at all.
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Minimalism site (Pro) — minimalism-site
|
|
3
|
+
description: A reports-first site whose home is a nine-slide scroll-snap deck, with a mark-only navigation and a centred footer.
|
|
4
|
+
colors:
|
|
5
|
+
bg: "#ffffff"
|
|
6
|
+
fg: "#000000"
|
|
7
|
+
surface: "#ffffff"
|
|
8
|
+
surface-secondary: "#ffffff"
|
|
9
|
+
border: "#000000"
|
|
10
|
+
text-muted: "#333333"
|
|
11
|
+
brand: "#000000"
|
|
12
|
+
fg-on-brand: "#ffffff"
|
|
13
|
+
accent: "#000000"
|
|
14
|
+
bg-dark: "#000000"
|
|
15
|
+
fg-dark: "#ffffff"
|
|
16
|
+
border-dark: "#ffffff"
|
|
17
|
+
brand-dark: "#ffffff"
|
|
18
|
+
typography:
|
|
19
|
+
display:
|
|
20
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
21
|
+
fontSize: "6rem"
|
|
22
|
+
fontWeight: 400
|
|
23
|
+
lineHeight: 1
|
|
24
|
+
letterSpacing: "-0.05em"
|
|
25
|
+
heading-section:
|
|
26
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
27
|
+
fontSize: "2.25rem"
|
|
28
|
+
fontWeight: 400
|
|
29
|
+
lineHeight: 1.25
|
|
30
|
+
letterSpacing: "-0.05em"
|
|
31
|
+
heading-item:
|
|
32
|
+
fontSize: "1.25rem"
|
|
33
|
+
fontWeight: 600
|
|
34
|
+
lineHeight: 1.375
|
|
35
|
+
body:
|
|
36
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
37
|
+
fontSize: "1.125rem"
|
|
38
|
+
fontWeight: 400
|
|
39
|
+
lineHeight: 1.5
|
|
40
|
+
eyebrow:
|
|
41
|
+
fontSize: "0.875rem"
|
|
42
|
+
fontWeight: 600
|
|
43
|
+
lineHeight: 1.4
|
|
44
|
+
letterSpacing: "0.05em"
|
|
45
|
+
rounded:
|
|
46
|
+
button: "0.25rem"
|
|
47
|
+
card: "0.75rem"
|
|
48
|
+
spacing:
|
|
49
|
+
section: "4rem"
|
|
50
|
+
card: "1.5rem"
|
|
51
|
+
grid: "1.5rem"
|
|
52
|
+
container: "1280px"
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
<!--
|
|
56
|
+
Source template: minimalism-site
|
|
57
|
+
Version: create-ailk {{CREATE_AILK_VERSION}}
|
|
58
|
+
Extends: _base — installing this template replaces the base scaffold's
|
|
59
|
+
DESIGN.md with this file. Its tokens are the base foundation's, unchanged:
|
|
60
|
+
this template carries no theme of its own.
|
|
61
|
+
|
|
62
|
+
The tokens above describe what the site RENDERS today. Colours come from
|
|
63
|
+
content/_site.mdx (`theme.colors`); type, radius and spacing are platform
|
|
64
|
+
defaults a site cannot override yet — see "Where this is heading" below.
|
|
65
|
+
-->
|
|
66
|
+
|
|
67
|
+
# Minimalism site (Pro)
|
|
68
|
+
|
|
69
|
+
## Overview
|
|
70
|
+
|
|
71
|
+
A reports-first template. 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 — reports, services, booking, referral — is quiet and document-like. It runs on the base foundation's colours and type; its character comes from structure, not a palette.
|
|
72
|
+
|
|
73
|
+
## Colors
|
|
74
|
+
|
|
75
|
+
### Primary
|
|
76
|
+
|
|
77
|
+
**Black** (`brand` `#000000`) fills the primary button; its label is white. The secondary button is white with a black hairline and black label.
|
|
78
|
+
|
|
79
|
+
### Neutral
|
|
80
|
+
|
|
81
|
+
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.
|
|
82
|
+
|
|
83
|
+
Dark mode inverts: black ground, white ink, white rules, white primary button with black label.
|
|
84
|
+
|
|
85
|
+
### Named Rules
|
|
86
|
+
|
|
87
|
+
- **Rules, not fills.** A container is drawn with a black hairline on the white ground. Grey fills are reserved for image placeholders.
|
|
88
|
+
|
|
89
|
+
## Typography
|
|
90
|
+
|
|
91
|
+
System sans throughout; no web font.
|
|
92
|
+
|
|
93
|
+
### Hierarchy
|
|
94
|
+
|
|
95
|
+
| Role | Size | Weight | Notes |
|
|
96
|
+
| --------------- | -------- | ------ | --------------------------------------------------------------------------- |
|
|
97
|
+
| Hero headline | 6rem | 400 | Tracking -0.05em, line-height 1 |
|
|
98
|
+
| Section heading | 2.25rem | 400 | Tracking -0.05em — light and tight, not bold |
|
|
99
|
+
| Item heading | 1.25rem | 600 | Card, feature and step titles |
|
|
100
|
+
| Body | 1.125rem | 400 | `#333333`, line-height 1.5 |
|
|
101
|
+
| Section label | 0.875rem | 600 | Uppercase, +0.05em tracking today — the small label above a section heading |
|
|
102
|
+
|
|
103
|
+
Measured from the rendered scaffold (1440px wide), not transcribed from tokens.
|
|
104
|
+
|
|
105
|
+
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.
|
|
106
|
+
|
|
107
|
+
## Layout
|
|
108
|
+
|
|
109
|
+
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. Placeholder illustrations ship in `assets/`. Every page and its sections are listed in `TEMPLATE-MANIFEST.md` in this directory. Shared foundation: a 1280px container, sections at 4rem, card grids at 1.5rem, breakpoints 320 / 768 / 1024 / 1440.
|
|
110
|
+
|
|
111
|
+
## Shapes
|
|
112
|
+
|
|
113
|
+
Two radii today: buttons at 0.25rem, cards and outlined boxes at 0.75rem. Headed toward square corners — see below.
|
|
114
|
+
|
|
115
|
+
## Components
|
|
116
|
+
|
|
117
|
+
### Buttons
|
|
118
|
+
|
|
119
|
+
Primary: black fill, white label, 0.25rem corners. Secondary: transparent with a black 1px outline and black label. Both are the library `Button`.
|
|
120
|
+
|
|
121
|
+
### Cards / Containers
|
|
122
|
+
|
|
123
|
+
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).
|
|
124
|
+
|
|
125
|
+
### Navigation
|
|
126
|
+
|
|
127
|
+
Mark-only: the logomark alone, top left. No link row and no buttons in the header.
|
|
128
|
+
|
|
129
|
+
## Where this is heading
|
|
130
|
+
|
|
131
|
+
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.
|
|
132
|
+
|
|
133
|
+
| Target | Reference value | Blocked by |
|
|
134
|
+
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
135
|
+
| Square corners on buttons, cards and inputs | radius 0 | A site's `theme:` block accepts colours only — no radius |
|
|
136
|
+
| 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 |
|
|
137
|
+
| Generous section pacing | about 10rem between sections, not 4rem | No per-site section-spacing override; `spacious` (6rem) is not author-selectable |
|
|
138
|
+
| Section label in sentence case, bold, no tracking | "Core Features", not "CORE FEATURES" | The eyebrow role bakes in uppercase and tracking |
|
|
139
|
+
| 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 |
|
|
140
|
+
| Outlined steps in "how it works" | three plain outlined columns | The steps section renders dark filled cards; no outlined variant |
|
|
141
|
+
|
|
142
|
+
## Do's and Don'ts
|
|
143
|
+
|
|
144
|
+
- **Do** keep every page built from registered sections. If a section you need does not exist, request it rather than writing one-off markup.
|
|
145
|
+
- **Do** change colours in `content/_site.mdx` `theme.colors`; they reach every section.
|
|
146
|
+
- **Don't** add a colour accent. The foundation's one idea is black on white; a brand pass adds colour deliberately, through the theme.
|
|
147
|
+
- **Don't** replace a black rule with a shadow or a grey fill.
|
|
148
|
+
- **Don't** hard-code the "heading toward" values above into a page. They arrive through the platform, or not at all.
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: SaaS product (Pro) — saas-product
|
|
3
|
+
description: The multi-tenant SaaS template — registered and installable, its visual design still to come.
|
|
4
|
+
colors:
|
|
5
|
+
bg: "#ffffff"
|
|
6
|
+
fg: "#000000"
|
|
7
|
+
surface: "#ffffff"
|
|
8
|
+
surface-secondary: "#ffffff"
|
|
9
|
+
border: "#000000"
|
|
10
|
+
text-muted: "#333333"
|
|
11
|
+
brand: "#000000"
|
|
12
|
+
fg-on-brand: "#ffffff"
|
|
13
|
+
accent: "#000000"
|
|
14
|
+
bg-dark: "#000000"
|
|
15
|
+
fg-dark: "#ffffff"
|
|
16
|
+
border-dark: "#ffffff"
|
|
17
|
+
brand-dark: "#ffffff"
|
|
18
|
+
typography:
|
|
19
|
+
display:
|
|
20
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
21
|
+
fontSize: "6rem"
|
|
22
|
+
fontWeight: 400
|
|
23
|
+
lineHeight: 1
|
|
24
|
+
letterSpacing: "-0.05em"
|
|
25
|
+
heading-section:
|
|
26
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
27
|
+
fontSize: "2.25rem"
|
|
28
|
+
fontWeight: 400
|
|
29
|
+
lineHeight: 1.25
|
|
30
|
+
letterSpacing: "-0.05em"
|
|
31
|
+
heading-item:
|
|
32
|
+
fontSize: "1.25rem"
|
|
33
|
+
fontWeight: 600
|
|
34
|
+
lineHeight: 1.375
|
|
35
|
+
body:
|
|
36
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
37
|
+
fontSize: "1.125rem"
|
|
38
|
+
fontWeight: 400
|
|
39
|
+
lineHeight: 1.5
|
|
40
|
+
eyebrow:
|
|
41
|
+
fontSize: "0.875rem"
|
|
42
|
+
fontWeight: 600
|
|
43
|
+
lineHeight: 1.4
|
|
44
|
+
letterSpacing: "0.05em"
|
|
45
|
+
rounded:
|
|
46
|
+
button: "0.25rem"
|
|
47
|
+
card: "0.75rem"
|
|
48
|
+
spacing:
|
|
49
|
+
section: "4rem"
|
|
50
|
+
card: "1.5rem"
|
|
51
|
+
grid: "1.5rem"
|
|
52
|
+
container: "1280px"
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
<!--
|
|
56
|
+
Source template: saas-product
|
|
57
|
+
Version: create-ailk {{CREATE_AILK_VERSION}}
|
|
58
|
+
Extends: _base — installing this template replaces the base scaffold's
|
|
59
|
+
DESIGN.md with this file. Its tokens are the base foundation's, unchanged:
|
|
60
|
+
this template carries no theme of its own.
|
|
61
|
+
|
|
62
|
+
The tokens above describe what the site RENDERS today. Colours come from
|
|
63
|
+
content/_site.mdx (`theme.colors`); type, radius and spacing are platform
|
|
64
|
+
defaults a site cannot override yet — see "Where this is heading" below.
|
|
65
|
+
-->
|
|
66
|
+
|
|
67
|
+
# SaaS product (Pro)
|
|
68
|
+
|
|
69
|
+
## Overview
|
|
70
|
+
|
|
71
|
+
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.
|
|
72
|
+
|
|
73
|
+
## Colors
|
|
74
|
+
|
|
75
|
+
### Primary
|
|
76
|
+
|
|
77
|
+
**Black** (`brand` `#000000`) fills the primary button; its label is white. The secondary button is white with a black hairline and black label.
|
|
78
|
+
|
|
79
|
+
### Neutral
|
|
80
|
+
|
|
81
|
+
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.
|
|
82
|
+
|
|
83
|
+
Dark mode inverts: black ground, white ink, white rules, white primary button with black label.
|
|
84
|
+
|
|
85
|
+
### Named Rules
|
|
86
|
+
|
|
87
|
+
- **Rules, not fills.** A container is drawn with a black hairline on the white ground. Grey fills are reserved for image placeholders.
|
|
88
|
+
|
|
89
|
+
## Typography
|
|
90
|
+
|
|
91
|
+
System sans throughout; no web font.
|
|
92
|
+
|
|
93
|
+
### Hierarchy
|
|
94
|
+
|
|
95
|
+
| Role | Size | Weight | Notes |
|
|
96
|
+
| --------------- | -------- | ------ | --------------------------------------------------------------------------- |
|
|
97
|
+
| Hero headline | 6rem | 400 | Tracking -0.05em, line-height 1 |
|
|
98
|
+
| Section heading | 2.25rem | 400 | Tracking -0.05em — light and tight, not bold |
|
|
99
|
+
| Item heading | 1.25rem | 600 | Card, feature and step titles |
|
|
100
|
+
| Body | 1.125rem | 400 | `#333333`, line-height 1.5 |
|
|
101
|
+
| Section label | 0.875rem | 600 | Uppercase, +0.05em tracking today — the small label above a section heading |
|
|
102
|
+
|
|
103
|
+
Measured from the rendered scaffold (1440px wide), not transcribed from tokens.
|
|
104
|
+
|
|
105
|
+
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.
|
|
106
|
+
|
|
107
|
+
## Layout
|
|
108
|
+
|
|
109
|
+
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.
|
|
110
|
+
|
|
111
|
+
## Shapes
|
|
112
|
+
|
|
113
|
+
Two radii today: buttons at 0.25rem, cards and outlined boxes at 0.75rem. Headed toward square corners — see below.
|
|
114
|
+
|
|
115
|
+
## Components
|
|
116
|
+
|
|
117
|
+
### Buttons
|
|
118
|
+
|
|
119
|
+
Primary: black fill, white label, 0.25rem corners. Secondary: transparent with a black 1px outline and black label. Both are the library `Button`.
|
|
120
|
+
|
|
121
|
+
### Cards / Containers
|
|
122
|
+
|
|
123
|
+
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).
|
|
124
|
+
|
|
125
|
+
### Navigation
|
|
126
|
+
|
|
127
|
+
Base navigation, unchanged.
|
|
128
|
+
|
|
129
|
+
## Where this is heading
|
|
130
|
+
|
|
131
|
+
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.
|
|
132
|
+
|
|
133
|
+
| Target | Reference value | Blocked by |
|
|
134
|
+
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
135
|
+
| Square corners on buttons, cards and inputs | radius 0 | A site's `theme:` block accepts colours only — no radius |
|
|
136
|
+
| 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 |
|
|
137
|
+
| Generous section pacing | about 10rem between sections, not 4rem | No per-site section-spacing override; `spacious` (6rem) is not author-selectable |
|
|
138
|
+
| Section label in sentence case, bold, no tracking | "Core Features", not "CORE FEATURES" | The eyebrow role bakes in uppercase and tracking |
|
|
139
|
+
| 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 |
|
|
140
|
+
| Outlined steps in "how it works" | three plain outlined columns | The steps section renders dark filled cards; no outlined variant |
|
|
141
|
+
|
|
142
|
+
## Do's and Don'ts
|
|
143
|
+
|
|
144
|
+
- **Do** keep every page built from registered sections. If a section you need does not exist, request it rather than writing one-off markup.
|
|
145
|
+
- **Do** change colours in `content/_site.mdx` `theme.colors`; they reach every section.
|
|
146
|
+
- **Don't** add a colour accent. The foundation's one idea is black on white; a brand pass adds colour deliberately, through the theme.
|
|
147
|
+
- **Don't** replace a black rule with a shadow or a grey fill.
|
|
148
|
+
- **Don't** hard-code the "heading toward" values above into a page. They arrive through the platform, or not at all.
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Simple service (Pro) — simple-service
|
|
3
|
+
description: A local-service site: three priced services, online booking, checkout, and the policy pages a paying customer expects.
|
|
4
|
+
colors:
|
|
5
|
+
bg: "#ffffff"
|
|
6
|
+
fg: "#000000"
|
|
7
|
+
surface: "#ffffff"
|
|
8
|
+
surface-secondary: "#ffffff"
|
|
9
|
+
border: "#000000"
|
|
10
|
+
text-muted: "#333333"
|
|
11
|
+
brand: "#000000"
|
|
12
|
+
fg-on-brand: "#ffffff"
|
|
13
|
+
accent: "#000000"
|
|
14
|
+
bg-dark: "#000000"
|
|
15
|
+
fg-dark: "#ffffff"
|
|
16
|
+
border-dark: "#ffffff"
|
|
17
|
+
brand-dark: "#ffffff"
|
|
18
|
+
typography:
|
|
19
|
+
display:
|
|
20
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
21
|
+
fontSize: "6rem"
|
|
22
|
+
fontWeight: 400
|
|
23
|
+
lineHeight: 1
|
|
24
|
+
letterSpacing: "-0.05em"
|
|
25
|
+
heading-section:
|
|
26
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
27
|
+
fontSize: "2.25rem"
|
|
28
|
+
fontWeight: 400
|
|
29
|
+
lineHeight: 1.25
|
|
30
|
+
letterSpacing: "-0.05em"
|
|
31
|
+
heading-item:
|
|
32
|
+
fontSize: "1.25rem"
|
|
33
|
+
fontWeight: 600
|
|
34
|
+
lineHeight: 1.375
|
|
35
|
+
body:
|
|
36
|
+
fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif"
|
|
37
|
+
fontSize: "1.125rem"
|
|
38
|
+
fontWeight: 400
|
|
39
|
+
lineHeight: 1.5
|
|
40
|
+
eyebrow:
|
|
41
|
+
fontSize: "0.875rem"
|
|
42
|
+
fontWeight: 600
|
|
43
|
+
lineHeight: 1.4
|
|
44
|
+
letterSpacing: "0.05em"
|
|
45
|
+
rounded:
|
|
46
|
+
button: "0.25rem"
|
|
47
|
+
card: "0.75rem"
|
|
48
|
+
spacing:
|
|
49
|
+
section: "4rem"
|
|
50
|
+
card: "1.5rem"
|
|
51
|
+
grid: "1.5rem"
|
|
52
|
+
container: "1280px"
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
<!--
|
|
56
|
+
Source template: simple-service
|
|
57
|
+
Version: create-ailk {{CREATE_AILK_VERSION}}
|
|
58
|
+
Extends: _base — installing this template replaces the base scaffold's
|
|
59
|
+
DESIGN.md with this file. Its tokens are the base foundation's, unchanged:
|
|
60
|
+
this template carries no theme of its own.
|
|
61
|
+
|
|
62
|
+
The tokens above describe what the site RENDERS today. Colours come from
|
|
63
|
+
content/_site.mdx (`theme.colors`); type, radius and spacing are platform
|
|
64
|
+
defaults a site cannot override yet — see "Where this is heading" below.
|
|
65
|
+
-->
|
|
66
|
+
|
|
67
|
+
# Simple service (Pro)
|
|
68
|
+
|
|
69
|
+
## Overview
|
|
70
|
+
|
|
71
|
+
A template for a local service business — the reference shape is a lawn-care company. Three priced services, a booking page, a checkout return pair, a customer account, and the returns, cancellation and shipping policies. It runs on the base foundation; the design job is trust and clarity, so nothing competes with the price and the book button.
|
|
72
|
+
|
|
73
|
+
## Colors
|
|
74
|
+
|
|
75
|
+
### Primary
|
|
76
|
+
|
|
77
|
+
**Black** (`brand` `#000000`) fills the primary button; its label is white. The secondary button is white with a black hairline and black label.
|
|
78
|
+
|
|
79
|
+
### Neutral
|
|
80
|
+
|
|
81
|
+
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.
|
|
82
|
+
|
|
83
|
+
Dark mode inverts: black ground, white ink, white rules, white primary button with black label.
|
|
84
|
+
|
|
85
|
+
### Named Rules
|
|
86
|
+
|
|
87
|
+
- **Rules, not fills.** A container is drawn with a black hairline on the white ground. Grey fills are reserved for image placeholders.
|
|
88
|
+
|
|
89
|
+
## Typography
|
|
90
|
+
|
|
91
|
+
System sans throughout; no web font.
|
|
92
|
+
|
|
93
|
+
### Hierarchy
|
|
94
|
+
|
|
95
|
+
| Role | Size | Weight | Notes |
|
|
96
|
+
| --------------- | -------- | ------ | --------------------------------------------------------------------------- |
|
|
97
|
+
| Hero headline | 6rem | 400 | Tracking -0.05em, line-height 1 |
|
|
98
|
+
| Section heading | 2.25rem | 400 | Tracking -0.05em — light and tight, not bold |
|
|
99
|
+
| Item heading | 1.25rem | 600 | Card, feature and step titles |
|
|
100
|
+
| Body | 1.125rem | 400 | `#333333`, line-height 1.5 |
|
|
101
|
+
| Section label | 0.875rem | 600 | Uppercase, +0.05em tracking today — the small label above a section heading |
|
|
102
|
+
|
|
103
|
+
Measured from the rendered scaffold (1440px wide), not transcribed from tokens.
|
|
104
|
+
|
|
105
|
+
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.
|
|
106
|
+
|
|
107
|
+
## Layout
|
|
108
|
+
|
|
109
|
+
Full navigation with the announcement banner; a multi-column footer; the default home. Every page and its sections are listed in `TEMPLATE-MANIFEST.md` in this directory. Shared foundation: a 1280px container, sections at 4rem, card grids at 1.5rem, breakpoints 320 / 768 / 1024 / 1440.
|
|
110
|
+
|
|
111
|
+
## Shapes
|
|
112
|
+
|
|
113
|
+
Two radii today: buttons at 0.25rem, cards and outlined boxes at 0.75rem. Headed toward square corners — see below.
|
|
114
|
+
|
|
115
|
+
## Components
|
|
116
|
+
|
|
117
|
+
### Buttons
|
|
118
|
+
|
|
119
|
+
Primary: black fill, white label, 0.25rem corners. Secondary: transparent with a black 1px outline and black label. Both are the library `Button`.
|
|
120
|
+
|
|
121
|
+
### Cards / Containers
|
|
122
|
+
|
|
123
|
+
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).
|
|
124
|
+
|
|
125
|
+
### Navigation
|
|
126
|
+
|
|
127
|
+
Full navigation: wordmark left, page links, an outlined and a filled button at the far right, the announcement banner above. A black hairline separates it from the page.
|
|
128
|
+
|
|
129
|
+
## Where this is heading
|
|
130
|
+
|
|
131
|
+
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.
|
|
132
|
+
|
|
133
|
+
| Target | Reference value | Blocked by |
|
|
134
|
+
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
135
|
+
| Square corners on buttons, cards and inputs | radius 0 | A site's `theme:` block accepts colours only — no radius |
|
|
136
|
+
| 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 |
|
|
137
|
+
| Generous section pacing | about 10rem between sections, not 4rem | No per-site section-spacing override; `spacious` (6rem) is not author-selectable |
|
|
138
|
+
| Section label in sentence case, bold, no tracking | "Core Features", not "CORE FEATURES" | The eyebrow role bakes in uppercase and tracking |
|
|
139
|
+
| 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 |
|
|
140
|
+
| Outlined steps in "how it works" | three plain outlined columns | The steps section renders dark filled cards; no outlined variant |
|
|
141
|
+
|
|
142
|
+
## Do's and Don'ts
|
|
143
|
+
|
|
144
|
+
- **Do** keep every page built from registered sections. If a section you need does not exist, request it rather than writing one-off markup.
|
|
145
|
+
- **Do** change colours in `content/_site.mdx` `theme.colors`; they reach every section.
|
|
146
|
+
- **Don't** add a colour accent. The foundation's one idea is black on white; a brand pass adds colour deliberately, through the theme.
|
|
147
|
+
- **Don't** replace a black rule with a shadow or a grey fill.
|
|
148
|
+
- **Don't** hard-code the "heading toward" values above into a page. They arrive through the platform, or not at all.
|
package/templates/CLAUDE.md
CHANGED
|
@@ -40,7 +40,7 @@ Where to find the rule, surface, or fact you need.
|
|
|
40
40
|
|
|
41
41
|
| For… | Look at |
|
|
42
42
|
| ---------------------------------------------- | -------------------------------------------------------------- |
|
|
43
|
-
| Per-issue workflow (pick → branch → TDD → PR) |
|
|
43
|
+
| Per-issue workflow (pick → branch → TDD → PR) | § Workflow, below |
|
|
44
44
|
| Architecture boundaries (the why + escalation) | `.claude/rules/architecture.md` |
|
|
45
45
|
| Diff hygiene when editing existing files | `.claude/rules/preserve-existing-style.md` |
|
|
46
46
|
| Skills available to invoke | `.claude/skills/README.md` |
|
|
@@ -56,8 +56,7 @@ when you find it. Future-you will thank present-you.
|
|
|
56
56
|
|
|
57
57
|
## Workflow
|
|
58
58
|
|
|
59
|
-
The single-developer flow
|
|
60
|
-
`.claude/rules/loop-contract.md`. The short version:
|
|
59
|
+
The single-developer flow, in full:
|
|
61
60
|
|
|
62
61
|
1. Pick or open an issue with a `## Acceptance Criteria` section.
|
|
63
62
|
2. Branch from your default branch (typically `main`).
|