Core screens

The core screens are where the design either holds up or does not. A polished onboarding sequence cannot rescue a home screen that fights the reader. The mockup below is a portfolio design for a fictional reading app called Margin. Four screens: home, library list, article reader, and settings.

Home as a returning screen, not a dashboard

The home screen assumes the reader has been here before. The first block is "Continue reading" with a title, a progress percentage, and time remaining. Second block is a short list of things saved this week. No streaks, no counts, no "articles per month" chart. A home screen crowded with metrics is training the reader to check their score instead of open the book.

Library as a filterable list

Three pills at the top (All, Unread, Long) do the work of three tabs without the visual weight. Rows are 56pt tall, with a progress bar on any item the reader has started. The plus button in the top right handles the one action the reader ever performs on this screen: adding a source. No search bar. Search lives on its own tab because on this app it deserves the full canvas.

Reader that stays out of the way

The reader is the whole product. Warm background at #f4efe4 to reduce the glare that white gives on a dedicated reading screen. One serif body typeface (Iowan) at a generous size. The chrome collapses on scroll. When the reader taps and holds, a highlight card appears in place with a single accent stroke and three obvious actions in the bottom bar. Every reader app I have used lives or dies on how quiet this screen feels.

Settings that stops before it gets excited

Two groups, seven rows. Reading first because that is the only reason anyone opens this screen. Account underneath because those actions run twice a year. No push notification settings, no analytics toggles, no deep menu tree. A settings screen this restrained is a promise that the product is not going to demand attention later.

Design decisions

• Cream base across the app. Same warm off-white as the marketing site. The app never uses pure white.
• One accent, used sparingly. Deep gold (#8a6b3f) marks progress and selection only. Buttons stay dark or cream.
• Tab bar with a dot indicator. No filled shape, no icon change. A single small dot above the active label is enough.
• Serif in the reader, sans everywhere else. The typeface switch signals that the reader is a different room in the app.

The stack

Platform

React Native with Expo Router, shared UI kit across iOS and Android.

Design tools

Figma with variables driving light and dark tokens.

Reader engine

Readability.js for parsing, custom renderer for typography control.

Sync

Supabase with row-level security, offline-first local cache.