Miui Design System Deep-Dive

1. Brand Overview

Miui’s design language is exactly what you’d expect from a consumer tech ecosystem that’s been iterating for years inside a hardware-first company. This is a UI for people who live inside a device experience daily — clean surfaces, no distracting frills, and typography that’s engineered to be as sharp on a phone screen as it is on a 27-inch monitor.

The vibe is minimal but not cold. White dominates. Black is the anchor. Blue is the energy. If you’ve seen Xiaomi hardware packaging, you’ll recognize the restraint. Miui’s home site is a showcase for their OS updates — the interface is almost clinical in its cleanliness — but it’s not sterile. There’s a touch of friendliness in the rounded corners and oversized headings. The typography is big and unapologetic. The layout breathes.

This is clearly for a tech-savvy audience — people who care about system updates, features, and UI polish. The site isn’t about selling “fun” — it’s about showing control, performance, and refinement. The design reflects this: no gradients, no drop shadows beyond a subtle rgba(0,0,0,0.1) depth hint, and a strict palette. They’re not trying to be playful like Google’s Material Design; they’re aiming closer to Apple’s “precision with restraint” philosophy, but with their own MiSans typeface and a slightly more utilitarian feel.

The underlying CSS framework is Tailwind, evident from arbitrary values like top-[117px] and responsive modifiers. That tells you they’re using utility-first development, which fits with the clean, token-driven design. Everything is built on a predictable grid. The breakpoints are pragmatic — starting at 360px for small phones up to 1440px for large desktops — no weird in-betweens.

If you’re designing for Miui, you need to think like they do: minimal palette, tight type hierarchy, consistent spacing multiples of 8px, and component shapes that balance function and friendliness. It’s easy to go off-brand by adding too much flair — the discipline here is in what you don’t add.

2. Color System

2.1 Primary Colors

The primary action color is a saturated blue — #0d84ff — paired with a slightly darker #317af0 for hover/focus states. This blue is energetic, tech-forward, and clean. It’s the “click me” color. It’s unmistakable against the white background, and it carries enough contrast to work with white text in buttons or links.

Psychologically, this blue says “trust” and “speed” — classic tech brand territory. Compared to Apple’s #0071e3 blue, Miui’s #0d84ff is a bit more electric and less corporate. It feels more youthful. Against competitors like Samsung (who often lean into gradients and deeper blues), Miui’s flat approach feels sharper.

Black #000000 is the text anchor, and white #ffffff is the default canvas.

2.2 Complete Palette

2.3 Color Relationships

Contrast is high — white on blue is safe, black on white is optimal, blue on white pops. The secondary text color rgba(29,29,31,0.6) is softer, but still accessible against white for captions.

Dark mode isn’t explicitly evidenced here — the palette is clearly optimized for light mode. The black and white pairing would invert cleanly, but the blue could feel too bright in dark mode unless slightly desaturated.

2.4 Usage Guide

• Use #0d84ff only for interactive elements (buttons, links, focus outlines).
• Keep #000000 for primary text; don’t mix with dark gray unless it’s a functional element.
• rgba(29,29,31,0.6) is great for muted labels — don’t use it for body text.
• Avoid pairing blue with secondary text color — low contrast.
• #317af0 is for hover states only — don’t use it as a static color.

3. Typography

3.1 Font Families

One family: MiSans. Fallbacks: system-ui, 微软雅黑. This is a custom Xiaomi font — clean, geometric, and optimized for both Latin and Chinese characters. No Google Fonts, no Adobe. Everything is self-hosted.

3.2 Type Scale

3.3 Hierarchy

They use massive headings — 72px and 56px — for hero sections. This means the typography itself is part of the visual identity. The weight variation (200 to 700) lets them create contrast without changing size. Smaller headings (20–25px) often have tighter tracking for a crisp feel. Links and captions stay light (450 weight) but are legible due to high contrast.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Everything is multiples or near multiples, with some odd values (9px, 25px, 33px) likely for optical alignment.

4.2 Layout

Breakpoints:

• 360px — small phones
• 410px — mid-size phones
• 480px — large phones/small tablets
• 680px — tablets
• 968px — small desktops
• 1024px — desktops
• 1440px — large desktops

Responsive is handled with Tailwind modifiers; containers scale fluidly between breakpoints.

5. Visual Elements

• Border Radius: Single value — 16px. Used on a and div. This is generous rounding, giving buttons and cards a friendly feel.
• Shadow: rgba(0, 0, 0, 0.1) 0px 8px 30px 0px — used sparingly (count: 2). Mostly flat design, but this shadow adds depth to important surfaces.
• Borders: No explicit border combinations; likely relying on color to separate sections.

6. Components

6.1 Buttons

No explicit button styles extracted, but given Tailwind CSS and border-radius 16px, primary buttons likely use:

• Background: #0d84ff
• Text: white
• Radius: 16px
• Hover: #317af0
• Padding: from spacing scale (likely 16px vertical, 24px horizontal)
• No borders

6.2 Links

Three link variants:

