Design & Motion

Atelier

The craft behind the Synapse iOS app - screens built from the real Flutter code, transitions that match the actual animation values, and the design decisions that connect them.

Design Language

Every pixel has a reason

Every colour, blur, and radius is a semantic decision rooted in the app's purpose.

Source palette · 12 book colours
Terracotta
Sage
Teal
Mauve
Slate
Rust
Sand
Lavender
Moss
Seafoam
Khaki
Plum
Source types & colour mapping
Book Movie Serie Personal Topic

Each type biases the colour picker toward a curated subset - warm/earthy for books, cool/cinematic for movies, dramatic for series. The colour isn't random; it carries the source's emotional register.

Type scale
Display Synapse
Title Open Graph View
Body Connect ideas across what you read
Caption Your Library · 8 sources
Glass recipe - live
Blur σ 8px
Fill 52%
Border #E4E4E9
glassFill · glassBorder
glassFill rgba(255,255,255, 0.52) light · rgba(13,17,23, 0.55) dark
glassBorder #E4E4E9 light · rgba(59,130,246, 0.16) dark
sigma 8 σ light · 18 σ dark
pill fill glassFill × 0.55 ≈ 28.6%

Five views, one system

Every screen rendered from the real component structure - floating glass pills, GlassNavBar, GlassCard - with the actual type scale, colours, and spacing.

Synapse
24
Notes
18
Links
8
Sources
Open Graph View
Explore your knowledge connections
YOUR LIBRARY
Meditations
Marcus Aurelius
7 notes
Thinking, Fast and Slow
Daniel Kahneman
5 notes
Inception
Christopher Nolan
3 notes
Stoicism
Philosophy
4 notes
Home
Graph
Synapse
Settings
Library
Home
All Meditations TF&S
The Obstacle Is the Way System 1 thinking
System 1 thinking
Thinking, Fast and Slow · 2 links
Home
Graph
Synapse
Settings
Graph
Synapse
Discover
Meditations
Books
Movies
Series
Recommended Book
The Obstacle Is the Way
Ryan Holiday
Both explore the Stoic practice of reframing adversity - Marcus Aurelius from lived experience, Holiday through historical narrative.
← swipe to dismiss · tap + to add →
Home
Graph
Synapse
Settings
Discover
Connections
3 suggestions · swipe to review
✦ AI Suggestion
Accept
The Discipline of Not Reacting
Meditations
links to
Cognitive Ease & Fluency
Thinking, Fast and Slow
Because: Both describe how the mind defaults to the path of least resistance - Marcus through the lens of reason, Kahneman through cognitive science.
Swipe right to accept · left to dismiss
Home
Graph
Synapse
Settings
Connections
Meditations
Note
Done
Title
The Discipline of Not Reacting
Source
Meditations
Content
Book VI.2 - Marcus emphasises pausing before reacting to external events. The practice is not indifference but deliberate space between stimulus and response.
Connections + Add
Cognitive Ease & Fluency
Thinking, Fast and Slow
The Obstacle Is the Way
Meditations
Home
Graph
Synapse
Settings
Note Editor
Auto-saves 1.5 s after last keystroke · "Done" flushes & navigates
Motion

Transitions from the source

Every timing, easing, and spring value below is taken directly from the Flutter code - not approximated.

Home Screen · FAB
Expandable action menu
Two items emerge with a staggered easeOutCubic. "New source" leads the motion; "Discover" follows 33 ms later.
Discover
AI recommendations
New source
Book, movie, topic…
duration: 220ms / 160ms reverse
curve: Interval(0.0, 0.85) easeOutCubic
slide: Offset(0, -0.4) → Offset.zero
Connections Screen · Card
Swipe to accept or dismiss
Drag the card. At ±72 px it exits with a fade + upward slide. Rotation is capped at 2.3° (0.04 rad).
Accept ✓
Dismiss ✕
✦ AI Suggestion
Accept
Discipline of Not Reacting
Meditations
links to
Cognitive Ease
TF&S
Both describe the mind's default to the path of least resistance.
exit: 320ms easeOut
rotate: dragX/120 × 0.04 rad
exit slide: Offset(0, -0.18)
Graph Screen · Canvas
Node spring emergence
Nodes pop in with spring physics (stiffness 200, damping 14). Edges draw in after their two endpoints are visible.
spring: stiffness 200, damping 14
node stagger: 90ms per node
edges: draw after both endpoints
Components

Quick reference

The shared primitives behind every screen.

Glass nav bar · pill · backdrop blur 18
Source type chips · selected state
Book Movie Serie Personal Topic
Book colour palette · AppColors.bookColors[0…11]
Buttons & badges
Save Cancel Delete resource ✦ AI Suggestion