Alipay DESIGN.md

Design System Inspiration of Alipay

Overview

Visual Theme & Atmosphere

Alipay began in 2004 as a way to create trust between online buyers and sellers, and Ant Group now describes it as a one-stop digital daily-life platform that works with partners across payments, public services, and local life. The three supplied public captures are narrower: they are the Alipay Open Platform's developer-facing home, web/mobile-app integration page, and developer-tools page. Their shared expression is practical rather than promotional—light gray page ground, white content planes, compact Chinese-language navigation, a blue call-to-action, and a system-font stack chosen by the browser. That is an observable developer-platform surface, not evidence for the native consumer wallet or for a universal Alipay app theme.

Ant Design is important historical and design context: its official introduction says Ant User-Experience Design Team built it for complex enterprise products, with the values Natural, Certain, Meaningful, and Growing. The public Open Platform capture visibly contains Ant-class names, but that does not authorize promotion of every current Ant default into Alipay product evidence. Its captured #1890FF banner action, 2px control radius, and 8px tools card are retained as surface-specific facts; Ant Design's current #1677FF defaults are documented as a separately configurable open-source system.

Key Characteristics:

• Developer-platform pages with a #F5F5F5 page ground and white content cards
• #1890FF on the captured web/mobile-app banner action; #1677FF is Ant Design documentation context, not a live Open Platform token in this run
• Compact 14px system-font body text, with larger active navigation and banner-action text
• Small 2px search/action geometry alongside an 8px developer-tool card
• No observed hover, pressed, disabled, menu, dialog, toast, or mobile state in the supplied capture

Primary tasks

• Integrate Alipay payment into a web or mobile application
• Take an integration through configuration, review, and release
• Browse the developer-tools page to find a tool

Brand Narrative

Ant Group says Alipay was officially established in 2004 after an escrow service was introduced on Taobao, with the purpose of creating trust between online sellers and buyers. It now describes Alipay as having developed from a payment tool into a one-stop digital daily-life platform and describes the group's work with consumers, small businesses, merchants, and global partners. The Open Platform is one of the public developer-facing expressions of that ecosystem, offering payment and marketing capabilities through APIs and tools.

Ant Design is related but distinct context. Its official introduction identifies Ant User-Experience Design Team and its enterprise-product focus; its values describe how a reusable system should reduce coordination cost and support work. Those public documents explain the lineage of the developer-platform chrome without proving that every Alipay surface uses an unmodified Ant Design theme.

Principles

1. Trust through explicit capability boundaries. Alipay's origin story is escrow trust; in this reference, that means do not overstate what an observed developer page proves. UI implication: keep native-wallet and payment-flow claims out until their own surface is observed.
2. Certain, reusable work patterns. Ant Design's published “Certain” value links components and patterns to lower coordination entropy. UI implication: use documented, surface-proven values consistently rather than inventing variants.
3. System-font readability. Both the observed Open Platform pages and Ant Design's font guidance favor a broad system stack. UI implication: preserve the actual stack classification; do not substitute a lookalike webfont.
4. Semantic separation of domains. Developer-platform UI, corporate context, and open-source design-system material each answer different questions. UI implication: a first-party narrative or license source cannot fill a missing computed component value.

Personas

These are stakeholder groups named or implied by first-party sources, not fictional user profiles.

Developers integrating web or mobile applications. The Open Platform's web/mobile-app page addresses developers using SDKs, tools, APIs, keys, gateways, review, and release steps. Their evidence is the developer-platform surface, not the consumer wallet.

Businesses and service providers. Ant Group describes its partner ecosystem as supporting consumers and small businesses, while the platform offers payment, marketing, and data capabilities. No individual workflow or screen preference is inferred beyond that public role.

Consumers. Ant Group describes Alipay as a digital daily-life platform for consumers. No consumer UI component, typography, or microcopy has been captured in this update.

Colors

Observed Alipay Open Platform

