@equal-experts/kuat-react 0.3.0 โ 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -86
- package/dist/style.css +1 -1
- package/package.json +2 -7
- package/docs/README.md +0 -35
- package/docs/components/guidelines.md +0 -221
- package/docs/content/README.md +0 -297
- package/docs/content/content-foundations.md +0 -506
- package/docs/content/content-marketing-sales.md +0 -454
- package/docs/content/content-product-ux.md +0 -875
- package/docs/design/borders.md +0 -500
- package/docs/design/colours.md +0 -523
- package/docs/design/design-system.md +0 -148
- package/docs/design/layouts.md +0 -681
- package/docs/design/logo.md +0 -456
- package/docs/design/spacing.md +0 -477
- package/docs/design/typography.md +0 -451
- package/scripts/copy-docs.js +0 -88
- package/scripts/setup-docs.js +0 -169
package/docs/content/README.md
DELETED
|
@@ -1,297 +0,0 @@
|
|
|
1
|
-
# Kuat Design System Content Guide
|
|
2
|
-
|
|
3
|
-
**Version:** 1.0 | **Last Updated:** December 2024
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## Welcome
|
|
8
|
-
|
|
9
|
-
This is the master guide to creating content for the Kuat Design System. Our content guidelines are split into three specialized documents to make them easier to use and maintain.
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
## Getting Started
|
|
14
|
-
|
|
15
|
-
### ๐ New to Content Creation?
|
|
16
|
-
|
|
17
|
-
**Start here:**
|
|
18
|
-
|
|
19
|
-
1. **Read** [`content-foundations.md`](./content-foundations.md) - Universal principles that apply to ALL content
|
|
20
|
-
2. **Choose your specialization:**
|
|
21
|
-
- Creating marketing, sales, or knowledge content? โ [`content-marketing-sales.md`](./content-marketing-sales.md)
|
|
22
|
-
- Writing product UI copy or UX content? โ [`content-product-ux.md`](./content-product-ux.md)
|
|
23
|
-
|
|
24
|
-
**All content must align with the foundations.**
|
|
25
|
-
|
|
26
|
-
---
|
|
27
|
-
|
|
28
|
-
## Quick Navigation
|
|
29
|
-
|
|
30
|
-
### I'm Creating...
|
|
31
|
-
|
|
32
|
-
**External-facing content:**
|
|
33
|
-
- Case study โ [Marketing guide ยง Case Studies](./content-marketing-sales.md#case-studies)
|
|
34
|
-
- Blog post โ [Marketing guide ยง Blogs](./content-marketing-sales.md#blogs-external--internal)
|
|
35
|
-
- Playbook or whitepaper โ [Marketing guide ยง Playbooks](./content-marketing-sales.md#playbooks-and-informative-content)
|
|
36
|
-
- Pitch deck โ [Marketing guide ยง Pitch Decks](./content-marketing-sales.md#pitch-decks-and-sales-materials)
|
|
37
|
-
- Social media post โ [Marketing guide ยง Social Media](./content-marketing-sales.md#social-media-external--internal)
|
|
38
|
-
|
|
39
|
-
**Product interface content:**
|
|
40
|
-
- Button label โ [Product guide ยง Actions](./content-product-ux.md#actions-buttons-and-links)
|
|
41
|
-
- Error message โ [Product guide ยง Errors](./content-product-ux.md#errors)
|
|
42
|
-
- Form field โ [Product guide ยง Fields](./content-product-ux.md#fields-forms)
|
|
43
|
-
- Empty state โ [Product guide ยง Empty States](./content-product-ux.md#empty-states)
|
|
44
|
-
- Confirmation dialog โ [Product guide ยง Confirmations](./content-product-ux.md#confirmations)
|
|
45
|
-
|
|
46
|
-
**Internal content:**
|
|
47
|
-
- Internal blog post โ [Marketing guide ยง Internal Communications](./content-marketing-sales.md#internal-communications)
|
|
48
|
-
- Knowledge portal article โ [Marketing guide ยง Internal Communications](./content-marketing-sales.md#internal-communications)
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
### I Need Help With...
|
|
53
|
-
|
|
54
|
-
**Brand and voice:**
|
|
55
|
-
- Core voice principles โ [Foundations ยง Content Voice and Tone](./content-foundations.md#content-voice-and-tone)
|
|
56
|
-
- Tone adaptation โ [Foundations ยง Tone Adaptation Guide](./content-foundations.md#tone-adaptation-guide)
|
|
57
|
-
|
|
58
|
-
**Audience:**
|
|
59
|
-
- Audience targeting โ [Foundations ยง Audience Considerations](./content-foundations.md#audience-considerations)
|
|
60
|
-
- Technical audiences โ [Foundations ยง Technical Audiences](./content-foundations.md#technical-audiences)
|
|
61
|
-
- Business stakeholders โ [Foundations ยง Business Stakeholders](./content-foundations.md#business-stakeholders)
|
|
62
|
-
|
|
63
|
-
**Quality and testing:**
|
|
64
|
-
- Quality checklist โ [Foundations ยง Content Quality Checklist](./content-foundations.md#content-quality-checklist)
|
|
65
|
-
- Common mistakes โ [Foundations ยง Common Anti-Patterns](./content-foundations.md#common-anti-patterns-to-avoid)
|
|
66
|
-
- Testing approach โ [Product guide ยง Test Everything](./content-product-ux.md#5-test-everything)
|
|
67
|
-
|
|
68
|
-
**Writing mechanics:**
|
|
69
|
-
- Grammar and style โ [Marketing guide ยง Writing Best Practices](./content-marketing-sales.md#writing-best-practices)
|
|
70
|
-
- Accessibility โ [Product guide ยง Make It Accessible](./content-product-ux.md#6-make-it-accessible)
|
|
71
|
-
|
|
72
|
-
---
|
|
73
|
-
|
|
74
|
-
## The Three Guides
|
|
75
|
-
|
|
76
|
-
### ๐ Content Foundations
|
|
77
|
-
**File:** [`content-foundations.md`](./content-foundations.md)
|
|
78
|
-
|
|
79
|
-
**Universal guidelines that apply to ALL Kuat Design System content**
|
|
80
|
-
|
|
81
|
-
What's inside:
|
|
82
|
-
- Core voice principles and characteristics
|
|
83
|
-
- Universal content principles
|
|
84
|
-
- Audience considerations
|
|
85
|
-
- Common anti-patterns to avoid
|
|
86
|
-
- Quality tests and checklists
|
|
87
|
-
- Tone adaptation guidance
|
|
88
|
-
- AI content generation guidelines
|
|
89
|
-
|
|
90
|
-
**Who should read this:** Everyone creating content for the Kuat Design System
|
|
91
|
-
|
|
92
|
-
**When to read it:** Before creating any content, and as reference throughout
|
|
93
|
-
|
|
94
|
-
---
|
|
95
|
-
|
|
96
|
-
### ๐ Marketing, Sales & Knowledge Content
|
|
97
|
-
**File:** [`content-marketing-sales.md`](./content-marketing-sales.md)
|
|
98
|
-
|
|
99
|
-
**Guidelines for external-facing content that builds awareness and demonstrates expertise**
|
|
100
|
-
|
|
101
|
-
What's inside:
|
|
102
|
-
- Case studies
|
|
103
|
-
- Blogs (external & internal)
|
|
104
|
-
- Playbooks and whitepapers
|
|
105
|
-
- Pitch decks and sales materials
|
|
106
|
-
- Social media content
|
|
107
|
-
- Internal communications
|
|
108
|
-
- Web copy and email marketing
|
|
109
|
-
- Writing best practices
|
|
110
|
-
|
|
111
|
-
**Who should read this:** Marketers, content writers, business development, PR, consultants sharing knowledge
|
|
112
|
-
|
|
113
|
-
**When to read it:** When creating content for external audiences or internal knowledge sharing
|
|
114
|
-
|
|
115
|
-
---
|
|
116
|
-
|
|
117
|
-
### ๐ Product & UX Writing
|
|
118
|
-
**File:** [`content-product-ux.md`](./content-product-ux.md)
|
|
119
|
-
|
|
120
|
-
**Practical guide for writing content inside product interfaces**
|
|
121
|
-
|
|
122
|
-
What's inside:
|
|
123
|
-
- Product voice adaptation
|
|
124
|
-
- Foundational principles (audience, task focus, conciseness)
|
|
125
|
-
- Content patterns (buttons, errors, forms, empty states)
|
|
126
|
-
- Mobile considerations
|
|
127
|
-
- Accessibility requirements
|
|
128
|
-
- Testing and iteration
|
|
129
|
-
- Collaboration with designers and developers
|
|
130
|
-
|
|
131
|
-
**Who should read this:** UX writers, product designers, product managers, developers
|
|
132
|
-
|
|
133
|
-
**When to read it:** When creating any content that appears inside a product interface
|
|
134
|
-
|
|
135
|
-
---
|
|
136
|
-
|
|
137
|
-
## For AI Agents
|
|
138
|
-
|
|
139
|
-
### Context Loading Order
|
|
140
|
-
|
|
141
|
-
1. **Always load first:** [`content-foundations.md`](./content-foundations.md)
|
|
142
|
-
2. **Then load specialized guide based on content type:**
|
|
143
|
-
- Marketing/sales content โ [`content-marketing-sales.md`](./content-marketing-sales.md)
|
|
144
|
-
- Product/UX content โ [`content-product-ux.md`](./content-product-ux.md)
|
|
145
|
-
3. **Reference specific sections as needed**
|
|
146
|
-
|
|
147
|
-
### Content Type Routing
|
|
148
|
-
|
|
149
|
-
**If user requests:**
|
|
150
|
-
- "case study" โ Load foundations + marketing guide
|
|
151
|
-
- "blog post" โ Load foundations + marketing guide
|
|
152
|
-
- "button label" โ Load foundations + product guide
|
|
153
|
-
- "error message" โ Load foundations + product guide
|
|
154
|
-
- "social media post" โ Load foundations + marketing guide
|
|
155
|
-
- "tooltip" โ Load foundations + product guide
|
|
156
|
-
- "pitch deck" โ Load foundations + marketing guide
|
|
157
|
-
- "form field label" โ Load foundations + product guide
|
|
158
|
-
- "empty state" โ Load foundations + product guide
|
|
159
|
-
- "confirmation dialog" โ Load foundations + product guide
|
|
160
|
-
- "playbook" โ Load foundations + marketing guide
|
|
161
|
-
- "whitepaper" โ Load foundations + marketing guide
|
|
162
|
-
|
|
163
|
-
**If uncertain:**
|
|
164
|
-
- Ask clarifying questions about content type and audience
|
|
165
|
-
- Default to loading foundations only
|
|
166
|
-
- Load specialized guide once content type is clear
|
|
167
|
-
|
|
168
|
-
### Decision Tree: Which Guide Do I Need?
|
|
169
|
-
|
|
170
|
-
**START:** What are you creating?
|
|
171
|
-
|
|
172
|
-
**Is this content inside a product interface?**
|
|
173
|
-
- YES โ [`content-product-ux.md`](./content-product-ux.md)
|
|
174
|
-
- NO โ Continue
|
|
175
|
-
|
|
176
|
-
**Is this content for external audiences about our work/expertise?**
|
|
177
|
-
- YES โ [`content-marketing-sales.md`](./content-marketing-sales.md)
|
|
178
|
-
- NO โ Continue
|
|
179
|
-
|
|
180
|
-
**Is this internal team communication or documentation?**
|
|
181
|
-
- YES โ [`content-marketing-sales.md`](./content-marketing-sales.md) (Internal sections)
|
|
182
|
-
- NO โ Continue
|
|
183
|
-
|
|
184
|
-
**Still unsure?**
|
|
185
|
-
- Start with foundations document
|
|
186
|
-
- Ask: "Who is the audience and what's the purpose?"
|
|
187
|
-
- Reference the Audience Considerations in foundations
|
|
188
|
-
|
|
189
|
-
### Quality Checks for AI
|
|
190
|
-
|
|
191
|
-
**Before generating content, verify:**
|
|
192
|
-
1. โ
Content type and audience identified
|
|
193
|
-
2. โ
Appropriate guide(s) loaded
|
|
194
|
-
3. โ
Universal principles from foundations applied
|
|
195
|
-
4. โ
Content type-specific guidelines followed
|
|
196
|
-
|
|
197
|
-
**After generating content, check:**
|
|
198
|
-
1. โ
Passes quality tests from foundations
|
|
199
|
-
2. โ
No anti-patterns present
|
|
200
|
-
3. โ
Tone appropriate for audience and context
|
|
201
|
-
4. โ
Evidence supports all claims (for marketing content)
|
|
202
|
-
5. โ
Concise and action-oriented (for product content)
|
|
203
|
-
|
|
204
|
-
---
|
|
205
|
-
|
|
206
|
-
## Document Structure
|
|
207
|
-
|
|
208
|
-
```
|
|
209
|
-
๐ Kuat Design System Content Guides
|
|
210
|
-
โโโ ๐ README.md (this file)
|
|
211
|
-
โ โโโ Master index and navigation
|
|
212
|
-
โ
|
|
213
|
-
โโโ ๐ content-foundations.md
|
|
214
|
-
โ โโโ Universal principles (ALL content)
|
|
215
|
-
โ โโโ Voice principles
|
|
216
|
-
โ โโโ Content principles
|
|
217
|
-
โ โโโ Audience considerations
|
|
218
|
-
โ โโโ Anti-patterns
|
|
219
|
-
โ โโโ Quality tests
|
|
220
|
-
โ โโโ Tone guidance
|
|
221
|
-
โ
|
|
222
|
-
โโโ ๐ content-marketing-sales.md
|
|
223
|
-
โ โโโ External-facing content
|
|
224
|
-
โ โโโ Case studies
|
|
225
|
-
โ โโโ Blogs
|
|
226
|
-
โ โโโ Playbooks
|
|
227
|
-
โ โโโ Pitch decks
|
|
228
|
-
โ โโโ Social media
|
|
229
|
-
โ โโโ Internal comms
|
|
230
|
-
โ โโโ Writing best practices
|
|
231
|
-
โ
|
|
232
|
-
โโโ ๐ content-product-ux.md
|
|
233
|
-
โโโ Product interface content
|
|
234
|
-
โโโ Voice adaptation
|
|
235
|
-
โโโ Core principles
|
|
236
|
-
โโโ Content patterns
|
|
237
|
-
โโโ Mobile guidelines
|
|
238
|
-
โโโ Accessibility
|
|
239
|
-
โโโ Testing approach
|
|
240
|
-
```
|
|
241
|
-
|
|
242
|
-
---
|
|
243
|
-
|
|
244
|
-
## Key Principles (Summary)
|
|
245
|
-
|
|
246
|
-
### The Kuat Design System Voice
|
|
247
|
-
|
|
248
|
-
**We are:**
|
|
249
|
-
- Clear, direct, and helpful
|
|
250
|
-
- Confident but never arrogant
|
|
251
|
-
- Focused on user needs
|
|
252
|
-
- Consistent and predictable
|
|
253
|
-
|
|
254
|
-
**We are not:**
|
|
255
|
-
- Vague or ambiguous
|
|
256
|
-
- Overly formal or stuffy
|
|
257
|
-
- Marketing-heavy in product UI
|
|
258
|
-
- Technical without clarity
|
|
259
|
-
|
|
260
|
-
### The Content Formula
|
|
261
|
-
|
|
262
|
-
**For marketing content:**
|
|
263
|
-
`[Clear value] + [specific context] + [evidence/examples] + [actionable takeaways]`
|
|
264
|
-
|
|
265
|
-
**For product content:**
|
|
266
|
-
`[Action] + [Object] + [Benefit if needed]`
|
|
267
|
-
|
|
268
|
-
### Quality Tests
|
|
269
|
-
|
|
270
|
-
Every piece of content should pass:
|
|
271
|
-
1. **The Clarity Test** - Can it be understood quickly?
|
|
272
|
-
2. **The Purpose Test** - Does it serve a clear user need?
|
|
273
|
-
3. **The Consistency Test** - Does it match our voice?
|
|
274
|
-
4. **The Accessibility Test** - Does it work for all users?
|
|
275
|
-
5. **The Context Test** - Is it appropriate for the situation?
|
|
276
|
-
|
|
277
|
-
---
|
|
278
|
-
|
|
279
|
-
## Additional Resources
|
|
280
|
-
|
|
281
|
-
- **Design System Overview:** See [../design/design-system.md](../design/design-system.md) for design token usage
|
|
282
|
-
- **Typography Guide:** See [../design/typography.md](../design/typography.md) for text styling
|
|
283
|
-
- **Component Guidelines:** See [../technical/component-guidelines.md](../technical/component-guidelines.md) for component patterns
|
|
284
|
-
- **Usage Guide:** See [../usage-guide.md](../usage-guide.md) for quick reference
|
|
285
|
-
|
|
286
|
-
---
|
|
287
|
-
|
|
288
|
-
## What's Next?
|
|
289
|
-
|
|
290
|
-
1. **Read the foundations** โ [`content-foundations.md`](./content-foundations.md)
|
|
291
|
-
2. **Pick your specialization** โ Marketing or Product guide
|
|
292
|
-
3. **Start creating** โ Apply the principles
|
|
293
|
-
4. **Test and iterate** โ Learn from real users
|
|
294
|
-
5. **Share learnings** โ Help improve these guides
|
|
295
|
-
|
|
296
|
-
Welcome to content creation for the Kuat Design System. Let's create great content together! ๐
|
|
297
|
-
|