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%

Six 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
Vault
1 flash note · unfiled
YOUR LIBRARY
Meditations
Marcus Aurelius
7 notes
Thinking, Fast and Slow
Daniel Kahneman
5 notes
Inception
Christopher Nolan
3 notes
Stoicism
4 notes
Home
Graph
Connect
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
Connect
Settings
Graph
Synapse
Discover
Powered by Gemini
BASED ON
Meditations
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 - turning every obstacle into the raw material of progress.
+ Add to library Dive in →
Daily picks
Discover
Connections
3 suggestions · swipe to review
SUGGESTED LINK
The Discipline of Not Reacting
Meditations
Cognitive Ease & Fluency
Thinking, Fast and Slow
Both describe how the mind defaults to the path of least resistance - Marcus through the lens of reason, Kahneman through cognitive science.
Swipe or Accept →
Home
Graph
Connect
Settings
Connections
The Discipline of Not Reacting
Topic or chapter (optional)
Book VI.2 - Marcus emphasises pausing before reacting to external events. The practice is not indifference but deliberate space between stimulus and response.
CONNECTIONS
Cognitive Ease & Fluency
Thinking, Fast and Slow
Both trace how the mind chooses the effortless path…
The Obstacle Is the Way
Meditations
···
Home
Graph
Connect
Settings
Note Editor
Auto-saves 1.5 s after the last keystroke · no chrome, just the note
Vault
1 unfiled
Tap a chip to file, or long-press to open.
Capture a thought…
Bridge myths & game theory
10h
Collective fictions as coordination equilibria
Maniac The Boys Move to…
Home
Graph
Connect
Settings
Vault
Flash notes stay out of the graph until filed into a source
Motion

Transitions from the source

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

Vault · Inbox Zero
The chest opens
File the last flash note and the treasure chest swings open with an easeOutBack overshoot - sparkles rise once the lid clears halfway.
duration: 900ms
curve: easeOutBack (overshoot)
lid: rotate −0.9 rad, hinged at the seam
sparkles: fade in past 50%
Connections Screen · Card
Swipe to accept or dismiss
Drag the card. At ±80 px it exits with a fade + upward slide. Rotation is capped at 2.3° (0.04 rad).
Accept ✓
Dismiss ✕
SUGGESTED LINK
Discipline of Not Reacting
Meditations
Cognitive Ease
TF&S
Both describe the mind's default to the path of least resistance.
Swipe or Accept →
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