@equal-experts/kuat-react 0.13.1 → 0.14.0-beta.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.
Files changed (73) hide show
  1. package/README.md +49 -49
  2. package/agent-docs/AGENTS.md +2 -2
  3. package/agent-docs/README.md +1 -1
  4. package/agent-docs/bundle-manifest.json +12 -20
  5. package/agent-docs/components/components.manifest.json +3 -0
  6. package/agent-docs/external/kuat-agent-rules/reference/accessibility/README.md +7 -0
  7. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference/accessibility}/accessibility.md +12 -10
  8. package/agent-docs/external/kuat-agent-rules/reference/brand/README.md +9 -0
  9. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference/brand}/brand.md +21 -11
  10. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference/brand}/logo.md +5 -4
  11. package/agent-docs/external/kuat-agent-rules/reference/brand/voice-and-tone.md +166 -0
  12. package/agent-docs/external/kuat-agent-rules/reference/content/README.md +12 -0
  13. package/agent-docs/external/kuat-agent-rules/reference/content/formatting.md +120 -0
  14. package/agent-docs/external/kuat-agent-rules/reference/content/numbers.md +87 -0
  15. package/agent-docs/external/kuat-agent-rules/reference/content/punctuation.md +94 -0
  16. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations → reference}/content/writing-style.md +7 -2
  17. package/agent-docs/external/kuat-agent-rules/reference/design-language/README.md +11 -0
  18. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/borders.md +3 -2
  19. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/colours.md +38 -10
  20. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/design-language.md +11 -10
  21. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/spacing.md +4 -3
  22. package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/README.md +29 -0
  23. package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/colors.tokens.json +84 -0
  24. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/foundations/design → reference/design-language}/typography.md +5 -4
  25. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/README.md +10 -0
  26. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/README.md +2 -2
  27. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/blog-posts.md +1 -5
  28. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/marketing-content.md +2 -6
  29. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/content/seo.md +2 -6
  30. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/emails.md +3 -9
  31. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/patterns/README.md +7 -0
  32. 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
  33. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/marketing → reference/media-types/web-marketing}/website.md +7 -22
  34. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/README.md +16 -0
  35. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/accessibility.md +2 -12
  36. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/component-decision-tree.md +3 -18
  37. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/component-registry.md +3 -22
  38. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/README.md +2 -2
  39. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/actions.md +1 -7
  40. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/confirmations.md +0 -6
  41. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/empty-states.md +0 -6
  42. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/errors.md +0 -6
  43. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/forms.md +1 -7
  44. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/content/product-content.md +1 -11
  45. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/design.md +6 -36
  46. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product → reference/media-types/web-product}/emails.md +3 -9
  47. package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/README.md +10 -0
  48. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/authentication.md +3 -3
  49. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/dashboards.md +2 -2
  50. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/documentation.md +3 -3
  51. package/agent-docs/external/kuat-agent-rules/{kuat-docs/rules/types/web/product/scenarios → reference/media-types/web-product/patterns}/forms.md +3 -3
  52. package/agent-docs/kuat-docs/rules/README.md +37 -30
  53. package/agent-docs/kuat-docs/rules/design/layouts.md +1 -1
  54. package/agent-docs/kuat-docs/rules/scenarios/README.md +1 -1
  55. package/agent-docs/manifest.json +3 -3
  56. package/agent-docs/rules/LOADING-consumer.md +5 -5
  57. package/dist/components/ui/carousel/carousel.d.ts +1 -1
  58. package/dist/style.css +1 -1
  59. package/package.json +2 -2
  60. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/LOADING.md +0 -166
  61. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/README.md +0 -28
  62. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/formatting.md +0 -93
  63. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/numbers.md +0 -69
  64. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/punctuation.md +0 -75
  65. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/voice-and-tone.md +0 -263
  66. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/README.md +0 -28
  67. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/scenarios/README.md +0 -18
  68. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/DEPRECATIONS.md +0 -28
  69. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/README.md +0 -65
  70. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/review-checklist.md +0 -57
  71. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/review-context.md +0 -44
  72. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/scenarios/README.md +0 -82
  73. package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/technical.md +0 -488
package/README.md CHANGED
@@ -53,23 +53,34 @@ Add this to your project `AGENTS.md` (or `.cursorrules`) so agent workflows stay
53
53
  ### Peer dependencies
54
54
 
55
55
  Install peers for the components you use before running `dev` or `build`.
