Temu Design System Deep Dive

1. Brand Overview

Temu’s visual language is stripped-down, utilitarian, and unapologetically functional. This isn’t a brand chasing high-art minimalism — it’s a marketplace interface built for speed, clarity, and mass appeal. They lean into a flat, high-contrast UI with a predominance of neutrals and bold text weights. There’s a clear influence from mobile-first commerce design: tight type spacing, compact buttons, and a pragmatic 8px-based spacing grid.

The typography choices — using the miui font family with a heavy reliance on system fallbacks — signal performance and device-native rendering as priorities. This is not a custom webfont brand. They’ve avoided Google Fonts or Adobe Fonts entirely, which means faster load times and a consistent look across devices.

Colors are utilitarian: black (#000000), dark gray (#222222), and pure white (#ffffff). No brand orange or purple dominating the UI here — at least not in the extracted verification page data. This suggests that Temu’s core identity color might emerge elsewhere (likely in their marketing assets), but the functional UI layer is monochrome. That’s a deliberate choice: the product photos carry the color, and the UI gets out of the way.

Breakpoints at 768px and 812px tell us they’re targeting mobile and small tablet devices aggressively. The overall system is responsive but the breakpoints are tight — likely optimized for mobile commerce flows.

The vibe? Transactional clarity. You come in, you see the product, you click buy. No unnecessary chrome. No ornamental shadows. Everything is flat, sharp, and high-contrast. I love how they’ve embraced the “speed over style” ethos here — because it works for their audience. You’re not browsing a luxury catalog; you’re snapping up deals.

2. Color System

2.1 Primary Colors

From the extracted data, the semantic primary color is pure white (#ffffff). That’s unusual: most brands assign a saturated hue as their primary. Here, white is the functional base — text sits on it, buttons often invert against it. It works because Temu’s product grid is colorful enough; the UI doesn’t need to compete.

Primary (#ffffff) communicates simplicity, cleanliness, and neutrality. In the commerce context, white backgrounds make product photos pop and preserve accurate color representation. Competitors like Amazon use pale grays and blues, but Temu’s pure white gives more contrast.

2.2 Complete Palette

2.3 Color Relationships

The palette is entirely achromatic. Contrast ratios are excellent:

• #222222 on #ffffff: Contrast ratio ~12.6:1 — WCAG AAA compliant.
• #000000 on #ffffff: Contrast ratio 21:1 — maximum contrast.
• #ffffff on #222222: Contrast ratio ~12.6:1 — AAA compliant.

This means text is accessible without additional tweaks. Dark mode would require inversion, but the palette is small enough to swap easily.

2.4 Usage Guide

What works:

• Text: Always use dark gray (#222222) for body copy — it’s less harsh than pure black.
• Buttons: White fill with dark text works for secondary actions; invert for primary.
• Backgrounds: Keep white as the default. Use gray only for overlays or modals.

Avoid:

• Introducing mid-tone grays — they’d dilute contrast.
• Using black (#000000) for large text blocks — too heavy, feels aggressive.

3. Typography

3.1 Font Families

Temu uses miui as the primary font, with fallbacks:

miui, system-ui, -apple-system, system-ui, .SFNSText-Regular, Helvetica, Arial

No webfont loading. This is a custom/device-native font strategy — possibly piggybacking on Xiaomi’s MIUI system font for brand alignment.

3.2 Type Scale

3.3 Hierarchy

Temu’s hierarchy is tight. H1 at 20px is small compared to many brands — again, mobile-first thinking. Buttons and captions share sizes, which creates a uniform small-type zone. Heavy weights (600) are used liberally for emphasis; lighter weights (400) keep secondary text from overwhelming.

This keeps everything readable on small screens without excessive scrolling. I love the restraint here — no oversized headings eating viewport space.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. All values are multiples except the odd 3px (likely for fine-tuned element gaps).

4.2 Layout

Breakpoints:

• 768px — mobile to tablet transition
• 812px — small tablet tweak (likely iPad Mini / odd device widths)

No wide desktop breakpoint in the extracted data — consistent with mobile commerce focus.

5. Visual Elements

Border Radius

Two values:

• 4px — used for dialogs. Small, controlled rounding.
• 10000000px — used for spans; essentially infinite radius (pill shapes).

This tells me they use pills for tags or badges.

Shadows

None. This is flat design — depth is implied via spacing and contrast, not drop shadows. I love this — it keeps the UI crisp.

Borders

No extracted border combinations — possibly relying on background contrast to separate elements.

6. Components

Buttons: No explicit button component data extracted, but typography and colors imply:

• White fill, dark text for secondary
• Dark fill, white text for primary
• Radius: 4px for rectangular, infinite for pill

Links: Likely dark text, underline on hover — no data in extraction.

Forms: No styles extracted — possibly minimal, border-bottom inputs.

Cards: No shadows; spacing defines boundaries.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #222222;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Typography */
  --font-family-primary: miui, system-ui, -apple-system, system-ui, .SFNSText-Regular, Helvetica, Arial;
  --font-size-h1: 20px;
  --font-weight-h1: 600;
  --line-height-h1: 1.40;
  --font-size-button-lg: 14px;
  --font-weight-button-lg-bold: 600;
  --font-weight-button-lg-normal: 400;
  --line-height-button-lg: 1.14;
  --font-size-caption-lg: 14px;
  --font-weight-caption-lg-bold: 600;
  --font-size-caption-sm: 12px;
  --font-weight-caption-sm: 400;
  --line-height-caption-sm: 1.50;

  /* Spacing */
  --spacing-3: 3px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-full: 10000000px;

  /* Breakpoints */
  --breakpoint-sm: 768px;
  --breakpoint-md: 812px;
}

8. AI Coding Assistant Prompt

# Temu Design System Specification

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

## Brand Context
Temu’s UI is mobile-first, flat, and high-contrast. It relies on achromatic colors and heavy text weights for clarity. Product imagery carries visual richness; the interface stays neutral and functional.

## Color Palette
- Dark Gray: #222222 — Primary text color, body copy, button text
- White: #ffffff — Page background, button fill, modal backgrounds
- Black: #000000 — Functional text, icons

## Typography
Font family:
miui, system-ui, -apple-system, system-ui, .SFNSText-Regular, Helvetica, Arial

| Element   | Size | Weight | Line Height | Use Case |
|-----------|------|--------|-------------|----------|
| H1        | 20px | 600    | 1.40        | Page titles |
| Button-lg-bold | 14px | 600 | 1.14 | Primary buttons |
| Button-lg-normal | 14px | 400 | 1.14 | Secondary buttons |
| Caption-lg-bold | 14px | 600 | 1.14 | Emphasized captions |
| Caption-sm | 12px | 400 | 1.50 | Secondary captions |

## Spacing & Grid
Base: 8px scale
Values: 3px, 12px, 16px, 24px, 32px, 36px
Use:  
- 3px — Micro gaps  
- 12px — Small padding in buttons/captions  
- 16px — Default body padding  
- 24px — Section spacing  
- 32px — Container gaps  
- 36px — Modal padding

## Border Radius
- sm: 4px — Dialogs, rectangular buttons
- full: 10000000px — Pills, tags, badges

## Shadows & Depth
Flat design—no shadows. Use contrast and spacing for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #222222;
  color: #ffffff;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--font-size-button-lg);
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #000000; }
.btn-primary:focus { outline: 2px solid #000000; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: #222222;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-sm);
  font-weight: 400;
  font-size: var(--font-size-button-lg);
  border: 1px solid #222222;
  transition: background 150ms ease;
}
.btn-secondary:hover { background: #f5f5f5; }
```

### Input Field
```css
.input {
  border: 1px solid #222222;
  border-radius: var(--radius-sm);
  padding: var(--spacing-12);
  font-size: var(--font-size-caption-sm);
  background: #ffffff;
}
.input:focus { border-color: #000000; outline: none; }
.input::placeholder { color: #222222; opacity: 0.6; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: var(--spacing-24);
  border: 1px solid #222222;
}
```

## Layout & Responsive Rules
- Max content width: mobile-first, adjust at 768px and 812px
- Page padding: 16px mobile, 24px tablet
- Grid gap: multiples of 8px

## Breakpoints
- Mobile: < 768px
- Tablet: 768px - 812px
- Desktop: > 812px (rare in Temu flows)

## Interaction Rules
- Transition timing: 150ms ease for hover/focus
- Focus indicators: solid outline, high-contrast color
- Loading states: opacity changes or spinner icon

## DO
- Use ONLY #222222, #ffffff, #000000
- Maintain 8px grid—spacing must be in scale
- Heavy weights (600) for headings and primary buttons
- Small type sizes for mobile clarity
- Use pill radius for tags/badges

## DON'T
- Add drop shadows—Temu is flat
- Use colors outside palette
- Oversize headings beyond 20px
- Mix rounded and sharp corners inconsistently
- Reduce contrast on text

## Code Examples

Primary Button:
```css
<button class="btn-primary">Buy Now</button>
```

Secondary Button:
```css
<button class="btn-secondary">Cancel</button>
```

Card:
```css
<div class="card">
  <h1>Product Title</h1>
  <p>Price: $9.99</p>
</div>
```

Input:
```css
<input class="input" placeholder="Search products">
```

9. Summary

TL;DR — Temu’s design system is mobile-first, flat, and monochrome. It uses pure white backgrounds, dark gray text, and heavy font weights for clarity. Spacing is on an 8px grid with tight breakpoints. No shadows, minimal borders, and a utilitarian vibe.

Brand Keywords:

• mobile-functional
• flat-contrast
• monochrome-minimal
• speed-focused