@equal-experts/kuat-react 0.13.1 → 0.14.0-beta.0

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.
Files changed (70) hide show
  1. package/agent-docs/AGENTS.md +1 -1
  2. package/agent-docs/README.md +1 -1
  3. package/agent-docs/bundle-manifest.json +12 -20
  4. package/agent-docs/components/components.manifest.json +3 -0
  5. package/agent-docs/external/kuat-agent-rules/reference/accessibility/README.md +7 -0
  6. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference/accessibility}/accessibility.md +12 -10
  7. package/agent-docs/external/kuat-agent-rules/reference/brand/README.md +9 -0
  8. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference/brand}/brand.md +21 -11
  9. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference/brand}/logo.md +5 -4
  10. package/agent-docs/external/kuat-agent-rules/reference/brand/voice-and-tone.md +166 -0
  11. package/agent-docs/external/kuat-agent-rules/reference/content/README.md +12 -0
  12. package/agent-docs/external/kuat-agent-rules/reference/content/formatting.md +120 -0
  13. package/agent-docs/external/kuat-agent-rules/reference/content/numbers.md +87 -0
  14. package/agent-docs/external/kuat-agent-rules/reference/content/punctuation.md +94 -0
  15. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference}/content/writing-style.md +7 -2
  16. package/agent-docs/external/kuat-agent-rules/reference/design-language/README.md +11 -0
  17. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/borders.md +3 -2
  18. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/colours.md +38 -10
  19. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/design-language.md +11 -10
  20. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/spacing.md +4 -3
  21. package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/README.md +29 -0
  22. package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/colors.tokens.json +84 -0
  23. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/typography.md +5 -4
  24. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/README.md +10 -0
  25. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/README.md +2 -2
  26. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/blog-posts.md +1 -5
  27. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/marketing-content.md +2 -6
  28. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/seo.md +2 -6
  29. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/emails.md +3 -9
  30. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/patterns/README.md +7 -0
  31. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing/scenarios → reference/media-types/web-marketing/patterns}/marketing-pages.md +3 -3
  32. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/website.md +7 -22
  33. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/README.md +16 -0
  34. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/accessibility.md +2 -12
  35. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/component-decision-tree.md +3 -18
  36. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/component-registry.md +3 -22
  37. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/README.md +2 -2
  38. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/actions.md +1 -7
  39. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/confirmations.md +0 -6
  40. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/empty-states.md +0 -6
  41. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/errors.md +0 -6
  42. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/forms.md +1 -7
  43. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/product-content.md +1 -11
  44. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/design.md +6 -36
  45. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/emails.md +3 -9
  46. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/README.md +10 -0
  47. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/authentication.md +3 -3
  48. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/dashboards.md +2 -2
  49. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/documentation.md +3 -3
  50. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/forms.md +3 -3
  51. package/agent-docs/kuat-docs/rules/README.md +37 -30
  52. package/agent-docs/kuat-docs/rules/design/layouts.md +1 -1
  53. package/agent-docs/kuat-docs/rules/scenarios/README.md +1 -1
  54. package/agent-docs/manifest.json +3 -3
  55. package/agent-docs/rules/LOADING-consumer.md +5 -5
  56. package/package.json +1 -1
  57. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/LOADING.md +0 -166
  58. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/README.md +0 -28
  59. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/formatting.md +0 -93
  60. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/numbers.md +0 -69
  61. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/punctuation.md +0 -75
  62. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/voice-and-tone.md +0 -263
  63. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/README.md +0 -28
  64. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/scenarios/README.md +0 -18
  65. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/DEPRECATIONS.md +0 -28
  66. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/README.md +0 -65
  67. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/review-checklist.md +0 -57
  68. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/review-context.md +0 -44
  69. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/scenarios/README.md +0 -82
  70. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/technical.md +0 -488