56
+ `react`/`react-dom` are always required. Embla (carousel) and Sonner ship as
57
+ bundled dependencies, so you don't install those.
56
58
 
57
- | Components you use | Required peers |
59
+ | Components you use | Peers to install |
58
60
  |---|---|
59
- | `Button`, `KuatHeader` | `@radix-ui/react-slot`, `lucide-react` |
60
- | `Accordion` | `@radix-ui/react-accordion` |
61
+ | `Button`, `ButtonGroup`, `IconButton` | `@radix-ui/react-slot` |
62
+ | `Accordion` | `@radix-ui/react-accordion`, `lucide-react` |
61
63
  | `AlertDialog` | `@radix-ui/react-alert-dialog` |
62
- | `Select` / `KuatSelect` | `@radix-ui/react-select`, `@radix-ui/react-separator` |
63
- | `Checkbox` / `CheckboxField` | `@radix-ui/react-checkbox` |
64
- | `RadioGroup` / `RadioField` | `@radix-ui/react-radio-group` |
64
+ | `Select` | `@radix-ui/react-select`, `lucide-react` |
65
+ | `DropdownMenu` | `@radix-ui/react-dropdown-menu`, `lucide-react` |
66
+ | `Checkbox` / `CheckboxField` | `@radix-ui/react-checkbox`, `lucide-react` |
67
+ | `Radio` / `RadioField` | `@radix-ui/react-radio-group` |
65
68
  | `Switch` / `SwitchField` | `@radix-ui/react-switch` |
66
- | `Toggle` / `ToggleGroup` | `@radix-ui/react-toggle`, `@radix-ui/react-toggle-group` |
67
- | `Sonner` | `sonner` |
69
+ | `Toggle`, `ToggleGroup` | `@radix-ui/react-toggle`, `@radix-ui/react-toggle-group` |
70
+ | `Separator` | `@radix-ui/react-separator` |
71
+ | `Carousel`, `KuatCarousel` | `lucide-react` |
72
+ | `Breadcrumb`, `KuatHeader` | `lucide-react` |
73
+ | `Sonner` | — (bundled, no peer to install) |
74
+ | `Badge`, `Field`, `Input`, `Textarea`, `ContentCard`, `KuatRadialProgress` | none |
75
+
76
+ > **Tip:** if you use the Kuat agent plugin in Claude Code, run
77
+ > `/kuat-add <component>` to add a component and install its peers automatically,
78
+ > instead of wiring the table above by hand.
68
79
 
69
80
  Example peer install for a broad setup:
70
81
 
71
82
  ```bash
72
- pnpm add @radix-ui/react-slot @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-checkbox @radix-ui/react-radio-group @radix-ui/react-switch @radix-ui/react-toggle @radix-ui/react-toggle-group lucide-react sonner
83
+ pnpm add @radix-ui/react-slot @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-select @radix-ui/react-dropdown-menu @radix-ui/react-separator @radix-ui/react-checkbox @radix-ui/react-radio-group @radix-ui/react-switch @radix-ui/react-toggle @radix-ui/react-toggle-group lucide-react
73
84
  ```
74
85
 
75
86
  ---
@@ -124,63 +135,52 @@ import { KuatCarousel } from '@equal-experts/kuat-react/kuat-carousel';
124
135
 
125
136
  ## Recommended setup
126
137
 
127
- ### 1. Tailwind
128
-
129
- ```typescript
130
- // tailwind.config.ts
131
- import type { Config } from 'tailwindcss';
132
- import kuatPreset from '@equal-experts/kuat-core';
133
-
134
- export default {
135
- presets: [kuatPreset],
136
- content: [
137
- './src/**/*.{js,ts,jsx,tsx}',
138
- './node_modules/@equal-experts/kuat-react/**/*.{js,ts,jsx,tsx}',
139
- ],
140
- } satisfies Config;
141
- ```
142
-
143
- ### 2. Tailwind runtime stylesheet (required for Tailwind v4)
138
+ ### 1. Tailwind v4 + Kuat tokens (CSS-first)
144
139
 
145
- Create a global stylesheet and load Tailwind:
140
+ Add the Tailwind v4 plugin to your build (e.g. `@tailwindcss/vite`), then create
141
+ a global stylesheet that imports Tailwind and the Kuat tokens. The tokens must
142
+ be pulled in **through Tailwind** (a CSS `@import`) so the `@theme` block in
143
+ `variables.css` is processed and the token utilities (`bg-primary`,
144
+ `text-foreground`, `rounded-lg`, …) are generated:
146
145
 
