ReadwiseReader [example] v1.0.0

Readwise Reader strips articles to a focused reading view with configurable typography (Newsreader, Charter, Inter), themes (sepia #F4ECD8, dark #1C1917, light #FFFFFF), and 600-720px column widths. Highlight tool appears as a floating selection menu (yellow, blue, pink, orange) with a 'Note' button. Progress bar at top tracks scroll percentage.

Label

Readwise Reader — Article Reading Mode

Url

https://readwise.io/read

Observed

2026-Q1

Brand

readwise

Pattern Applied

@community/pattern-blog-article-layout

Aesthetic Notes

• Sepia theme: bg #F4ECD8 (warm cream), text #5C4B37 (warm brown), serif Newsreader 18px/32px.
• Dark theme: bg #1C1917 (warm dark, NOT pure black), text #E7E5E4, with reduced contrast for night reading.
• Column: 640px max-width default, configurable to 560px (narrow) or 720px (wide).
• Highlight colors: 4 hues at ~30% alpha — yellow rgba(250,204,21,0.3), blue rgba(96,165,250,0.3), pink rgba(244,114,182,0.3), orange rgba(251,146,60,0.3).
• Floating selection menu: appears on text selection, 8px border-radius, dark bg #18181B, 4 color circles + 'Note' icon.
• Progress bar: 2px tall, fixed top, accent color #2563EB filled to scroll-percentage.

What To Copy

• Sepia theme uses warm cream (#F4ECD8) and warm brown text (#5C4B37) — never pure white-on-black or black-on-white for long reading.
• Highlight colors should be ~30% alpha, NOT solid — solid highlights compete with text for legibility.
• Floating selection menus on text-select (not separate toolbar) match user's mental model of native OS text.
• Progress bar at top, never bottom — top placement is the default mental model from browsers/PDFs.

What To Skip

• The font picker (Newsreader/Charter/Inter) is hidden in settings — surface as a quick-toggle in reading mode.

Screenshot Hint

scout query: readwise reader sepia article highlight floating menu progress bar

Demonstrates

• Reading apps must offer themes (sepia/light/dark) with carefully tuned warm colors, not pure neutrals.
• Highlight tools belong on selection, not in a separate toolbar.
• Long-form reading benefits from configurable column width (560/640/720px).

ReadwiseReader [example] v1.0.0

Readwise Reader strips articles to a focused reading view with configurable typography (Newsreader, Charter, Inter), themes (sepia #F4ECD8, dark #1C1917, light #FFFFFF), and 600-720px column widths. Highlight tool appears as a floating selection menu (yellow, blue, pink, orange) with a 'Note' button. Progress bar at top tracks scroll percentage.

Label

Readwise Reader — Article Reading Mode

Url

https://readwise.io/read

Observed

2026-Q1

Brand

readwise

Pattern Applied

@community/pattern-blog-article-layout

Aesthetic Notes

• Sepia theme: bg #F4ECD8 (warm cream), text #5C4B37 (warm brown), serif Newsreader 18px/32px.
• Dark theme: bg #1C1917 (warm dark, NOT pure black), text #E7E5E4, with reduced contrast for night reading.
• Column: 640px max-width default, configurable to 560px (narrow) or 720px (wide).
• Highlight colors: 4 hues at ~30% alpha — yellow rgba(250,204,21,0.3), blue rgba(96,165,250,0.3), pink rgba(244,114,182,0.3), orange rgba(251,146,60,0.3).
• Floating selection menu: appears on text selection, 8px border-radius, dark bg #18181B, 4 color circles + 'Note' icon.
• Progress bar: 2px tall, fixed top, accent color #2563EB filled to scroll-percentage.

What To Copy

• Sepia theme uses warm cream (#F4ECD8) and warm brown text (#5C4B37) — never pure white-on-black or black-on-white for long reading.
• Highlight colors should be ~30% alpha, NOT solid — solid highlights compete with text for legibility.
• Floating selection menus on text-select (not separate toolbar) match user's mental model of native OS text.
• Progress bar at top, never bottom — top placement is the default mental model from browsers/PDFs.

What To Skip

• The font picker (Newsreader/Charter/Inter) is hidden in settings — surface as a quick-toggle in reading mode.

Screenshot Hint

scout query: readwise reader sepia article highlight floating menu progress bar

Demonstrates

• Reading apps must offer themes (sepia/light/dark) with carefully tuned warm colors, not pure neutrals.
• Highlight tools belong on selection, not in a separate toolbar.
• Long-form reading benefits from configurable column width (560/640/720px).

Label

Readwise Reader — Article Reading Mode

Url

https://readwise.io/read

Observed

2026-Q1

Brand

readwise

Pattern Applied

@community/pattern-blog-article-layout

Aesthetic Notes

• Sepia theme: bg #F4ECD8 (warm cream), text #5C4B37 (warm brown), serif Newsreader 18px/32px.
• Dark theme: bg #1C1917 (warm dark, NOT pure black), text #E7E5E4, with reduced contrast for night reading.
• Column: 640px max-width default, configurable to 560px (narrow) or 720px (wide).
• Highlight colors: 4 hues at ~30% alpha — yellow rgba(250,204,21,0.3), blue rgba(96,165,250,0.3), pink rgba(244,114,182,0.3), orange rgba(251,146,60,0.3).
• Floating selection menu: appears on text selection, 8px border-radius, dark bg #18181B, 4 color circles + 'Note' icon.
• Progress bar: 2px tall, fixed top, accent color #2563EB filled to scroll-percentage.

What To Copy

• Sepia theme uses warm cream (#F4ECD8) and warm brown text (#5C4B37) — never pure white-on-black or black-on-white for long reading.
• Highlight colors should be ~30% alpha, NOT solid — solid highlights compete with text for legibility.
• Floating selection menus on text-select (not separate toolbar) match user's mental model of native OS text.
• Progress bar at top, never bottom — top placement is the default mental model from browsers/PDFs.

What To Skip

• The font picker (Newsreader/Charter/Inter) is hidden in settings — surface as a quick-toggle in reading mode.

Screenshot Hint

scout query: readwise reader sepia article highlight floating menu progress bar

Demonstrates

• Reading apps must offer themes (sepia/light/dark) with carefully tuned warm colors, not pure neutrals.
• Highlight tools belong on selection, not in a separate toolbar.
• Long-form reading benefits from configurable column width (560/640/720px).