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

package/agent-docs/external/kuat-agent-rules/reference/design-language/spacing.md

@@ -0,0 +1,131 @@
+# Spacing Rules
+
+Spacing specifications for Equal Experts. This document defines the spacing scale, patterns, and usage guidelines.
+
+---
+
+## Overview
+
+The design system uses a **4px base unit** for consistent, predictable spacing.
+
+**Key Principle:** Use spacing as the primary tool for visual hierarchy and separation. Prefer spacing over borders when possible.
+
+---
+
+## Spacing Scale
+
+Each unit = 4px:
+
+| Unit | Pixels | Usage |
+|------|--------|-------|
+| 0 | 0px | No spacing |
+| 0.5 | 2px | Tight spacing, fine adjustments |
+| 1 | 4px | Minimal spacing, tight groups |
+| 1.5 | 6px | Small spacing |
+| 2 | 8px | Small spacing, compact layouts |
+| 3 | 12px | Medium spacing |
+| 4 | 16px | Standard spacing (default) |
+| 5 | 20px | Medium-large spacing |
+| 6 | 24px | Large spacing, section separation |
+| 8 | 32px | Extra large, major sections |
+| 10 | 40px | Very large spacing |
+| 12 | 48px | Maximum spacing, page sections |
+| 16 | 64px | Hero spacing, large sections |
+| 20 | 80px | Maximum hero spacing |
+| 24 | 96px | Ultra large spacing |
+
+---
+
+## Common Spacing Patterns
+
+### Content Padding
+
+| Context | Spacing | Pixels |
+|---------|---------|--------|
+| Tight padding | 4 | 16px |
+| Standard padding | 6 | 24px |
+| Large padding | 8 | 32px |
+| Hero/feature areas | 12-16 | 48-64px |
+
+### Section Spacing
+
+| Type | Spacing | Pixels |
+|------|---------|--------|
+| Tight (related content) | 4 | 16px |
+| Standard sections | 6 | 24px |
+| Large sections | 8 | 32px |
+| Major page sections | 12 | 48px |
+
+### Element Spacing
+
+| Relationship | Spacing | Pixels |
+|--------------|---------|--------|
+| Tightly related elements | 2-4 | 8-16px |
+| Related groups | 6-8 | 24-32px |
+| Distinct sections | 12-16 | 48-64px |
+
+---
+
+## Spacing Relationships
+
+Use consistent spacing relationships:
+
+| Relationship | Spacing |
+|--------------|---------|
+| Tightly related elements | 8-16px |
+| Component groups | 24-32px |
+| Major sections | 48-64px |
+
+**Rule of thumb:** Related items have smaller spacing; distinct sections have larger spacing.
+
+---
+
+## Usage Guidelines
+
+### Do's
+
+1. **Use the spacing scale** - Stick to defined values (4, 8, 12, 16, 24, 32, 48)
+2. **Prefer spacing over borders** - Create separation with space first
+3. **Maintain relationships** - Smaller spacing for related items, larger for sections
+4. **Be consistent** - Same spacing patterns for similar content
+5. **Use white space intentionally** - It creates visual breathing room
+
+### Don'ts
+
+1. **Don't use arbitrary values** - Never use random pixel values
+2. **Don't mix spacing systems** - Use only the defined scale
+3. **Don't overuse spacing** - Excessive spacing breaks visual flow
+4. **Don't ignore hierarchy** - Spacing communicates relationships
+5. **Don't be afraid of white space** - It improves readability
+
+---
+
+## Spacing vs Borders
+
+**Prefer spacing when:**
+- Creating separation between related content
+- Establishing visual hierarchy
+- Adding breathing room
+
+**Use borders when:**
+- Spacing alone is insufficient
+- Defining interactive element boundaries
+- Indicating state changes
+
+---
+
+## Platform-Specific Spacing
+
+For platform-specific spacing guidance:
+
+- **Web product** - See [media-types/web-product/](../media-types/web-product/)
+- **Web marketing** - See [media-types/web-marketing/](../media-types/web-marketing/)
+- **Slides** - See [media-types/slides/](../media-types/slides/)
+- **Graphics** - See [media-types/imagery/patterns/graphics/](../media-types/imagery/patterns/graphics/)
+
+---
+
+## Related Documentation
+
+- [Borders](./borders.md) - Border philosophy and specifications
+- [Typography](./typography.md) - Text spacing

package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/README.md

