SHOPLINE DESIGN.md

Design System Inspiration of SHOPLINE

Overview

Visual Theme & Atmosphere

SHOPLINE presents itself as a bright, optimistic, merchant-friendly commerce platform built for the Taiwan and Hong Kong markets — its homepage opens on a clean white canvas (#ffffff) with a confident, saturated royal blue (#356dff) doing almost all of the brand work. Where Stripe whispers in light-weight type, SHOPLINE speaks in bold weight-700 Traditional-Chinese headlines, fully-rounded pill buttons, and gentle light-blue section washes. The atmosphere is approachable SaaS-for-shopkeepers: trustworthy enough that a small business owner believes their store and money are safe, friendly enough that a first-time entrepreneur feels invited in. The tagline "全方位零售整合專家" (all-in-one retail integration expert) sets the register — capable, comprehensive, but never intimidating.

The defining typographic choice is Noto Sans TC, Google's Traditional-Chinese sans-serif, run at weight 700 for every headline and CTA. This is the opposite of the boutique custom-font approach: SHOPLINE deliberately uses a free, ubiquitous, perfectly-legible CJK typeface because legibility across thousands of merchant-uploaded product names, in 繁體中文, at every screen size, matters more than a bespoke letterform. Headlines run large (48px hero, 40px sections) and heavy, with normal letter-spacing — Chinese characters do not benefit from the negative tracking that Latin display type uses.

The color story is two-note and disciplined: SHOPLINE Blue (#356dff) as the single hero/interactive accent, and a deep ink navy (#00142d) that does triple duty as heading color, body text color, and the background of immersive dark sections. Between them sit two barely-there light-blue surface tints (#edf4fd, #f2f7fc) that segment the long marketing page into rhythmic bands without ever introducing a competing hue. Shadows are soft, neutral, and low-contrast (rgba(0,0,0,0.08)), keeping the page feeling light and airy rather than heavily layered.

Key Characteristics:

• Noto Sans TC at weight 700 for all headlines and CTAs — legibility-first CJK typography
• A single saturated brand blue (#356dff) carries every CTA, link, and interactive accent
• Fully-rounded 30px pill buttons everywhere — the signature shape of the system
• Deep ink navy (#00142d) used for headings, body, and dark immersive sections alike
• Light-blue surface tints (#edf4fd, #f2f7fc) band the page into calm rhythmic sections
• Soft, neutral, low-alpha shadows (rgba(0,0,0,0.08)) — airy, not heavy
• Bright white canvas (#ffffff) as the default ground; navy as the dramatic counterpoint

Primary tasks

• Open an online store and run it without technical setup
• Add the first product to a store with nothing in it
• Check whether any orders have come in yet
• Manage hundreds of product listings in Traditional Chinese
• Keep stock in sync between the online store and the shop floor

Brand Narrative

SHOPLINE is a commerce / online-store SaaS platform serving the Greater China region, with a strong presence in Taiwan (台灣) and Hong Kong (香港) and across Southeast Asia. It gives merchants — from solo creators to established brands — an all-in-one toolkit to open and run an online store: storefront building, product and inventory management, payments, marketing, and increasingly omni-channel (online + physical retail, social commerce) integration. The Taiwan-facing brand promise, "全方位零售整合專家" (all-in-one retail integration expert) and "完整開店功能讓你的生意不斷成長" (complete store-opening features to keep your business growing), positions SHOPLINE as the partner that handles the technical complexity so the merchant can focus on selling.

What SHOPLINE embraces: accessibility for first-time店主, breadth of features under one roof, and a bright, trustworthy, friendly design language. What it rejects: the intimidating, developer-first or enterprise-procurement feel of platforms built for engineers — SHOPLINE's audience is shopkeepers, not staff engineers, and the design reflects that through bold legible type, friendly pill shapes, and a single calm blue.

The design system encodes this positioning directly: weight-700 Noto Sans TC for maximum legibility across merchant content in 繁體中文, fully-rounded pill buttons that read as friendly and approachable, a single confident blue (#356dff) that signals trust, and soft airy shadows that keep the experience light rather than heavy. Light-blue washes and navy immersive bands give the long marketing page rhythm without ever introducing a competing color.

Note: brand-history specifics beyond the publicly observable TW/HK commerce-SaaS positioning are not independently verified here; claims above are grounded in the live zh-TW homepage and regional brand-owned sources.

Principles

1. Legibility before personality. A free, ubiquitous CJK font (Noto Sans TC) at bold weight 700 means merchant-supplied product names and marketing copy are always perfectly readable. The brand's personality lives in color and shape, not exotic letterforms.
2. One blue, used decisively. A single accent (#356dff) carries every CTA, link, and highlight. Restraint reads as trustworthy; a rainbow of accents would read as cheap.
3. Friendly geometry. The 30px pill is a deliberate emotional choice — rounded shapes feel approachable and safe to a small-business owner trusting the platform with their livelihood.
4. Airy, never heavy. Soft 0.08-alpha shadows and pale tints keep the interface light. Heaviness would feel like enterprise software; lightness feels attainable.
5. Bands give rhythm. Alternating white / light-blue / navy sections turn a long sales page into a scannable, paced experience.
6. Navy, not black, for text. Ink navy (#00142d) is softer and warmer than pure black, reinforcing the friendly-but-trustworthy register.
7. Merchant-first, not engineer-first. Every design decision favors the non-technical store owner: clear CTAs, big readable type, no intimidating density.

Personas

Personas below are fictional archetypes informed by publicly observable SHOPLINE user segments (first-time online sellers, established TW/HK retail brands, social-commerce sellers, omni-channel merchants), not individual people.

陳怡君 (Chen Yi-Chun), 29, Taipei. Runs a handmade-accessories side business on Instagram and wants a real online store. Not technical. Chose SHOPLINE because the free trial let her open a storefront in an afternoon and the bold, clear Chinese interface never made her feel lost. The friendly pill buttons and "免費試用" everywhere lowered her fear of committing.

Marcus Wong, 41, Hong Kong. Operations lead at an established apparel brand expanding from physical retail into omni-channel. Values SHOPLINE's integration breadth — inventory synced across online and in-store. Trusts the calm, professional blue-and-navy design as a signal that the platform is serious infrastructure, not a toy.

林家豪 (Lin Chia-Hao), 34, Taichung. Sells specialty coffee equipment and runs marketing campaigns himself. Reads SHOPLINE's blog (blog.shopline.tw) for e-commerce how-tos. Appreciates that the dashboard's readable weight-700 headings and generous spacing make managing hundreds of SKUs in 繁體中文 painless.

Priya Nair, 27, Singapore. Social-commerce seller scaling a beauty brand across Southeast Asia. Picked SHOPLINE for its regional reach and the approachable onboarding. The bright, trustworthy visual language reassured her customers at checkout.

Colors

Primary

• SHOPLINE Blue (#356dff): The primary brand color. Fills primary CTA buttons, colors outlined-button text and borders, and marks links and interactive accents. A saturated royal blue that reads energetic and trustworthy.
• Ink Navy (#00142d): The workhorse dark. Heading text, body text, dark-section backgrounds, and the navy CTA variant. Not pure black — a very deep desaturated blue-navy that feels softer and more premium than #000000.
• Pure White (#ffffff): Page background, card surfaces, primary-CTA text, and the fill of outlined buttons.

Surface & Section Tints

• Surface Tint (#edf4fd): A pale blue wash used for alternating section backgrounds and feature bands — keeps the page on-brand without a second hue.
• Surface Mist (#f2f7fc): An even lighter blue-gray surface for subtle cards and secondary bands.
• Dark Section (#00142d): Full-bleed navy sections (hero band, footer, immersive feature blocks) with white text reversed out.

Text

• Heading (#00142d): All headings on light backgrounds.
• Body (#00142d): Standard reading text and captions share the same ink navy.
• On Dark (#ffffff): Headings and body text reversed out on navy sections.

CTA & Accent Variants

• Primary Ink (#ffffff): Text color on the blue primary button.
• CTA Black (#000000): A pure-black pill variant used for the compact header "免費試用" (free trial) button — higher contrast against the white sticky nav.

Borders & Hairlines

• Hairline (#d6d6d6): Neutral gray for dividers, input borders, and subtle separators.

Shadow Colors

• Card Shadow (rgba(0,0,0,0.08)): The standard soft neutral shadow for elevated cards.
• Float Shadow (rgba(0,0,0,0.08)): Same alpha, wider blur (24px) for floating/popover elements.
• Soft Shadow (rgba(200,200,200,0.27)): A tiny offset gray shadow for low-lift chips and small elements.

Typography

Font Family

• Primary: Noto Sans TC, with fallback stack -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
• Script coverage: Traditional Chinese (繁體中文) first-class, Latin secondary. Both share the Noto Sans TC family for visual consistency between Chinese product/marketing copy and Latin numerals or brand names.
• No custom font: SHOPLINE intentionally uses a free, broadly-available CJK font — the priority is universal legibility of merchant-supplied content, not a proprietary letterform.

Hierarchy

Principles

• Bold weight as authority: Weight 700 on every headline and CTA is SHOPLINE's signature — the opposite of the light-weight luxury convention. Heavy type reads as clear, confident, and reassuring to merchants.
• Two-weight system: 700 for everything that should command attention (headings, CTAs), 400 for everything readable (nav, body, captions). There is no in-between medium weight in the marketing chrome.
• Normal tracking for CJK: Letter-spacing stays normal — Traditional-Chinese glyphs are designed on a fixed em square and do not take the negative tracking Latin display type uses.
• Generous CJK line-height: Body runs at 1.5 and captions at ~1.85 line-height, giving dense Chinese characters room to breathe and stay legible.
• Legibility over personality: The deliberate choice of Noto Sans TC means the brand personality lives in color, shape (pills), and weight — never in exotic letterforms.

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, with ~80px between major marketing sections
• Generous vertical rhythm between bands keeps the long homepage scannable

Grid & Container

• Centered single-column hero with large bold headline and a pair of pill CTAs
• Feature sections use 2–3 column card grids on light-blue washes
• Full-bleed navy sections for immersive hero/feature moments
• Comfortable max content width with generous side gutters

Whitespace Philosophy

• Airy and calm: Low-alpha shadows and pale tints keep the page feeling light, never heavy or dense.
• Banded rhythm: White / light-blue / navy bands alternate down the page, giving a clear visual cadence that helps a long sales page stay legible.
• Breathing room for CJK: Generous line-height and padding give Traditional-Chinese text room, since dense characters need more air than Latin.

Border Radius Scale

• Pill (30px): every button — the defining shape
• Small (3px): tags, inline chips
• Standard (6px–8px): cards, inputs
• Large (9px): larger panels
• Full (50% / 9999): avatars, circular icon chips

Responsive Behavior

Breakpoints

Touch Targets

• Pill CTAs are 38px–45px tall — comfortably tappable
• Nav links at 16px with generous spacing
• Header free-trial pill always reachable in the sticky nav

Collapsing Strategy

• Hero: 48px headline scales down on mobile, weight 700 maintained
• Navigation: horizontal links → hamburger toggle, header CTA pill persists
• Feature cards: 3-column → 2-column → single stacked column
• Navy/tinted bands keep full-bleed treatment, reduce internal padding on mobile
• Section spacing compresses (~80px → ~40px) on mobile

Image Behavior

• Product/dashboard screenshots maintain soft card shadow at all sizes
• Cards keep consistent 8px radius
• Pill buttons keep 30px radius regardless of width

Elevation & Depth

Shadow Philosophy: SHOPLINE keeps elevation deliberately gentle. Shadows are neutral (gray/black at only 0.08 alpha), never tinted or dramatic. The intent is an airy, trustworthy, low-friction feel — depth exists to lift interactive cards just enough to read as tappable, never to create heavy visual drama. Where Stripe makes shadows a branded chromatic signature, SHOPLINE deliberately makes them recede, letting the blue accent and pill shapes carry the brand.

Decorative Depth

• Navy (#00142d) full-bleed sections create depth through color contrast rather than shadow
• Light-blue washes (#edf4fd, #f2f7fc) provide subtle layering between bands

Values kept in prose

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

• shadow.soft: rgba(200,200,200,0.27) 2px 2px 6px 0px
• shadow.card: rgba(0,0,0,0.08) 0px 8px 16px 0px
• shadow.float: rgba(0,0,0,0.08) 0px 4px 24px 0px

Motion & Easing

Durations:

Easings:

Character. Motion is smooth, gentle, and reassuring — in keeping with the airy, friendly atmosphere. Hover states on pill buttons lift subtly (soft shadow grows, slight darken of the blue). Scroll-reveal on marketing bands fades content in gently. No aggressive springs or bounces that would undercut the trustworthy register.

Signature motions.

1. Pill hover. Primary blue pills darken slightly and the soft card shadow grows on hover — a gentle invitation to tap.
2. Band scroll-reveal. As each white/tinted/navy section enters the viewport, its content fades and rises a few pixels using motion-standard / ease-enter.
3. Reduce motion. Under prefers-reduced-motion: reduce, reveals become instant and hover transitions collapse to motion-instant. The interface stays fully functional and calm.

Components

Buttons

All SHOPLINE buttons share one geometry: a 30px fully-rounded pill with weight-700 labels. The system differentiates by fill color and size, not by shape.

Primary (Blue)

• Background: #356dff
• Text: #ffffff
• Radius: 30px (pill)
• Height: 45px
• Padding: 0 24px
• Font: 18px Noto Sans TC weight 700
• Use: Primary marketing CTA — "了解所有方案" (see all plans), "免費試用 14 天" (14-day free trial)

Outlined (Blue-on-White)

• Background: #ffffff
• Text: #356dff
• Border: 1px solid #356dff
• Radius: 30px (pill)
• Height: 45px
• Font: 18px Noto Sans TC weight 700
• Use: Secondary action beside a primary blue CTA — "了解更多" (learn more)

Dark (Navy)

• Background: #00142d
• Text: #ffffff
• Radius: 30px (pill)
• Height: ~44px
• Padding: 8px 24px
• Font: 16px Noto Sans TC weight 700
• Use: High-emphasis booking/conversion CTA — "立即預約 GO!" (book now)

Header CTA (Black)

• Background: #000000
• Text: #ffffff
• Radius: 30px (pill)
• Height: 38px (compact)
• Padding: 0 24px
• Font: 14px Noto Sans TC weight 700
• Use: Always-visible free-trial CTA in the sticky white nav — "免費試用"

Cards & Containers

• Background: #ffffff (or #edf4fd / #f2f7fc on tinted bands)
• Radius: 8px (standard), 6px and 9px also observed for smaller/larger elements
• Shadow (standard): rgba(0,0,0,0.08) 0px 8px 16px 0px
• Shadow (floating): rgba(0,0,0,0.08) 0px 4px 24px 0px
• Shadow (low-lift chip): rgba(200,200,200,0.27) 2px 2px 6px 0px
• Borders kept minimal — elevation comes from soft shadow, not hairlines

Section Bands

• White (#ffffff) is the default ground
• Light-blue washes (#edf4fd, #f2f7fc) alternate to segment the long marketing page
• Navy (#00142d) full-bleed sections for hero and immersive feature blocks, white text reversed out

Navigation

• White (#ffffff) sticky header
• Links: 16px Noto Sans TC weight 400, #00142d ink navy
• Always-visible black pill CTA "免費試用" right-aligned (#000000 fill, 38px tall, 30px radius)
• Clean, horizontal, generous spacing

Inputs & Forms

• Border: 1px solid #d6d6d6 hairline
• Radius: 6px–8px
• Focus: #356dff blue ring/border
• Text & label: #00142d

Avatars & Icons

• Circular (50% radius / 9999 full) for avatars and round icon chips
• Small rounding (3px) for tags and inline chips

---

Verified: 2026-06-08 (omd:add-reference — Tier 1 live inspect) Tier 1 sources: https://shopline.tw, https://blog.shopline.tw (homepage, live DOM getComputedStyle — body, h1, h2, primary/outline/dark/nav CTA buttons, nav links, paragraph text, section backgrounds, shadows) Country sources: https://shopline.tw (official TW site, zh-TW), https://blog.shopline.tw (official TW blog), https://shopline.hk (HK regional sibling), Apple App Store TW listing .verification.md: web/references/shopline/.verification.md

States

Do's and Don'ts

Do

• Use Noto Sans TC at weight 700 for every headline and CTA — bold legibility is the voice
• Make every button a 30px pill — the fully-rounded shape is the signature
• Use SHOPLINE Blue (#356dff) as the single interactive/CTA accent
• Use ink navy (#00142d) for headings, body, and dark sections — never pure black for text
• Band the page with light-blue washes (#edf4fd, #f2f7fc) alternating with white
• Keep shadows soft and neutral (rgba(0,0,0,0.08)) — airy elevation only
• Reverse white text out of #00142d navy for immersive sections
• Give Traditional-Chinese text generous line-height (1.5+) and padding

Don't

• Don't use light/thin font weights for headlines — SHOPLINE is weight 700, bold and clear
• Don't use sharp-cornered or small-radius buttons — pills (30px) are non-negotiable
• Don't introduce a second accent hue — blue is the only brand color, navy and tints support it
• Don't apply heavy, dark, or chromatic shadows — elevation stays soft and neutral
• Don't use pure #000000 for body/heading text — use ink navy #00142d (the black pill is the one exception, reserved for the nav CTA)
• Don't apply negative letter-spacing to Chinese text — CJK glyphs use normal tracking
• Don't crowd CJK type — dense Traditional-Chinese needs breathing room

Do

• Lead with bold weight-700 Noto Sans TC headlines and a single SHOPLINE Blue (#356dff) accent
• Make every button a friendly 30px pill
• Use ink navy (#00142d) for text and dark sections; band the page with #edf4fd / #f2f7fc
• Keep shadows soft and neutral (rgba(0,0,0,0.08)); keep the page airy
• Write merchant-first, encouraging copy with direct CTAs ("免費試用", "了解所有方案")
• Give Traditional-Chinese text generous line-height and normal tracking

Don't

• Don't use thin/light headline weights — SHOPLINE is bold (700)
• Don't use sharp or small-radius buttons — pills only
• Don't add a second brand hue or use heavy/tinted shadows
• Don't use pure black for text (#00142d instead) — the black pill nav CTA is the sole exception
• Don't crowd CJK type or apply negative letter-spacing
• Don't adopt cold enterprise/developer-first tone — the audience is shopkeepers

Voice & Tone

SHOPLINE's voice (in 繁體中文) is encouraging, practical, and merchant-empowering — it speaks to small-business owners and aspiring entrepreneurs as capable partners, not as targets. The positioning line "全方位零售整合專家" (all-in-one retail integration expert) and copy like "讓你的生意不斷成長" (keep your business growing) set a tone that is confident about the platform's breadth while staying warm and accessible. CTAs are direct and action-oriented: "免費試用" (free trial), "了解所有方案" (see all plans), "立即預約 GO!" (book now). The voice avoids hype-laden superlatives in favor of concrete capability and reassurance.

Forbidden register. Cold enterprise jargon that alienates small merchants; hype superlatives that undercut trust; anything that makes a first-time店主 feel the platform is "too advanced" for them. The brand wins by feeling attainable.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: SHOPLINE Blue (#356dff)
• CTA text: White (#ffffff)
• Outlined CTA text/border: SHOPLINE Blue (#356dff)
• Dark CTA / dark section: Ink Navy (#00142d)
• Header CTA: Black (#000000)
• Background: Pure White (#ffffff)
• Section tint: Pale Blue (#edf4fd) / Mist (#f2f7fc)
• Heading & body text: Ink Navy (#00142d)
• Border: Hairline Gray (#d6d6d6)

Example Component Prompts

• "Create a hero section on a #00142d navy background with white text. Headline at 48px Noto Sans TC weight 700, line-height 1.33, color #ffffff. Below it, two 30px-pill CTAs: a primary blue button (#356dff fill, white 18px/700 text, 45px tall, 0 24px padding) and an outlined button (white fill, #356dff text + border)."
• "Design a feature card on a #edf4fd band: white background, 8px radius, shadow rgba(0,0,0,0.08) 0px 8px 16px 0px. Title 24px Noto Sans TC weight 700 #00142d; body 16px weight 400 #00142d at line-height 1.5."
• "Build a sticky white nav: #ffffff background, links 16px Noto Sans TC weight 400 #00142d, and a right-aligned black pill CTA (#000000 fill, white 14px/700 text, 38px tall, 30px radius) labeled '免費試用'."
• "Create a dark conversion band: #00142d background, white 40px/700 headline, and a #00142d-vs-white navy pill CTA '立即預約 GO!' (or a white-on-blue #356dff pill) at 16px weight 700."

Iteration Guide

1. Every button is a 30px pill — check radius first
2. Headlines and CTAs are weight 700; nav/body/captions are weight 400
3. Blue (#356dff) is the only accent — do not add a second hue
4. Text is ink navy (#00142d), not black — except the nav header pill which is #000000
5. Shadows stay soft and neutral at 0.08 alpha — never heavy or tinted
6. Band the page: white / #edf4fd / #f2f7fc / #00142d
7. Give Traditional-Chinese type generous line-height (1.5+) and normal tracking

---

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #356dff measures 4.39:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-outline. Text #356dff on #ffffff measures 4.39:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.