--- id: eslite name: 誠品 country: TW category: ecommerce homepage: "https://www.eslite.com/" primary_color: "#917e57" logo: type: favicon slug: "https://www.google.com/s2/favicons?domain=eslite.com&sz=128" verified: "2026-07-13" omd: "0.1" verification_v2: schema: 2 checked: "2026-07-13" surfaces: - { id: home, kind: public-product-web, url: "https://www.eslite.com/", inspected: "2026-07-13" } - { id: brand-directory, kind: public-product-catalog, url: "https://www.eslite.com/brand", inspected: "2026-07-13" } - { id: expo-brand, kind: public-brand-catalog, url: "https://www.eslite.com/brand/1098", inspected: "2026-07-13" } sources: - { id: home-live, kind: product-surface, url: "https://www.eslite.com/", captured: "2026-07-13" } - { id: brand-directory-live, kind: product-surface, url: "https://www.eslite.com/brand", captured: "2026-07-13" } - { id: expo-brand-live, kind: product-surface, url: "https://www.eslite.com/brand/1098", captured: "2026-07-13" } - { id: corporate-ideals, kind: official-doc, url: "https://www.eslitecorp.com/eslite/index.jsp?func_id=fee3ba0215&site_id=eslite_tw", captured: "2026-07-14" } - { id: corporate-founder, kind: official-doc, url: "https://www.eslitecorp.com/eslite/index.jsp?func_id=20f9eec115&site_id=eslite_tw", captured: "2026-07-14" } - { id: japan-cultural-bridge, kind: official-doc, url: "https://meet.eslite.com/tw/tc/article/201909260001", captured: "2026-07-14" } - { id: anniversary-35, kind: official-doc, url: "https://meet.eslite.com/tw/tcr/article/202411040002", captured: "2026-07-14" } - { id: expo-platform, kind: product-surface, url: "https://www.eslite.com/brand/1098", captured: "2026-07-14" } conflicts: [] claims: "tokens.colors.accent": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.colors.canvas": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.colors.foreground": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.colors.muted": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.colors.hairline": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.typography.body.size": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.typography.body.weight": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.typography.body.lineHeight": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.typography.body.use": { surface_id: home, source_id: home-live, method: supplied-selector-provenance, captured: "2026-07-13" } "tokens.typography.compact-control.size": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.typography.compact-control.weight": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.typography.compact-control.lineHeight": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.typography.compact-control.use": { surface_id: home, source_id: home-live, method: supplied-selector-provenance, captured: "2026-07-13" } "tokens.spacing.search-y": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.spacing.search-x": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.spacing.search-leading": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.rounded.square": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.rounded.search-left": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.public-search-input.type": { surface_id: home, source_id: home-live, method: supplied-selector-provenance, captured: "2026-07-13" } "tokens.components.public-search-input.bg": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.public-search-input.fg": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.public-search-input.border": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.public-search-input.radius": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.public-search-input.padding": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.public-search-input.height": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.public-search-input.font": { surface_id: home, source_id: home-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.public-search-input.states": { surface_id: home, source_id: home-live, method: supplied-static-state-samples-without-interaction, captured: "2026-07-13" } "tokens.components.public-search-input.use": { surface_id: home, source_id: home-live, method: supplied-selector-provenance, captured: "2026-07-13" } "tokens.components.expo-product-card.type": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-provenance-and-classification, captured: "2026-07-13" } "tokens.components.expo-product-card.bg": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.expo-product-card.fg": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.expo-product-card.border": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.expo-product-card.radius": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.expo-product-card.padding": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.expo-product-card.height": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.expo-product-card.font": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-backed-computed-style, captured: "2026-07-13" } "tokens.components.expo-product-card.use": { surface_id: expo-brand, source_id: expo-brand-live, method: supplied-selector-provenance, captured: "2026-07-13" } tokens: source: reconciled extracted: "2026-07-13" note: "Only supplied selector-backed public commerce values are tokens. Corporate, editorial, anniversary, and unresolved-font evidence is retained as context rather than promoted into product UI tokens." colors: accent: "#917e57" canvas: "#ffffff" foreground: "#212529" muted: "#999999" hairline: "#cccccc" typography: body: { size: 16, weight: 400, lineHeight: "24px", use: "Repeated public commerce text and product-card samples; the computed Noto Sans TC stack is unresolved and is not a named Eslite UI-family token." } compact-control: { size: 14, weight: 500, lineHeight: "20px", use: "Observed compact public header control only; no complete control type scale is claimed." } spacing: { search-y: 6, search-x: 12, search-leading: 16 } rounded: { square: 0, search-left: 8 } components: public-search-input: { type: input, bg: "#ffffff", fg: "#999999", border: "1px 0px 1px 1px #cccccc", radius: "8px 0px 0px 8px", padding: "6px 12px 6px 16px", height: "40px", font: "16px / 400 / 24px / unresolved computed stack", states: "default geometry observed on home, brand directory, and expo brand pages; static focus and pressed samples are present, while interactionCount is 0", use: "Public search text input; selector home::[data-omd-capture=11]." } expo-product-card: { type: card, bg: "#ffffff", fg: "#212529", border: "0px rgba(0, 0, 0, 0.176)", radius: "0px", padding: "0px", height: "270px", font: "16px / 400 / 24px / unresolved computed stack", use: "Public expo-brand product-card shell; selector surface-3::[data-omd-capture=91]." } components_harvested: true --- # Design System Inspiration of 誠品 ## 1. Visual Theme & Atmosphere 誠品 began as a Taiwan cultural-bookstore project and has developed into an ecosystem spanning books, design goods, food, events, physical stores, and online commerce. Its own 35th-anniversary material presents the current chapter as “Live your Dream”: encounters and small stories are described as momentum toward a better everyday life. The public commerce evidence supplied here gives that cultural proposition a restrained interface expression. White fields, dark reading text, narrow gray hairlines, square product-card shells, and a quiet gold `#917e57` search accent keep dense retail choice legible rather than theatrical. The result feels editorial and calm: the interface makes room for books, objects, and maker stories to carry the visual interest. This is a reference for the captured public Eslite Online, brand-directory, and expo brand-catalog routes—not a claim about member, checkout, native-app, or physical-store systems. **Key characteristics:** - A white `#ffffff` public canvas and dark `#212529` product text carry the baseline information hierarchy. - Gold `#917e57` is observed on the public search submit control; it is not established as a universal checkout or status color. - Public product cards are square, flat `#ffffff` shells rather than rounded elevated tiles. - The supplied artifact records 3 public surfaces and no captured interaction events; component geometry remains useful, while unobserved behaviors remain absent. ## 2. Color Palette & Roles ### Selector-backed public commerce colors - **Search Accent** (`#917e57`): observed on the public search submit control on all supplied routes. - **Canvas** (`#ffffff`): repeated public search-field and product-card background. - **Foreground** (`#212529`): repeated public list and product-card text. - **Muted Input Text** (`#999999`): default empty search-field text sample; do not apply it as a general metadata token. - **Hairline** (`#cccccc`): observed search-input edge and list divider sample. ### Evidence-domain boundary The homepage, brand directory, and expo catalog are public commerce surfaces. Corporate ideals, founder/history pages, anniversary editorials, and the cultural narrative around physical stores are valuable brand context but do not extend this selector-backed palette. The supplied packet also contains browser-default-looking blue link observations; they are not promoted as an Eslite brand or action token. ## 3. Typography Rules ### Evidence classes | Evidence class | Family and boundary | |---|---| | Official product-use | No reviewed first-party source establishes a named type family for the captured public commerce routes. | | Live computed surface-use | The visible stack begins `Noto Sans TC`, followed by PingFang TC, 蘋方體, Microsoft JhengHei, and system fallbacks. The packet labels `Noto Sans TC` unresolved because it has no matching loaded FontFace or source URL. It is not promoted as an Eslite UI-family token. | | Official distributed brand asset | No first-party distributed Eslite type asset or license was located in this pass. | | Declared-only | `swiper-icons` has an `@font-face` declaration but no visible use. It is icon infrastructure, not body typography. | | Unresolved | `NotoSerifCJKtc` has one unresolved text use. Its single observation and missing source corroboration do not establish a display family. | ### Captured hierarchy | Role | Family boundary | Size | Weight | Line height | Evidence boundary | |---|---|---:|---:|---:|---| | Public body/product text | unresolved Traditional-Chinese system stack | 16px | 400 | 24px | repeated public commerce text, lists, and cards | | Compact public control | unresolved Traditional-Chinese system stack | 14px | 500 | 20px | compact public header-control sample only | | Empty search field | unresolved Traditional-Chinese system stack | 16px | 400 | 24px | public search input sample only | Do not render a system fallback as though it were an Eslite-owned typeface. The documented hierarchy is an observed public-stack boundary, not a font-license or browser-specimen claim. ## 4. Component Stylings ### Public search **Search Text Input** - Background: `#ffffff` - Text: `#999999` - Border: 1px 0px 1px 1px `#cccccc` - Radius: 8px 0px 0px 8px - Height: 40px - Padding: 6px 12px 6px 16px - Font: 16px / 400 / 24px / unresolved computed stack - State: Default geometry is observed on all three supplied public routes. Static focus and pressed samples are retained; `interactionCount: 0` means no state transition, error, disabled, or submit behavior is claimed. - Use: Public search text input; selector `home::[data-omd-capture="11"]`. ### Public expo catalog **Product Card Shell** - Background: `#ffffff` - Text: `#212529` - Border: 0px `rgba(0, 0, 0, 0.176)` - Radius: 0px - Height: 270px - Padding: 0px - Font: 16px / 400 / 24px / unresolved computed stack - Use: `deep-base-product-card ec-card e-banner-product card-block` on the public expo brand catalog; selector `surface-3::[data-omd-capture="91"]`. ### Scope boundary The input and card above are the selector/surface-backed components promoted from the supplied artifact. The card is a detector-classified card shell despite being implemented as an anchor; it is not recast as a generic button. Other detected anchors and rows are retained as raw evidence only because their semantics or variants are not sufficiently established. The supplied artifact records `interactionKinds: 0` and `interactionCount: 0`; no hover, focus transition, pressed transition, disabled, dialog, toast, tab, validation, or authenticated component state is inferred. --- **Verified:** 2026-07-13 **Tier 1 sources:** https://www.eslite.com/ ; https://www.eslite.com/brand ; https://www.eslite.com/brand/1098 ; https://www.eslitecorp.com/eslite/index.jsp?func_id=fee3ba0215&site_id=eslite_tw ; https://www.eslitecorp.com/eslite/index.jsp?func_id=20f9eec115&site_id=eslite_tw ; https://meet.eslite.com/tw/tc/article/201909260001 ; https://meet.eslite.com/tw/tcr/article/202411040002 **Tier 2 sources:** https://getdesign.md/eslite (attempted 2026-07-14; built-in retrieval safe-open error, no values used); https://styles.refero.design/?q=eslite (attempted 2026-07-14; built-in retrieval safe-open error, no values used) **Conflicts unresolved:** none ## 5. Layout Principles The supplied routes support a public commerce layout with a compact search strip, information-dense lists, and repeatable product-card shells. The search field measures 40px high with 6px vertical, 12px trailing, and 16px leading padding. The evidence also repeats zero-radius card geometry and a 270px card height in the expo catalog. Those are local measurements, not a universal grid, breakpoint, mobile, or checkout-layout specification. ## 6. Depth & Elevation The promoted public components are flat: the search field and product card both report `box-shadow: none`. The product-card sample uses a zero-width `rgba(0, 0, 0, 0.176)` border color, so it is not evidence for a visible card stroke. No popover, modal, menu, or elevated-shadow treatment is published from this packet. ## 7. Do's and Don'ts ### Do - Keep the captured public commerce canvas white with `#212529` as the main reading color. - Reserve the observed `#917e57` treatment for the local search/control context until another selector-backed role is available. - Keep the sampled product-card shell square, flat, and content-led. - Preserve readable Traditional-Chinese fallback coverage while labelling the stack honestly as unresolved rather than proprietary. - Let books, goods, makers, and editorial content carry the visual richness; keep supporting commerce chrome restrained. ### Don't - Do not turn browser-default blue links into an Eslite action palette. - Do not represent Noto Sans TC, NotoSerifCJKtc, PingFang, or Microsoft JhengHei as a licensed Eslite brand font. - Do not spread the 8px left-only search radius to product cards. - Do not add hover, focus, pressed, disabled, error, loading, dialog, toast, or checkout behavior that the supplied interaction record does not establish. - Do not use anniversary, store, or corporate-culture imagery as product tokens without public commerce-surface evidence. ## 8. Responsive & Interaction Notes This packet contains three supplied desktop public-surface records and no interaction capture. The 40px search input and 270px product-card sample are measured components, not accessibility-target or breakpoint rules. Static focus and pressed input samples exist, but without an interaction event they do not establish a transition contract. Responsive layouts, menu expansion, cart behavior, checkout, and member states are absent. ## 9. Implementation Notes For an Eslite-inspired public catalog surface, begin with a white field, compact 16px/400 reading text, narrow gray edges, and content-led square cards. Use the gold `#917e57` only where the captured search-control context calls for it. Keep the public search geometry exact where it is reused: 40px height; 6px 12px 6px 16px padding; 8px 0px 0px 8px radius. Treat official cultural language as editorial direction, not authorization to create a new checkout, membership, or interaction system. ## 10. Voice & Tone Eslite’s first-party anniversary and cultural-platform language is reflective, welcoming, and specific about encounters, culture, and everyday life. It can invite exploration without manufacturing urgency. The voice is best used to name a cultural object, maker, place, or experience and then leave space for the reader’s own interpretation. | Do | Don't | |---|---| | Use calm invitations to discover books, objects, stories, and cultural exchange. | Use scarcity pressure or hard-sell retail hyperbole as the default tone. | | Connect a product or activity to lived context when the source provides it. | Claim a universal personal transformation from a purchase. | | Keep language inclusive and open-ended. | Speak as though all audiences share the same taste, schedule, or cultural background. | | Let detail support curiosity. | Overload a quiet editorial surface with promotional exclamation. | **Voice samples** - “Live your Dream” — official 35th-anniversary campaign line. - “每個精彩可期的相遇，每間店可愛有趣的小故事” — official anniversary framing for the encounters and stories that sustain the brand’s future direction. - “讓人文、藝術與創意融入於你我的生活” — official Eslite life/platform expression. ## 11. Brand Narrative Eslite’s current cultural-commerce identity joins reading with a broader everyday-life proposition. The company’s public online surface moves across books, stationery and creative goods, clothing, beauty, food, home, and brand platforms, while its corporate site exposes dedicated pages for ideals, founder story, operating scope, and development history. The first-party 35th-anniversary materials frame this long-running project as continuing toward better everyday life through anticipated encounters and small stories. [Eslite Online](https://www.eslite.com/) and [35th-anniversary feature](https://meet.eslite.com/tw/tcr/article/202411040002) The cultural premise is active beyond a storefront. Eslite’s account of its Japanbridge opening says it hoped to serve as a cultural bridge between Taiwan and Japan, with reading, events, Taiwanese makers, and local exchange gathered in one place. Its expo platform describes bringing humanities and art into life through creative perspectives and an environment for cultural-design brands. [Japan cultural-bridge feature](https://meet.eslite.com/tw/tc/article/201909260001) and [expo platform](https://www.eslite.com/brand/1098) The 35th-anniversary “Live your Dream” programme is the present evolution recorded in this reference. It provides narrative and voice context, but it does not turn campaign expression into an unmeasured online-commerce component or token. [35th-anniversary feature](https://meet.eslite.com/tw/tcr/article/202411040002) ## 12. Principles 1. **Make culture encounterable.** Eslite’s official material repeatedly frames value in encounters among reading, art, creative work, and daily life. *UI implication:* present the object, maker, and cultural context clearly before adding commerce prompts. 2. **Let a place hold multiple practices.** The Japan cultural-bridge feature combines books, events, Taiwanese products, food, and exchange rather than reducing the experience to one category. *UI implication:* use clear category structure and preserve the distinct purpose of each section. 3. **Treat daily life as a cultural medium.** The expo platform connects humanities and art to ordinary living through design goods and creative perspectives. *UI implication:* pair editorial description with product information where the source supports that relationship; do not fabricate provenance. 4. **Invite without forcing a conclusion.** The anniversary programme foregrounds dreams, stories, and future-facing encounters. *UI implication:* use an open, calm CTA and avoid false scarcity or an assumed emotional outcome. ## 13. Personas The reviewed Eslite material identifies public participant groups and settings but does not provide behavioural-research personas. They are preserved without invented demographics, tasks, or motivations: - **Readers and visitors.** The Japan feature addresses readers through reading, cultural, and event experiences. - **Taiwan cultural-design brands and makers.** The expo platform says it offers a development and exchange setting for cultural-design workers and brands. - **People seeking cultural and everyday-life encounters.** The anniversary material frames stores and stories as part of a better future everyday life. No named customer persona, journey, spending pattern, or conversion behavior is asserted. ## 14. States No empty, loading, error, success, skeleton, disabled, validation, or transition state is published from the supplied product evidence. The artifact reports `interactionKinds: 0` and `interactionCount: 0`; only the measured default component geometry and the explicitly retained static input samples are documented. ## 15. Motion & Easing No first-party motion duration, easing curve, reduced-motion policy, or event transition was present in the supplied packet. No motion token is published for 誠品 in this reference. --- Source: https://oh-my-design.kr/design-systems/eslite · Raw twin of references/eslite/DESIGN.md Install 440 quality-graded references for your AI coding agent: npx oh-my-design-cli install-skills