Readmoo DESIGN.md

Design System Inspiration of Readmoo

Overview

Visual Theme & Atmosphere

Readmoo (讀墨) is Taiwan's largest Traditional-Chinese EPUB ebook platform and the maker of the mooInk E Ink e-reader, and its design reads exactly like what it sells: a calm, bookish, reader-first store rather than a loud commerce funnel. The store canvas is a soft off-white (#fafafa) — never pure white at the page level — that lowers glare and evokes paper, while the mooInk product pages switch to clean white (#ffffff) to let device photography breathe. Text sits in a warm grey-charcoal (#4a4a4a) on the store and a near-black #212529 on product surfaces, deliberately softer than pure black to ease long reading sessions. The single saturated brand accent is a bright sky-cyan (#40c8f7), reserved for the actions that matter — search submit, the register button, and every primary pill CTA — so the eye is trained that "cyan means go."

The typographic personality is unmistakably Traditional-Chinese and quietly editorial. The body runs on a native CJK stack — PingFangTC-Regular, "Microsoft JhengHei", "Helvetica Neue", "Heiti TC", 微軟正黑體, sans-serif — at 16px with a generous 1.5 line-height tuned for dense hanzi legibility. But the most distinctive move is the store category navigation set in a CJK serif ("Songti TC", serif) at 20px/700: the "書籍 / 雜誌 / 有聲書 / 漫畫 / 輕小說" tabs render in a Mincho-style serif, a small but telling signal that this is a place for reading, not a generic SaaS app. Product headlines (mooInk's "打開舒視閱讀任意門" at 44px/700, section heads at 32px/700) stay in the sans stack for marketing punch.

What distinguishes Readmoo from typical commerce design is its restraint with depth. Live inspection found box-shadow: none across nav, hero, headings, and most chips; separation comes from flat grey surfaces (#f2f2f2, #e8e8e8) and thin #dddfe1 hairlines rather than elevation. Geometry is split: marketing CTAs are full 25px pills, while the search field and the header register button keep sharp 3–4px corners — a pragmatic Bootstrap-derived chrome under a calm reading-brand veneer. A warm salmon (#e98192) carries the second commerce voice (the mooInk bundle / cart action), keeping the bright cyan exclusively for the primary path.

Key Characteristics:

• Sky-cyan (#40c8f7) reserved as the single primary action color; dark-cyan (#0092c2) is its hover/active shade
• Salmon (#e98192) as the dedicated secondary commerce action — cart / bundle, never mixed with cyan
• Off-white store canvas (#fafafa) for low-glare, paper-like reading comfort; white (#ffffff) on product pages
• Warm charcoal text (#4a4a4a store / #212529 product) instead of pure black — easy on the eyes
• CJK serif ("Songti TC") for the store category tabs — an editorial, book-store signal amid a sans body
• Native Traditional-Chinese sans stack (PingFangTC → Microsoft JhengHei → Heiti TC) at 16px / 1.5 for hanzi density
• Flat depth: box-shadow: none dominant; #f2f2f2/#e8e8e8 surfaces + #dddfe1 hairlines do the separating
• Split geometry — 25px marketing pills vs 3–4px sharp search/register chrome
• Cyan-tint panels (#c2f0ff) for feature callouts; red (#dc3545) sale tags and green (#28a745) stock tags on covers

Primary tasks

• Search the store for a book by keyword.
• Browse books, magazines, audiobooks, and comics by category.
• Buy a book and continue reading it immediately.
• Read a book you bought on any device.
• Compare mooInk specs and pick a bundle.

Brand Narrative

Readmoo (讀墨) launched in 2013 as Taiwan's first dedicated Traditional-Chinese EPUB ebook platform, built on the conviction that Traditional-Chinese readers deserved a first-class digital reading experience rather than scanned PDFs or DRM-locked silos. The name 讀墨 — literally "read ink" — captures the mission: bring the feel of ink-on-paper into a digital, cross-device library. From the start Readmoo bet on the open EPUB standard and a "buy once, read anywhere" cross-platform library, positioning itself as the reader's advocate in a fragmented market.

The platform grew into Taiwan's largest Traditional-Chinese ebook service and extended into hardware with the mooInk line of E Ink e-readers — purpose-built devices tuned for Traditional-Chinese typography, comfortable long-form reading, and low-blue-light eye comfort ("舒視閱讀"). The mooInk pages foreground reading posture and comfort ("每個人，都有屬於他的閱讀姿態") rather than raw hardware specs, reinforcing that the device is in service of the reading experience.

What Readmoo refuses, visible in its design: the loud, discount-driven chrome of generic ecommerce, and the cold, spec-first framing of consumer electronics. What it embraces: a calm off-white paper-like canvas, an editorial CJK serif for browsing, native Traditional-Chinese typography tuned for hanzi, and copy that talks about the pleasure of reading. The single bright cyan is the one note of energy in an otherwise quiet, bookish room.

Principles

1. Reading comfort first. Off-white canvas, soft charcoal text, low-blue-light mooInk hardware. UI implication: avoid pure white/black and harsh contrast; favor paper-like #fafafa and warm #4a4a4a/#212529 text for long sessions.
2. Traditional-Chinese as a first-class citizen. The whole stack is tuned for hanzi. UI implication: lead with PingFangTC → Microsoft JhengHei → Heiti TC; use generous 1.5 line-height for dense Traditional-Chinese.
3. Editorial, not transactional. This is a bookstore, not a discount mall. UI implication: the Songti TC serif on category tabs and poetic product copy signal "reading"; keep urgency and discount noise low.
4. One action, one color. Cyan (#40c8f7) means "go." UI implication: reserve the saturated cyan for the primary path; give the secondary commerce action its own salmon voice.
5. Flat and calm. Mobile-native clarity over decorative depth. UI implication: no shadows; separate with grey surfaces and hairlines so the dense cover grid stays quiet and scannable.

Personas

Personas below are fictional archetypes informed by publicly observable Readmoo user segments (Traditional-Chinese readers, mooInk e-reader owners, Taiwanese book lovers), not individual people.

林雅婷, 34, 台北. A heavy fiction reader who switched from paper to mooInk for the eye comfort and the cross-device library. Values that her highlights and notes sync everywhere, and that the store feels like a bookshop rather than a discount site. Chose Readmoo for its Traditional-Chinese typography quality.

陳柏宇, 41, 台中. A commuter who reads on his phone during transit and on mooInk at home. Appreciates the calm interface and that buying a book is a quiet two-tap action, not a funnel. Browses the serif category tabs to discover new titles.

黃思妤, 27, 高雄. A graduate student who buys academic and 輕小說 titles. Uses the social "劃線" (highlight) feed to see what others are reading and trusts the platform's plain, low-pressure tone over flashier competitors.

Colors

Primary

• Readmoo Cyan (#40c8f7): Primary brand color and CTA background. The bright sky-cyan on search submit, the register button, and every btn-primary pill — the system's single "action" color.
• Cyan Hover (#0092c2): The darker dark-cyan used for link hover / active and pressed states on cyan actions.
• Cyan Tint (#c2f0ff): A pale cyan surface for feature-callout panels and highlight backgrounds on the mooInk pages.

Secondary & Accent

• Salmon (#e98192): The dedicated secondary commerce action — the mooInk 優惠套組 (bundle) and cart button. A warm rose-pink that reads as "buy" without competing with primary cyan.
• Highlight Amber (#f8b62d): A gold highlight tone (observed at 0.95 alpha as rgba(248,182,45,0.95)) used on promotional ribbons and emphasis banners.

Neutral & Surface

• Store Canvas (#fafafa): Off-white page background on the store — soft, paper-like, low-glare.
• White (#ffffff): Card surfaces, search input background, and the mooInk product-page canvas.
• Surface Grey (#f2f2f2): Tertiary pill background (規格比較, FAQ) and category-tab active fill.
• Surface Grey Alt (#e8e8e8): A slightly deeper grey block for alternating panels and dividers.
• Hairline (#dddfe1): Thin borders, card outlines, and dividers — the primary separation device in this shadow-light system.

Text Hierarchy

• Ink (#212529): Near-black heading/body color on product surfaces (mooInk H1/H2).
• Navy (#013253): A deep navy used on dark feature panels and immersive brand sections.
• Body Grey (#4a4a4a): The store's default warm-charcoal body text.
• Text Dark (#343a40): Nav links and dark UI labels on product pages.
• Muted (#666666): Inactive tabs, secondary nav, captions.
• Muted Grey (#808080): Tertiary grey labels and metadata.
• Faint (#9b9b9b): Lowest-emphasis labels and disabled text.

Status

• Sale Red (#dc3545): Discount / sale tags on book covers and price strikethroughs.
• Stock Green (#28a745): In-stock / availability badges and success confirmations.

Typography

Font Family

• Sans (body + marketing): PingFangTC-Regular, "Microsoft JhengHei", "Helvetica Neue", "Heiti TC", 微軟正黑體, sans-serif — the document default for body, nav, product headlines, and most UI. A native Traditional-Chinese sans stack (PingFang TC on Apple, Microsoft JhengHei / 微軟正黑體 on Windows, Heiti TC as fallback).
• Serif (category nav): "Songti TC", serif — a Mincho-style CJK serif used specifically for the store's category tabs, giving the storefront an editorial, book-store character.

Hierarchy

Principles

• Native CJK first: the whole stack leads with PingFangTC and degrades to Microsoft JhengHei / Heiti TC so Traditional-Chinese hanzi render crisply on every OS before any Latin fallback.
• Serif as a reading signal: the "Songti TC" serif is reserved for the category navigation — a deliberate editorial cue that this is a bookstore, not a generic store.
• Generous hanzi line-height: body sits at 16px / 1.50 (24px), giving dense Traditional-Chinese text the vertical air it needs for comfortable reading.
• Weight, not color, for hierarchy: marketing headlines jump to 700 at 32–44px; the palette stays calm so type weight carries the emphasis.

Layout

Spacing System

• Base unit: ~4px
• Scale: 4px, 6px, 8px, 12px, 16px, 24px, 48px
• Notable: pill CTAs use a tight 6px/12px padding; the search input/button pair shares a 40px height for a fused control

Grid & Container

• Store: a fixed top nav (logo + search + login/register), a serif category-tab bar, then book-cover grids in responsive multi-column rows
• mooInk product page: full-width white hero with a 44px headline, alternating feature bands ("每分鐘…", "每個人…"), and a spec-comparison / bundle section
• Book-cover grids dominate the store; cards carry a thin #dddfe1 hairline rather than a shadow

Whitespace Philosophy

• Calm over dense: despite being a catalog-heavy store, the layout keeps airy vertical rhythm between bands so covers don't crowd.
• Flat segmentation: sections separate by background tint (#fafafa store canvas vs #ffffff cards, #f2f2f2 grey blocks) and hairlines, not by elevation.
• Action focus: cyan appears sparingly so the primary path is never ambiguous amid the dense book grid.

Border Radius Scale

• Sharp (3–4px): search input, register button, sale/stock badges, cards
• Tab (4px 4px 0 0): category tabs
• Pill (25px): marketing/tool CTAs
• Full (9999px): occasional fully-round chips

Responsive Behavior

Breakpoints

Touch Targets

• Primary pills at 38px height with 6px/12px padding — comfortably tappable
• Search input/button pair at a fused 40px height
• Category tabs at 44px height for touch within the serif tab bar

Collapsing Strategy

• Store nav: full search bar → collapsed icon on mobile; login/register condense
• Category tabs: horizontal serif tab row → scroll/wrap on narrow viewports
• Cover grids: multi-column → 2-up → single column
• mooInk feature bands: side-by-side image+text → stacked on mobile, 32px heads maintained

Image Behavior

• Book covers and mooInk device photography carry no shadow at any size, consistent with the flat system
• Cards maintain 4px radius and the #dddfe1 hairline across breakpoints

Elevation & Depth

Shadow Philosophy: Readmoo is a near-shadowless system. Live inspection found box-shadow: none across the nav, hero, headings, and the cyan CTAs; even the grey tool pills are flat rgba(0,0,0,0.05) fills rather than elevated. Depth and grouping are communicated through flat grey surfaces (#f2f2f2, #e8e8e8) and thin #dddfe1 hairlines. This keeps the dense book-cover grid feeling clean and paper-like rather than a stack of floating cards. When emphasis is needed, the system reaches for color (cyan #40c8f7, salmon #e98192, or the cyan-tint #c2f0ff panel), not elevation.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none
• shadow.subtle: rgba(0,0,0,0.05) 0px 1px 3px

Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the calm, paper-like reading brand. Cyan pills respond to press with a subtle color shift to #0092c2; category tabs cross-fade their underline on switch; cover grids fade-in from below at motion-standard / ease-enter. No bounce or spring — a reading platform signals calm, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the store remains fully functional.

Components

Buttons

Primary Pill

• Background: #40c8f7
• Text: #ffffff
• Radius: 25px
• Padding: 6px 12px
• Border: 1px solid #40c8f7
• Font: 16px / 400 / PingFangTC
• Height: 38px
• Hover: #0092c2
• Use: Primary CTA pills (了解更多, 查看更多, mooInk 詳細介紹)

Register (Sharp Accent)

• Background: #40c8f7
• Text: #ffffff
• Radius: 3px
• Padding: 0px 10px
• Font: 16px / 700 / PingFangTC
• Height: 32px
• Use: Header register button (註冊) — bold sharp-corner accent

Secondary Commerce

• Background: #e98192
• Text: #ffffff
• Radius: 25px
• Padding: 6px 12px
• Border: 1px solid #e98192
• Font: 16px / 400 / PingFangTC
• Height: 38px
• Use: Secondary commerce action (mooInk 優惠套組 / cart)

Grey Tertiary

• Background: #f2f2f2
• Text: #333333
• Radius: 25px
• Padding: 6px 12px
• Font: 16px / 400 / PingFangTC
• Height: 38px
• Use: Tertiary tool pills (規格比較, 展售店家, FAQ, 使用手冊) — also rendered as translucent rgba(0,0,0,0.05)

Search Submit

• Background: #40c8f7
• Text: #ffffff
• Radius: 0px 4px 4px 0px
• Padding: 6px 16px
• Font: 16px / 400 / PingFangTC
• Height: 40px
• Use: Search button fused to the right edge of the search input (搜尋)

Inputs & Forms

Search Field

• Background: #ffffff
• Text: #000000
• Border: 1px solid #dddfe1
• Radius: 4px 0px 0px 4px
• Padding: 8px 12px
• Font: 16px / 400 / PingFangTC
• Height: 40px
• Use: Store search input, fused with the cyan search button

Advanced Toggle

• Background: transparent
• Text: #666666
• Border: 1px solid #bec2c6
• Padding: 8px 12px
• Font: 14px / 400 / PingFangTC
• Use: "進階" advanced-search dropdown toggle

Cards & Containers

Feature Card

• Background: #ffffff
• Text: #212529
• Border: 1px solid #dddfe1
• Radius: 4px
• Use: Book / feature card on the store and mooInk grids (no shadow)

Cyan Tint Panel

• Background: #c2f0ff
• Text: #212529
• Radius: 4px
• Use: Cyan-tint highlight / feature callout panel on mooInk pages

Tabs

Category Tab

• Text: #666666
• Radius: 4px 4px 0px 0px
• Font: 20px / 700 / Songti TC
• Active: text #333333 + bg #f2f2f2 + 2px bottom border #40c8f7
• Use: Store category tabs (書籍/雜誌/有聲書/漫畫/輕小說) — serif type

Badges

Sale Tag

• Background: #dc3545
• Text: #ffffff
• Radius: 3px
• Padding: 1px 6px
• Font: 13px / 400 / PingFangTC
• Use: Discount / sale tag on book covers

Stock Tag

• Background: #28a745
• Text: #ffffff
• Radius: 3px
• Padding: 1px 6px
• Font: 13px / 400 / PingFangTC
• Use: In-stock / availability badge

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces) Tier 1 sources: https://readmoo.com/ (store: nav, search, category tabs, CTA pills, social feed — live DOM) ; https://readmoo.com/mooink-series (mooInk e-reader product page: hero H1, section heads, btn-primary, btn-compare, bundle/cart action — live DOM) Tier 2 sources: getdesign.md/readmoo — NOT FOUND (no Readmoo entry) ; styles.refero.design/?q=readmoo — no Readmoo match (returns fuzzy unrelated results: Readwise, ElevenReader, Readymag) Conflicts unresolved: none

States

Do's and Don'ts

Do

• Reserve sky-cyan (#40c8f7) for the single primary action — search submit, register, primary CTA pills
• Use dark-cyan (#0092c2) as the hover/active shade on cyan actions
• Use salmon (#e98192) for the secondary commerce action (cart / bundle), keeping it distinct from primary cyan
• Set the store category tabs in the "Songti TC" serif — it's the bookstore signal
• Lead the type stack with PingFangTC and fall back through Microsoft JhengHei / Heiti TC for Traditional-Chinese
• Use the off-white store canvas (#fafafa) for low-glare, paper-like reading comfort
• Separate sections with flat grey surfaces (#f2f2f2/#e8e8e8) and #dddfe1 hairlines, not shadows
• Use warm charcoal (#4a4a4a store / #212529 product) for text instead of pure black

Don't

• Spread cyan across many elements — it dilutes the single-action signal
• Use heavy drop shadows for elevation — Readmoo is a flat, hairline-separated system
• Use pure black (#000000) for body text — reserve warm charcoal #4a4a4a / near-black #212529
• Use the salmon (#e98192) for primary navigation actions — it's the commerce/cart voice
• Set the body in a Latin-first font — the CJK stack must lead for hanzi legibility
• Apply the serif ("Songti TC") to body copy — it belongs to the category tabs only
• Cram the book grid edge-to-edge — keep the airy vertical rhythm between bands

Voice & Tone

Readmoo's voice is warm, literary, and reader-companionable — a bookseller who loves reading and wants you to keep doing it, not a marketplace chasing a conversion. The mooInk page poetry ("打開舒視閱讀任意門" / "Open the any-door to comfortable reading", "每分鐘，都是閱讀的美好時光" / "Every minute is a beautiful reading moment") sets the register: gentle, evocative, framed around the experience of reading rather than specs or discounts. Copy treats the user as a fellow reader who values a good book and a comfortable screen.

Voice samples (verbatim from live surfaces):

• "打開舒視閱讀任意門" — mooInk product H1 (poetic, reader-centric). (verified live 2026-06-17, readmoo.com/mooink-series)
• "每分鐘，都是閱讀的美好時光" — mooInk section heading (experience-framed). (verified live 2026-06-17, readmoo.com/mooink-series)
• "Readmoo讀墨電子書 ─ 台灣最大繁體中文EPUB電子書服務" — store page title (scope + identity claim). (verified live 2026-06-17, readmoo.com)

Forbidden register: aggressive discount urgency, spec-sheet-first framing, undefined jargon, exclamation-heavy hype. Reading is presented as a pleasure, not a transaction.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Readmoo Cyan (#40c8f7)
• CTA Hover: Dark Cyan (#0092c2)
• Secondary commerce: Salmon (#e98192)
• Store canvas: Off-white (#fafafa)
• Card / product canvas: White (#ffffff)
• Grey surface: (#f2f2f2)
• Heading / body text: Ink (#212529) / Body Grey (#4a4a4a)
• Muted text: (#666666)
• Hairline: (#dddfe1)
• Sale: Red (#dc3545) · Stock: Green (#28a745)
• Tint panel: Cyan Tint (#c2f0ff)

Example Component Prompts

• "Create a bookstore hero on off-white (#fafafa). Search field: white #ffffff, 1px #dddfe1 border, 4px-left radius, fused to a cyan #40c8f7 search button (white text, right-rounded 4px). Below it a serif category tab row in Songti TC 20px/700: inactive #666666, active #333333 with a #f2f2f2 fill and a 2px #40c8f7 bottom border."
• "Design a mooInk product hero: white background, 44px PingFangTC weight 700 headline #212529. Primary pill CTA: #40c8f7 background, white text, 25px radius, 6px/12px padding, hover #0092c2. Secondary cart pill: #e98192 background, white text, 25px radius."
• "Build a feature card: white #ffffff, 1px solid #dddfe1 border, 4px radius, no shadow. Body 16px PingFangTC #4a4a4a, line-height 1.5. Add a sale badge: #dc3545 background, white text, 3px radius, 1px/6px padding."
• "Create a cyan-tint callout panel: #c2f0ff background, #212529 text, 4px radius. Title 32px PingFangTC weight 700."

Iteration Guide

1. Cyan (#40c8f7) is the single primary action — don't spread it; hover goes to #0092c2
2. Salmon (#e98192) is the secondary commerce/cart voice only
3. No shadows — separate with #f2f2f2/#e8e8e8 surfaces and #dddfe1 hairlines
4. Category tabs are serif (Songti TC); everything else is the PingFangTC CJK sans stack
5. Off-white #fafafa store canvas, white #ffffff product/card surfaces
6. Text is warm charcoal #4a4a4a (store) / near-black #212529 (product), never pure black
7. Pills are 25px; search/register/badges keep sharp 3–4px corners

---

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #40c8f7 measures 1.94:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-register. Text #ffffff on #40c8f7 measures 1.94:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-secondary. Text #ffffff on #e98192 measures 2.62:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, search-button. Text #ffffff on #40c8f7 measures 1.94:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, stock-badge. Text #ffffff on #28a745 measures 3.13:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.