Alibaba Design System

# Alibaba Design System — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: partial
confidence: low
verified_at: unknown
source_page: https://www.designsystems.one/design-systems/alibaba-design
sources:
  - https://www.aliued.com/
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Alibaba. "Alibaba Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Alibaba Design System
**Owner:** Alibaba
**Official documentation:** https://www.aliued.com/
**Visual character:** Commerce-density maximalism: signal orange over tight 14px text, price-red urgency, and layouts built for infinite catalogue.

---

## Summary

Design system for Alibaba's e-commerce platforms.

_Editorial confidence: low. This system publishes little token detail — values below are a conservative, partial reading. Public token documentation is limited; values reflect the served international surfaces. Field-level evidence: 0/55 claims source-linked, 0/55 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=alibaba-design)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Alibaba Orange | `#ff6a00` | `--alibaba-orange` | Primary brand and CTAs |
| Text | `#333333` | `--alibaba-text` | Primary text |
| Secondary Text | `#666666` | `--alibaba-text-secondary` | Secondary text |
| White | `#ffffff` | `--alibaba-white` | Surfaces |
| Background | `#f5f5f5` | `--alibaba-background` | Page background |
| Border | `#dddddd` | `--alibaba-border` | Borders |
| Price Red | `#ff4747` | `--alibaba-red` | Prices and urgency |

## Typography

- **Body:** System stack — weights 400, 500, 700 — `-apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `28px` | `36px` |
| h2 | `22px` | `30px` |
| body | `14px` | `22px` |
| small | `12px` | `18px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |
| large | `8px` |

## Quick start (CSS)

```css
/* Alibaba Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://www.aliued.com/
   Reference scope: Public token documentation is limited; values reflect the served international surfaces.
   Field evidence: https://www.designsystems.one/api/style-spec?system=alibaba-design */

:root {
  /* Color */
  --alibaba-orange: #ff6a00; /* Primary brand and CTAs */
  --alibaba-text: #333333; /* Primary text */
  --alibaba-text-secondary: #666666; /* Secondary text */
  --alibaba-white: #ffffff; /* Surfaces */
  --alibaba-background: #f5f5f5; /* Page background */
  --alibaba-border: #dddddd; /* Borders */
  --alibaba-red: #ff4747; /* Prices and urgency */

  /* Typography */
  --font-body: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-h1: 28px; /* line-height 36px */
  --text-h2: 22px; /* line-height 30px */
  --text-body: 14px; /* line-height 22px */
  --text-small: 12px; /* line-height 18px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* Radius */
  --radius-default: 4px;
  --radius-large: 8px;
}
```

## Engineering profile

- **Ships for:** React
- **Source model:** Hybrid

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Alibaba Design System by Alibaba — Design system for Alibaba's e-commerce platforms. Character: Commerce-density maximalism: signal orange over tight 14px text, price-red urgency, and layouts built for infinite catalogue. Use a primary colour near #ff6a00, the typeface "System stack" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Alibaba Design System documentation](https://www.aliued.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/alibaba-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._