system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji,
-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, system-ui, Helvetica Neue, Arial,
PingFang SC, PingFang TC, PingFang HK, Microsoft Yahei, Microsoft JhengHei

:root {
  /* Colors */
  --bg-primary: #ff2e4d;
  --color-tinted-red: rgba(255,36,66,0.06);
  --bg: #ffffff;
  --color-primary-label: #333333;
  --bg0: #f5f5f5;
  --primary-bg-disabled: rgba(48,48,52,0.15);
  --background-color: white;
  --border-color: #eeeeee;
  --color-secondary-label: rgba(51,51,51,0.8);
  --modal-mask-color: #00000080;
  --text-color: #000000D9;
  --color-link: #13386c;
  --input-color: #00000008;
  --label-color: #000000B2;
  --toast-bg-color: #000000b3;
  --color-blue: #3d8af5;
  --color-vertical-channel: #fff9d5;

  /* Typography */
  --font-family-system: system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji,
    -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, system-ui, Helvetica Neue, Arial,
    PingFang SC, PingFang TC, PingFang HK, Microsoft Yahei, Microsoft JhengHei;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9-5: 9.5px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-42-5: 42.5px;
  --space-48: 48px;
  --space-72: 72px;

  /* Border Radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-44: 44px;
  --radius-100: 100px;
  --radius-999: 999px;
  --radius-50pct: 50%;

  /* Shadows */
  --shadow-high: rgba(0,0,0,0.08) 0px 4px 32px 0px, rgba(0,0,0,0.04) 0px 1px 4px 0px;
  --shadow-low: rgba(0,0,0,0.04) 0px 2px 8px 0px, rgba(0,0,0,0.02) 0px 1px 2px 0px;
}

# Xiaohongshu Design System Specification

You are a Xiaohongshu design expert. Build UIs matching their visual language exactly.

## Brand Context
Xiaohongshu is a social commerce platform with a bold, playful primary red and functional neutrals. It’s mobile-first, uses system fonts for speed, and relies on rounded shapes and soft shadows to keep the interface friendly.

## Color Palette
- Primary Red: #ff2e4d — CTAs, primary buttons, key actions
- Tinted Red: rgba(255,36,66,0.06) — subtle red-tinted surfaces
- White: #ffffff — page background, cards, modals
- Link Blue: #0000ee — inline links
- Navigation Blue: #13386c — navigation links
- Neutral Black 25%: rgba(0,0,0,0.25) — disabled icons
- Neutral Black 80%: rgba(51,51,51,0.8) — secondary labels
- Neutral Black: #333333 — body text
- Neutral Black D9: #000000D9 — high-contrast text
- Label Black B2: #000000B2 — secondary labels
- Toast Black b3: #000000b3 — notification bg
- Background Gray: #f5f5f5 — surfaces
- Border Gray: #eeeeee — dividers
- Disabled BG: rgba(48,48,52,0.15) — disabled buttons
- Input BG: rgba(0,0,0,0.03) — input fields
- Input Color Light: rgba(0,0,0,0.08) — placeholder shading
- Accent Blue: #3d8af5 — highlights
- Vertical Channel Yellow: #fff9d5 — highlight sections
- Modal Mask: #00000080 — modal overlay

## Typography
Font family: system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, system-ui, Helvetica Neue, Arial, PingFang SC, PingFang TC, PingFang HK, Microsoft Yahei, Microsoft JhengHei

