Books.com.tw (博客來) DESIGN.md

Design System Inspiration of Books.com.tw (博客來)

Overview

Visual Theme & Atmosphere

Books.com.tw, known as 博客來, began in 1995 and has expanded from books into a broader online retail platform. Its company page connects reading and everyday life through the brand expression “Book Your Life” and a positioning that joins digital technology with physical services. Company and history.

The desktop storefront expresses that breadth through dense category lists, a white canvas, green search and navigation, red merchandising ink, illustrated campaigns and a character beside the logo. The green shell remains visually distinct from the multicolour promotional artwork. These are observations of the captured homepage, rather than a published brand manual. The measured homepage is the Traditional Chinese edition at www.books.com.tw/, with HTML lang="zh-TW"; the capture did not redirect to another regional path.

Its recent expansion extends reading across formats and locations. A 2025 announcement attributed to 博客來 on the group's official uniopen site describes the BooksPad reader, its first 24-hour physical bookstore at DREAM PLAZA, electronic and audio reading, and online orders collected in store. Official anniversary announcement, 2025-08-08.

Primary tasks

• Search the catalogue with a category selector and search field.
• Browse books, digital reading, household goods and other merchandise through category links.
• Follow product-title links and discover promotions or membership benefits.

Brand Narrative

An online bookstore founded in 1995 now connects a broad retail catalogue with digital reading hardware and a physical bookstore. Reading remains explicit in the company's positioning and in its BooksPad and store expansion. Company history, official expansion announcement.

Principles

The company states a mission centred on simple, reassuring and innovative service. The measured reference expresses its visible hierarchy through green wayfinding, compact catalogue text and a distinct orange product-link state. The visual interpretation is based on this capture; it is not presented as an official design-principles document. Company mission.

Personas

No personas or user-research findings were verified.

Colors

These role names describe measured literals; they are not names recovered from a Books.com.tw token API. The survey exposed no root or declared custom properties and could not inspect two cross-origin stylesheets. There is no verified first-party custom-property namespace to reproduce.

The paragraph census contains 442 red, 19 black and three rgb(130, 130, 130) entries. It does not justify treating the most frequent paragraph colour as the ink for every text role. The foreground above is tied to the specific black labels and black paragraphs measured.

Typography

• Official product use: no product text typeface was documented by the first-party narrative pages opened for this reference.
• Live-loaded: the census reports only icon_01 normal normal. This is an icon face; it is not a verified prose or UI text family.
• Official distributed assets: the site-linked icon stylesheet declares icon_01 and relative icon_01.woff, icon_01.ttf and icon_01.eot sources. The stylesheet was read; font binaries and their licence were not opened.
• Declared-only text faces: body and button CSS name Helvetica, Arial, "Microsoft JhengHei", 微軟正黑體, sans-serif. Survey controls also include a Verdana declaration on the shopping-cart link. None of these text faces appears in the census's loaded-face list. There was no sampled H1 family (null).
• Unresolved: actual rendered text faces and per-script glyph selection. No text-family token or font specimen is supplied. Substitute: none chosen.

The verified dimensions remain usable independently of family identification:

Letter spacing is normal on all six measured controls. The product title wraps to two lines in a 280×54px anchor.

Layout

At the measured 1440×1000 viewport, the content spans 1180px from x=123 to x=1303. The initial utility header is 40px high. Search sits above the main merchandising area; the search selector, input and submit button are each 38px high inside their shared wrapper.

The hero combines a tall left category list with a wide campaign carousel to the right. Promotional and membership tiles continue below it. This is a dense browsing surface: retain the category hierarchy, compact link rows and separate campaign artwork when using this reference. These layout observations describe the captured desktop, not a breakpoint specification.

Responsive Behavior

Mobile layouts, breakpoints and touch states were not measured; this reference covers desktop 1440×1000 only.

Elevation & Depth

The six measured control surfaces and their three compared ancestor levels have no box shadow. The viewport also shows raised category-panel and floating support surfaces, but their shadow values were not extracted. No elevation scale is defined.

Motion & Easing

All six control identities report the raw computed transition all 0s ease 0s. No non-zero duration or custom easing curve was measured on these controls. The campaign carousel's motion timing was not measured.

---

First-party evidence was opened before browser probing. Product values come from the homepage survey and states captures dated 2026-11-06; company narrative comes from the linked company, membership and official group-news pages. The legal footer on an opened catalogue page names 博客來數位科技股份有限公司 and gives its address in Taiwan. Full provenance, raw values and collection limitations are in verification.md and report.md.

Components

The reproducible state-bearing component is the product-title link “覺醒的你：暢銷百萬，歐普拉的床頭靈修書”: a 280×54px anchor with 0px radius, 0px padding, no border or shadow, and 18px/400 text at 27px line height. Its own background is transparent, visually on the white page canvas. Rest ink is #000000; hover and pressed ink is #ef7a31. Pressed adds no change beyond hover. Keyboard focus did not change the compared visual properties. This anchor is the title inside the card, not a measurement of the whole card container.

Other controls provide geometry references but no authored state variant was observed, so they are described here without machine component declarations:

All six controls had border: none and shadow: none at rest. The shared search wrapper supplies the green border. The selector's left corners and submit button's right corners have different measured radii; preserve their corner-specific geometry.

States

“No compared visual change” is limited to self and its pseudo-elements, descendants and their pseudo-elements, and three ancestor levels and their pseudo-elements. Descendant counts are 3 for search submit (one SVG, one circle and one rect), 2 for the category selector (one empty), 1 for the utility link (empty icon layer), and 0 for the other three controls. The probe checks computed paint, border, outline, shadow, opacity, transform, filter, visibility, size, decoration, background and mask properties, image sources and SVG internals where present. Siblings and rendered pixels are outside this comparison.

Each measured hover has :hover true and each measured press has :active true. Focus was reached by real Tab and had :focus-visible true. Outlines were none, with no measured visual focus change or persistent visual change after blur. No focus or disabled token is defined. The first utility-link pointer pass was UNMEASURED because of the fixed header; the second call measured it successfully without hiding overlays.

Do's and Don'ts

• Keep green search/navigation, black catalogue labels and orange product-link interaction as separate observed roles.
• Use the measured corner-specific search geometry and compact typography metrics.
• Keep campaign artwork visually rich while preserving clear category and product labels.
• Do not turn a CSS font declaration into a loaded product font or specimen.
• Do not extend the product title's orange interaction to unmeasured controls.

Voice & Tone

The company expression “Book Your Life” links reading with daily living. The storefront uses direct shopping labels such as “全部” and “看會員分級辦法”. The official 2026 membership page also uses “Book Your Life” alongside practical benefits and rewards. Membership page.

Agent Prompt Guide

Build a white, densely organised Traditional Chinese retail surface with green #12ae57 search and category navigation. Use a 100×38px category selector, 330×38px input and 48×38px submit button, preserving their individual padding and asymmetric corners. Give the sampled product-title link 18px/400 text at 27px line height, 0px padding and radius, and a black-to-#ef7a31 foreground change on hover and press. Text-family selection is unresolved; no substitute is chosen.