ECPay DESIGN.md

Design System Inspiration of ECPay

Overview

Visual Theme & Atmosphere

ECPay is the payment platform of Taiwan's 綠界科技股份有限公司. The company's history dates its service to 1996 and the launch of the ECPay integrated payment platform to January 2016. Its public offering brings payment collection, logistics and electronic invoices together for merchants. Company, history.

The homepage expresses that breadth with green actions, white bordered panels, service illustrations and a prominent news area. Two greens coexist: the main registration link is dark #00783c, while payment-service actions use #588c3f. The registration and sales links are pills; the service action has an 8px corner radius. These are observations of the public homepage, rather than a published brand specification.

The current page puts “營運管理一站整合” and “AI 工具一站整合” beside one another. Its evolution now includes merchant tools for operations, marketing and customer service. A company-hosted news item also describes expansion across transactions, applications and data. Live homepage, company-hosted update.

Brand Narrative

The company's history connects a service founded in 1996 with the integrated ECPay platform introduced in 2016. Today's homepage carries that integration theme into both business operations and AI tools. For a visual reference, that means presenting related merchant services in parallel panels with clear task links. History, homepage.

Principles

The company's stated operating philosophy is “專業、誠信、創新” — professionalism, integrity and innovation. Green actions, white bordered service panels and compact task labels are observed interface patterns; the opened sources do not name them as formal design principles. Company history and values.

Personas

The official history names small and medium e-commerce businesses and individual e-commerce sellers as a market focus; no research-backed persona profiles were verified. History.

Colors

The survey found no readable root or stylesheet-declared CSS custom properties. The following names are reference labels for measured literal values, not ECPay custom-property names.

Paragraph ink was rgb(51, 51, 51) on six paragraphs, with two each in rgb(88, 140, 63) and rgb(68, 68, 68). The global colour census includes embeds and the consent layer; it is not a palette by itself. LINE's green, Google search styling and cookie-banner colours are excluded from these reference roles.

Typography

• Official product use: no font-use statement was verified in the opened company or product material.
• Live-loaded: document.fonts reported an empty loaded-face list. No live webfont specimen is established.
• Official distributed assets: the survey returned no readable @font-face records; no font distribution or font licence was verified.
• Declared-only: the body stack is 微軟正黑體, "Apple LiGothic Medium", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif. The measured links declare 微軟正黑體; the census's sampled button declares Arial. These declarations do not establish the face that supplied the visible glyphs.
• Unresolved: actual rendered faces and per-script fallback. The census has no h1 font record. No family is exported in the typography tokens, and no face receives a specimen. Substitute: none chosen.

Preserve the verified metrics independently of the unresolved family:

The opened homepage stylesheet declares .ind-title at 26px, bold, with line-height: 1.4; this is a CSS declaration, not a computed heading measurement. Homepage stylesheet.

Layout

The desktop homepage begins with a utility strip and navigation, then a promotional carousel beside news. Below are an operating-statistics panel, paired operations/AI panels, payment and application-service cards, solution cards, developer resources and partner banks. This order is visible in the survey's full-page capture and homepage HTML.

The opened homepage CSS declares a 1170px payment-service container with wrapping flex items and 64px bottom padding. The solution-card rule declares 185px height, 24px 20px padding and 20px corners. Treat these as declared desktop layout values; only the chosen links' geometry was measured directly.

Responsive Behavior

Desktop measured at 1440×1000 only; mobile layout and breakpoint behaviour were not measured.

Elevation & Depth

The selected actions and their captured card ancestors have box-shadow: none. Their separation comes from white surfaces and thin borders: #e1e3e6 around the service panel, #dce2ec around the ECShop solution card. No elevation scale was verified.

Motion & Easing

Every selected control reported the raw computed transition all 0s ease 0s. These six controls establish no nonzero transition-duration or custom easing token; carousel motion was not measured.

---

Measurement evidence: survey ecpay/20261103-095103 and states ecpay/20261103-095348, captured 2026-11-03. First-party narrative and asset URLs are linked beside their claims; legal identity and collector limitations are recorded in verification.md.

Components

Fees navigation link. “費用” is a 54.2×67.8px anchor with square corners, padding 28px 15px 16px and 14px/400 text. Its background is transparent over the white header. The label changes from #333333 to #408a00 on hover and held press. Press adds no difference beyond hover.

ECShop card link. “ECShop 網路開店” is a 224.7×22.4px anchor inside a white solution card. The anchor has zero padding and radius, 16px/400 text, and foreground #00783c. Hover and held press add underline solid rgb(0, 120, 60). These dimensions describe the link, not the card container.

The other measured actions remain useful visual references in prose:

• “立即註冊”: 138×54px, border-radius: 999px, padding 0px 24px, background #00783c, white text, no border or shadow.
• “聯繫銷售顧問”: 159.2×54px, the same pill radius and padding, white fill, #00783c text and a 1px solid green border, no shadow.
• Payment-service “了解更多”: 132×54px, 8px radius, padding 16px 16px 16px 32px, #588c3f fill, white text, no border or shadow.

Those three actions had no computed hover or pressed change in the probe's compared scope. Their only measured focus indication was a browser auto outline, so they are not exported as interactive component tokens. The Google search input is an embed and is also excluded.

States

All six pointer targets matched :hover; held press also matched :active. Focus came from a real Tab walk. Comparisons covered each control, its pseudo-elements and three ancestor levels with their pseudo-elements; the six anchors/inputs had no descendants. The probe cannot establish absence of pixel-only effects or changes inside external SVG files. Disabled states were not exercised.

The anti-fraud popup was closed. The cookie banner remained open because both its agreement button and its unlabelled × invoke the agreement handler; hideOverlays: true was passed for pointer measurements. The measured states are raw observations under that collection condition.

Do's and Don'ts

• Keep the dark content CTA green and the lighter service-action green distinct.
• Pair the filled registration pill with its white, green-bordered sales link.
• Preserve the navigation's colour change and the solution link's underline as separate interaction patterns.
• Keep the three unchanged action styles intact on hover and press within the measured pattern.
• Retain the browser's keyboard indication; no authored focus colour is established here.
• Keep Google, Genesys, LINE and consent styling outside the ECPay component palette.

Voice & Tone

The homepage groups services around merchant tasks: “營運管理一站整合” and “AI 工具一站整合”. Actions are short and direct: “立即註冊”, “聯繫銷售顧問” and “了解更多”. This is an observation of the opened copy, not an official tone-of-voice guide. Homepage.

Agent Prompt Guide

• “Build a white navigation header with a 67.8px-high fees link, 14px/400 text, padding 28px 15px 16px, and text changing from #333333 to #408a00 on hover and held press. Font family is unresolved.”
• “Use a 54px-high dark-green registration pill beside a white, green-bordered sales pill; each has 0px 24px padding and 16px/400 text. Preserve their observed unchanged hover and pressed appearance.”
• “Put an ECShop text link in a white bordered solution card; keep its green label and underline it on hover and held press.”