Approach
Understand. Design. Build. Verify.
A short loop, repeated with care. Each pass ends in something real that can be checked, not in a presentation.
- 01
Understand
What real problem exists, for whom, and what do they use today? We define the smallest coherent version, and what explicitly stays out of it.
- 02
Design
Flows, copy, hierarchy and motion are designed together in JNDS grammar. Each product then finds its own expression on top of that grammar.
- 03
Build
The design system lives in production code, not in a mock layer. Local-first where it fits, fast by default. AI accelerates implementation; it does not replace judgement.
- 04
Verify
Regression tests, real browser and device QA, accessibility and performance checks. Where failure would be costly — security, privacy, payments — specialists review it.
JNDS — JoNi Narrative Design System
Grammar is shared. Expression is individual.
JNDS is not a visual skin. It is the behaviour our products share: how they navigate, dismiss, give feedback, move and adapt. Each principle below is shown where it appears in CollectionEve.
- Narrative
- Every interaction continues a context.
- CollectionEve Opening a collection starts at its briefing, not at a blank list.
- Calm
- Reduce noise. Create focus.
- CollectionEve Saving is quiet. The state changes; no celebration is needed.
- Comfort
- Familiar patterns come before novelty.
- CollectionEve Back, Escape and dismiss behave the way the platform already taught you.
- Restraint
- Remove before adding.
- CollectionEve One primary action on the empty home. Everything else waits.
- Continuity
- Different products. One familiar language.
- CollectionEve The same rhythm of motion and feedback on the phone and on the desktop.
Motion grammar
Motion explains a change. It never decorates one.
Durations are tokens, chosen by what is changing. Press one to feel the difference.
-
A button acknowledges the touch.
-
Hover, selection, small state changes.
-
One value or block updates in place.
-
Moving between pages.
-
The same object travels between two places.
Reduced motion is on, so the marker moves without animation.
Premium by Craft
Premium is not a price tier. It is the quality of the experience.
-
Design quality
Composition, typography and space that hold up under daily use.
-
Polish
States, empty screens and errors designed as carefully as the happy path.
-
Reliability
Data that stays where it was left. Honest copy about what can be lost.
-
Ownership pride
“I like that I use this.” A tool can say something about the taste of the person who chose it.