@@ -0,0 +1,94 @@
1
+ # Punctuation
2
+
3
+ Guidance for commas, dashes, apostrophes, and other punctuation in Equal Experts content.
4
+
5
+ ---
6
+
7
+ ## Quick Reference
8
+
9
+ - **Commas:** We don't use the serial (Oxford) comma unless it's needed to clarify meaning
10
+ - **Dashes:** Use a spaced en dash ( – ) to offset a phrase; an unspaced en dash for ranges (40–60)
11
+ - **Apostrophes:** Use for possessives and contractions; don't use for plurals
12
+ - **Ampersands and plus:** Spell out "and" unless "&" or "+" is part of an official name
13
+ - **Slashes:** Avoid; replace with words or commas
14
+ - **End marks:** Use one — and only one — full stop, exclamation mark, or question mark per sentence
15
+ - **Spaces:** A single space between sentences, never two
16
+
17
+ ---
18
+
19
+ ## Commas
20
+
21
+ - We **don't use the serial comma** (sometimes called the Oxford comma) unless it's needed to clarify meaning: "Our design service includes user experience, prototyping, content design and user testing."
22
+ - Use the serial comma only to remove ambiguity: "You can meet Janet, a clown and an acrobat" is unclear — add a comma if Janet is not herself the clown and acrobat
23
+ - Use commas to set off non-essential clauses
24
+ - Don't join two independent clauses with only a comma (use a full stop, semicolon, or conjunction)
25
+
26
+ ---
27
+
28
+ ## Dashes and Hyphens
29
+
30
+ - **En dash to offset a phrase (–):** When offsetting a phrase or aside, use the en dash with a **space on either side**: "Creating paved roads – build and run journeys that support secure deployment – can help reduce infrastructure complexity."
31
+ - **En dash for ranges (–):** Use **unspaced** for ranges: "40–60%", "March–May", "1914–18", "2020–21"
32
+ - **"from … to" not a dash:** When you use "from" with a start point, pair it with "to" rather than a dash: "from October to December"
33
+ - **Hyphen (-):** Use in compound modifiers before a noun: "well-known result", "up-to-date report". Don't hyphenate when the modifier follows the noun: "the result is well known"
34
+ - Equal Experts prefers the spaced en dash over the em dash (—) for breaks and asides.
35
+
36
+ ---
37
+
38
+ ## Apostrophes
39
+
40
+ - **Possessives:** Add 's for singular (team's, user's); add ' for a plural already ending in s (users', teams')
41
+ - **Contractions:** Use for standard contractions (don't, it's, we're)
42
+ - **Plurals:** Don't use an apostrophe for plurals: "1990s" not "1990's"; "APIs" not "API's"
43
+
44
+ ---
45
+
46
+ ## Ampersands and Plus Symbols
47
+
48
+ - Use "&" and "+" **only** when they're part of an official title or name: "Johnson & Johnson"
49
+ - Otherwise spell out "and": "artificial intelligence and machine learning", not "AI & ML"
50
+
51
+ ---
52
+
53
+ ## Slashes
54
+
55
+ - Avoid the slash (/). Replace it with words or commas as appropriate
56
+ - A slash is often ambiguous: "the designer/researcher" — is that one person or two?
57
+
58
+ ---
59
+
60
+ ## Colons and Semicolons
61
+
62
+ - **Colon:** Use to introduce a list or an explanation that follows from the main clause. **Don't capitalise** the first word after a colon (unless it's a proper noun). One space after a colon: "I encountered two issues: compliance and security."
63
+ - **Semicolon:** Use to link closely related independent clauses, or to separate list items that already contain commas. Use sparingly; often a full stop is clearer.
64
+
65
+ ---
66
+
67
+ ## End Marks
68
+
69
+ - Use one — but only one — full stop, exclamation mark, or question mark at the end of every sentence
70
+ - Separate sentences with a **single space**, never two
71
+
72
+ ---
73
+
74
+ ## Quotation Marks
75
+
76
+ - Use **double speech marks** (" ") for direct speech and short quoted phrases
77
+ - Put punctuation that belongs to the quote **inside** the closing marks; punctuation that applies to the whole sentence goes outside
78
+ - **Attribute every quote** to someone, even if anonymised: "…Always there, always on, and always thinking." — Eric Wilson, CEO, Xinja. / "…I can't imagine how much further down the track a go-live like this could be." — CEO, US retail customer
79
+ - Use an **ellipsis (…)** to show where a quote has been shortened, and **square brackets** to clarify unclear elements: "[Equal Experts] have been with us every step of the way… Always there, always on, and always thinking."
80
+
81
+ ---
82
+
83
+ ## Exclamation Marks
84
+
85
+ - Use rarely; reserve for genuine emphasis or a short, positive confirmation
86
+ - One exclamation mark is enough; never use multiple (!!)
87
+
88
+ ---
89
+
90
+ ## Related Documentation
91
+
92
+ - [Writing style](./writing-style.md)
93
+ - [Formatting](./formatting.md)
94
+ - [Numbers](./numbers.md) - Ranges, financial years, "from … to"
@@ -31,7 +31,7 @@ Prefer the subject doing the action. It's clearer and more direct.
31
31
  | You can save your work here | Work can be saved here |
32
32
  | We recommend testing first | It is recommended that testing be performed first |
33
33
 
34
- Use passive only when the actor is unknown or irrelevant, or when you want to emphasise the action.
34
+ Use passive only when the actor is unknown or irrelevant, or when you want to emphasise the action over the subject: "The health check saved the client £3 million."
35
35
 
36
36
  ---
37
37
 
@@ -83,9 +83,14 @@ Use everyday contractions so content sounds natural and approachable.
83
83
  - Use **"we"** for Equal Experts when it's clear from context
84
84
  - Keep "my" vs "your" consistent with the product (e.g. "your account" in product UI)
85
85
 
86
+ ### Don't "we" all over the content
87
+
88
+ Describing ourselves as "we" humanises the brand, but using it too often can read as boastful or insincere — especially when we want to emphasise the client, their input, and the collaboration. Balance "we" with the customer's perspective.
89
+
86
90
  ---
87
91
 
88
92
  ## Related Documentation
89
93
 
90
- - [Voice and tone](./voice-and-tone.md) - Principles and audience
94
+ - [Voice and tone](../brand/voice-and-tone.md) - Principles and audience
91
95
  - [Formatting](./formatting.md) - Capitalisation, headings, lists
