---
title: "realme design system"
variant: extended
source: https://www.realme.com/global/
captured_at: 2026-10-12
theme: light
industry: consumer-electronics
generator: Design DNA (https://four.wiralomi.com/style/realme-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# realme · Design System

> Bright space, bold devices, product-first storytelling.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.realme.com/global/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

realme’s global homepage pairs a near-white canvas and restrained typography with oversized product campaign imagery. Full-width launches lead into discovery, collaboration, community, recommendations, and support content.

## North star

Keep interface chrome quiet and let large, carefully framed product imagery carry the page’s visual impact.

## Overview

The page is defined by a white-first palette: Gallery White (#ffffff) fills the canvas and keeps attention on campaign media, while True Black (#000000) carries the primary product naming and navigation. Most visual colour comes from phones, campaign photography, and other image assets rather than a persistent interface accent; treat those colours as content, not brand UI tokens. System sans-serif typography gives the navigation and product labels a clean, contemporary feel, with heavier display roles for headings and bold links. The opening is a spacious, full-bleed product hero, followed by similarly wide launches and a compact two-part audio feature. Lower sections shift to multi-column discovery and collaboration content, then community imagery and dense recommendation/support links. Keep section boundaries quiet, rely on whitespace and media for hierarchy, and reserve dark surfaces and fine borders for footer treatment.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and text colour; supports bright navigation and lets campaign imagery define each section. |
| True Black | `#000000` | `--color-true-black` | semantic | Primary navigation, headings, and product text on the light canvas. |
| Mist Gradient | `#bfbfbf` | `--color-mist-gradient` | neutral | Gradient sampling artefact, not a defining interface colour; do not introduce it as a standalone UI accent. |
| Graphite Footer | `#222222` | `--color-graphite-footer` | surface | Inverse dark surface measured in the footer; use for the lower-page dark treatment. |
| Footer Hairline | `#393939` | `--color-footer-hairline` | neutral | Border tone associated with the dark footer, separating footer content without strong contrast. |
| Footer Ash | `#a7a7a7` | `--color-footer-ash` | semantic | Muted footer text against the inverse surface. |
| Soft Grey | `#b2b2b2` | `--color-soft-grey` | surface | Secondary measured surface outside the dominant white campaign canvas; use sparingly. |
| Navigation Grey | `#666666` | `--color-navigation-grey` | neutral | Minor navigation text tone; secondary detail rather than a page-wide colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#222222` (Graphite Footer) · `--color-surface-2` → `#b2b2b2` (Soft Grey) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#a7a7a7` (Footer Ash) · `--color-border` → `#393939` (Footer Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#222222` | 1.32:1 | fail |
| `#000000` | `#b2b2b2` | 9.9:1 | AAA |
| `#ffffff` | `#222222` | 15.91:1 | AAA |
| `#ffffff` | `#b2b2b2` | 2.12:1 | fail |
| `#a7a7a7` | `#ffffff` | 2.41:1 | fail |
| `#a7a7a7` | `#222222` | 6.61:1 | AA |
| `#a7a7a7` | `#b2b2b2` | 1.13:1 | fail |

### Gradients

- `linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0))`
- `linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| -apple-system | `--font-body` | system | 600, 400, 700, 500 | System sans-serif used across navigation, headings, body copy, captions, and links. | Inter |

- **-apple-system:** Measured weights span 400–700; headings and navigation use stronger weights. Tracking is neutral, with no uppercase transformation.

### Type scale — Major Third (ratio ≈ 1.23, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 700 | 1.38 | 0 | — | -apple-system | Primary campaign headline and highest-level page title. |
| h2 | 28px | 600 | 1.3 | 0 | — | -apple-system | Major section headings such as discovery and collaboration. |
| h3 | 20px | 500 | 1.4 | 0 | — | -apple-system | Product or feature subheadings within campaign content. |
| h4 | 18px | 600 | 1.33 | 0 | — | -apple-system | Compact secondary headings and supporting feature labels. |
| body | 14px | 400 | 1.43 | 0 | — | -apple-system | General descriptions and supporting copy. |
| caption | 12px | 400 | 2.33 | 0 | — | -apple-system | Small labels and secondary image or content details. |
| button | 12px | 400 | 2 | 0 | — | -apple-system | Compact interface and locale control text. |
| nav | 14px | 600 | 1.14 | 0 | — | -apple-system | Main product and category navigation. |
| link | 16px | 700 | 1.19 | 0 | — | -apple-system | Prominent calls to action such as Learn More. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 8, 10, 12, 16, 20, 40 px.
- Section rhythm 36px · element gap 12px · card padding — · max content width 1312px.

Use wide, centered content within the measured 1312px maximum width, while campaign media can run full bleed. The first three product sections are tall single-column stages; the audio feature divides into two columns. Later sections become compact discovery and collaboration grids, followed by a single-column community feed and a four-column recommendation/support area. Keep alignment clean and spacing compact between elements, with clear breathing room between major blocks.

## Shape & elevation

- Radius: media `8px` · link `9999px` · xs `8px` · sm `16px` · pill `9999px`
- Shadow `md` (link): `rgba(0, 0, 0, 0.15) 0px 4px 20px 0px`
- Motion: standard transition `0.5s ease` on interactive elements.

The overall interface is flat, with few persistent card treatments. Keep section hierarchy in the media and whitespace rather than shadows. Use subtle separation where needed; the measured footer uses a dark surface with a fine border tone. A modest shadow is present on a link element, not as a page-wide card style.

## Imagery

Prioritize large product campaign images and video, with devices framed as the focal point against bright or campaign-specific backgrounds. The first viewport shows a mostly white hero with product renders entering from below and product naming placed beside them. Later sections mix promotional media, collaboration imagery, and community photography. Preserve image colour and composition as content; avoid adding decorative illustration that competes with it.

## Components

### Global navigation

Compact system-sans category links in black on white; measured nav text is 14px and weight 600.

### Campaign hero

Full-bleed product image or video with minimal overlay copy; maintain strong product focus and spacious composition.

### Learn More link

Prominent black text on a light grey pill, measured as bold 16px with a 23px radius and 20px horizontal padding.

### Discovery grid

Five-column brand exploration area using image-led destinations rather than heavy boxed cards.

### Collaboration gallery

Multi-item media gallery with numbered items and a featured collaboration link.

### Recommendations and support

Dense four-column lower-page link area for recommended devices, support, software, and documentation.

### Measured component styles

- **Primary button** (“Global / English”): transparent background · text #ffffff · radius 0px · padding 0px · 400 12px -apple-system
- **Link** (“Harry Potter Edition”): transparent background · text #0000ee · radius 0px · padding 0px · 400 14px -apple-system
- **Navigation item** (“GT Series”): transparent background · text #000000 · radius 0px · padding 0px · 600 14px -apple-system

## Do

- Use Gallery White (#ffffff) as the primary canvas.
- Set primary product names and headings in True Black (#000000).
- Let campaign imagery occupy generous full-width areas.
- Use measured system-sans typography with clear weight contrast.
- Keep section transitions quiet and whitespace-led.
- Reserve Graphite Footer (#222222) and Footer Hairline (#393939) for the lower-page inverse treatment.

## Don't

- Do not turn campaign image colours into persistent interface accents.
- Do not add decorative gradients unsupported by the page’s visual hierarchy.
- Do not place every section inside a bordered card.
- Do not crowd the product hero with extra copy or controls.
- Do not use heavy shadows as a general elevation system.
- Do not replace the bright canvas with a dark global theme.

## Agent prompt

Build a new realme-style consumer electronics page with a bright Gallery White (#ffffff) canvas and True Black (#000000) typography. Keep the interface chrome minimal so large, carefully framed product photography or video leads each major section. Use the measured system sans-serif character: compact, semibold navigation, strong campaign headings, and restrained supporting copy. Organize the page as broad campaign stages followed by image-led discovery, collaboration or community content, then a denser recommendation and support area. Use whitespace and section scale instead of card borders to create hierarchy. Treat image colours as campaign content, not global UI accents. If an inverse footer is needed, use Graphite Footer (#222222), Footer Ash (#a7a7a7), and subtle Footer Hairline (#393939).

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed, single-column product campaign with minimal visible copy. | Campaign landing, Product-first entry | Large media, Bright canvas, Minimal overlay |
| 2 | product-showcase | Full-width, single-column product campaign. | Feature promotion, Learn more | Oversized media, Short CTA |
| 3 | product-showcase | Full-width, single-column campaign with product imagery. | Feature highlights, Learn more | Campaign photography, Sparse copy |
| 4 | feature-split | Two-column audio feature with wide media across the section. | Explore product, Feature discovery | Split layout, Image and video |
| 5 | category-nav | Five-column image-led discovery area with a section heading. | Browse destinations, Brand discovery | Image tiles, Open grid |
| 6 | gallery | Multi-item gallery with a section heading and featured collaboration. | Browse gallery, Featured collaboration | Numbered items, Mixed media |
| 7 | testimonials | Single-column section containing a dense, image-led community feed. | Browse community, View user stories | User photography, Compact list |
| 8 | product-grid | Four-column lower-page area combining recommendations and support links. | Browse recommended devices, Find support resources | Dense link groups, Product thumbnails |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/realme-com