Creative practice system
Synchronic Studio
Synchronic brings practice sessions, reflections, excursions, tasks, and gentle guidance into one private workspace built around the rhythms of an artist’s life.
- Role
- Product design · Creative direction · Engineering
- When
- 2025—Now
- Built with
- SvelteKit · Tauri · Supabase · TypeScript
The premise
Creative work rarely moves in a straight line. Studio time, daily writing, errands, research, and half-formed ideas often live in separate tools—making the larger pattern difficult to see. Synchronic treats those activities as parts of one practice.
The product
The app is organized around five verbs: Observe, Practice, Roam, Tend, and Reflect. Together they form a calm operating system for logging studio sessions, capturing excursions, writing daily reflections, managing creative tasks, and reviewing progress over time.
The system
- Local-first storage keeps the core practice useful without a network connection.
- Optional Supabase sync supports continuity across devices.
- A SvelteKit interface serves the web while Tauri packages the same product as a focused desktop app.
- Shared date, reminder, and practice-session logic keeps daily and weekly views consistent.
The design direction
The visual language borrows from instruments, celestial diagrams, and archival notebooks: restrained color, warm metallic accents, deliberate motion, and verb-led navigation. The interface is designed to feel reflective without becoming precious or slow.
What I owned
I shaped the product model, interaction system, visual direction, frontend architecture, desktop packaging, data synchronization, and ongoing release workflow. The work moves continuously between concept, design, engineering, testing, and real daily use.
The system behind the work
Synchronic Studio
A calm studio system that combines warm editorial surfaces with precise, accessible interaction across five distinct creative practices.
-
Warm, never washed out
Paper-like quiet supports attention without weakening hierarchy.
-
Color has a job
Purple carries brand and interaction while pillar colors identify domains with non-color cues.
-
Calm is functional
Rhythm, restraint, and reduced motion help creative work remain the focus.
-
Editorial voice, practical operation
Serif type marks identity and reflection while sans serif supports controls, labels, and reading.
-
One system, distinct practices
Shared foundations keep Reflect, Practice, Roam, Tend, and Observe coherent without erasing their roles.
Visual fingerprint
Identity, components, and proof.
A curated view of the system’s real foundations and state coverage—not a second documentation site.
Foundation
Semantic color
- Studio paper
#f7f3edWarm application background
- Ink
#211d1aPrimary text and hierarchy
- Interaction
#6846c7Brand, focus, and general action
- Observe
#596675Observation and review
- Roam
#a52269Excursions and discovery
- Tend
#08796fTasks and stewardship
- Reflect
#75652dWriting and reflection
- Practice
#2458c8Sessions and focused work
Foundation
Typography roles
- Brand serif Behind the Nineties
Carries identity, display hierarchy, and reflective moments.
- Brand sans Flinders
Supports controls, labels, navigation, and sustained interface reading.
Inventory
Representative components
Button
Shared actions adapt to theme and optional practice accent while preserving native semantics.
- Primary
- Secondary
- Ghost
- Danger
- Focus
- Disabled
Toggle
Binary preferences pair a native checkbox with a visible state label.
- Checked
- Unchecked
- Focus
- Disabled
Image uploader
A resilient media flow communicates progress and recovery with text as well as color.
- Empty
- Pending
- Uploading
- Failed
- Complete
In the product
System at work
Decision propagation
Five practices, one interaction grammar
Each practice rebinds the semantic accent to its domain color while shared navigation, controls, forms, and state behavior remain consistent.
Light and dark roles, three-pixel focus treatment, text-backed status, reduced motion, and 44px minimum targets are encoded as system foundations.