Meitu Brand Design System Deep Dive

1. Brand Overview

Meitu’s visual language is exactly what you’d expect from a Chinese tech company that’s built its empire on beauty, photo editing, and AI-powered imaging — clean, polished, and slightly playful without ever being childish. The tone is refined, but approachable. There’s no heavy corporate stiffness here; instead, you get a modern aesthetic that’s meant to appeal to a consumer base obsessed with visual perfection but still values ease of use.

The website’s design philosophy screams clarity. No unnecessary flourishes, no experimental UI patterns. They stick to proven layouts, simple typography, and a restrained color palette. This is a brand that knows its users are coming for the visuals — whether that’s AI portraits, makeup simulations, or editing tools — so the interface stays out of the way. Design here is a frame, not the painting.

The dominance of PingFang SC as the typeface immediately positions Meitu as a modern Asian tech brand. PingFang SC is neutral, legible, and well-optimized for Chinese characters, while the fallback stack (“helvetica neue, tahoma, microsoft yahei, arial, hiragino sans gb”) ensures a consistent experience across devices. This choice signals: “We care about consistency more than typographic experimentation.”

The color story is subtle. They lean heavily on neutral grays (#6c6c6c, #969696), pure black (#000000), and pure white (#ffffff), with occasional pops of blue (#0000ee) for links and red (#ff6b6b) for accents. There’s no overuse of gradients or brand-colored backgrounds — instead, the palette supports the content. You could call it “function-first minimalism,” but it’s not cold or sterile.

The spacing system is pragmatic — based on an 8px grid. It’s not religiously applied (there are 10px, 12px, 22px anomalies), but the core rhythm is there. This works for them because their content is image-heavy and often needs flexible padding.

Overall, Meitu’s design system is a toolkit for clarity: strong typography, neutral colors, rounded elements for friendliness, and pill-shaped buttons that feel inviting. It’s a safe, effective design approach that prioritizes usability over visual novelty.

2. Color System

2.1 Primary Colors

The closest thing Meitu has to a “primary” brand color in the UI is blue (#0000ee) — used for links. It’s a web-default blue, which is an interesting choice for a tech brand in 2025. Most companies customize their link color to match brand identity; Meitu sticks to the classic. This works because it’s instantly recognizable as interactive. No guesswork for the user.

For accents, they use red (#ff6b6b) sparingly. This is not the brand’s dominant hue — it’s more for small highlights or possibly error states. The rest of the palette is neutral, which lets imagery and product visuals carry the brand’s personality.

Psychologically, blue communicates trust and reliability, while red adds energy. In competitor terms, this is closer to Apple’s approach (neutral UI, strong product visuals) than, say, Canva’s (colorful interface).

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid between key text colors and backgrounds. Black (#000000) on white (#ffffff) is AAA-compliant. Blue (#0000ee) on white is also compliant, though the saturation could be a strain on low-contrast displays. Gray text (#6c6c6c) on white is borderline for small sizes — it’s fine for captions, but avoid it for body text below 14px.

Dark mode? Not evident from the extracted data. The palette is tuned for light backgrounds.

2.4 Usage Guide

Works well:

• White background + black text = clean, readable.
• Blue links on white = obvious interaction.
• Red accent sparingly against neutrals = draws attention without overwhelming.

Avoid:

• Gray (#6c6c6c) on gray backgrounds — kills legibility.
• Red (#ff6b6b) for large text — too aggressive.
• Blue (#0000ee) on dark backgrounds without lightening — poor contrast.

3. Typography

3.1 Font Families

Primary: PingFang SC
Fallbacks: helvetica neue, tahoma, microsoft yahei, arial, hiragino sans gb
No Google Fonts. No Adobe Fonts. No variable fonts.

PingFang SC is a system font on macOS and iOS, optimized for Chinese. The fallback stack ensures legibility across OSes and browsers. This is a pragmatic choice — no loading delays, no licensing issues.

3.2 Type Scale

3.3 Hierarchy

H1 at 60px is massive — this is hero-level typography. Most other headings are compressed into 16–20px sizes, meaning the big jump from hero to section headers. This creates a strong visual anchor on landing pages, then shifts to compact UI text for functional areas.

Line heights are generous (up to 3.60 for links at 20px), which increases scannability and breathes space into dense UI.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Not strictly enforced — there are off-scale values like 10px, 22px.

4.2 Layout

No explicit breakpoints in extracted data. Likely fluid layouts with max-width containers, but the absence of fixed widths suggests responsive design is handled at the CSS level without fixed token definitions.

5. Visual Elements

Border Radius

They love rounded shapes — even 99px for buttons, which is essentially “full” rounding.

Shadows

Only one shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px 0px — subtle, low elevation. Used sparingly.

Borders

One combination: 1px solid #ffffff — probably for white-outlined buttons.

6. Components

6.1 Buttons

Default button:

• Background: #ffffff
• Text color: #ffffff (this is odd — white on white? Possibly placeholder for icon-only buttons)
• Padding: 0px
• Border radius: 99px
• Border: 1px solid #ffffff
• Font size: 16px
• Font weight: 400

Hover/active/focus states not defined — likely handled via color changes in CSS not captured here.

Opinion: White-on-white default is either a design oversight or the button is relying on a background image/icon.

6.2 Links

Variants:

• Blue (#0000ee), weight 400 — main hyperlinks
• Black (#000000), weight 600 — navigation
• White (#ffffff), weight 400 — dark backgrounds
• Gray (#6c6c6c), weight 400 — secondary links

No underline by default. Hover states not defined, but likely color change or underline.

6.3 Forms

No text inputs, checkboxes, radios, selects in the data — either custom components or absent from this page.

6.4 Cards

No explicit card component extracted, but with 30px padding and occasional shadow, we can infer a simple white background with rounded corners.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-gray-dark: #6c6c6c;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-near-black: #1e1e1e;
  --color-blue-link: #0000ee;
  --color-gray-mid: #969696;
  --color-red-accent: #ff6b6b;

  /* Typography */
  --font-primary: "PingFang SC", "helvetica neue", tahoma, "microsoft yahei", arial, "hiragino sans gb";
  --font-size-h1: 60px;
  --font-size-link-lg: 20px;
  --font-size-heading-sm: 18px;
  --font-size-body-lg: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption: 12px;
  --line-height-h1: 1.5;
  --line-height-link-lg: 3.6;
  --line-height-heading-md: 2.4;
  --line-height-heading-sm: 1.8;
  --line-height-body: 1.5;
  --line-height-button-lg: 2.67;
  --line-height-button-sm: 3.0;
  --line-height-caption: 1.6;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-22: 22px;
  --space-30: 30px;
  --space-40: 40px;
  --space-45: 45px;
  --space-55: 55px;
  --space-80: 80px;
  --space-100: 100px;
  --space-110: 110px;
  --space-120: 120px;

  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 32px;
  --radius-lg: 42px;
  --radius-full: 99px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.15) 0px 2px 6px 0px;
}

8. AI Coding Assistant Prompt

# Meitu Design System Specification

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

## Brand Context
Meitu values clarity, usability, and visual polish. Their design supports image-heavy content with neutral colors, clean typography, and rounded interactive elements. Interactions are obvious, typography is legible, and the interface stays out of the way of visuals.

## Color Palette
- Neutral Gray Dark: #6c6c6c — Secondary text, captions
- Pure White: #ffffff — Backgrounds, light buttons
- Pure Black: #000000 — Primary text, navigation
- Near Black: #1e1e1e — Dark sections, overlays
- Link Blue: #0000ee — Hyperlinks
- Neutral Gray Mid: #969696 — Disabled text, placeholders
- Accent Red: #ff6b6b — Alerts, highlights

## Typography
- Primary font: "PingFang SC", "helvetica neue", tahoma, "microsoft yahei", arial, "hiragino sans gb"

| Level      | Size | Weight | Line Height | Use For |
|------------|------|--------|-------------|---------|
| H1         | 60px | 500    | 1.5         | Hero titles |
| Link-lg    | 20px | 400    | 3.6         | Main navigation links |
| Heading-sm | 20px | 500/600| 2.4/1.5     | Section headers |
| Heading-xs | 18px | 400    | 1.8         | Subheaders |
| Button-lg  | 18px | 500    | 2.67        | Primary buttons |
| Link-md    | 16px | 600    | 1.5         | Secondary navigation |
| Body       | 16px | 400    | 1.5         | Paragraph text |
| Button-sm  | 16px | 400    | 3.0         | Compact buttons |
| Link-sm    | 14px | 400    | 1.5         | Footer links |
| Caption    | 14px | 400    | 1.5         | Small labels |
| Caption-sm | 12px | 400    | 1.6         | Microcopy |

## Spacing & Grid
Base unit: 8px
Scale: 2px, 4px, 8px, 10px, 12px, 16px, 22px, 30px, 40px, 45px, 55px, 80px, 100px, 110px, 120px
Use multiples of 8px where possible; off-scale spacing for specific visual alignments.

## Border Radius
- sm: 10px — small UI blocks
- md: 32px — medium buttons
- lg: 42px — large buttons
- full: 99px — pill buttons

## Shadows & Depth
- shadow-sm: rgba(0, 0, 0, 0.15) 0px 2px 6px 0px — subtle elevation

## Component Specifications

### Primary Button
Default:
- background: #ffffff
- color: #ffffff (icon or transparent fill)
- padding: 0px
- border-radius: 99px
- border: 1px solid #ffffff
- font-weight: 400
- font-size: 16px
States:
- hover: custom color change (not extracted)
- focus: outline with brand color
- active: slight color darkening
- disabled: opacity 0.5

### Navigation Links
Variants:
- Blue (#0000ee), weight 400 — hyperlinks
- Black (#000000), weight 600 — main nav
- White (#ffffff), weight 400 — dark backgrounds
- Gray (#6c6c6c), weight 400 — secondary

No underline, hover likely adds underline or color shift.

### Cards
- background: #ffffff
- padding: 30px
- border-radius: 10–42px depending on size
- shadow-sm for subtle depth

## Layout & Responsive Rules
- Use fluid layouts
- Section spacing: 40px–120px depending on hierarchy
- Maintain 8px rhythm for internal padding

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Focus indicators on buttons/links: visible outlines
- Loading states: subtle opacity changes

## DO List
- Use only palette colors
- Keep spacing to 8px multiples unless specified
- Maintain consistent corner radius per component type
- Use PingFang SC for all text
- Make links obvious (blue or black depending on context)

## DON'T List
- Invent new colors
- Mix sharp and rounded corners
- Overuse red — keep it for alerts
- Apply shadows where not defined
- Reduce contrast for body text

## Code Examples

### Button
```css
.btn {
  background: #ffffff;
  color: #ffffff;
  padding: 0;
  border-radius: 99px;
  border: 1px solid #ffffff;
  font-weight: 400;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn:focus {
  outline: 2px solid #0000ee;
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px 0px;
}
```

### Link
```css
.link {
  color: #0000ee;
  text-decoration: none;
  font-weight: 400;
}
.link:hover {
  text-decoration: underline;
}
```

9. Summary

TL;DR — Meitu’s design system is neutral, image-first, and clean. It uses a safe color palette, pragmatic typography, and rounded corners everywhere. Buttons are pill-shaped, links are obvious, and spacing is mostly on an 8px grid.

Brand Keywords:

• neutral-functional
• friendly-minimal
• image-prioritized
• rounded-interactive