1. White text (#ffffff), no underline, weight 450 — used on dark backgrounds.
2. Black text (#000000), no underline, weight 450 — used on light backgrounds.
3. Muted text (rgba(29,29,31,0.6)), no underline, weight 450 — for secondary navigation.

Hover states not explicitly defined — probably minimal change (color shift or underline on hover).

6.3 Forms

No input styles extracted; likely minimal with border-radius 16px, light borders, focus ring rgba(59,130,246,0.5).

6.4 Cards

Padding: multiples of 24px, radius: 16px, shadow: rgba(0,0,0,0.1) 0px 8px 30px 0px.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-blue-primary: #0d84ff;
  --color-blue-hover: #317af0;
  --color-inactive-bullet: #1d1d1f;
  --color-tailwind-ring: rgba(59,130,246,0.5);
  --color-swiper-theme: #007aff;
  --color-ring-offset: #ffffff;
  --color-text-secondary: rgba(29,29,31,0.6);

  /* Typography */
  --font-family-primary: "MiSans", system-ui, 微软雅黑;
  --heading-1-size-xl: 4.50rem;
  --heading-1-weight-xl: 650;
  --heading-1-lineheight-xl: 1.32;
  /* ... all other type values replicated ... */

  /* Spacing */
  --space-9: 0.56rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-25: 1.56rem;
  --space-28: 1.75rem;
  --space-33: 2.06rem;
  --space-34: 2.13rem;
  --space-56: 3.5rem;
  --space-80: 5rem;
  --space-90: 5.63rem;
  --space-100: 6.25rem;
  --space-114-797: 7.17rem;
  --space-119-5: 7.47rem;
  --space-120: 7.5rem;
  --space-122-201: 7.64rem;
  --space-141-732: 8.86rem;
  --space-147-541: 9.22rem;
  --space-505-906: 31.62rem;

  /* Radius */
  --radius-lg: 16px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.1) 0px 8px 30px 0px;
}

8. AI Coding Assistant Prompt

# Miui Design System Specification

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

## Brand Context
Miui’s design is minimal, functional, and precise. It uses a strict palette, oversized headings, and friendly 16px rounded corners. Tailwind CSS utilities define spacing, layout, and responsiveness. The brand values clarity, legibility, and restraint.

## Color Palette
- White: #ffffff — Page backgrounds, text on dark surfaces
- Black: #000000 — Primary text on light backgrounds
- Blue Primary: #0d84ff — CTAs, primary buttons, focus states
- Blue Hover: #317af0 — Hover/focus state for blue actions
- Inactive Bullet: #1d1d1f — Swiper pagination inactive
- Tailwind Ring: rgba(59,130,246,0.5) — Focus outlines
- Swiper Theme Blue: #007aff — Swiper active state
- Ring Offset: #ffffff — Focus ring offset
- Text Secondary: rgba(29,29,31,0.6) — Captions, muted links

## Typography
Font family: "MiSans", system-ui, 微软雅黑

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1-xl | 72px | 650 | 1.32 | Hero titles |
| H1-lg | 56px | 200 | 1.33 | Large headings |
| H1-md | 42px | 400 | 1.33 | Section headings |
| H1-sm | 40px | 520 | 1.32 | Subheadings |
| H1-xs | 25px | 450 | 1.33 | Small headings |
| H1-xs-tight | 25px | 450 | 1.33 | letter-spacing: 3.25px |
| Body-lg | 20px | 400–450 | 1.33–1.50 | Body text |
| Link-lg | 17px | 450 | 1.33 | Navigation links |
| Caption | 14px | 450 | 1.86 | Labels, metadata |

## Spacing & Grid
Base: 8px. Scale: 9px, 12px, 16px, 20px, 24px, 25px, 28px, 33px, 34px, 56px, 80px, 90px, 100px, 114.797px, 119.5px, 120px, 122.201px, 141.732px, 147.541px, 505.906px.

Use for:
- Button padding: 16px vertical / 24px horizontal
- Card padding: 24px
- Section gaps: 80px+

## Border Radius
- lg: 16px — Buttons, cards, interactive surfaces

## Shadows & Depth
- Large: rgba(0,0,0,0.1) 0px 8px 30px 0px — Cards, modals

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background: #0d84ff;
  color: #ffffff;
  padding: 16px 24px;
  border-radius: 16px;
  font-family: "MiSans", system-ui, 微软雅黑;
  font-weight: 450;
  font-size: 17px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #317af0; }
.btn-primary:focus { outline: 2px solid rgba(59,130,246,0.5); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Links
```css
.link-dark {
  color: #000000;
  text-decoration: none;
  font-weight: 450;
}
.link-light {
  color: #ffffff;
  text-decoration: none;
  font-weight: 450;
}
.link-muted {
  color: rgba(29,29,31,0.6);
  text-decoration: none;
  font-weight: 450;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.1) 0px 8px 30px 0px;
}
```

## Layout & Responsive Rules
- Max width: fluid up to 1440px
- Page padding: 24px mobile, 80px desktop
- Grid gap: multiples of 8px
- Breakpoints: 360px, 410px, 480px, 680px, 968px, 1024px, 1440px

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: Tailwind ring color
- No complex animations — keep motion minimal

## DO
- Use only colors from palette
- Maintain 8px spacing grid
- Use MiSans for all text
- Keep border radius at 16px for interactive components
- Keep shadows subtle and rare

## DON'T
- Add gradients
- Use colors outside palette
- Mix sharp and rounded corners
- Overuse shadows
- Reduce contrast for body text

## Code Examples

Primary Button (Tailwind):
```html
<button class="bg-[#0d84ff] hover:bg-[#317af0] text-white px-6 py-4 rounded-[16px] font-[450] text-[17px] transition-colors duration-150">Click me</button>
```

Card:
```html
<div class="bg-white rounded-[16px] p-6 shadow-[rgba(0,0,0,0.1)_0px_8px_30px]">
  Card content
</div>
```

Link:
```html
<a href="#" class="text-black no-underline font-[450]">Link</a>
```

9. Summary

TL;DR — Miui’s design is clean, minimal, and precise. White space, electric blue actions, and oversized MiSans headings define the look. Stick to the 8px grid, 16px rounded corners, and a strict palette, and you’ll be on brand.

Brand Keywords:

• tech-minimalist
• precision-friendly
• grid-disciplined
• palette-strict
• typography-forward