ngp_web

Product Experience & Design Language

Reader is designed as a momentum-based reading companion. Every screen, every transition, and every interaction is crafted to keep you in a state of comfortable focus.

The Aesthetic

Reader’s visual identity is built on warmth and restraint. The bespoke background tone (#FFFCF5) evokes paper without mimicking it. The accent palette — warm oranges, muted Mist Blue, and natural Sage — adds character without noise. Combined with generous whitespace and a carefully tuned typographic scale, the result is an interface that feels expensive without being showy.

Dark mode is treated as a first-class experience, not an afterthought.

Motion & Micro-Animations

Reader uses fluid micro-animations throughout:

Page transitions slide and fade with eased curves that feel natural
Card interactions respond with subtle scale and shadow shifts on tap
The swipe reader has spring-physics that mimic the feel of physical cards
Opacity pulses on loading states keep the interface feeling alive, never frozen

Animations are never gratuitous. Each one communicates state or confirms action.

Experience Principles

Fast capture, slow reading — Getting an article into Reader should be instant. Reading it should be unhurried.
Minimal interruption — During a reading session, nothing competes for attention.
Clear states everywhere — Every UI element communicates exactly what it is and what it does.
Low cognitive overhead — The number of decisions required per screen is always minimized.

Typography

Reader uses clean, modern typefaces (Inter and Outfit) with a typographic scale optimized for comfortable long-form reading. Line height, letter spacing, and font size are all tuned for sustained reading sessions, not skimming.