Design Component
UI component patterns for Empathy Ledger with cultural sensitivity.
When to Use
- Building storyteller/story cards
- Implementing data displays
- Adding AI content enrichment
- Creating profile components
Quick Reference
Card Data Hierarchy
- Always show: name, avatar, cultural_background, story_count
- On card: badges, top specialties, location
- On hover: bio, all specialties, themes
- Profile only: contact, full stories, connections
Badge Priority
- Elder (gold crown)
- Featured (star)
- Knowledge Keeper (book)
- Verified (check)
Cultural Colors
| Color |
Meaning |
Usage |
| Amber |
Wisdom |
Elder badges |
| Emerald |
Growth |
Story counts |
| Purple |
Sacred |
Knowledge keeper |
| Terracotta |
Connection |
Cultural affiliation |
Reference Files
| Topic |
File |
| Storyteller card data model |
refs/storyteller-card.md |
| AI enrichment patterns |
refs/ai-enrichment.md |
| Component patterns |
refs/component-patterns.md |
Key Patterns
// Avatar with fallback
<Avatar>
<AvatarImage src={url} alt={name} />
<AvatarFallback>{initials}</AvatarFallback>
</Avatar>
// Badge
<Badge variant="elder">Elder</Badge>
// Card structure
<Card>
<CardHeader>Avatar + Badges</CardHeader>
<CardContent>Info + Metrics</CardContent>
<CardFooter>Actions</CardFooter>
</Card>
Anti-Patterns
❌ Auto-publish AI content
❌ Suggest connections without consent
❌ Skip cultural context display
❌ Use disrespectful terminology
Related Skills
design-system-guardian - Design tokenscultural-review - Cultural sensitivityempathy-ledger-codebase - Architecture
