@equal-experts/kuat-react 0.13.0 → 0.13.1

package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/colours.md

@@ -0,0 +1,173 @@
+# Colour Rules
+
+Brand color specifications for Equal Experts. This document defines the brand colors, palette scales, and usage guidelines.
+
+---
+
+## Brand Colors
+
+Equal Experts uses four core brand color palettes:
+
+### EE Blue (Primary)
+
+**Purpose:** Trust, professionalism, technology  
+**Value:** `oklch(0.645 0.163 237.5)` / `#0066CC`
+
+**Use for:**
+- Primary actions and CTAs
+- Brand identity elements
+- Key highlights and focus states
+- Links and interactive elements
+
+### Transform Teal (Secondary)
+
+**Purpose:** Transformation, growth, innovation  
+**Value:** `oklch(0.645 0.120 185.0)`
+
+**Use for:**
+- Secondary actions
+- Accent elements and badges
+- Success indicators
+- Data visualization (secondary)
+
+### Tech Blue (Supporting)
+
+**Purpose:** Technical, professional, structural  
+**Value:** `oklch(0.435 0.090 240.0)`
+
+**Use for:**
+- Dark backgrounds
+- Navigation areas
+- Technical interfaces
+- Depth and structure
+
+### Equal Ember (Accent)
+
+**Purpose:** Energy, warmth, attention  
+**Value:** `oklch(0.625 0.200 65.0)`
+
+**Use for:**
+- Special highlights (use sparingly)
+- Warning states
+- Attention-grabbing elements
+- Call-to-action emphasis
+
+---
+
+## Brand Color Palette Scale
+
+Each brand color has a scale from 50 (lightest) to 950 (darkest):
+
+| Range | Usage |
+|-------|-------|
+| 50-200 | Light backgrounds, subtle accents, hover states |
+| 300-500 | Primary brand colors, main actions |
+| 600-800 | Darker variants for depth and contrast |
+| 900-950 | Maximum depth, dark mode, high contrast |
+
+---
+
+## Neutral Colors
+
+For text, backgrounds, and UI elements:
+
+| Color | Usage |
+|-------|-------|
+| White | Light backgrounds, text on dark |
+| Slate-50 to Slate-200 | Light backgrounds, subtle borders |
+| Slate-300 to Slate-500 | Secondary text, dividers |
+| Slate-600 to Slate-800 | Primary text (light mode) |
+| Slate-900 to Slate-950 | Headings, dark backgrounds |
+| Black | Maximum contrast, specific uses |
+
+---
+
+## Color Format
+
+All colors use **OKLCH** color space:
+
+```
+oklch(lightness chroma hue)
+```
+
+**Benefits:**
+- Perceptual uniformity (equal changes = equal perception)
+- Better color manipulation for consistent scales
+- Modern format with excellent support
+
+**Hex values** are provided for tools that don't support OKLCH.
+
+---
+
+## Light and Dark Mode
+
+Colors should adapt for light and dark contexts:
+
+**Light Mode (default):**
+- Light backgrounds (white, light gray)
+- Dark text (slate-900, slate-950)
+- Brand colors at standard values
+
+**Dark Mode:**
+- Dark backgrounds (slate-900, slate-950)
+- Light text (white, slate-100)
+- Brand colors remain consistent
+- Supporting colors adapt for contrast
+
+---
+
+## Accessibility Requirements
+
+All color combinations must meet **WCAG AA** standards:
+
+| Content Type | Minimum Contrast |
+|--------------|------------------|
+| Normal text (14px and below) | 4.5:1 |
+| Large text (18px+ or 14px+ bold) | 3:1 |
+| Graphical objects/borders | 3:1 |
+
+**Approved Combinations:**
+- Dark text on light backgrounds ✓
+- White text on EE Blue ✓
+- White text on Tech Blue ✓
+- White text on Transform Teal ✓
+- Dark text on Equal Ember (check contrast) ✓
+
+---
+
+## Usage Guidelines
+
+### Do's
+
+1. **Use brand colors consistently** - EE Blue for primary, Transform Teal for secondary
+2. **Pair colors correctly** - Ensure sufficient contrast for text
+3. **Support light and dark contexts** - Colors work in both modes
+4. **Respect brand hierarchy** - Primary for main actions, secondary for alternatives
+5. **Verify accessibility** - Always check contrast ratios
+
+### Don'ts
+
+1. **Don't use non-brand colors** - Stick to the defined palette
+2. **Don't mix brand colors inappropriately** - Each has a specific purpose
+3. **Don't break accessibility** - Always verify contrast ratios
+4. **Don't create custom variations** - Use only defined palette values
+5. **Don't use color alone to convey meaning** - Combine with text, icons, patterns
+
+---
+
+## Platform-Specific Implementation
+
+For platform-specific color usage:
+
+- **Web** - See [types/web/](../types/web/) for CSS variables and tokens
+- **Slides** - See [types/slides/](../types/slides/)
+- **Graphics** - See [types/graphics/](../types/graphics/)
+- **Charts** - See [types/charts-data/](../types/charts-data/)
+
+---
+
+## Related Documentation
+
+- [Brand Guidelines](./brand.md) - Brand principles
+- [Typography](./typography.md) - Font colors and text styling
+- [Logo](./logo.md) - Logo color variants

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