@@ -0,0 +1,29 @@
+# Design tokens — source of truth
+
+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.
+
+- **`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`.
+
+## Generated artifacts (do not hand-edit — regenerate from here)
+
+| Artifact | Repo | Note |
+|----------|------|------|
+| `reference/design-language/colours.md` | kuat-agent-rules | human-readable mirror |
+| `@equal-experts/kuat-core` `src/variables.css` | kuat-mono (**downstream**) | CSS implementation; consumes these tokens via the upstream→mono sync |
+
+## Rules
+
+- **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.
+- **Direction is one-way:** tokens (upstream) → `colours.md` + kuat-core (downstream). Never generate these tokens *from* kuat-core.
+- **Support scales** (slate/red/indigo) are not brand colours and live only in kuat-core.
+
+## How to regenerate (Phase 7)
+
+```bash
+npm run tokens:generate   # rewrite reference/design-language/colours.md from this token file
+npm run tokens:check      # CI drift gate — exits 1 if colours.md diverges from the tokens
+```
+
+- 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.
+- `tokens:check` runs in `.github/workflows/drift-check.yml` and inside the reference review gate (`npm run reference:check`).
+- 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

@@ -0,0 +1,84 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$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.",
+  "color": {
+    "ee-blue": {
+      "$description": "EE Blue — primary brand colour (trust, technology). Scale 50 (light) → 950 (dark).",
+      "50":  { "$type": "color", "$value": "#e6f5fc", "$extensions": { "oklch": "oklch(0.945 0.028 237.5)" } },
+      "100": { "$type": "color", "$value": "#b3e2f7", "$extensions": { "oklch": "oklch(0.885 0.055 237.5)" } },
+      "200": { "$type": "color", "$value": "#80cff2", "$extensions": { "oklch": "oklch(0.825 0.082 237.5)" } },
+      "300": { "$type": "color", "$value": "#4dbced", "$extensions": { "oklch": "oklch(0.765 0.109 237.5)" } },
+      "400": { "$type": "color", "$value": "#26a8e3", "$extensions": { "oklch": "oklch(0.705 0.136 237.5)" } },
+      "500": { "$type": "color", "$value": "#1795d4", "$extensions": { "oklch": "oklch(0.645 0.163 237.5)" } },
+      "600": { "$type": "color", "$value": "#1378ae", "$extensions": { "oklch": "oklch(0.585 0.145 237.5)" } },
+      "700": { "$type": "color", "$value": "#105c88", "$extensions": { "oklch": "oklch(0.525 0.127 237.5)" } },
+      "800": { "$type": "color", "$value": "#0c4062", "$extensions": { "oklch": "oklch(0.365 0.109 237.5)" } },
+      "900": { "$type": "color", "$value": "#08243c", "$extensions": { "oklch": "oklch(0.245 0.082 237.5)" } },
+      "950": { "$type": "color", "$value": "#04121e", "$extensions": { "oklch": "oklch(0.145 0.055 237.5)" } }
+    },
+    "tech-blue": {
+      "$description": "Tech Blue — dark/structural (navigation, sidebar, depth).",
+      "50":  { "$type": "color", "$value": "#e8eef3", "$extensions": { "oklch": "oklch(0.935 0.015 240.0)" } },
+      "100": { "$type": "color", "$value": "#bdcfdc", "$extensions": { "oklch": "oklch(0.835 0.030 240.0)" } },
+      "200": { "$type": "color", "$value": "#92b0c5", "$extensions": { "oklch": "oklch(0.735 0.045 240.0)" } },
+      "300": { "$type": "color", "$value": "#6791ae", "$extensions": { "oklch": "oklch(0.635 0.060 240.0)" } },
+      "400": { "$type": "color", "$value": "#447496", "$extensions": { "oklch": "oklch(0.535 0.075 240.0)" } },
+      "500": { "$type": "color", "$value": "#22567c", "$extensions": { "oklch": "oklch(0.435 0.090 240.0)" } },
+      "600": { "$type": "color", "$value": "#1b4563", "$extensions": { "oklch": "oklch(0.365 0.080 240.0)" } },
+      "700": { "$type": "color", "$value": "#15354a", "$extensions": { "oklch": "oklch(0.295 0.070 240.0)" } },
+      "800": { "$type": "color", "$value": "#0e2431", "$extensions": { "oklch": "oklch(0.205 0.060 240.0)" } },
+      "900": { "$type": "color", "$value": "#071218", "$extensions": { "oklch": "oklch(0.125 0.040 240.0)" } },
+      "950": { "$type": "color", "$value": "#03090c", "$extensions": { "oklch": "oklch(0.075 0.025 240.0)" } }
+    },
+    "transform-teal": {
+      "$description": "Transform Teal — secondary (transformation, growth).",
+      "50":  { "$type": "color", "$value": "#e9f6f6", "$extensions": { "oklch": "oklch(0.945 0.020 185.0)" } },
+      "100": { "$type": "color", "$value": "#bfe7e7", "$extensions": { "oklch": "oklch(0.885 0.040 185.0)" } },
+      "200": { "$type": "color", "$value": "#95d8d9", "$extensions": { "oklch": "oklch(0.825 0.060 185.0)" } },
+      "300": { "$type": "color", "$value": "#6bc9ca", "$extensions": { "oklch": "oklch(0.765 0.080 185.0)" } },
+      "400": { "$type": "color", "$value": "#48b8b9", "$extensions": { "oklch": "oklch(0.705 0.100 185.0)" } },
+      "500": { "$type": "color", "$value": "#269c9e", "$extensions": { "oklch": "oklch(0.645 0.120 185.0)" } },
+      "600": { "$type": "color", "$value": "#1f7d7e", "$extensions": { "oklch": "oklch(0.545 0.105 185.0)" } },
+      "700": { "$type": "color", "$value": "#175e5f", "$extensions": { "oklch": "oklch(0.445 0.090 185.0)" } },
+      "800": { "$type": "color", "$value": "#103f3f", "$extensions": { "oklch": "oklch(0.305 0.075 185.0)" } },
+      "900": { "$type": "color", "$value": "#081f20", "$extensions": { "oklch": "oklch(0.185 0.055 185.0)" } },
+      "950": { "$type": "color", "$value": "#040f10", "$extensions": { "oklch": "oklch(0.105 0.035 185.0)" } }
+    },
+    "equal-ember": {
+      "$description": "Equal Ember — warm accent (energy, attention; use sparingly).",
+      "50":  { "$type": "color", "$value": "#fff3e6", "$extensions": { "oklch": "oklch(0.975 0.035 65.0)" } },
+      "100": { "$type": "color", "$value": "#ffdbb3", "$extensions": { "oklch": "oklch(0.925 0.070 65.0)" } },
+      "200": { "$type": "color", "$value": "#ffc380", "$extensions": { "oklch": "oklch(0.875 0.105 65.0)" } },
+      "300": { "$type": "color", "$value": "#ffab4d", "$extensions": { "oklch": "oklch(0.825 0.140 65.0)" } },
+      "400": { "$type": "color", "$value": "#ff941a", "$extensions": { "oklch": "oklch(0.775 0.175 65.0)" } },
+      "500": { "$type": "color", "$value": "#f07c00", "$extensions": { "oklch": "oklch(0.625 0.200 65.0)" } },
+      "600": { "$type": "color", "$value": "#c06300", "$extensions": { "oklch": "oklch(0.525 0.180 65.0)" } },
+      "700": { "$type": "color", "$value": "#904a00", "$extensions": { "oklch": "oklch(0.425 0.160 65.0)" } },
+      "800": { "$type": "color", "$value": "#603100", "$extensions": { "oklch": "oklch(0.325 0.140 65.0)" } },
+      "900": { "$type": "color", "$value": "#301900", "$extensions": { "oklch": "oklch(0.225 0.120 65.0)" } },
+      "950": { "$type": "color", "$value": "#180c00", "$extensions": { "oklch": "oklch(0.125 0.100 65.0)" } }
+    }
+  },
+  "brand": {
+    "$description": "Named brand aliases — the canonical reference points. Use these, not raw scale steps.",
+    "ee-blue":        { "$type": "color", "$value": "{color.ee-blue.500}" },
+    "tech-blue":      { "$type": "color", "$value": "{color.tech-blue.500}" },
+    "transform-teal": { "$type": "color", "$value": "{color.transform-teal.500}" },
+    "equal-ember":    { "$type": "color", "$value": "{color.equal-ember.500}" },
+    "ee-blue-accent": { "$type": "color", "$value": "{color.ee-blue.50}" },
+    "dark-data":      { "$type": "color", "$value": "#212526", "$description": "Primary text dark." },
+    "the-cloud":      { "$type": "color", "$value": "#f5f5f5", "$description": "Light surface." },
+    "byte-white":     { "$type": "color", "$value": "#ffffff" }
+  },
+  "alias": {
+    "$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.",
+    "primary":     { "$type": "color", "$value": "{brand.ee-blue}" },
+    "secondary":   { "$type": "color", "$value": "{brand.transform-teal}" },
+    "sidebar":     { "$type": "color", "$value": "{brand.tech-blue}", "$description": "Dark navigation." },
+    "accent":      { "$type": "color", "$value": "{brand.ee-blue-accent}" },
+    "foreground":  { "$type": "color", "$value": "{brand.dark-data}" },
+    "background":  { "$type": "color", "$value": "{brand.byte-white}" },
+    "muted":       { "$type": "color", "$value": "{brand.the-cloud}" },
+    "destructive": { "$type": "color", "$value": "#dc2626", "$description": "Red 600 (support scale, not brand)." }
+  }
+}

