Synchronicity

A design system for applications that honor the user’s attention. Born from I Ching divination practice, crafted for mindful experiences.

45 components • React Native • TypeScript • Dark-first

---

Philosophy

⚪ Intentional Simplicity

Every element earns its place. Remove noise, let content breathe.

✨ Warm Luminosity

Gold as the sacred accent—drawing attention with warmth, not aggression.

〰️ Rhythmic Motion

Animations follow breathing patterns. Organic transitions, never mechanical.

♿ Inclusive Design

WCAG AA is the baseline. Every color tested, every interaction accessible.

---

Three Contemplative Themes

☀️

Light

Warm cream backgrounds with grounded gold accents. Paper-like warmth for focused reading.

🌙

Dark

Deep void backgrounds with luminous gold. OLED-optimized for battery and depth.

⚫

True Black

Pure black for maximum contrast. Dramatic, focused, uncompromising OLED savings.

All themes maintain WCAG AA contrast and include gold-tinted shadows for warmth.

---

I Ching Divination Components

The only design system built for contemplative practice.

☰ Hexagram Display

Render the 64 hexagrams with changing line support. HexagramVisual, HexagramLine, LineStack.

🪙 Coin Casting

Animated three-coin method with automatic calculation. Realistic physics, traditional values.

☷ Trigram System

The eight trigrams with Chinese characters. Grid selection, pair display, full Unicode support.

📜 Reading Cards

Beautiful summaries with hexagram visualization, dates, questions, transformations.

Example: Complete coin casting flow in less than 20 lines

function CastingScreen() {
  const [lines, setLines] = useState<LineType[]>([]);
  const [throwing, setThrowing] = useState(false);

  return (
    <View>
      <ThreeCoins
        throwing={throwing}
        onPress={() => setThrowing(true)}
        onThrowComplete={(result) => {
          setThrowing(false);
          setLines([...lines, result.lineType]);
        }}
        showValue
      />
      {lines.length === 6 && <HexagramVisual lines={lines} />}
    </View>
  );
}

Explore I Ching components →

---

45 Thoughtfully Crafted Components

From foundational UI to specialized divination tools.

📝

11 Form & Input

🎯

10 Actions & Nav

💬

12 Feedback & Status

📦

6 Layout & Structure

☯️

6 I Ching Divination

Browse all components →

---

Built for React Native

🎨 Animated API • 📱 Mobile-first • ♿ Accessible • 🌙 OLED optimized • 📦 Tree-shakeable • 🎯 TypeScript

Ready to begin?

Start with the Introduction • Explore Components • Learn Foundations