147
146
  ```css
148
- /* src/tailwind.css */
147
+ /* src/index.css */
148
+ @import "@equal-experts/kuat-core/fonts.css"; /* fonts; or a <link> — see kuat-core README */
149
149
  @import "tailwindcss";
150
+ @import "@equal-experts/kuat-core/variables.css";
150
151
  ```
151
152
 
152
- ### 3. Design tokens and Kuat styles (once per app entrypoint)
153
+ > A plain JS `import "@equal-experts/kuat-core/variables.css"` loads the raw
154
+ > variables but does **not** feed the `@theme` block to Tailwind, so the token
155
+ > utilities never generate (with no error). Always `@import` the tokens through
156
+ > Tailwind, as above.
157
+ >
158
+ > The legacy JS preset (`presets: [kuatPreset]`) is **deprecated** and is not
159
+ > auto-loaded by Tailwind v4 — don't use it. See the kuat-core README.
160
+
161
+ ### 2. Component styles (once per app entrypoint)
162
+
163
+ Kuat component CSS is pre-compiled, so a JS import is correct here:
153
164
 
154
165
  ```typescript
155
166
  // main.tsx
156
- import '@equal-experts/kuat-core/variables.css';
157
- import '@equal-experts/kuat-react/styles';
158
- import './tailwind.css';
159
- import './app.css';
167
+ import '@equal-experts/kuat-react/styles'; // pre-compiled component CSS
168
+ import './index.css'; // Tailwind + Kuat tokens (from step 1)
169
+ import './app.css'; // your app styles, last
160
170
  ```
161
171
 
162
- Import order matters: load Kuat tokens and Kuat styles before app-specific styles.
172
+ Import order matters: load Kuat styles before app-specific styles.
163
173
 
164
174
  If you scaffolded from a starter template (for example Vite), remove or neutralize template CSS that resets fonts/layout globally (for example `src/index.css` with `:root { font: ... }`, `body { ... }`, `#root { ... }`). These rules can override Kuat typography and spacing.
165
175
 
166
- Typical cleanup for a smoke setup:
167
-
168
- ```typescript
169
- // Keep in main.tsx
170
- import '@equal-experts/kuat-core/variables.css';
171
- import '@equal-experts/kuat-react/styles';
172
- import './tailwind.css';
173
- // Remove template global CSS import if it overrides root/body fonts or layout
174
- ```
175
-
176
- ### 4. shadcn for gaps only
176
+ ### 3. shadcn for gaps only
177
177
 
178
178
  ```bash
179
179
  npx shadcn@latest init
180
180
  npx shadcn@latest add dialog dropdown-menu # examples — skip `button` if you use Kuat Button
181
181
  ```
182
182
 
183
- ### 5. Use Kuat + shadcn together
183
+ ### 4. Use Kuat + shadcn together
184
184
 
185
185
  ```tsx
186
186
  import { Button, ButtonGroup, Field } from '@equal-experts/kuat-react';
@@ -242,7 +242,7 @@ Use this quick smoke test after installation to verify imports, styles, and Tail
242
242
  ### 1. Add a smoke component
243
243
 
244
244
  ```tsx
245
- import { Button, Field, KuatCarousel, KuatCarouselContent, KuatCarouselItem } from '@equal-experts/kuat-react';
245
+ import { Button, Field, FieldLabel, Input, KuatCarousel, KuatCarouselContent, KuatCarouselItem } from '@equal-experts/kuat-react';
246
246
 