96
+ - [Inclusive language](../accessibility/accessibility.md#inclusive-language) - Accessible, bias-free word choices
@@ -0,0 +1,11 @@
1
+ # Design Language
2
+
3
+ Visual design language for Equal Experts — the tokens and principles that apply across every medium.
4
+
5
+ | File | Scope |
6
+ |------|-------|
7
+ | [design-language.md](./design-language.md) | Design principles and token overview |
8
+ | [colours.md](./colours.md) | Brand colour palette and usage |
9
+ | [typography.md](./typography.md) | Fonts and type scale |
10
+ | [spacing.md](./spacing.md) | Spacing system |
11
+ | [borders.md](./borders.md) | Border philosophy and specifications |
@@ -148,8 +148,9 @@ Borders must meet WCAG 2.1 Level AA for graphical objects:
148
148
 
149
149
  For platform-specific border guidance:
150
150
 
151
- - **Web** - See [types/web/](../types/web/)
152
- - **Graphics** - See [types/graphics/](../types/graphics/)
151
+ - **Web product** - See [media-types/web-product/](../media-types/web-product/)
152
+ - **Web marketing** - See [media-types/web-marketing/](../media-types/web-marketing/)
153
+ - **Graphics** - See [media-types/imagery/patterns/graphics/](../media-types/imagery/patterns/graphics/)
153
154
 
154
155
  ---
155
156
 
@@ -1,7 +1,15 @@
1
1
  # Colour Rules
2
2
 
3
+ <!-- GENERATED FILE — DO NOT EDIT BY HAND.
4
+ Produced by skills/scripts/generate-tokens.mjs from
5
+ reference/design-language/tokens/colors.tokens.json (the source of truth).
6
+ Change colours in the token file, then run `npm run tokens:generate`.
7
+ CI runs `npm run tokens:check` and fails if this file drifts from the tokens. -->
8
+
3
9
  Brand color specifications for Equal Experts. This document defines the brand colors, palette scales, and usage guidelines.
4
10
 
11
+ > **Source of truth:** the canonical colour tokens live **upstream in this repo** at [`tokens/colors.tokens.json`](./tokens/colors.tokens.json) (W3C design-tokens; brand palettes + aliases). **This document is generated from it** by `skills/scripts/generate-tokens.mjs`, and the downstream `@equal-experts/kuat-core` `variables.css` is generated from the same tokens — don't hand-edit either; change colours in the token file and regenerate. (kuat-core is downstream; never the reverse.) Support scales (slate/red/indigo) are *not* brand colours. Hex values below are the authoritative `…-500` brand values; full 50–950 scales + aliases live in the token file.
12
+
5
13
  ---
6
14
 
7
15
  ## Brand Colors
@@ -11,7 +19,7 @@ Equal Experts uses four core brand color palettes:
11
19
  ### EE Blue (Primary)
12
20
 
13
21
  **Purpose:** Trust, professionalism, technology
14
- **Value:** `oklch(0.645 0.163 237.5)` / `#0066CC`
22
+ **Value:** `oklch(0.645 0.163 237.5)` / `#1795d4` (kuat-core `--ee-blue-500`)
15
23
 
16
24
  **Use for:**
17
25
  - Primary actions and CTAs
@@ -22,7 +30,7 @@ Equal Experts uses four core brand color palettes:
22
30
  ### Transform Teal (Secondary)
23
31
 
24
32
  **Purpose:** Transformation, growth, innovation
25
- **Value:** `oklch(0.645 0.120 185.0)`
33
+ **Value:** `oklch(0.645 0.120 185.0)` / `#269c9e` (kuat-core `--transform-teal-500`)
26
34
 
27
35
  **Use for:**
28
36
  - Secondary actions
@@ -33,7 +41,7 @@ Equal Experts uses four core brand color palettes:
33
41
  ### Tech Blue (Supporting)
34
42
 
35
43
  **Purpose:** Technical, professional, structural
36
- **Value:** `oklch(0.435 0.090 240.0)`
44
+ **Value:** `oklch(0.435 0.090 240.0)` / `#22567c` (kuat-core `--tech-blue-500`)
37
45
 
38
46
  **Use for:**
39
47
  - Dark backgrounds
@@ -44,7 +52,7 @@ Equal Experts uses four core brand color palettes:
44
52
  ### Equal Ember (Accent)
45
53
 
46
54
  **Purpose:** Energy, warmth, attention
47
- **Value:** `oklch(0.625 0.200 65.0)`
55
+ **Value:** `oklch(0.625 0.200 65.0)` / `#f07c00` (kuat-core `--equal-ember-500`)
48
56
 
49
57
  **Use for:**
50
58
  - Special highlights (use sparingly)
@@ -67,6 +75,25 @@ Each brand color has a scale from 50 (lightest) to 950 (darkest):
67
75
 
68
76
  ---
69
77
 
78
+ ## Brand Aliases (semantic roles)
79
+
80
+ How the brand palettes map to semantic roles in kuat-core `variables.css`. **Use these aliases, not raw scale values.**
81
+
82
+ | Alias | Maps to | Hex |
83
+ |-------|---------|-----|
84
+ | `--primary` | EE Blue 500 | `#1795d4` |
85
+ | `--secondary` | Transform Teal 500 | `#269c9e` |
86
+ | `--sidebar` (dark nav) | Tech Blue 500 | `#22567c` |
87
+ | `--accent` (`--brand-ee-blue-accent`) | EE Blue 50 | `#e6f5fc` |
88
+ | `--foreground` (`--brand-dark-data`) | text dark | `#212526` |
89
+ | `--background` (`--brand-byte-white`) | white | `#ffffff` |
90
+ | `--muted` (`--brand-the-cloud`) | Slate 100 | `#f5f5f5` |
91
+ | `--destructive` | Red 600 | `#dc2626` |
92
+
93
+ Support scales (slate, red, indigo) back these aliases but are **not brand colours** — never use them directly as a brand colour.
94
+
95
+ ---
96
+
70
97
  ## Neutral Colors
71
98
 
72
99
  For text, backgrounds, and UI elements:
@@ -159,15 +186,16 @@ All color combinations must meet **WCAG AA** standards:
159
186
 
160
187
  For platform-specific color usage:
161
188
 
162
- - **Web** - See [types/web/](../types/web/) for CSS variables and tokens
163
- - **Slides** - See [types/slides/](../types/slides/)
164
- - **Graphics** - See [types/graphics/](../types/graphics/)
165
- - **Charts** - See [types/charts-data/](../types/charts-data/)
189
+ - **Web product** - See [media-types/web-product/](../media-types/web-product/) for CSS variables and tokens
190
+ - **Web marketing** - See [media-types/web-marketing/](../media-types/web-marketing/)
191
+ - **Slides** - See [media-types/slides/](../media-types/slides/)
192
+ - **Graphics** - See [media-types/imagery/patterns/graphics/](../media-types/imagery/patterns/graphics/)
193
+ - **Charts** - See [media-types/charts-data/](../media-types/charts-data/)
166
194
 
167
195
  ---
168
196
 
169
197
  ## Related Documentation
170
198
 
171
- - [Brand Guidelines](./brand.md) - Brand principles
199
+ - [Brand Guidelines](../brand/brand.md) - Brand principles
172
200
  - [Typography](./typography.md) - Font colors and text styling
173
- - [Logo](./logo.md) - Logo color variants
201
+ - [Logo](../brand/logo.md) - Logo color variants
@@ -52,7 +52,7 @@ Support different contexts - light/dark, print/digital, large/small formats.
52
52
  | Typography | Fonts, sizes, weights, hierarchy | [typography.md](./typography.md) |
53
53
  | Spacing | Padding, margin, gaps, relationships | [spacing.md](./spacing.md) |
54
54
  | Borders | Widths, styles, radius, colors | [borders.md](./borders.md) |
55
- | Logo | Usage, sizing, variants, placement | [logo.md](../logo.md) |
55
+ | Logo | Usage, sizing, variants, placement | [logo.md](../brand/logo.md) |
56
56
 
57
57
  ---
58
58
 
@@ -93,24 +93,25 @@ The design language adheres to **WCAG 2.1 Level AA**:
93
93
 
94
94
  ## Platform-Specific Rules
95
95
 
96
- After understanding these general principles, load the appropriate type-specific rules:
96
+ Type-specific rules build on these general principles:
97
97
 
98
98
  | Platform | Directory | Description |
99
99
  |----------|-----------|-------------|
100
- | Web | [types/web/](../../types/web/) | Websites and web applications |
101
- | Slides | [types/slides/](../../types/slides/) | Presentations |
102
- | Photography | [types/photography/](../../types/photography/) | Photo guidelines |
103
- | Graphics | [types/graphics/](../../types/graphics/) | Icons, illustrations, infographics |
104
- | Charts/Data | [types/charts-data/](../../types/charts-data/) | Data visualization |
100
+ | Web product | [media-types/web-product/](../media-types/web-product/) | Web applications |
101
+ | Web marketing | [media-types/web-marketing/](../media-types/web-marketing/) | Marketing websites |
102
+ | Slides | [media-types/slides/](../media-types/slides/) | Presentations |
103
+ | Photography | [media-types/imagery/patterns/photography/](../media-types/imagery/patterns/photography/) | Photo guidelines |
104
+ | Graphics | [media-types/imagery/patterns/graphics/](../media-types/imagery/patterns/graphics/) | Icons, illustrations, infographics |
105
+ | Charts/Data | [media-types/charts-data/](../media-types/charts-data/) | Data visualization |
105
106
 
106
107
  ---
107
108
 
108
109
  ## Related Documentation
109
110
 
110
- - [Brand Guidelines](../brand.md) - Brand principles and identity
111
- - [Logo](../logo.md) - Logo usage guidelines
111
+ - [Brand Guidelines](../brand/brand.md) - Brand principles and identity
112
+ - [Logo](../brand/logo.md) - Logo usage guidelines
112
113
  - [Colours](./colours.md) - Brand colors
113
114
  - [Typography](./typography.md) - Fonts and type scale
114
115
  - [Spacing](./spacing.md) - Spacing system
115
116
  - [Borders](./borders.md) - Border philosophy
116
- - [Content](../content/README.md) - Writing style and usage
117
+ - [Writing style](../content/writing-style.md) - Writing style and usage
@@ -118,9 +118,10 @@ Use consistent spacing relationships:
118
118
 
119
119
  For platform-specific spacing guidance:
120
120
 
121
- - **Web** - See [types/web/](../types/web/)
122
- - **Slides** - See [types/slides/](../types/slides/)
123
- - **Graphics** - See [types/graphics/](../types/graphics/)
121
+ - **Web product** - See [media-types/web-product/](../media-types/web-product/)
122
+ - **Web marketing** - See [media-types/web-marketing/](../media-types/web-marketing/)
123
+ - **Slides** - See [media-types/slides/](../media-types/slides/)
124
+ - **Graphics** - See [media-types/imagery/patterns/graphics/](../media-types/imagery/patterns/graphics/)
124
125
 
125
126
  ---
126
127
 
@@ -0,0 +1,29 @@
1
+ # Design tokens — source of truth
2
+
3
+ This folder holds the **canonical design tokens** for the Equal Experts design system, **upstream** in `kuat-agent-rules`. It is the single source of truth; everything else is generated from it.
4
+
5
+ - **`colors.tokens.json`** — brand colour palettes (EE Blue, Tech Blue, Transform Teal, Equal Ember) + aliases, in [W3C Design Tokens](https://tr.designtokens.org/format/) format. `$value` is hex; OKLCH is preserved in `$extensions`.
6
+
7
+ ## Generated artifacts (do not hand-edit — regenerate from here)
8
+
9
+ | Artifact | Repo | Note |
10
+ |----------|------|------|
11
+ | `reference/design-language/colours.md` | kuat-agent-rules | human-readable mirror |
12
+ | `@equal-experts/kuat-core` `src/variables.css` | kuat-mono (**downstream**) | CSS implementation; consumes these tokens via the upstream→mono sync |
13
+
14
+ ## Rules
15
+
16
+ - **Change colours here, then regenerate.** Never hand-edit `colours.md` or `variables.css` — they drift (that's how EE Blue became `#0066CC`). The drift check fails if a generated artifact diverges from these tokens.
17
+ - **Direction is one-way:** tokens (upstream) → `colours.md` + kuat-core (downstream). Never generate these tokens *from* kuat-core.
18
+ - **Support scales** (slate/red/indigo) are not brand colours and live only in kuat-core.
19
+
20
+ ## How to regenerate (Phase 7)
21
+
22
+ ```bash
23
+ npm run tokens:generate # rewrite reference/design-language/colours.md from this token file
24
+ npm run tokens:check # CI drift gate — exits 1 if colours.md diverges from the tokens
25
+ ```
26
+
27
+ - The generator is `skills/scripts/generate-tokens.mjs`; `colours.md` carries a `GENERATED FILE — DO NOT EDIT BY HAND` banner. Prose lives in the generator template — change it there and regenerate.
28
+ - `tokens:check` runs in `.github/workflows/drift-check.yml` and inside the reference review gate (`npm run reference:check`).
29
+ - The **downstream** `@equal-experts/kuat-core` `variables.css` half is generated in **kuat-mono** from the synced tokens (Phase 7 Run B — see `docs/migration/phase-7-kuat-mono-handoff.md`). The contributor workflow for colour changes is the repo-local `generate-tokens` skill (`.claude/skills/generate-tokens/`).
@@ -0,0 +1,84 @@
1
+ {
2
+ "$schema": "https://tr.designtokens.org/format/",
3
+ "$description": "Equal Experts brand COLOUR tokens — the SINGLE SOURCE OF TRUTH (upstream, in kuat-agent-rules). Downstream artifacts are GENERATED from this file: reference/design-language/colours.md (human-readable) and @equal-experts/kuat-core src/variables.css (CSS). Never hand-edit those; change colours HERE. kuat-core is downstream — do not invert. Support scales (slate/red/indigo) are NOT brand colours and live only in kuat-core. Format: W3C Design Tokens; $value is hex, oklch preserved in $extensions.",
4
+ "color": {
5
+ "ee-blue": {
6
+ "$description": "EE Blue — primary brand colour (trust, technology). Scale 50 (light) → 950 (dark).",
7
+ "50": { "$type": "color", "$value": "#e6f5fc", "$extensions": { "oklch": "oklch(0.945 0.028 237.5)" } },
8
+ "100": { "$type": "color", "$value": "#b3e2f7", "$extensions": { "oklch": "oklch(0.885 0.055 237.5)" } },
9
+ "200": { "$type": "color", "$value": "#80cff2", "$extensions": { "oklch": "oklch(0.825 0.082 237.5)" } },
10
+ "300": { "$type": "color", "$value": "#4dbced", "$extensions": { "oklch": "oklch(0.765 0.109 237.5)" } },
11
+ "400": { "$type": "color", "$value": "#26a8e3", "$extensions": { "oklch": "oklch(0.705 0.136 237.5)" } },
12
+ "500": { "$type": "color", "$value": "#1795d4", "$extensions": { "oklch": "oklch(0.645 0.163 237.5)" } },
13
+ "600": { "$type": "color", "$value": "#1378ae", "$extensions": { "oklch": "oklch(0.585 0.145 237.5)" } },
14
+ "700": { "$type": "color", "$value": "#105c88", "$extensions": { "oklch": "oklch(0.525 0.127 237.5)" } },
15
+ "800": { "$type": "color", "$value": "#0c4062", "$extensions": { "oklch": "oklch(0.365 0.109 237.5)" } },
16
+ "900": { "$type": "color", "$value": "#08243c", "$extensions": { "oklch": "oklch(0.245 0.082 237.5)" } },
17
+ "950": { "$type": "color", "$value": "#04121e", "$extensions": { "oklch": "oklch(0.145 0.055 237.5)" } }
18
+ },
19
+ "tech-blue": {
20
+ "$description": "Tech Blue — dark/structural (navigation, sidebar, depth).",
21
+ "50": { "$type": "color", "$value": "#e8eef3", "$extensions": { "oklch": "oklch(0.935 0.015 240.0)" } },
22
+ "100": { "$type": "color", "$value": "#bdcfdc", "$extensions": { "oklch": "oklch(0.835 0.030 240.0)" } },
23
+ "200": { "$type": "color", "$value": "#92b0c5", "$extensions": { "oklch": "oklch(0.735 0.045 240.0)" } },
24
+ "300": { "$type": "color", "$value": "#6791ae", "$extensions": { "oklch": "oklch(0.635 0.060 240.0)" } },
25
+ "400": { "$type": "color", "$value": "#447496", "$extensions": { "oklch": "oklch(0.535 0.075 240.0)" } },
26
+ "500": { "$type": "color", "$value": "#22567c", "$extensions": { "oklch": "oklch(0.435 0.090 240.0)" } },
27
+ "600": { "$type": "color", "$value": "#1b4563", "$extensions": { "oklch": "oklch(0.365 0.080 240.0)" } },
28
+ "700": { "$type": "color", "$value": "#15354a", "$extensions": { "oklch": "oklch(0.295 0.070 240.0)" } },
29
+ "800": { "$type": "color", "$value": "#0e2431", "$extensions": { "oklch": "oklch(0.205 0.060 240.0)" } },
30
+ "900": { "$type": "color", "$value": "#071218", "$extensions": { "oklch": "oklch(0.125 0.040 240.0)" } },
31
+ "950": { "$type": "color", "$value": "#03090c", "$extensions": { "oklch": "oklch(0.075 0.025 240.0)" } }
32
+ },
33
+ "transform-teal": {
34
+ "$description": "Transform Teal — secondary (transformation, growth).",
35
+ "50": { "$type": "color", "$value": "#e9f6f6", "$extensions": { "oklch": "oklch(0.945 0.020 185.0)" } },
36
+ "100": { "$type": "color", "$value": "#bfe7e7", "$extensions": { "oklch": "oklch(0.885 0.040 185.0)" } },
37
+ "200": { "$type": "color", "$value": "#95d8d9", "$extensions": { "oklch": "oklch(0.825 0.060 185.0)" } },
38
+ "300": { "$type": "color", "$value": "#6bc9ca", "$extensions": { "oklch": "oklch(0.765 0.080 185.0)" } },
39
+ "400": { "$type": "color", "$value": "#48b8b9", "$extensions": { "oklch": "oklch(0.705 0.100 185.0)" } },
40
+ "500": { "$type": "color", "$value": "#269c9e", "$extensions": { "oklch": "oklch(0.645 0.120 185.0)" } },
41
+ "600": { "$type": "color", "$value": "#1f7d7e", "$extensions": { "oklch": "oklch(0.545 0.105 185.0)" } },
42
+ "700": { "$type": "color", "$value": "#175e5f", "$extensions": { "oklch": "oklch(0.445 0.090 185.0)" } },
43
+ "800": { "$type": "color", "$value": "#103f3f", "$extensions": { "oklch": "oklch(0.305 0.075 185.0)" } },
44
+ "900": { "$type": "color", "$value": "#081f20", "$extensions": { "oklch": "oklch(0.185 0.055 185.0)" } },
45
+ "950": { "$type": "color", "$value": "#040f10", "$extensions": { "oklch": "oklch(0.105 0.035 185.0)" } }
46
+ },
47
+ "equal-ember": {
48
+ "$description": "Equal Ember — warm accent (energy, attention; use sparingly).",
49
+ "50": { "$type": "color", "$value": "#fff3e6", "$extensions": { "oklch": "oklch(0.975 0.035 65.0)" } },
50
+ "100": { "$type": "color", "$value": "#ffdbb3", "$extensions": { "oklch": "oklch(0.925 0.070 65.0)" } },
51
+ "200": { "$type": "color", "$value": "#ffc380", "$extensions": { "oklch": "oklch(0.875 0.105 65.0)" } },
52
+ "300": { "$type": "color", "$value": "#ffab4d", "$extensions": { "oklch": "oklch(0.825 0.140 65.0)" } },
53
+ "400": { "$type": "color", "$value": "#ff941a", "$extensions": { "oklch": "oklch(0.775 0.175 65.0)" } },
54
+ "500": { "$type": "color", "$value": "#f07c00", "$extensions": { "oklch": "oklch(0.625 0.200 65.0)" } },
55
+ "600": { "$type": "color", "$value": "#c06300", "$extensions": { "oklch": "oklch(0.525 0.180 65.0)" } },
56
+ "700": { "$type": "color", "$value": "#904a00", "$extensions": { "oklch": "oklch(0.425 0.160 65.0)" } },
57
+ "800": { "$type": "color", "$value": "#603100", "$extensions": { "oklch": "oklch(0.325 0.140 65.0)" } },
58
+ "900": { "$type": "color", "$value": "#301900", "$extensions": { "oklch": "oklch(0.225 0.120 65.0)" } },
59
+ "950": { "$type": "color", "$value": "#180c00", "$extensions": { "oklch": "oklch(0.125 0.100 65.0)" } }
60
+ }
61
+ },
62
+ "brand": {
63
+ "$description": "Named brand aliases — the canonical reference points. Use these, not raw scale steps.",
64
+ "ee-blue": { "$type": "color", "$value": "{color.ee-blue.500}" },
65
+ "tech-blue": { "$type": "color", "$value": "{color.tech-blue.500}" },
66
+ "transform-teal": { "$type": "color", "$value": "{color.transform-teal.500}" },
67
+ "equal-ember": { "$type": "color", "$value": "{color.equal-ember.500}" },
68
+ "ee-blue-accent": { "$type": "color", "$value": "{color.ee-blue.50}" },
69
+ "dark-data": { "$type": "color", "$value": "#212526", "$description": "Primary text dark." },
70
+ "the-cloud": { "$type": "color", "$value": "#f5f5f5", "$description": "Light surface." },
71
+ "byte-white": { "$type": "color", "$value": "#ffffff" }
72
+ },
73
+ "alias": {
74
+ "$description": "Semantic role → brand mapping (mirrors kuat-core ee-light). Support-scale-backed roles (muted/border/ring/destructive) resolve to non-brand scales in kuat-core and are intentionally omitted here except destructive.",
75
+ "primary": { "$type": "color", "$value": "{brand.ee-blue}" },
76
+ "secondary": { "$type": "color", "$value": "{brand.transform-teal}" },
77
+ "sidebar": { "$type": "color", "$value": "{brand.tech-blue}", "$description": "Dark navigation." },
78
+ "accent": { "$type": "color", "$value": "{brand.ee-blue-accent}" },
79
+ "foreground": { "$type": "color", "$value": "{brand.dark-data}" },
80
+ "background": { "$type": "color", "$value": "{brand.byte-white}" },
81
+ "muted": { "$type": "color", "$value": "{brand.the-cloud}" },
82
+ "destructive": { "$type": "color", "$value": "#dc2626", "$description": "Red 600 (support scale, not brand)." }
83
+ }
84
+ }
@@ -142,14 +142,15 @@ Establish clear visual hierarchy:
142
142
 
143
143
  For platform-specific typography guidance:
144
144
 
145
- - **Web** - See [types/web/](../types/web/)
146
- - **Slides** - See [types/slides/](../types/slides/)
147
- - **Graphics** - See [types/graphics/](../types/graphics/)
145
+ - **Web product** - See [media-types/web-product/](../media-types/web-product/)
146
+ - **Web marketing** - See [media-types/web-marketing/](../media-types/web-marketing/)
147
+ - **Slides** - See [media-types/slides/](../media-types/slides/)
148
+ - **Graphics** - See [media-types/imagery/patterns/graphics/](../media-types/imagery/patterns/graphics/)
148
149
 
149
150
  ---
150
151
 
151
152
  ## Related Documentation
152
153
 
153
- - [Brand Guidelines](./brand.md) - Brand principles
154
+ - [Brand Guidelines](../brand/brand.md) - Brand principles
154
155
  - [Colours](./colours.md) - Text colors
155
156
  - [Spacing](./spacing.md) - Text spacing patterns
@@ -0,0 +1,10 @@
1
+ # Web Marketing
2
+
3
+ Reference for Equal Experts public-facing marketing websites, landing pages, and marketing emails.
4
+
5
+ | File | Scope |
6
+ |------|-------|
7
+ | [website.md](./website.md) | Marketing website layout and visual patterns |
8
+ | [emails.md](./emails.md) | Marketing email patterns |
9
+ | [content/](./content/) | Marketing copy, blog posts, SEO |
10
+ | [patterns/](./patterns/) | Marketing page-type patterns |
@@ -6,7 +6,7 @@ Content guidance for Equal Experts marketing websites, landing pages, and blog p
6
6
 
7
7
  ## Overview
8
8
 
9
- Marketing content informs, engages, and supports conversion. Load [foundations content](../../../../foundations/content/voice-and-tone.md) first, then [marketing-content.md](./marketing-content.md) for principles and content types.
9
+ Marketing content informs, engages, and supports conversion. See [voice and tone](../../../brand/voice-and-tone.md) and [marketing-content.md](./marketing-content.md) for principles and content types.
10
10
 
11
11
  ---
12
12
 
@@ -22,5 +22,5 @@ Marketing content informs, engages, and supports conversion. Load [foundations c
22
22
 
23
23
  ## Related
24
24
 
25
- - [Foundations content](../../../../foundations/content/README.md)
25
+ - [Content](../../../content/)
26
26
  - [Marketing website](../website.md)
@@ -4,10 +4,6 @@ Structure and style for Equal Experts blog content.
4
4
 
5
5
  ---
6
6
 
7
- **Prerequisites:** [Foundations voice and tone](../../../../foundations/content/voice-and-tone.md), [marketing content](./marketing-content.md).
8
-
9
- ---
10
-
11
7
  ## Structure
12
8
 
13
9
  1. **Introduction** – Hook the reader: story, question, or clear insight. Get to the point quickly.
@@ -20,7 +16,7 @@ Structure and style for Equal Experts blog content.
20
16
 
21
17
  ## Voice and Format
22
18
 
23
- - Use [foundations writing style](../../../../foundations/content/writing-style.md): active voice, plain language, "you" and "we".
19
+ - Use [writing style](../../../content/writing-style.md): active voice, plain language, "you" and "we".
24
20
  - Keep paragraphs short (3–4 sentences). Use lists and headings so content is scannable.
25
21
  - Support claims with evidence and examples. Avoid generic or unsupported statements.
26
22
  - Typical length: enough to cover the topic clearly; avoid padding. For many posts, a few hundred to ~1,500 words works well.
@@ -4,10 +4,6 @@ Writing principles and content types for Equal Experts marketing websites and la
4
4
 
5
5
  ---
6
6
 
7
- **Prerequisites:** Load [foundations](../../../../foundations/) first, especially [voice and tone](../../../../foundations/content/voice-and-tone.md).
8
-
9
- ---
10
-
11
7
  ## Overview
12
8
 
13
9
  Marketing content is written to build awareness, demonstrate expertise, and support leads and opportunities. It can be more expansive than product UI copy but should still be clear and evidence-based.
@@ -28,7 +24,7 @@ Marketing content is written to build awareness, demonstrate expertise, and supp
28
24
  **Tone range:** Confident to conversational (depends on content type)
29
25
  **Key balance:** Expertise + Clarity = Credibility
30
26
 
31
- Stay true to [foundations voice and tone](../../../../foundations/content/voice-and-tone.md): clear, direct, helpful. Avoid hype or vague claims.
27
+ Stay true to [voice and tone](../../../brand/voice-and-tone.md): clear, direct, helpful. Avoid hype or vague claims.
32
28
 
33
29
  ---
34
30
 
@@ -59,7 +55,7 @@ Stay true to [foundations voice and tone](../../../../foundations/content/voice-
59
55
 
60
56
  ## Related
61
57
 
62
- - [Foundations content](../../../../foundations/content/README.md)
58
+ - [Content](../../../content/)
63
59
  - [Blog posts](./blog-posts.md)
64
60
  - [SEO](./seo.md)
65
61
  - [Marketing website](../website.md)
@@ -4,14 +4,10 @@ Guidance for findable, readable, and helpful marketing content.
4
4
 
5
5
  ---
6
6
 
7
- **Prerequisites:** [Foundations content](../../../../foundations/content/README.md), [marketing content](./marketing-content.md).
8
-
9
- ---
10
-
11
7
  ## Principles
12
8
 
13
9
  - **Findable** – Use language people search for; structure and meta data support discovery.
14
- - **Readable** – Clear headings, short paragraphs, plain language (see [writing style](../../../../foundations/content/writing-style.md)).
10
+ - **Readable** – Clear headings, short paragraphs, plain language (see [writing style](../../../content/writing-style.md)).
15
11
  - **Helpful** – Content should answer a real question or need. Don't optimise for search at the expense of the reader.
16
12
 
17
13
  ---
@@ -39,6 +35,6 @@ Guidance for findable, readable, and helpful marketing content.
39
35
 
40
36
  ## Related
41
37
 
42
- - [Formatting](../../../../foundations/content/formatting.md) – Headings, links
38
+ - [Formatting](../../../content/formatting.md) – Headings, links
43
39
  - [Marketing content](./marketing-content.md)
44
40
  - [Blog posts](./blog-posts.md)
@@ -4,12 +4,6 @@ Guidelines for Equal Experts marketing emails and campaigns.
4
4
 
5
5
  ---
6
6
 
7
- **Status:** Placeholder - details to be defined
8
-
9
- **Prerequisites:** Load [foundations](../../../foundations/) first
10
-
11
- ---
12
-
13
7
  ## Overview
14
8
 
15
9
  Marketing emails are external communications designed to engage, inform, and convert prospects and customers.
@@ -52,7 +46,7 @@ Marketing emails are external communications designed to engage, inform, and con
52
46
 
53
47
  ## Content Guidelines
54
48
 
55
- Follow [foundations/content/](../../../foundations/content/) for writing style.
49
+ Follow [content](../../content/) for writing style.
56
50
 
57
51
  ### Subject Lines
58
52
  - Keep under 50 characters for mobile
@@ -69,6 +63,6 @@ Follow [foundations/content/](../../../foundations/content/) for writing style.
69
63
 
70
64
  ## Related Documentation
71
65
 
72
- - [Foundations](../../../foundations/) - Brand and design language
66
+ - [Reference home](../../README.md) - Brand and design language
73
67
  - [Marketing Website](./website.md) - Website guidelines
74
- - [Content](../../../foundations/content/) - Writing style
68
+ - [Content](../../content/) - Writing style
@@ -0,0 +1,7 @@
1
+ # Web Marketing Patterns
2
+
3
+ Applied layout and design patterns for marketing website page types.
4
+
5
+ | Pattern | For | Base layout |
6
+ |---------|-----|-------------|
7
+ | [marketing-pages.md](./marketing-pages.md) | Landing pages, pricing, features, case studies | Horizontal navigation |
@@ -243,7 +243,7 @@ Marketing pages use full-width sections with contained content.
243
243
 
244
244
  ## Accessibility
245
245
 
246
- **Base requirements:** See [foundations accessibility](../../../../foundations/accessibility.md)
246
+ **Base requirements:** See [accessibility](../../../accessibility/accessibility.md)
247
247
 
248
248
  **Scenario-specific:**
249
249
 
@@ -364,5 +364,5 @@ Marketing pages use full-width sections with contained content.
364
364
  ## Related Documentation
365
365
 
366
366
  - [Marketing Website](../website.md) - Marketing website guidelines
367
- - [Foundations Accessibility](../../../../foundations/accessibility.md) - Accessibility principles
368
- - [Logo Usage](../../../../foundations/logo.md) - Logo placement and variants
367
+ - [Accessibility](../../../accessibility/accessibility.md) - Accessibility principles
368
+ - [Logo Usage](../../../brand/logo.md) - Logo placement and variants