package/agent-docs/external/kuat-agent-rules/reference/design-language/typography.md

@@ -0,0 +1,156 @@
+# Typography Rules
+
+Typography specifications for Equal Experts. This document defines font families, type scale, and usage guidelines.
+
+---
+
+## Font Families
+
+### Sans Serif (Default)
+
+**Font:** Lexend  
+**Fallback:** `Lexend, ui-sans-serif, sans-serif, system-ui`
+
+**Use for:** All primary content - body text, headings, interface copy, presentations
+
+### Serif
+
+**Font:** Lora  
+**Fallback:** `Lora, ui-serif, Georgia, serif`
+
+**Use for:** Decorative text, special emphasis, editorial content (use sparingly)
+
+### Monospace
+
+**Font:** JetBrains Mono  
+**Fallback:** `JetBrains Mono, ui-monospace, monospace`
+
+**Use for:** Code blocks, technical content, data display
+
+---
+
+## Type Scale
+
+| Name | Size | Line Height | Usage |
+|------|------|-------------|-------|
+| xs | 12px | 16px | Labels, captions, metadata |
+| sm | 14px | 20px | Secondary text, small body |
+| base | 16px | 24px | Body text (default) |
+| lg | 18px | 28px | Large body, subheadings |
+| xl | 20px | 28px | Section headings |
+| 2xl | 24px | 32px | Page headings |
+| 3xl | 30px | 36px | Large headings |
+| 4xl | 36px | 40px | Display text |
+| 5xl | 48px | 1 | Hero headings |
+| 6xl | 60px | 1 | Large hero text |
+| 7xl | 72px | 1 | Extra large display |
+| 8xl | 96px | 1 | Maximum display |
+
+---
+
+## Font Weights
+
+| Weight | Value | Usage |
+|--------|-------|-------|
+| light | 300 | Large display text, subtle emphasis |
+| normal | 400 | Default body text |
+| medium | 500 | Form inputs, UI labels, subtle emphasis |
+| semibold | 600 | Headings, important labels |
+| bold | 700 | Strong emphasis, primary headings |
+| extrabold | 800 | Maximum emphasis (use sparingly) |
+
+### Recommended Weight Usage
+
+- **Body Text:** 400 (normal)
+- **Headings:** 600 (semibold) or 700 (bold)
+- **Labels:** 500 (medium)
+- **Display Text:** 300 (light) for large sizes, 700 (bold) for impact
+
+---
+
+## Typography Hierarchy
+
+Establish clear visual hierarchy:
+
+| Level | Size | Weight | Usage |
+|-------|------|--------|-------|
+| H1 | 4xl-5xl | bold | Main page/slide title |
+| H2 | 2xl-3xl | semibold/bold | Section heading |
+| H3 | xl-2xl | semibold | Subsection heading |
+| Body | base | normal | Primary content |
+| Supporting | sm | normal/medium | Secondary information |
+| Labels/Captions | xs-sm | medium | Metadata, captions |
+
+---
+
+## Letter Spacing
+
+| Name | Value | Usage |
+|------|-------|-------|
+| tighter | -0.05em | Tighter spacing |
+| tight | -0.025em | Slightly tighter |
+| normal | 0.01em | Default spacing |
+| wide | +0.025em | Slightly wider |
+| wider | +0.05em | Wider spacing |
+| widest | +0.1em | Maximum spacing (all caps) |
+
+---
+
+## Line Height
+
+| Name | Value | Usage |
+|------|-------|-------|
+| none | 1 | Tight spacing (large headings) |
+| tight | 1.25 | Compact text |
+| snug | 1.375 | Slightly tight |
+| normal | 1.5 | Default body text |
+| relaxed | 1.625 | Comfortable reading |
+| loose | 2 | Generous spacing |
+
+---
+
+## Accessibility Requirements
+
+- **Normal text:** Minimum 4.5:1 contrast ratio
+- **Large text (18px+ or 14px+ bold):** Minimum 3:1 contrast ratio
+- **Proper heading hierarchy:** H1 → H2 → H3 (no skipping levels)
+- **Minimum body text size:** 12px
+
+---
+
+## Usage Guidelines
+
+### Do's
+
+1. **Use Lexend for primary content** - It's the brand font
+2. **Maintain hierarchy** - Visual styling matches content structure
+3. **Stick to the scale** - Use defined sizes, not arbitrary values
+4. **Ensure readability** - Sufficient contrast and line height
+5. **Be consistent** - Same styles for same content types
+
+### Don'ts
+
+1. **Don't use arbitrary sizes** - Stick to the type scale
+2. **Don't skip heading levels** - H1 → H3 is invalid
+3. **Don't use low-contrast colors** - Verify accessibility
+4. **Don't mix too many weights** - Keep it simple
+5. **Don't use sizes smaller than 12px** - Maintain readability
+
+---
+
+## Platform-Specific Typography
+
+For platform-specific typography guidance:
+
+- **Web product** - See [media-types/web-product/](../media-types/web-product/)
+- **Web marketing** - See [media-types/web-marketing/](../media-types/web-marketing/)
+- **Slides** - See [media-types/slides/](../media-types/slides/)
+- **Graphics** - See [media-types/imagery/patterns/graphics/](../media-types/imagery/patterns/graphics/)
+
+---
+
+## Related Documentation
+
+- [Brand Guidelines](../brand/brand.md) - Brand principles
+- [Colours](./colours.md) - Text colors
+- [Spacing](./spacing.md) - Text spacing patterns

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/README.md