247
247
  export function KuatInstallSmoke() {
248
248
  return (
@@ -250,8 +250,8 @@ export function KuatInstallSmoke() {
250
250
  <h1 className="text-4xl font-bold">Kuat install smoke test</h1>
251
251
 
252
252
  <Field>
253
- <label htmlFor="name">Name</label>
254
- <input id="name" placeholder="Test input" />
253
+ <FieldLabel htmlFor="name">Name</FieldLabel>
254
+ <Input id="name" placeholder="Test input" />
255
255
  </Field>
256
256
 
257
257
  <Button variant="primary">Primary action</Button>
@@ -4,7 +4,7 @@ Rules for this install live under `agent-docs/` in `@equal-experts/kuat-core`, `
4
4
 
5
5
  1. Run `ensure-rules.sh` from kuat-agent-docs skills (symlinked) — expect `RULES_SOURCE=package` when cwd has node_modules.
6
6
  2. Load `agent-docs/rules/LOADING-consumer.md`.
7
- 3. Load component guides via `agent-docs/components.manifest.json`.
7
+ 3. Load component guides via `agent-docs/components/components.manifest.json`.
8
8
  4. Skills: `kuat-review`, `kuat-create` from [kuat-agent-docs](https://github.com/equalexperts/kuat-agent-docs).
9
9
 
10
- **Version:** 0.13.1 · **Rules snapshot:** 67fc215fe87c
10
+ **Version:** 0.14.0-beta.1 · **Rules snapshot:** cb073bf5a888
@@ -14,4 +14,4 @@ Curated agent docs bundled with `@equal-experts/kuat-core`, `@equal-experts/kuat
14
14
  node scripts/agent-docs/bundle-for-core.mjs
15
15
  ```
16
16
 
17
- Built against upstream ref: `67fc215fe87c`
17
+ Built against upstream ref: `cb073bf5a888`
@@ -18,36 +18,28 @@
18
18
  "target": "components"
19
19
  },
20
20
  {
21
- "source": "external/kuat-agent-rules/kuat-docs/rules/foundations/brand.md",
22
- "target": "external/kuat-agent-rules/kuat-docs/rules/foundations/brand.md"
21
+ "source": "external/kuat-agent-rules/reference/brand",
22
+ "target": "external/kuat-agent-rules/reference/brand"
23
23
  },
24
24
  {
25
- "source": "external/kuat-agent-rules/kuat-docs/rules/foundations/accessibility.md",
26
- "target": "external/kuat-agent-rules/kuat-docs/rules/foundations/accessibility.md"
25
+ "source": "external/kuat-agent-rules/reference/accessibility",
26
+ "target": "external/kuat-agent-rules/reference/accessibility"
27
27
  },
28
28
  {
29
- "source": "external/kuat-agent-rules/kuat-docs/rules/LOADING.md",
30
- "target": "external/kuat-agent-rules/kuat-docs/rules/LOADING.md"
29
+ "source": "external/kuat-agent-rules/reference/design-language",
30
+ "target": "external/kuat-agent-rules/reference/design-language"
31
31
  },
32
32
  {
33
- "source": "external/kuat-agent-rules/kuat-docs/rules/foundations/design",
34
- "target": "external/kuat-agent-rules/kuat-docs/rules/foundations/design"
33
+ "source": "external/kuat-agent-rules/reference/content",
34
+ "target": "external/kuat-agent-rules/reference/content"
35
35
  },
36
36
  {
37
- "source": "external/kuat-agent-rules/kuat-docs/rules/foundations/content",
38
- "target": "external/kuat-agent-rules/kuat-docs/rules/foundations/content"
37
+ "source": "external/kuat-agent-rules/reference/media-types/web-product",
38
+ "target": "external/kuat-agent-rules/reference/media-types/web-product"
39
39
  },
40
40
  {
41
- "source": "external/kuat-agent-rules/kuat-docs/rules/foundations/logo.md",
42
- "target": "external/kuat-agent-rules/kuat-docs/rules/foundations/logo.md"
43
- },
44
- {
45
- "source": "external/kuat-agent-rules/kuat-docs/rules/types/web/product",
46
- "target": "external/kuat-agent-rules/kuat-docs/rules/types/web/product"
47
- },
48
- {
49
- "source": "external/kuat-agent-rules/kuat-docs/rules/types/web/marketing",
50
- "target": "external/kuat-agent-rules/kuat-docs/rules/types/web/marketing"
41
+ "source": "external/kuat-agent-rules/reference/media-types/web-marketing",
42
+ "target": "external/kuat-agent-rules/reference/media-types/web-marketing"
51
43
  }
52
44
  ],
53
45
  "denyPathSegments": [
@@ -3,16 +3,19 @@
3
3
  "components": {
4
4
  "shadcn:button": {
5
5
  "slug": "button",
6
+ "displayName": "Button",
6
7
  "path": "components/button.md",
7
8
  "sources": ["shadcn:button", "@equal-experts/kuat-core"]
8
9
  },
9
10
  "kuat:button-group": {
10
11
  "slug": "button-group",
12
+ "displayName": "ButtonGroup",
11
13
  "path": "components/button-group.md",
12
14
  "sources": ["@equal-experts/kuat-react", "@equal-experts/kuat-vue"]
13
15
  },
14
16
  "kuat:kuat-header": {
15
17
  "slug": "kuat-header",
18
+ "displayName": "KuatHeader",
16
19
  "path": "components/kuat-header.md",
17
20
  "sources": ["@equal-experts/kuat-react", "@equal-experts/kuat-vue"]
18
21
  }
@@ -0,0 +1,7 @@
1
+ # Accessibility
2
+
3
+ Equal Experts accessibility standards, applied across every medium.
4
+
5
+ | File | Scope |
6
+ |------|-------|
7
+ | [accessibility.md](./accessibility.md) | WCAG 2.2 AA standards: contrast, focus, semantics, alt text |
@@ -1,7 +1,3 @@
1
- ---
2
- scope: general
3
- ---
4
-
5
1
  # Accessibility
6
2
 
7
3
  Foundational accessibility requirements for Equal Experts content and products. These rules ensure products and services deliver the best experience for all users.
@@ -371,11 +367,17 @@ Always spell out abbreviations on first use:
371
367
 
372
368
  ## Inclusive Language
373
369
 
370
+ Inclusive language is part of how Equal Experts writes — it helps us be accurate and build trust. Around 16% of people worldwide experience some form of disability, so it matters that we don't unintentionally exclude anyone from accessing or understanding our work. This section is the authoritative source for inclusive word choices across all content; the [writing style](../content/writing-style.md) guidance links here.
371
+
374
372
  ### Guidelines
375
373
 
376
374
  - Use language that is respectful and free of bias
377
- - Avoid exclusionary terms or outdated phrases
378
- - Consider diverse audiences and perspectives
375
+ - Avoid terms that contribute to stigmas around disability or mental illness
376
+ - Make content **gender-neutral** wherever possible, and avoid words and phrases that indicate gender bias
377
+ - Avoid words, images, or situations that reinforce racial, ethnic, or religious stereotypes
378
+ - Be considerate with computer and software terminology such as "master", "slave", and "blacklist" — prefer neutral alternatives (for example "main", "primary/replica", "blocklist")
379
+ - Avoid assumptions: when including someone in a piece of content, ask how they'd like to be identified
380
+ - Avoid idioms where possible, or make sure they're clearly explained — they don't always translate across cultures or for non-native readers
379
381
  - When in doubt, research current preferred terminology
380
382
 
381
383
  ### Person-First Language
@@ -438,7 +440,7 @@ Always spell out abbreviations on first use:
438
440
 
439
441
  ## Related Documentation
440
442
 
441
- - [Colours](./design/colours.md) - Brand colour palette and contrast
442
- - [Typography](./design/typography.md) - Font families and type scale
443
- - [Content](./content/README.md) - Writing style and tone
444
- - [Web Technical Accessibility](../types/web/product/accessibility.md) - Implementation details
443
+ - [Colours](../design-language/colours.md) - Brand colour palette and contrast
444
+ - [Typography](../design-language/typography.md) - Font families and type scale
445
+ - [Writing style](../content/writing-style.md) - Writing style and tone
446
+ - [Web Technical Accessibility](../media-types/web-product/accessibility.md) - Implementation details
@@ -0,0 +1,9 @@
1
+ # Brand
2
+
3
+ Equal Experts brand identity: who EE is and how the brand expresses itself.
4
+
5
+ | File | Scope |
6
+ |------|-------|
7
+ | [brand.md](./brand.md) | Brand principles and identity |
8
+ | [logo.md](./logo.md) | Logo variants, sizing, placement, clear space |
9
+ | [voice-and-tone.md](./voice-and-tone.md) | Voice, tone, audience, content quality |
@@ -18,21 +18,31 @@ Equal Experts is a network of experienced software consultants, helping organisa
18
18
 
19
19
  ## Brand Values
20
20
 
21
- ### 1. Expertise Through Experience
21
+ The Equal Experts values act as principles of how we work with our customers. They are intended to give all members of the network autonomy in making decisions that are aligned with the way we want to behave, as well as how we want to be recognised.
22
22
 
23
- We hire only experienced consultants. Our expertise comes from years of hands-on work, not certifications or titles.
23
+ ### 1. We deliver as teams of equals
24
24
 
25
- ### 2. Equality and Collaboration
25
+ Teams are greater than the sum of their parts. No matter what role people play in a team, they all have something to contribute, and they all have a voice in delivery decisions.
26
26
 
27
- Everyone is equal. We work alongside clients as partners, not vendors. No account managers, no hierarchy - just experts working together.
27
+ ### 2. We prioritise outcomes over approach
28
28
 
29
- ### 3. Honesty and Transparency
29
+ We work in complex and highly dynamic environments. We’re not interested in a cookie-cutter approach.
30
30
 
31
- We tell clients what they need to hear, not what they want to hear. We're direct about risks, challenges, and realistic outcomes.
31
+ ### 3. We narrow our focus but widen our context
32
32
 
33
- ### 4. Pragmatism Over Perfection
33
+ We deliver concrete value as early as possible by quickly identifying key opportunities, but framing them within the wider organisational context.
34
34
 
35
- We focus on delivering value, not following processes for their own sake. We choose practical solutions that work in the real world.
35
+ ### 4. We bring step-by-step change
36
+
37
+ It can be tempting to look for a WOW factor, but we know that lasting change is best achieved through small, incremental practices that build towards larger transformation.
38
+
39
+ ### 5. We have a passion for learning over knowing all the answers
40
+
41
+ We may be experts, but we don’t pretend to know all the answers.
42
+
43
+ ### 6. We seek customer success over our own short-term interests
44
+
45
+ We thrive by our reputation, so the only way to guarantee our future success is to do what’s right, right now, for our customers.
36
46
 
37
47
  ---
38
48
 
@@ -94,6 +104,6 @@ When representing Equal Experts:
94
104
  ## Related Documentation
95
105
 
96
106
  - [Logo Usage](./logo.md) - Logo variants, sizing, placement
97
- - [Colours](./design/colours.md) - Brand color palette
98
- - [Typography](./design/typography.md) - Brand fonts
99
- - [Content](./content/README.md) - Writing style and tone
107
+ - [Colours](../design-language/colours.md) - Brand color palette
108
+ - [Typography](../design-language/typography.md) - Brand fonts
109
+ - [Reference index](../README.md) - All brand reference guides
@@ -121,9 +121,10 @@ The brand mark (without wordmark) should only be used when:
121
121
 
122
122
  For platform-specific logo placement guidance:
123
123
 
124
- - **Web layouts** - See [types/web/](../types/web/)
125
- - **Slides** - See [types/slides/](../types/slides/)
126
- - **Graphics** - See [types/graphics/](../types/graphics/)
124
+ - **Web product** - See [media-types/web-product/](../media-types/web-product/)
125
+ - **Web marketing** - See [media-types/web-marketing/](../media-types/web-marketing/)
126
+ - **Slides** - See [media-types/slides/](../media-types/slides/)
127
+ - **Graphics** - See [media-types/imagery/patterns/graphics/](../media-types/imagery/patterns/graphics/)
127
128
 
128
129
  ---
129
130
 
@@ -148,4 +149,4 @@ All logos are available in the [Equal Experts brand-assets repository](https://g
148
149
  ## Related Documentation
149
150
 
150
151
  - [Brand Guidelines](./brand.md) - Brand principles
151
- - [Colours](./design/colours.md) - Brand color palette
152
+ - [Colours](../design-language/colours.md) - Brand color palette
@@ -0,0 +1,166 @@
1
+ # Voice and Tone
2
+
3
+ Universal voice and tone for Equal Experts content. Applies to all platforms and media.
4
+
5
+ ---
6
+
7
+ ## Overview
8
+
9
+ It's not just *what* we say but *how* we say it that matters. A consistent voice — aligned with our vision, mission, and values — helps us speak to our audience clearly, reflects our culture, and differentiates us from the competition. If the voice isn't reflective of Equal Experts, our work, and our values, we risk key messages being misunderstood or overlooked.
10
+
11
+ Our **voice** is constant: it's who we are. Our **tone** flexes to suit the audience, channel, and purpose.
12
+
13
+ ---
14
+
15
+ ## Quick Reference
16
+
17
+ **Always:**
18
+ - Be friendly, clear, and approachable — one human to another
19
+ - Be confident, but never arrogant; back claims with evidence
20
+ - Focus on the audience and their needs
21
+ - Use plain language; be specific, not vague
22
+ - Be consistent across channels and materials
23
+
24
+ **Never:**
25
+ - Make bold claims without backing them up
26
+ - Hide behind jargon, acronyms, or buzzwords
27
+ - Talk down to, over-simplify for, or patronise the audience
28
+ - Overuse "we" so the content reads as boastful
29
+ - Mix and match tones and styles within a piece
30
+
31
+ ---
32
+
33
+ ## How We Describe Equal Experts
34
+
35
+ Equal Experts is a global network of technology shapers. We work collaboratively with clients on digital initiatives that deliver long-lasting change and pragmatic innovation. Engaging around 3,000 consultants across five continents, we help solve complex business problems and create leading digital products and services. We decide with data, design for users, deliver at pace, and scale sustainably.
36
+
37
+ What makes us unique: we engage only senior consultants (averaging around 18 years' experience), we're low-ego and curious, we're vendor-agnostic and don't offer cookie-cutter solutions, and our flexible global delivery model means we're not limited by geography.
38
+
39
+ ---
40
+
41
+ ## Writing in the Equal Experts Voice
42
+
43
+ **Friendly, clear, and approachable.** We speak from one human to another. Though we work with cutting-edge technology, we're not robots and neither are our customers. Content is clear, concise, and purposeful, but reflects how we'd speak face-to-face. Gentle humour is welcome when it arises naturally, is appropriate, and will be widely understood.
44
+
45
+ **Confident, but never arrogant.** With a word as powerful as "expert" in our name, we embody it with humility. We show our knowledge through tangible results and a passion for learning. We're confident without being condescending, and knowledgeable without being know-it-alls.
46
+
47
+ **Focused on the audience.** Our voice adapts to different audiences, channels, and platforms. When we talk about technology, we consider the audience and don't cloud the message with terminology, acronyms, or phrases they're unlikely to understand. We're not dumbing down or patronising — we're meeting the audience where they are.
48
+
49
+ **Genuine, and a team of equals.** Our voice instils trust in our work and our people. We speak positively about our customers — past and present — emphasising collaboration, transparency, and honesty. We voice our opinions but stay open to compromise for the good of the client or team. We're considerate and intentional with our words, paying close attention to inclusivity and accessibility.
50
+
51
+ ---
52
+
53
+ ## Adapting Tone for the Audience
54
+
55
+ The Equal Experts voice flexes to the audience and content type. Internal audiences allow a more informal, conversational tone with more room for humour; sales materials dial up confident, persuasive language.
56
+
57
+ | Audience / channel | Tone |
58
+ |--------------------|------|
59
+ | Case studies (external) | Straightforward and factual, with a focus on storytelling, client collaboration, and results |
60
+ | Blogs (external & internal) | Purposeful and informative, letting the author's personality shine through; answer the audience's questions |
61
+ | Playbooks & informative content | Clear and informative, with evidence-based insights and examples; a strong expert tone |
62
+ | Pitch decks & sales materials | Confident, authoritative, persuasive; definitive statements about our work and impact, always backed by results |
63
+ | Social media | Conversational, friendly, and informal; often addressed to the audience |
64
+ | Internal Blogin & Slack | Friendly, approachable, reflecting the author's personality. Remember NDAs |
65
+ | Knowledge Portal | Deeper, less-polished opinions and insights, useful for the network but not for external view. Remember NDAs |
66
+
67
+ We don't adapt the tone in a way that compromises our values, and we always read as professional, reliable experts who deliver results.
68
+
69
+ ---
70
+
71
+ ## Content Principles
72
+
73
+ These principles underpin all our content, from planning to maintenance.
74
+
75
+ 1. **Always be human.** We're humans talking to humans — simple, authentic, and genuine, with personality and humour where it suits.
76
+ 2. **Have a clear purpose.** Set the aim, audience, and the goal it serves before you start. What question does this piece answer?
77
+ 3. **Know who your audience is.** Understand their situation, behaviours, attitudes, problems, and goals.
78
+ 4. **Be clear and concise.** Plain English, the best chance of being read and understood. Don't use ten words when three will do.
79
+ 5. **Collaborate with others.** Draw on people with the right skills at the right point in the process.
80
+ 6. **Test, iterate, and learn.** Try new content, improve it on feedback and evidence, and share what you learn across the network.
81
+
82
+ ---
83
+
84
+ ## Top Tips
85
+
86
+ - **Write for all readers.** Some read every word; others skim. Descriptive headers, subheaders, lists, and diagrams help people find what they need
87
+ - **Lead with the key message.** Open with the main or most interesting point, then back it up
88
+ - **Use the active voice.** "We reviewed the code", not "The code was reviewed by Equal Experts"
89
+ - **Be clear, concise, and specific.** Plain English, no slang, no unnecessary jargon or acronyms; don't assume prior knowledge
90
+ - **Write like a human.** Being an expert means removing complexity — be relatable, warm, and friendly
91
+ - **Adapt to the audience.** Suit the situation, the reader, and the subject
92
+ - **Don't "we" all over the content.** Too much "we" reads as boastful; emphasise the client and the collaboration
93
+ - **Be consistent.** Apply the same standards and style throughout; don't mix tones
94
+
95
+ ---
96
+
97
+ ## UK English and Local Markets
98
+
99
+ We focus on **UK English** for global content, but respect local markets — Australia, the US, Europe, South Africa, and India — where appropriate, adopting local spelling, grammar, and currency in location-specific content.
100
+
101
+ ---
102
+
103
+ ## Audience Considerations
104
+
105
+ ### Technical audiences (developers, engineers)
106
+
107
+ **Tone:** Pragmatic, evidence-based, respectful of expertise. Use specific technical detail, code examples, and trade-offs. Avoid over-simplification, buzzwords, and marketing language.
108
+
109
+ ### Business stakeholders (product owners, leaders)
110
+
111
+ **Tone:** Outcome-focused, clear, strategic. Use business metrics, efficiency gains, and impact. Avoid deep technical detail without context and unexplained acronyms.
112
+
113
+ ### General audiences
114
+
115
+ **Tone:** Helpful, clear, accessible. Use plain language, clear explanations, and practical examples. Avoid corporate speak and jargon.
116
+
117
+ ---
118
+
119
+ ## Common Pitfalls
120
+
121
+ ### Buzzword bingo
122
+ Trendy terminology without substance.
123
+
124
+ ❌ "Leveraging synergistic, AI-enabled solutions"
125
+ ✅ "We automated invoice processing using existing APIs"
126
+
127
+ ### Unbacked claims
128
+ Bold statements without evidence.
129
+
130
+ ❌ "We'll dramatically improve your performance"
131
+ ✅ "The health check saved the client £3 million"
132
+
133
+ ### Over-explanation
134
+ Explaining what needs no explanation.
135
+
136
+ ❌ "Click the button below to continue to the next screen"
137
+ ✅ [Continue]
138
+
139
+ ---
140
+
141
+ ## Content Quality Checklist
142
+
143
+ - **Clarity:** Can it be understood from a 30-second skim?
144
+ - **Purpose:** Does it answer a specific question or solve a problem?
145
+ - **Consistency:** Does it use consistent terminology and patterns?
146
+ - **Audience:** Is it pitched right for the intended reader?
147
+ - **Accessibility:** Does it work for everyone, including assistive-technology users?
148
+
149
+ ---
150
+
151
+ ## Platform-Specific Content
152
+
153
+ For platform-specific content guidance:
154
+
155
+ - **Web Marketing** - See [media-types/web-marketing/](../media-types/web-marketing/)
156
+ - **Web Product** - See [media-types/web-product/](../media-types/web-product/)
157
+ - **Slides** - See [media-types/slides/](../media-types/slides/)
158
+
159
+ ---
160
+
161
+ ## Related Documentation
162
+
163
+ - [Brand Guidelines](./brand.md) - Brand voice and values
164
+ - [Writing style](../content/writing-style.md) - Active voice, plain language, conventions
165
+ - [Inclusive language](../accessibility/accessibility.md#inclusive-language) - Accessible, bias-free word choices
166
+ - [Design language](../design-language/design-language.md) - Visual design principles
@@ -0,0 +1,12 @@
1
+ # Content
2
+
3
+ How Equal Experts writes — style and usage conventions that apply across every medium. (Voice and tone lives in [brand/](../brand/voice-and-tone.md).)
4
+
5
+ | File | Scope |
6
+ |------|-------|
7
+ | [writing-style.md](./writing-style.md) | Active voice, plain language, conciseness |
8
+ | [formatting.md](./formatting.md) | Capitalisation, headings, links, lists, acronyms |
9
+ | [numbers.md](./numbers.md) | Dates, times, currency, percentages, units |
10
+ | [punctuation.md](./punctuation.md) | Commas, dashes, apostrophes, quotation marks |
11
+
12
+ Inclusive, bias-free word choices live in [accessibility/](../accessibility/accessibility.md#inclusive-language) and are cross-linked from [writing-style.md](./writing-style.md).