@@ -0,0 +1,116 @@
+# Design Language
+
+High-level design principles for Equal Experts. This document provides the foundation for all visual design decisions.
+
+---
+
+## Overview
+
+The Equal Experts design language ensures consistent, accessible, and brand-compliant outputs across all media types - web, slides, graphics, photography, and more.
+
+---
+
+## Design Principles
+
+### 1. Consistency
+
+Use design tokens everywhere. Never use arbitrary values for colors, spacing, or typography.
+
+**Why:** Consistency builds brand recognition and reduces cognitive load.
+
+### 2. Accessibility
+
+WCAG AA compliance minimum. All color combinations, interactive elements, and content must be accessible.
+
+**Why:** Everyone should be able to access and use Equal Experts materials.
+
+### 3. Simplicity
+
+Minimal borders, clear hierarchy through spacing. Prefer simple solutions over complex ones.
+
+**Why:** Simplicity communicates confidence and professionalism.
+
+### 4. Clarity
+
+Content-first design. Design serves content; never decorate at the expense of clarity.
+
+**Why:** Clear communication is more valuable than visual flourish.
+
+### 5. Flexibility
+
+Support different contexts - light/dark, print/digital, large/small formats.
+
+**Why:** Brand materials must work across many platforms and use cases.
+
+---
+
+## Design Token Categories
+
+| Category | What It Defines | Documentation |
+|----------|-----------------|---------------|
+| Colors | Brand colors, palette scales, usage | [colours.md](./colours.md) |
+| Typography | Fonts, sizes, weights, hierarchy | [typography.md](./typography.md) |
+| Spacing | Padding, margin, gaps, relationships | [spacing.md](./spacing.md) |
+| Borders | Widths, styles, radius, colors | [borders.md](./borders.md) |
+| Logo | Usage, sizing, variants, placement | [logo.md](../logo.md) |
+
+---
+
+## Accessibility Standards
+
+The design language adheres to **WCAG 2.1 Level AA**:
+
+| Requirement | Standard |
+|-------------|----------|
+| Text contrast | 4.5:1 minimum |
+| Large text contrast | 3:1 minimum |
+| Graphical object contrast | 3:1 minimum |
+| Color alone | Never convey meaning through color alone |
+
+---
+
+## Best Practices Summary
+
+### Do's
+
+1. **Use brand colors** - EE Blue, Transform Teal, Tech Blue, Equal Ember
+2. **Follow the spacing scale** - Use defined values (4, 8, 16, 24, 32, 48px)
+3. **Use Lexend font** - It's the brand sans-serif
+4. **Test accessibility** - Verify contrast and readability
+5. **Use official assets** - Logo files from brand repository
+6. **Maintain hierarchy** - Clear visual structure
+
+### Don'ts
+
+1. **Don't use arbitrary values** - Always use tokens
+2. **Don't skip heading levels** - H1 → H2 → H3
+3. **Don't ignore contrast** - Verify all combinations
+4. **Don't modify brand assets** - Use as provided
+5. **Don't overcomplicate** - Simple is better
+6. **Don't prioritize decoration over clarity** - Content first
+
+---
+
+## Platform-Specific Rules
+
+After understanding these general principles, load the appropriate type-specific rules:
+
+| Platform | Directory | Description |
+|----------|-----------|-------------|
+| Web | [types/web/](../../types/web/) | Websites and web applications |
+| Slides | [types/slides/](../../types/slides/) | Presentations |
+| Photography | [types/photography/](../../types/photography/) | Photo guidelines |
+| Graphics | [types/graphics/](../../types/graphics/) | Icons, illustrations, infographics |
+| Charts/Data | [types/charts-data/](../../types/charts-data/) | Data visualization |
+
+---
+
+## Related Documentation
+
+- [Brand Guidelines](../brand.md) - Brand principles and identity
+- [Logo](../logo.md) - Logo usage guidelines
+- [Colours](./colours.md) - Brand colors
+- [Typography](./typography.md) - Fonts and type scale
+- [Spacing](./spacing.md) - Spacing system
+- [Borders](./borders.md) - Border philosophy
+- [Content](../content/README.md) - Writing style and usage

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

@@ -0,0 +1,130 @@
+# 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** - See [types/web/](../types/web/)
+- **Slides** - See [types/slides/](../types/slides/)
+- **Graphics** - See [types/graphics/](../types/graphics/)
+
+---
+
+## Related Documentation
+
+- [Borders](./borders.md) - Border philosophy and specifications
+- [Typography](./typography.md) - Text spacing

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

@@ -0,0 +1,155 @@
+# 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** - See [types/web/](../types/web/)
+- **Slides** - See [types/slides/](../types/slides/)
+- **Graphics** - See [types/graphics/](../types/graphics/)
+
+---
+
+## Related Documentation
+
+- [Brand Guidelines](./brand.md) - Brand principles
+- [Colours](./colours.md) - Text colors
+- [Spacing](./spacing.md) - Text spacing patterns