@@ -0,0 +1,10 @@
+# Web Marketing
+
+Reference for Equal Experts public-facing marketing websites, landing pages, and marketing emails.
+
+| File | Scope |
+|------|-------|
+| [website.md](./website.md) | Marketing website layout and visual patterns |
+| [emails.md](./emails.md) | Marketing email patterns |
+| [content/](./content/) | Marketing copy, blog posts, SEO |
+| [patterns/](./patterns/) | Marketing page-type patterns |

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/content/README.md

@@ -0,0 +1,26 @@
+# Marketing Content Rules
+
+Content guidance for Equal Experts marketing websites, landing pages, and blog posts.
+
+---
+
+## Overview
+
+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.
+
+---
+
+## Files
+
+| File | Description |
+|------|-------------|
+| [marketing-content.md](./marketing-content.md) | Principles, tone, case studies, content types |
+| [blog-posts.md](./blog-posts.md) | Blog structure and style |
+| [seo.md](./seo.md) | SEO content and meta guidelines |
+
+---
+
+## Related
+
+- [Content](../../../content/)
+- [Marketing website](../website.md)

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/content/blog-posts.md

@@ -0,0 +1,29 @@
+# Blog Posts
+
+Structure and style for Equal Experts blog content.
+
+---
+
+## Structure
+
+1. **Introduction** – Hook the reader: story, question, or clear insight. Get to the point quickly.
+2. **Problem or question** – What you're addressing. Set expectations.
+3. **Main content** – Evidence-based insights with examples. Use headings and short paragraphs.
+4. **Takeaways** – Actionable guidance the reader can use.
+5. **Call to action** – Invite further engagement (e.g. contact, subscribe, read more).
+
+---
+
+## Voice and Format
+
+- Use [writing style](../../../content/writing-style.md): active voice, plain language, "you" and "we".
+- Keep paragraphs short (3–4 sentences). Use lists and headings so content is scannable.
+- Support claims with evidence and examples. Avoid generic or unsupported statements.
+- Typical length: enough to cover the topic clearly; avoid padding. For many posts, a few hundred to ~1,500 words works well.
+
+---
+
+## Related
+
+- [Marketing content](./marketing-content.md)
+- [SEO](./seo.md)

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/content/marketing-content.md