| Level     | Size  | Weight | Line Height | Use For            |
|-----------|-------|--------|-------------|--------------------|
| heading-1 | 18px  | 600    | 1.20        | Page titles        |
| heading-1 | 16px  | 600    | 1.20        | Section headings   |
| heading-1 | 16px  | 400    | 1.38        | Subheadings        |
| heading-1 | 16px  | 500    | 1.00        | Compact headings   |
| button    | 16px  | 600    | 1.15        | Primary buttons    |
| link      | 16px  | 400    | 1.20        | Navigation links   |
| link      | 14px  | 400    | 1.15        | Inline links       |
| caption   | 14px  | 400    | 1.15        | Secondary text     |
| caption   | 14px  | 500    | 1.15        | Emphasized captions|
| button    | 14px  | 500    | 1.15        | Secondary buttons  |
| caption   | 12px  | 400    | 1.20        | Fine print         |
| link      | 12px  | 400    | 1.20        | Small links        |
| link      | 12px  | 600    | 1.15        | Emphasized small links |
| caption   | 12px  | 600    | 1.15        | Strong fine print  |

## Spacing & Grid
Base: 8px grid
Scale: 2px, 4px, 6px, 8px, 9.5px, 12px, 16px, 20px, 24px, 32px, 42.5px, 48px, 72px
Map to components: button padding (8px vertical, 16px horizontal), card padding (24px), section gaps (32px–72px)

## Border Radius
- sm: 4px — small divs
- sm2: 6px — small divs
- md: 10px — medium rounding
- md2: 12px — cards, iframes
- lg: 16px — buttons, divs
- xl: 20px — images, spans
- pill-lg: 44px — large pill buttons
- pill-xl: 100px — large pills
- pill-full: 999px — pill shapes
- circle: 50% — avatars

## Shadows & Depth
- High: rgba(0,0,0,0.08) 0px 4px 32px, rgba(0,0,0,0.04) 0px 1px 4px
- Low: rgba(0,0,0,0.04) 0px 2px 8px, rgba(0,0,0,0.02) 0px 1px 2px

## Component Specifications

### Primary Button
Default: bg #ff2e4d, color #fff, padding 0, radius 999px, border none, fw 600, fs 16px  
Hover: color var(--color-primary-label), bg var(--fill1)  
Active: bg var(--color-tertiary-label), color var(--color-primary-label)  
Focus: outline 2px solid var(--link-accent)  

### Secondary Button
Default: bg #fff, color rgba(51,51,51,0.8), radius 44px, fs 14px, fw 400  
Hover: color var(--color-primary-label)

### Input Fields
Transparent or rgba(0,0,0,0.03), text #333, radius 0 or 999px, padding 0 84px 0 16px  
Focus: outline none, box-shadow 0 0 0 1000px var(--elevation-high-background) inset

### Cards
bg #fff, radius 12–20px, 1px solid rgba(0,0,0,0.08), shadow-high

## Layout & Responsive Rules
Breakpoints: 400px, 540px, 695px, 696px, 720px, 820px, 900px, 959px, 960px, 1024px, 1030px, 1101px, 1191px, 1192px, 1250px, 1400px, 1423px, 1424px, 1727px, 1728px

## Interaction Rules
Transitions: 150ms ease for hover/active/focus  
Focus indicators: 2px solid var(--link-accent)  

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid—spacing must be multiples of 4px or 8px
- Use system-ui stack for all text
- Keep primary red for interactive elements only
- Apply correct radius values for component type
- Use soft shadows—no hard edges
- Optimize for mobile first

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners
- Don't apply primary red to non-interactive elements
- Don't use custom fonts
- Don't skip focus states
- Don't apply shadows with high opacity

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ff2e4d;
  color: #ffffff;
  padding: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  color: #333333;
  background: var(--fill1);
}
.btn-primary:focus {
  outline: 2px solid var(--link-accent);
}
.btn-primary:disabled {
  background: rgba(48,48,52,0.15);
  cursor: not-allowed;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: rgba(0,0,0,0.08) 0px 4px 32px, rgba(0,0,0,0.04) 0px 1px 4px;
}
```

### Input
```css
.input {
  background: rgba(0,0,0,0.03);
  color: #333333;
  border: none;
  border-radius: 999px;
  padding: 0 84px 0 16px;
}
.input:focus {
  outline: none;
  box-shadow: 0 0 0 1000px var(--elevation-high-background) inset;
}
```