• Developer action (#1890FF): observed on surface-2::[data-omd-capture="10"], the web/mobile-app banner action.
• Page canvas (#F5F5F5): observed on the home body.
• Card surface (#FFFFFF): observed on the developer-tools contentCard___nkyvg card and banner action text.
• Default foreground (#000000 at 85% in the raw capture): body, footer, and card copy.
• Navigation ink (#333333): observed in the home menu.
• Muted utility ink (#8997AD): observed on compact home footer utility items.
• Search border/text (#999999): observed on the Open Platform search input.

Official Ant Design context, not an Alipay Open Platform token

Ant Design currently documents #1677FF as its default colorPrimary, plus configurable color, radius, and component tokens. Its theming documentation explicitly supports overrides. The value is useful when discussing Ant Design itself, but it is not substituted for the captured Open Platform #1890FF action.

Typography

Evidence classes

• Live computed surface-use: all observed Open Platform specimens resolve to -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif. This is a high-confidence system stack; no loaded named FontFaceSet match was supplied, so it is not promoted as an Alipay-owned webfont.
• Official design-system guidance: Ant Design's font documentation also prioritizes the operating system's interface family and offers screen-readable fallbacks. This supports the system-first rationale for Ant Design documentation, not a claim that a proprietary Alipay family is in use on the captured pages.
• Declared-only assets: the collector found AlipayNumber, AlipayNumber-Medium, osite-menu, and KaTeX families with @font-face sources but zero visible use. They remain declared-only. In particular, a declaration without computed use plus FontFaceSet/source corroboration is not a UI-family claim.
• Official distributed font or font license: none was located in the official material collected here. Ant Design's repository is MIT-licensed software; that license applies to the library code, not to a newly inferred Alipay font license.

Do not render Inter, an Ant Design default stack, or a declared AlipayNumber face as though it were an observed proprietary Alipay product font.

Layout

The supplied capture is desktop-only at 1440×900. Its verified layout evidence is limited to the 60px top navigation line, a 199px × 30px search input, the 110px × 40px banner action, and 308px-wide developer-tool cards. It does not establish consumer-wallet breakpoints, a merchant-console sider, table grids, payment-dialog layout, or a mobile bottom action bar.

Responsive Behavior

No responsive capture was supplied. The 1440px desktop observations above must not be generalized to mobile, native-app, or merchant-console behavior.

Elevation & Depth

The observed banner action has 0 2px 0 rgba(0,0,0,0.043) shadow. The observed tool card has no shadow. No overlay, popover, menu, modal, drawer, or elevation scale was captured, so none is inferred.

Values kept in prose

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

• shadow.cta: 0 2px 0 rgba(0,0,0,0.043)

Motion & Easing

No motion, duration, easing curve, or reduced-motion behavior was present in the supplied raw evidence. Ant Design's published motion configuration is a design-system resource, not evidence for this Open Platform surface, so no Alipay motion token is specified.

Components

Developer action

Web/mobile-app banner action — observed default

• Background: #1890FF
• Text: #FFFFFF
• Border: none
• Radius: 2px
• Padding: 0.01px 15px 4px
• Font: 16px / 400 / system stack
• Use: surface-2::[data-omd-capture="10"], class ant-btn ant-btn-primary bannerBtn___ON0Mn; 110px × 40px in the supplied desktop capture. No hover, pressed, or disabled state was captured.

Search input

Open Platform search — observed specimen

• Text: #999999
• Radius: 2px
• Padding: 4px 8px 4px 11px
• Font: 14px / 400 / system stack
• Focus: Collector classifies this specimen as focus; its raw captured values remain transparent background, 0px border width, and no shadow. There is no interaction snapshot, so no focus-ring token is inferred.
• Use: surface-2::[data-omd-capture="7"], class ant-input alipay-open-search-header-input; 199px × 30px in the supplied desktop capture.

Developer tool card

Tool content card — observed default

• Background: #FFFFFF
• Radius: 8px
• Padding: 22px 10px
• Font: 14px / 400 / system stack
• Use: surface-3::div, class contentCard___nkyvg; six occurrences, 308px × 225px in the supplied desktop capture.

Navigation and footer text

Top navigation item — observed default

• Text: #333333
• Font: 14px / 400 / system stack
• Use: home::li, class menuItem currentMenu; 61px rendered height. It is a list item, not evidence of a tab component.

Footer link row — observed default

• Text: #000000
• Padding: 14px 0px 0px
• Font: 14px / 400 / system stack
• Use: home::li, class alipay-open-footer-li; observed across all three surfaces.

No modal, table, payment form, merchant dashboard, consumer-wallet control, status badge, dropdown, toast, hover, pressed, disabled, error, or responsive variant is specified: the supplied developer-platform capture has no selector/state provenance for one.

Published component roster (72 not measured here)

The design system this reference cites is Ant Design — Ant Group's open-source React library — not an Alipay-specific system. Its own component index at https://ant.design/components/overview (read 2026-09-19) publishes 72 components, grouped into the seven categories the index itself names. This reference measures five component stylings, all of them captured from open.alipay.com, the Alipay Open Platform developer site — a different host in a different evidence domain from ant.design — and machine-binds exactly one of them, tool-card, which is an Open Platform page class rather than an Ant Design component.

Two of the five carry Ant class names in their captured markup: the banner action is ant-btn ant-btn-primary and the search field is ant-input. That shows the Open Platform is built on the library. It is not a measurement of Ant Design's published Button or Input, and it says nothing about the other seventy. No value, state, or geometry is asserted for any name below, and listing them is not a claim that Alipay's own product uses them.

• General (4) — Button, FloatButton, Icon, Typography
• Layout (7) — Divider, Flex, Grid, Layout, Masonry, Space, Splitter
• Navigation (7) — Anchor, Breadcrumb, Dropdown, Menu, Pagination, Steps, Tabs
• Data Entry (18) — AutoComplete, Cascader, Checkbox, ColorPicker, DatePicker, Form, Input, InputNumber, Mentions, Radio, Rate, Select, Slider, Switch, TimePicker, Transfer, TreeSelect, Upload
• Data Display (21) — Avatar, Badge, Calendar, Card, Carousel, Collapse, Descriptions, Empty, Image, List, Listy, Popover, QRCode, Segmented, Statistic, Table, Tag, Timeline, Tooltip, Tour, Tree
• Feedback (11) — Alert, Drawer, Message, Modal, Notification, Popconfirm, Progress, Result, Skeleton, Spin, Watermark
• Other (4) — Affix, App, BorderBeam, ConfigProvider

The grouping is the host's, not this reference's: the index publishes these seven categories as its own navigation groups. Because the index's grid is client-rendered, the names were read from that published navigation in the page's served HTML, then cross-checked against https://ant.design/llms.txt, which lists 150 component-doc URLs — every page twice, once in English and once as a -cn locale duplicate. The 75 distinct slugs there reconcile to 72 after three pages that are not components are removed: overview (the index page itself), changelog (release history), and _util (internal helper documentation, which the index does list under Other as "Util"). config-provider is kept, because the host publishes ConfigProvider under Other as a component with its own API rather than as a documentation page.

The index labels List as deprecated and tags Masonry, BorderBeam, and Listy with the version each was introduced in. Those labels are the host's; nothing about their styling is carried over here.

---

Verified: 2026-07-13 Tier 1 sources: https://open.alipay.com/?mobile=2; https://open.alipay.com/module/webApp; https://open.alipay.com/tool; https://www.antgroup.com/en/home; https://ant.design/docs/spec/introduce/; https://ant.design/docs/spec/values/; https://ant.design/docs/spec/font-cn/; https://github.com/ant-design/ant-design/blob/master/LICENSE Tier 2 sources: https://getdesign.md/alipay (attempted via built-in web; no indexed Alipay record returned); https://styles.refero.design/?q=alipay (attempted via built-in web; no Alipay style record returned) Conflicts unresolved: none

The observed Alipay Open Platform action is #1890FF; the prior reference's Ant Design v5 defaults, generic payments components, and unobserved state variants have not been carried forward as live Alipay product claims. Measured button and input defaults remain in §4 as raw surface evidence, but are absent from machine components because no interaction state was captured.

States

Only one state label is present in the collector output: the Open Platform search specimen is marked focus, with the raw values recorded in §4. There are no interaction snapshots and no observed hover, pressed, disabled, error, loading, success, toast, dialog, or payment-processing states. Those states remain unresolved rather than being imported from Ant Design examples.

Do's and Don'ts

Do

• Use #1890FF only for the recorded Open Platform banner-action specimen.
• Retain the system-stack classification unless a visible computed family and loaded/source evidence establish something more specific.
• Keep the 2px search/action and 8px tool-card geometries tied to their recorded developer-platform surfaces.
• Use Ant Design's principles and license as design-system context, not as a blanket Alipay consumer-product specification.

Don't

• Substitute Ant Design's current #1677FF for the observed Open Platform action.
• Promote AlipayNumber, KaTeX, or icon-font declarations into a visible UI family.
• Recreate payment flows, tables, status tags, dialogs, or interaction variants from generic Ant Design defaults.
• Treat marketing/corporate history or documentation chrome as a live consumer-wallet token source.

Voice & Tone

The supplied Open Platform pages are developer-oriented: their official web/mobile-app description emphasizes payment, marketing, data, APIs, SDKs, configuration, review, and release. This supports a direct, task-oriented tone for developer documentation; it does not establish transactional consumer copy. Ant Design's official value of certainty supports clear outcomes and restrained wording in its own system guidance.

Agent Prompt Guide

Use this reference narrowly: “Create an Alipay Open Platform developer banner action observed at 110×40px: #1890FF, white 16px system text, 2px radius, padding 0.01px 15px 4px; do not invent hover or pressed states.” For the developer tools page, use a white 8px-radius content card with 22px 10px padding and 14px system text. Do not use this capture to generate a consumer payment confirmation, wallet dashboard, status badge, or Ant Design's generic component catalog.