@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.
- package/agent-docs/AGENTS.md +1 -1
- package/agent-docs/README.md +1 -1
- package/agent-docs/bundle-manifest.json +12 -20
- package/agent-docs/components/components.manifest.json +3 -0
- package/agent-docs/external/kuat-agent-rules/reference/accessibility/README.md +7 -0
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference/accessibility}/accessibility.md +12 -10
- package/agent-docs/external/kuat-agent-rules/reference/brand/README.md +9 -0
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference/brand}/brand.md +21 -11
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference/brand}/logo.md +5 -4
- package/agent-docs/external/kuat-agent-rules/reference/brand/voice-and-tone.md +166 -0
- package/agent-docs/external/kuat-agent-rules/reference/content/README.md +12 -0
- package/agent-docs/external/kuat-agent-rules/reference/content/formatting.md +120 -0
- package/agent-docs/external/kuat-agent-rules/reference/content/numbers.md +87 -0
- package/agent-docs/external/kuat-agent-rules/reference/content/punctuation.md +94 -0
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference}/content/writing-style.md +7 -2
- package/agent-docs/external/kuat-agent-rules/reference/design-language/README.md +11 -0
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/borders.md +3 -2
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/colours.md +38 -10
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/design-language.md +11 -10
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/spacing.md +4 -3
- package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/README.md +29 -0
- package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/colors.tokens.json +84 -0
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/typography.md +5 -4
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/README.md +10 -0
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/README.md +2 -2
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/blog-posts.md +1 -5
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/marketing-content.md +2 -6
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/seo.md +2 -6
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/emails.md +3 -9
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/patterns/README.md +7 -0
- 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
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/website.md +7 -22
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/README.md +16 -0
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/accessibility.md +2 -12
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/component-decision-tree.md +3 -18
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/component-registry.md +3 -22
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/README.md +2 -2
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/actions.md +1 -7
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/confirmations.md +0 -6
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/empty-states.md +0 -6
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/errors.md +0 -6
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/forms.md +1 -7
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/product-content.md +1 -11
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/design.md +6 -36
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/emails.md +3 -9
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/README.md +10 -0
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/authentication.md +3 -3
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/dashboards.md +2 -2
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/documentation.md +3 -3
- package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/forms.md +3 -3
- package/agent-docs/kuat-docs/rules/README.md +37 -30
- package/agent-docs/kuat-docs/rules/design/layouts.md +1 -1
- package/agent-docs/kuat-docs/rules/scenarios/README.md +1 -1
- package/agent-docs/manifest.json +3 -3
- package/agent-docs/rules/LOADING-consumer.md +5 -5
- package/package.json +1 -1
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/LOADING.md +0 -166
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/README.md +0 -28
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/formatting.md +0 -93
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/numbers.md +0 -69
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/punctuation.md +0 -75
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/voice-and-tone.md +0 -263
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/README.md +0 -28
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/scenarios/README.md +0 -18
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/DEPRECATIONS.md +0 -28
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/README.md +0 -65
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/review-checklist.md +0 -57
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/review-context.md +0 -44
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/scenarios/README.md +0 -82
- 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](
|
|
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
|
-
- **
|
|
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)` / `#
|
|
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
|
-
- **
|
|
164
|
-
- **
|
|
165
|
-
- **
|
|
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](
|
|
199
|
+
- [Brand Guidelines](../brand/brand.md) - Brand principles
|
|
172
200
|
- [Typography](./typography.md) - Font colors and text styling
|
|
173
|
-
- [Logo](
|
|
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
|
-
|
|
96
|
+
Type-specific rules build on these general principles:
|
|
97
97
|
|
|
98
98
|
| Platform | Directory | Description |
|
|
99
99
|
|----------|-----------|-------------|
|
|
100
|
-
| Web | [types/web/](
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
|
|
|
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
|
-
- [
|
|
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
|
-
- **
|
|
123
|
-
- **
|
|
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/`).
|
package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/colors.tokens.json
ADDED
|
@@ -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
|
-
- **
|
|
147
|
-
- **
|
|
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](
|
|
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.
|
|
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
|
-
- [
|
|
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 [
|
|
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 [
|
|
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
|
-
- [
|
|
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](
|
|
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](
|
|
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 [
|
|
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
|
-
- [
|
|
66
|
+
- [Reference home](../../README.md) - Brand and design language
|
|
73
67
|
- [Marketing Website](./website.md) - Website guidelines
|
|
74
|
-
- [Content](
|
|
68
|
+
- [Content](../../content/) - Writing style
|
package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/patterns/README.md
ADDED
|
@@ -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 [
|
|
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
|
-
- [
|
|
368
|
-
- [Logo Usage](
|
|
367
|
+
- [Accessibility](../../../accessibility/accessibility.md) - Accessibility principles
|
|
368
|
+
- [Logo Usage](../../../brand/logo.md) - Logo placement and variants
|