@@ -0,0 +1,61 @@
+# Marketing Content
+
+Writing principles and content types for Equal Experts marketing websites and landing pages.
+
+---
+
+## Overview
+
+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.
+
+---
+
+## What Marketing Content Should Do
+
+- Build awareness and reputation
+- Demonstrate expertise through evidence
+- Generate leads and opportunities
+- Educate external audiences
+
+---
+
+## Tone
+
+**Tone range:** Confident to conversational (depends on content type)  
+**Key balance:** Expertise + Clarity = Credibility
+
+Stay true to [voice and tone](../../../brand/voice-and-tone.md): clear, direct, helpful. Avoid hype or vague claims.
+
+---
+
+## Content Types
+
+| Type | Guidance |
+|------|----------|
+| Case studies | Context → Challenge → Approach → Solution → Results. Start with business problem; use specific numbers. |
+| Blog posts | See [blog-posts.md](./blog-posts.md) |
+| Landing pages | Clear value proposition above the fold; scannable headings; clear CTAs; trust indicators |
+| SEO | See [seo.md](./seo.md) |
+
+### Case Studies
+
+**Structure:**
+1. Context – What was the situation?
+2. Challenge – What problems needed solving?
+3. Our approach – How did we help?
+4. Solution and implementation – What was built or changed?
+5. Results – Measurable business impact
+
+**Tips:**
+- Start with the business problem, not technology
+- Use specific numbers and evidence
+- Make it understandable by a broad audience
+
+---
+
+## Related
+
+- [Content](../../../content/)
+- [Blog posts](./blog-posts.md)
+- [SEO](./seo.md)
+- [Marketing website](../website.md)

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/content/seo.md

