Intentional Simplicity
Every element serves a purpose. We remove visual noise to let content breathe and users focus.
Foundations Overview
Synchronicity is built on a philosophy of contemplative design—creating digital experiences that encourage mindfulness, clarity, and purposeful interaction.
Light
Dark
True Black
Core Principles
Section titled “Core Principles”Warm Luminosity
Gold as the primary accent creates warmth and draws attention without aggression.
Rhythmic Motion
Animations follow breathing patterns, creating a meditative quality to interactions.
Inclusive Access
WCAG AA compliance ensures everyone can experience the design as intended.
The Three Themes
Section titled “The Three Themes”Each theme is crafted for specific contexts and optimized for its environment.
☀️
Light Mode
#faf8f3
Designed for daytime use and well-lit environments. Warm cream backgrounds reduce eye strain while maintaining excellent readability.
🌙
Dark Mode
#0a0a0f
Optimized for low-light environments and OLED displays. Deep void backgrounds make gold accents luminous and reduce battery consumption.
⚫
True Black Mode
#000000
Maximum contrast with pure black backgrounds. Ideal for OLED displays seeking maximum battery savings and users who prefer stark contrast.
Design Language
Section titled “Design Language”Gold as Sacred Accent
Section titled “Gold as Sacred Accent”#d4af37
Gold is used sparingly throughout the system to maintain its impact and meaning.
Primary actions — The most important interactive elements
Achievement — Success states and completions
Value — Content worth highlighting
Wisdom — Knowledge and insight
Breathing Rhythm
Section titled “Breathing Rhythm”Motion in Synchronicity follows a 9.6-second breathing pattern for meditative quality.
3.6s
Inhale
Building anticipation
1.2s
Hold
Moment of stillness
4.8s
Exhale
Release and calm
Color Temperature
Section titled “Color Temperature”Colors shift temperature to match each theme’s atmosphere.
Light Mode — Warm Grays
Beige undertones for cozy, paper-like feel
Dark Mode — Cool Grays
Blue undertones for deep, void-like quality
Architecture
Section titled “Architecture”Our 3-tier token system ensures consistency and flexibility.
Scalability
Add themes without touching components
Consistency
Single source of truth
Flexibility
Override at any level
Explore the Foundations
Section titled “Explore the Foundations”Colors
Typography
Spacing
Motion