:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark-gray: #666666;
  --color-medium-gray: #757575;
  --color-light-gray: #979797;
  --color-near-black: #161616;
  --color-brand-red: #ed383f;
  --color-warm-brown: #ab6d49;
  --color-deep-red: #d3031c;
  --color-pinkish-red: #fd384f;
  --color-border-gray: #cccccc;

  --color-brand-disable: #ffb5bb;
  --color-function-blue: #3170ee;
  --color-function-brown: #ce7039;
  --color-success-primary: #009966;
  --color-warning-primary: #ff5500;
  --color-grey-1: #f5f5f5;
  --color-grey-2: #ebebeb;
  --color-grey-3: #cccccc;
  --color-brand-bg: #ffe6e7;

  /* Typography */
  --font-primary: "TT Norms Pro", "Open Sans", "Roboto", "Arial", "Helvetica", "SimSun";

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-32: 32px;
  --space-40: 40px;
  --space-90: 90px;
  --space-95: 95px;
  --space-105: 105px;
  --space-256: 255.984px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 15px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-huge: 24px;
  --radius-30: 30px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.1) 0px 4px 15px;
  --shadow-light: rgba(0,0,0,0.02) -4px 4px 4px;
  --shadow-overlay: rgba(0,0,0,0.5) 0px 1188px 0px 1080px;
}

# Aliexpress Design System Specification

You are an Aliexpress design expert. Build UIs matching their visual language exactly.

## Brand Context
Aliexpress is a high-volume retail marketplace. The design system is flat, functional, and high-energy, with bold reds for CTAs and clean typography. It uses an 8px spacing grid and TT Norms Pro for all text.

## Color Palette
- White: #ffffff — Backgrounds, text on red
- Dark Gray: #666666 — Secondary text
- Medium Gray: #757575 — Tertiary text
- Light Gray: #979797 — Disabled text
- Near Black: #161616 — Strong text
- Black: #000000 — Primary text, icons
- Brand Red: #ed383f — CTAs, sale prices
- Warm Brown: #ab6d49 — Accent
- Deep Red: #d3031c — Price emphasis
- Pinkish Red: #fd384f — Promo banners
- Border Gray: #cccccc — Dividers
- Brand Disable: #ffb5bb — Disabled brand elements
- Function Blue: #3170ee — Links, functional actions
- Function Brown: #ce7039 — Category accents
- Success Primary: #009966 — Success states
- Warning Primary: #ff5500 — Warning states
- Grey-1: #f5f5f5 — Light surfaces
- Grey-2: #ebebeb — Light borders
- Grey-3: #cccccc — Mid borders
- Brand BG: #ffe6e7 — Brand background tint

## Typography
Font family: "TT Norms Pro", "Open Sans", "Roboto", "Arial", "Helvetica", "SimSun"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 44px | 700 | 1.20 | Page title |
| H1 | 40px | 700 | — | Hero title |
| H1 | 32px | 400 | 0.00 | Large body |
| H1 | 32px | 700 | — | Section header |
| H1 | 28px | 700 | — | Subheader |
| H1 | 24px | 400 | — | Body intro |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px. Scale includes 4px, 8px, 12px, 16px, 24px, 32px, 40px, 90px, 105px, 255.984px. All spacing must be multiples of 4px.

## Border Radius
- none: 0px — Tables, flat elements
- sm: 2px — Badges
- md: 6px — Small cards
- lg: 15px — Medium cards
- xl: 16px — Bottom rounds
- xxl: 20px — Inputs
- huge: 24px — Large cards
- 30px — Large pill shapes
- round: 50% — Avatars

## Shadows & Depth
- Medium: rgba(0,0,0,0.1) 0px 4px 15px
- Light: rgba(0,0,0,0.02) -4px 4px 4px
- Overlay: rgba(0,0,0,0.5) 0px 1188px 0px 1080px

## Component Specifications

### Primary Button
Default:  
- Background: #ffffff  
- Color: #000000  
- Padding: 0px  
- Border radius: 0px  
- Border: none  
- Font: TT Norms Pro, 14px, weight 400  
Hover: state not specified — follow brand hover (color: #ff9900)  
Focus: outline: none  
Disabled: opacity 0.5

### Link
Default: color varies (#000000, #3a3e4a, #ffffff, #fd384f)  
Hover: color #ff9900, no underline

### Input Field
Default: white background, black text, no border, padding-left 10px  
Focus: border color #cccccc, background white, no outline

## Layout & Responsive Rules
Max content width: not explicit; breakpoints at 768px, 1019px, 1230px, 1279px, 1280px, 1439px, 1440px, 1551px, 1552px, 1791px, 1792px  
Grid gap: multiples of 8px

## Interaction Rules
- Transition timing: 150ms ease for state changes  
- Hover: color change to #ff9900  
- Focus: border or outline per component spec

## DO List
- Use ONLY colors from palette  
- Maintain 8px grid  
- Use TT Norms Pro for all text  
- Keep links underline-free  
- Keep hover color #ff9900 consistent  
- Round corners per radius tokens

## DON'T List
- Don't invent new colors  
- Don't mix sharp and rounded corners in same component  
- Don't use heavy shadows  
- Don't underline links  
- Don't use gray text for important info

## Code Examples

### Button
```css
.btn-primary {
  background: #ffffff;
  color: #000000;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  border: none;
  transition: color 150ms ease;
}
.btn-primary:hover { color: #ff9900; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.card {
  background: #ffffff;
  border-radius: 16px;
  padding: var(--space-16);
  box-shadow: var(--shadow-md);
}

.input {
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 20px;
  padding-left: 10px;
}
.input:focus {
  border-color: #cccccc;
  outline: none;
}

---

## 9. Summary

**TL;DR** — Aliexpress’s design system is flat, functional, and optimized for high‑volume retail. Bold reds drive action, TT Norms Pro keeps text clean, and an 8px grid holds layouts together. Minimal shadows, consistent hover color (#ff9900), and a predictable radius scale make it easy to maintain.

**Brand Keywords**:
- high-energy-retail
- global-functional
- flat-ui
- urgency-driven