淘宝

Design Specification — 淘宝

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#6C1414). All type is set in AlibabaSans102v1TaoBao-Regular. Detected font weights: 400. Detected style signatures: technical / mono accents.

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Typography

Primary typeface: AlibabaSans102v1TaoBao-Regular — stack: AlibabaSans102v1TaoBao-Regular

Font stacks (most used first)

• AlibabaSans102v1TaoBao-Regular
• courier new,courier,monospace
• iconfont

Derived type scale

Font sizes (by frequency)

Weights in use: 400

Line heights (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 1342px

Breakpoints

• 1200px
• 1342px
• 1414px
• 1415px

Animation & Motion

Transitions

• transform .3s cubic-bezier(.4,0,.2,1)

Easing curves

• cubic-bezier(.4,0,.2,1)

Keyframes

@keyframes frontFlipDown--NscYCeCF { 0%{transform:perspective(160px) rotateX(0deg)}to{transform:perspective(160px) rotateX(-180deg)} }
@keyframes backFlipDown--dd9S9Kts { 0%{transform:perspective(160px) rotateX(180deg)}to{transform:perspective(160px) rotateX(0deg)} }
@keyframes slide-in { 0%{transform:translateX(100%)}to{transform:translateX(0)} }
@keyframes handshake1--iHhjbwKk { 0%{transform:translate(15px,15px)}50%{transform:translate(-5px,-5px)}to{transform:translate(15px,15px)} }
@keyframes tb-toast-fade-in { 0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)} }
@keyframes tb-toast-fade-out { 0%{opacity:1}to{margin-top:-50px;opacity:0} }
@keyframes fadeInUp { 0%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%)} }
@keyframes fadeInDown { 0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,100%)} }
@keyframes slide { 0%,90%,to{transform:translate(0);z-index:4}16.67%,6.67%{transform:translate(20px);z-index:5}23.33%,33.33%{transform:translate(40px);z-index:6}40%,50%{transform:translate(80px);z-index:7}56.67%,66.67%{transform:translate(80px);z-index:1}73.33%,83.33%{transform:translate(0);z-index:0} }
@keyframes fadeIn { 0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)} }
@keyframes skeleton-loading { 0%{background:#f5f5f5}50%{background:#eee}to{background:#f5f5f5} }
@keyframes spin { to{transform:rotate(1turn)} }
@keyframes iconAppear { 0%{opacity:0;transform:scale(0)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)} }
@keyframes show--d7WzaE7f { 0%{opacity:0}to{opacity:1} }
@keyframes hide--D7SfitDG { 0%{opacity:1}to{opacity:0} }
@keyframes tooltipFadeIn { 0%{opacity:0;transform:translateX(-50%) translateY(-5px)}to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toast_in { 0%{-webkit-transform:translate(-50%,-50%) scale(.5);-moz-transform:translate(-50%,-50%) scale(.5);transform:translate(-50%,-50%) scale(.5);opacity:0}to{-webkit-transform:translate(-50%,-50%) scale(1);-moz-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity:1} }

Source Design Tokens (CSS custom properties)

:root {
  --tbpc-primary-theme-color: #ff5000!important;
  --tbpc-primary-theme-alpha-color: #ff500015;
  --tbpc-secondary-theme-color: #ff5000!important;
  --tbpc-secondary-theme-alpha-color: #ff500015;
  --tbpc-price-color: #ff5000;
  --tbpc-price-alpha-color: #ff500015;
  --tbpc-border-theme-color: #ffd5c2;
  --tbpc-background-theme--color: #fff1eb;
  --tbpc-gold-theme-color: #b88449;
  --tbpc-primary-color: #1f1f1f;
  --tbpc-secondary-color: #7a7a7a;
  --tbpc-tertiary-color: #999;
  --tbpc-disable-color: #ccc;
  --tbpc-border-color: #d6d6d6;
  --tbpc-divider-color: #ebebeb;
  --tbpc-bg1-color: #f5f5f5;
  --tbpc-bg2-color: #f7f7f7;
  --tbpc-bg3-color: #fafafa;
  --tbpc-white-color: #fff;
  --tbpc-primary-alpha-color: rgba(0,0,0,.88);
  --tbpc-secondary-alpha-color: rgba(0,0,0,.52);
  --tbpc-tertiary-alpha-color: rgba(0,0,0,.4);
  --tbpc-disable-alpha-color: rgba(108,20,20,.2);
  --tbpc-border-alpha-color: rgba(0,0,0,.16);
  --tbpc-divider-alpha-color: rgba(0,0,0,.08);
  --tbpc-bg1-alpha-color: rgba(0,0,0,.04);
  --tbpc-bg2-alpha-color: rgba(0,0,0,.03);
  --tbpc-bg3-alpha-color: rgba(0,0,0,.02);
}

Do's and Don'ts

Do

• Do reserve the accent #6C1414 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add heavier font weights; the page uses only weight 400 for its entire hierarchy.
• Don't add gradients — the source page uses flat fills exclusively.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #FF5000;
  --color-accent: #6C1414;
  --color-background: #FFFFFF;
  --color-surface: #F5F5F5;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #7A7A7A;
  --color-border: #FFD5C2;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFA;
  --color-surface-container: #F7F7F7;
  --color-surface-container-high: #F5F5F5;
  --color-surface-container-highest: #EEEEEE;
  --font-sans: AlibabaSans102v1TaoBao-Regular;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 100px;
  --space-sm: 9px;
  --container-max: 1342px;
}