@@ -0,0 +1,40 @@
+# SEO Content
+
+Guidance for findable, readable, and helpful marketing content.
+
+---
+
+## Principles
+
+- **Findable** – Use language people search for; structure and meta data support discovery.
+- **Readable** – Clear headings, short paragraphs, plain language (see [writing style](../../../content/writing-style.md)).
+- **Helpful** – Content should answer a real question or need. Don't optimise for search at the expense of the reader.
+
+---
+
+## Page Titles and Meta Descriptions
+
+- **Title:** Clear, descriptive, and relevant to the page. Include key terms where natural. Keep within typical display length (e.g. ~50–60 characters) for important pages.
+- **Meta description:** Summarise the page and encourage a click. Match the page content; avoid generic or duplicate copy.
+
+---
+
+## Headings
+
+- Use a logical hierarchy (H1 → H2 → H3). One H1 per page.
+- Make headings descriptive so they work for both scanning and search. Use key phrases where they fit naturally; don't stuff keywords.
+
+---
+
+## Links
+
+- Use descriptive link text that states the destination or topic (good for accessibility and context).
+- Internal links help users and crawlers discover related content.
+
+---
+
+## Related
+
+- [Formatting](../../../content/formatting.md) – Headings, links
+- [Marketing content](./marketing-content.md)
+- [Blog posts](./blog-posts.md)

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/emails.md

@@ -0,0 +1,68 @@
+# Marketing Email Rules
+
+Guidelines for Equal Experts marketing emails and campaigns.
+
+---
+
+## Overview
+
+Marketing emails are external communications designed to engage, inform, and convert prospects and customers.
+
+---
+
+## Key Principles
+
+1. **Value-first** - Every email should provide value to the recipient
+2. **Clear purpose** - One primary goal per email
+3. **Scannable** - Easy to read on mobile devices
+4. **Brand-consistent** - Use Equal Experts visual identity
+
+---
+
+## Email Types
+
+- **Newsletter** - Regular updates and insights
+- **Product announcements** - New features and releases
+- **Event invitations** - Webinars, conferences, meetups
+- **Nurture sequences** - Educational content series
+- **Transactional** - Confirmations, receipts (see product emails)
+
+---
+
+## To Be Defined
+
+- Email template designs
+- Header and footer specifications
+- Logo placement and sizing
+- Color usage in emails
+- Typography for email clients
+- CTA button styling
+- Mobile-first design requirements
+- Accessibility requirements (alt text, etc.)
+- Subject line guidelines
+- Preview text best practices
+
+---
+
+## Content Guidelines
+
+Follow [content](../../content/) for writing style.
+
+### Subject Lines
+- Keep under 50 characters for mobile
+- Be specific about content
+- Avoid spam triggers
+
+### Body Content
+- Lead with the most important information
+- Use short paragraphs
+- Include clear CTA
+- Provide value before asking
+
+---
+
+## Related Documentation
+
+- [Reference home](../../README.md) - Brand and design language
+- [Marketing Website](./website.md) - Website guidelines
+- [Content](../../content/) - Writing style

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/patterns/README.md

@@ -0,0 +1,7 @@
+# Web Marketing Patterns
+
+Applied layout and design patterns for marketing website page types.
+
+| Pattern | For | Base layout |
+|---------|-----|-------------|
+| [marketing-pages.md](./marketing-pages.md) | Landing pages, pricing, features, case studies | Horizontal navigation |