This guide defines how we communicate in the LibreUIUX repository. Our voice balances technical precision with genuine wonder, practical wisdom with community growth.
Wonder emerges from UNDERSTANDING, not mystery.
We don't mystify design systems—we reveal their elegant mechanics. We don't gatekeep knowledge—we share discoveries that raise collective understanding. We don't write dry documentation—we explain with the enthusiasm of someone who just figured out why something works beautifully.
Every piece of content should aim for this balance:
Technical Rigor: 45% - Precise, accurate, systematic
Profound Wonder: 30% - Genuine awe at elegant mechanics
Hacker Playfulness: 20% - Insightful, clever, revealing
Warm Encouragement: 5% - Supportive, remember the beginner
We sound like:
- Carl Sagan revealing cosmic mechanics (wonder through understanding)
- Richard Feynman explaining physics (joy in precision)
- A senior engineer showing the elegant solution (system mastery)
- A generous mentor who remembers being a beginner
- A hacker explaining how they cracked the code
We do NOT sound like:
- ❌ Mystical guru with secrets to reveal
- ❌ Dry academic textbook
- ❌ Corporate training manual
- ❌ Pure motivational hype without substance
- ❌ Condescending expert
Wonder: 8%
Clear Explanation: 50%
Encouragement: 12%
Technical: 30%
Feel: "Look at how beautifully this system works when you understand it"
Example:
❌ Too dry: "Specify exact CSS values for optimal results."
❌ Too mystical: "The ancient wisdom of CSS reveals itself through precise values..."
✅ Just right: "Here's what's extraordinary about being specific: when you say
'shadow-lg' instead of 'make it shadowy,' you're speaking a precise language
that Claude understands perfectly. No ambiguity. No guessing. Just beautiful,
consistent results. That's the power of design systems."Wonder: 6%
Deep Patterns: 55%
Practical Tips: 24%
Technical: 15%
Feel: "Now we're getting into the really elegant stuff"
Example:
❌ "Create a design system for consistency."
✅ "Here's where it gets beautiful: a design system isn't just about making
things look the same. It's a shared language between you and Claude. Define
your colors once, reference them everywhere, and watch Claude compose components
that feel like they belong together—because they speak the same visual language.
That's systematic thinking paying off."Wonder: 5%
Practical: 60%
Hacker Insight: 20%
Ethics/Community: 15%
Feel: "Here's what actually works in production and why"
Example:
❌ "Implement MCP servers for enhanced functionality."
✅ "The MCP server approach is genuinely clever: instead of repeatedly describing
your needs, you wire Claude directly into your browser's DevTools. Now Claude
can see what you see, measure what needs measuring, and verify fixes in real-time.
It's like giving Claude eyes. Setup takes 10 minutes. Time saved: countless hours
of back-and-forth describing what's on screen."Use these to emphasize community contribution and collective understanding.
- After explaining a complex concept
- When sharing breakthrough insights
- In sections about contribution
- When patterns emerge that benefit everyone
---
💛 **Gold Hat Note**
[Topic: Specific area of knowledge]
This isn't just about [individual benefit]. It's about all of us raising
collective understanding of [specific area].
[Specific call to action for sharing knowledge]
Share what you discover. Document your breakthroughs. Help others see patterns.
The craft grows when knowledge flows.
------
💛 **Gold Hat Note**
Topic: Design System Patterns
This isn't just about your project looking consistent. It's about all of us
raising collective understanding of how design systems make Claude more effective.
When you discover a color scale that works beautifully, share it. When you find
a spacing pattern that solves a common problem, document it. When you notice
Claude responds better to certain phrasings, tell the community.
Share what you discover. Document your breakthroughs. Help others see patterns.
The craft grows when knowledge flows.
---Use these to share hard-won insights and actionable experiments.
- Sharing personal breakthroughs
- Explaining non-obvious solutions
- Providing actionable experiments
- Warning about common pitfalls
---
📝 **Field Notes from the Trenches**
Context: [Specific situation or learning moment]
[The insight or breakthrough explained with technical precision]
**Try this:** [Specific, actionable experiment]
**Watch for:** [Expected result that validates understanding]
**This works because:** [Technical explanation of the mechanism]
------
📝 **Field Notes from the Trenches**
Context: Fighting with Claude over button colors
I spent 20 minutes saying "make the button more blue" and getting random results.
Then I tried: "Change button from bg-blue-500 to bg-blue-600."
Instant. Perfect. Every time.
**Try this:** Compare these two requests:
1. "Make the card shadow stronger"
2. "Change card shadow from shadow-md to shadow-lg"
**Watch for:** Request #2 gives you exactly what you want, first try.
**This works because:** Claude understands Tailwind's scale system perfectly.
When you speak that language, you're giving precise coordinates instead of
vague directions. It's like the difference between "go thataway" and "turn
left at the second light."
---Wonder should be present but never overwhelming. Keep it at 5-8% of content.
DO:
- Express genuine awe at elegant mechanics
- Highlight beautiful system designs
- Show excitement about how things work
- Use "Look at this" or "Here's what's extraordinary" moments
DON'T:
- Use mystical language or metaphors
- Imply secrets or hidden knowledge
- Overuse exclamation points
- Sound like a motivational speaker
❌ Too mystical:
"The sacred geometry of design systems aligns cosmic forces..."
❌ Too dry:
"Design systems provide consistency through token abstraction."
✅ Just right:
"Here's what's beautiful about design systems: they're essentially a shared
vocabulary. Instead of Claude guessing what 'primary blue' means each time,
you define it once. Then every component speaks the same language. That's
elegant engineering—solve the problem once, benefit forever."
Pattern: Technical precision → Why it matters → Wonder at elegance
**Technical:** Tailwind uses a numeric scale (50-950) for colors.
**Why it matters:** This gives you precise control. blue-600 is always darker
than blue-500.
**Wonder:** Think about what that means: you can create an entire brand palette
where every shade relates mathematically to every other shade. Dark mode? Just
shift the numbers. Hover states? Step up one level. That's systematic design
at work—elegant, predictable, scalable.Pattern: Problem → Breakthrough → Mechanism → Share
**Problem:** Claude kept giving me different card styles every time.
**Breakthrough:** I created a CLAUDE.md file with my design system. Suddenly,
consistency.
**Mechanism:** Claude reads project files. Give it a reference document, and
it becomes the source of truth. Every component now derives from the same
foundation.
**Your turn:** Create your CLAUDE.md (use our template). Add your color palette.
Request three different components. Watch them all match perfectly. That's the
power of documented systems.Pattern: What → Why → The Elegant Part
// Apply glassmorphism effect
// WHY: Creates depth without heavy shadows, modern and light
// THE ELEGANT PART: Backdrop blur + transparency = the background
// becomes part of the design. It's not hiding the background, it's
// composing with it. That's the difference between painting over
// something and painting *with* it.
const glassEffect = "backdrop-blur-lg bg-white/10 border border-white/20"When addressing the community, use inclusive language that builds collective knowledge.
Collective understanding:
- "We're all figuring this out together"
- "Here's what the community has discovered"
- "This pattern emerged from dozens of projects"
Knowledge sharing:
- "Share what works for you"
- "Document your breakthroughs"
- "Help others see the pattern"
Mutual growth:
- "The craft grows when knowledge flows"
- "Your discovery could unlock someone's project"
- "We all benefit when wisdom is shared"
Gatekeeping:
- ❌ "Once you reach advanced level..."
- ❌ "Only experts should..."
- ❌ "This isn't for beginners..."
Individualistic:
- ❌ "This will make YOU successful..."
- ❌ "Get ahead of other developers..."
- ❌ "Secret techniques that others don't know..."
- Start with the problem (technical precision)
- Explain the elegant solution (wonder)
- End with community growth (Gold Hat)
- Balance: 40% technical, 35% wonder, 20% practical, 5% community
- Lead with the "Try this" experiment
- Explain what happens (technical)
- Reveal why it works (wonder + insight)
- Balance: 30% experiment, 45% technical, 20% wonder, 5% encouragement
- Precise technical specs first
- "Why you'd use this" second
- Elegant use cases third
- Balance: 60% technical, 25% practical, 10% wonder, 5% tips
- Clear technical requirements
- Why these standards matter
- How contributions raise collective understanding (Gold Hat)
- Balance: 45% technical, 20% practical, 20% community, 15% encouragement
Before publishing content, ask:
- Is it technically accurate? (Precision is non-negotiable)
- Does it reveal an elegant mechanism? (Wonder through understanding)
- Can someone try it right now? (Actionable experiments)
- Does it contribute to collective knowledge? (Community growth)
- Would a beginner and expert both find value? (Accessible depth)
If you answered "no" to any question, revise before publishing.
To create consistent components, define a design system with color tokens,
spacing scale, and typography specifications.
Here's the elegant solution to consistency: define your design system once—colors,
spacing, typography. Then every component request references that system.
Try this: Add your brand colors to CLAUDE.md. Request three different components.
Watch them all speak the same visual language without you repeating yourself.
That's systematic thinking. Define once, benefit forever. Beautiful in its
simplicity, powerful in its results.
💛 When you discover spacing patterns that work, share them. Your "gap-6 for
cards, gap-4 for buttons" insight could unlock clarity for someone else's project.
Every piece of content should:
- Teach precisely - No hand-waving, no vagueness
- Inspire genuinely - Wonder at how beautifully systems work
- Empower immediately - Actionable experiments, not just theory
- Grow collectively - Knowledge that benefits the whole community
When someone finishes reading, they should think:
"I understand exactly what to do, I'm excited about how elegant this is, I can try it right now, and I want to share what I discover."
This voice guide itself should evolve. If you discover:
- Better ways to explain wonder without mysticism
- Clearer patterns for technical precision
- More effective templates for Field Notes or Gold Hat sections
- Examples that nail the voice perfectly
Share them. Open a PR. Help us refine the craft of teaching.
The guide grows when contributors flow their wisdom into it.
Remember: We're not just documenting UI/UX techniques. We're building a knowledge commons where developers discover elegant solutions together, sharing the genuine wonder of understanding how beautiful systems work.
Technical rigor. Profound wonder. Hacker playfulness. Warm encouragement.
That's the Hermetic Ormus way.