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

# OnePlus · Design System

> Quiet monochrome, bold product presence

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.oneplus.com/us · **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._

A compact electronics storefront that pairs restrained black-and-white interface styling with expansive product imagery. Alternating bright shopping sections and dark community or signup bands keep the long homepage varied without changing its visual language.

## North star

Keep interface elements quiet and let large, cleanly framed product imagery lead each section.

## Overview

The page uses a mostly white canvas, crisp near-black text, and black pill-shaped purchase buttons to keep attention on product launches rather than interface chrome. Pale neutral tones appear in subtle section bands and media backdrops, while dark full-width areas mark community and newsletter content. OnePlus Sans carries navigation, product names, prices, and supporting copy in a clean, compact sans-serif voice; headings are regular-weight and product titles gain prominence through scale and placement rather than decorative typography. The layout alternates between full-bleed hero imagery with copy at the edges, centered single-product showcases, and multi-column accessory cards. Lower editorial and support blocks use split layouts, while the footer returns to a dense dark surface. Large, carefully framed device photography supplies most of the color and texture. Spacing is compact but sections remain visually distinct through broad media areas and clear shifts in background tone.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and bright section backgrounds; also appears in imagery and as text on dark surfaces. |
| Graphite Ink | `#252525` | `--color-graphite-ink` | neutral | Primary dark text for product titles, headings, and other content. |
| Carbon Black | `#000000` | `--color-carbon-black` | surface | Purchase buttons and broad dark community, signup, and footer surfaces. |
| Soft Ash | `#f2f2f2` | `--color-soft-ash` | neutral | Muted text on dark sections and the light end of the measured pale gradient. |
| Quiet Gray | `#8c8c8c` | `--color-quiet-gray` | neutral | Muted navigation, footer, and supporting text. |
| Pencil Gray | `#cccccc` | `--color-pencil-gray` | neutral | Subtle secondary text and fine footer details. |
| Border Mist | `#dddddd` | `--color-border-mist` | semantic | Fine outlines, including the border around secondary support controls. |
| Slate Line | `#595959` | `--color-slate-line` | neutral | Outlined links and controls against dark surfaces, including the app-store link. |
| Stone Text | `#535353` | `--color-stone-text` | neutral | Occasional muted supporting text. |
| Footer Charcoal | `#333333` | `--color-footer-charcoal` | surface | Dark footer details and low-contrast supporting interface elements. |
| Silver Gray | `#bfbfbf` | `--color-silver-gray` | neutral | Minor muted text details. |
| Night Ink | `#0d0d0d` | `--color-night-ink` | neutral | Near-black navigation detail and subtle dark interface text. |
| Dust Gray | `#828282` | `--color-dust-gray` | neutral | Low-emphasis footer copy. |
| Signal Cyan | `#0099cc` | `--color-signal-cyan` | accent | Rare measured accent detail; not a defining color of the storefront or its primary actions. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Carbon Black) · `--color-surface-2` → `#252525` (Graphite Ink) · `--color-text` → `#252525` (Graphite Ink) · `--color-text-muted` → `#8c8c8c` (Quiet Gray) · `--color-text-subtle` → `#f2f2f2` (Soft Ash) · `--color-border` → `#dddddd` (Border Mist) · `--color-accent` → `#0099cc` (Signal Cyan)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#252525` | `#ffffff` | 15.33:1 | AAA |
| `#252525` | `#000000` | 1.37:1 | fail |
| `#8c8c8c` | `#ffffff` | 3.36:1 | AA-large |
| `#8c8c8c` | `#000000` | 6.25:1 | AA |
| `#8c8c8c` | `#252525` | 4.56:1 | AA |
| `#f2f2f2` | `#ffffff` | 1.12:1 | fail |
| `#f2f2f2` | `#000000` | 18.76:1 | AAA |
| `#f2f2f2` | `#252525` | 13.69:1 | AAA |
| `#0099cc` | `#ffffff` | 3.27:1 | AA-large |
| `#0099cc` | `#000000` | 6.43:1 | AA |

### Gradients

- `linear-gradient(rgb(250, 250, 250) 0%, rgb(242, 242, 242) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| OnePlus Sans Regular | `--font-body` | webfont | 400, 500 | Primary family for navigation, product headings, prices, descriptions, links, captions, and buttons. | Inter |
| OnePlus Sans Medium | `--font-display` | webfont | 400 | Secondary measured family used for selected headings. | Inter |

- **OnePlus Sans Regular:** Measured predominantly at regular weight, with a compact sans-serif appearance and no observed uppercase transformation or letter spacing.
- **OnePlus Sans Medium:** Used sparingly for headings; keep weight restrained and preserve the clean, unembellished display style.

### Type scale — Perfect Fourth (ratio ≈ 1.3, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.2 | 0 | — | OnePlus Sans Regular | Primary campaign and hero product title. |
| h2 | 36px | 400 | 1.19 | 0 | — | OnePlus Sans Medium | Section-level feature and editorial heading. |
| h3 | 32px | 400 | 1.25 | 0 | — | OnePlus Sans Regular | Secondary product and content-card heading. |
| h4 | 28px | 400 | 1.29 | 0 | — | OnePlus Sans Regular | Smaller feature, service, and support heading. |
| body | 14px | 400 | 1.29 | 0 | — | OnePlus Sans Regular | Prices, descriptions, supporting copy, and card content. |
| caption | 12px | 400 | normal | 0 | — | OnePlus Sans Regular | Fine print, labels, and compact secondary details. |
| button | 14px | 400 | normal | 0 | — | OnePlus Sans Regular | Purchase and other short action labels. |
| nav | 12px | 400 | normal | 0 | — | OnePlus Sans Regular | Compact global navigation and product navigation. |
| link | 16px | 400 | 1.5 | 0 | — | OnePlus Sans Regular | Inline calls to action and supporting navigation links. |

## Spacing & layout

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

Use the measured 1312px page maximum as the desktop content boundary, with compact overall density and a 4px-based spacing scale. The homepage alternates full-width product campaigns, centered single-product presentations, and multi-column accessory cards. Editorial, support, and community content shifts to two-column splits. The measured section gap is 32px and the element gap is 12px; use the larger measured spacing steps to give full-bleed media room. Keep headings and copy aligned to the content of each block rather than forcing a single page-wide alignment.

## Shape & elevation

- Radius: button `9999px` · card `4px` · link `4px` · xs `4px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.24s cubic-bezier(0.48, 0.04, 0.52, 0.96)` on interactive elements.

The measured interface has no shadows. Favor flat surfaces and clear tonal separation: bright white shopping areas, dark full-width community and footer sections, and restrained pale media backdrops. Use fine borders on selected secondary controls rather than adding card shadows. Cards are measured with a 4px radius; purchase buttons use pill shapes.

## Imagery

Large product photography and rendered device images are the main visual feature: phones dominate the opening hero, followed by a tablet showcase and accessory cards. Use clean studio-like framing, uncluttered backgrounds, and generous image areas. Lower sections mix product montages with community artwork, a photography-award visual, and branded software graphics. These vivid colors belong primarily to image assets; keep the surrounding interface neutral.

## Components

### Product hero

Pair a product campaign and compact price/action copy with oversized full-bleed device imagery; the opening showcase places copy on both sides of the featured phones.

### Buy now button

Black pill-shaped action with white text; measured at 12px OnePlus Sans Regular, medium weight, with horizontal padding of 16px.

### Text link

Use a restrained, typically underlined or inline link treatment instead of a filled button for secondary actions such as Learn more.

### Accessory card

Arrange products in a multi-column row with a small title and purchase details above product imagery; cards use a measured 4px radius.

### Support control

Secondary outlined pill control with a 1px #dddddd border and horizontal padding of 24px; retain a lightweight text treatment.

### Dark content band

Set community, newsletter, and footer content on black, with light text and media-led panels or compact link groups.

### Measured component styles

- **Primary button** (“Buy now”): background #000000 · text #ffffff · radius 999px · padding 0px 16px · 500 12px OnePlus Sans Regular
- **Secondary button** (“Product help”): transparent background · text #1a1a1a · border 1px solid #dddddd · radius 999px · padding 0px 24px · 500 14px OnePlus Sans Regular
- **Link** (“Google Play”): transparent background · text #ffffff · border 1px solid #595959 · radius 4px · padding 0px · 400 14px OnePlus Sans Regular
- **Card** (“OnePlus Community Highlights Join us for”): background #262626 · text #000000 · radius 4px · padding 0px · 400 16px OnePlus Sans Regular
- **Navigation item** (“Store Phone Tablet Wearables Audio More ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px OnePlus Sans Regular

## Do

- Use Gallery White as the default page canvas.
- Reserve Carbon Black for primary purchase actions and intentional dark bands.
- Give product photography the largest visual area in product sections.
- Use OnePlus Sans or a close neutral sans-serif substitute.
- Keep secondary actions visually quieter than purchase buttons.
- Separate major content groups with background changes and section rhythm.

## Don't

- Do not add shadows to cards or buttons.
- Do not make Signal Cyan the dominant page accent.
- Do not surround every product image with a heavy card treatment.
- Do not use decorative display type or all-caps styling.
- Do not compete with imagery using dense interface ornament.
- Do not apply dark backgrounds to every section.

## Agent prompt

Build a new OnePlus-style consumer electronics page with a quiet, product-first visual hierarchy. Use Gallery White (#ffffff) as the main canvas, Graphite Ink (#252525) for text, and Carbon Black (#000000) for primary pill buttons and a few deliberate dark content bands. Use Soft Ash (#f2f2f2) and Quiet Gray (#8c8c8c) only for muted details; Signal Cyan (#0099cc) should remain rare. Set type in OnePlus Sans or Inter, favoring regular weights and compact navigation. Organize content into broad image-led product campaigns, simple product grids, and occasional two-column editorial or support sections. Keep cards flat, add only measured subtle borders such as Border Mist (#dddddd), and avoid shadows. Give product imagery more visual weight than interface decoration, and use clear tonal transitions to pace a long page.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width two-product campaign with device imagery centered and product copy at the outer sides. | Product price, Primary purchase action, Secondary learn-more link | Full-bleed product imagery, White canvas, Black pill buttons |
| 2 | product-showcase | Centered single-product presentation with campaign copy above a large image. | Product price, Buy action, Learn-more link | Centered copy, Large product image, Bright neutral background |
| 3 | product-grid | Three-column accessory carousel with a product title, pricing, and imagery in each card. | Product purchase links, Horizontal browsing | Multi-column cards, Product cutouts, Compact action rows |
| 4 | feature-split | Two-column store promotion pairing a product montage with concise promotional copy. | Explore products, Learn-more link | Image-and-copy split, Dark feature surface |
| 5 | content-feed | Dark community band with a heading and two side-by-side content cards. | Community entry point, Article links | Dark full-width band, Image-led cards, Light text |
| 6 | feature-split | Editorial copy in a narrow column beside a wide photography-award image. | Read more, Award information | Text-and-image split, Vivid campaign artwork |
| 7 | feature-split | Wide software graphic beside a narrow product-story text column. | Explore software, Learn-more link | Asymmetric split, Branded image panel |
| 8 | feature-grid | Two-column pair of support and repair-service cards, followed by a compact row of help links. | Contact support, Repair-service entry, Help navigation | Service illustrations, Light panels, Small link row |
| 9 | newsletter | Dark connection band with app promotion and email signup panels in a multi-column layout. | App download, Email signup, Consent options | Dark background, Outlined controls, Promotional artwork |
| 10 | footer | Dense dark footer organized into five navigation columns, followed by payment and legal details. | Category navigation, Support links, Legal and region links | Black surface, Multiple link columns, Compact text |

## Source CSS custom properties (selected)

```css
--v-theme-background: 255,255,255;
--v-theme-background-overlay-multiplier: 1;
--v-theme-surface: 255,255,255;
--v-theme-surface-overlay-multiplier: 1;
--v-theme-surface-bright: 255,255,255;
--v-theme-surface-bright-overlay-multiplier: 1;
--v-theme-surface-variant: 66,66,66;
--v-theme-surface-variant-overlay-multiplier: 2;
--v-theme-on-surface-variant: 238,238,238;
--v-theme-primary: 24,103,192;
--v-theme-primary-overlay-multiplier: 2;
--v-theme-primary-darken-1: 31,85,146;
--v-theme-primary-darken-1-overlay-multiplier: 2;
--v-theme-secondary: 72,169,166;
--v-theme-secondary-overlay-multiplier: 1;
--v-theme-secondary-darken-1: 1,135,134;
--v-theme-secondary-darken-1-overlay-multiplier: 1;
--v-theme-color_brand_default: 245,5,20;
--v-theme-color_brand_default-overlay-multiplier: 1;
--v-theme-color_brand_hover: 255,89,89;
--v-theme-color_brand_hover-overlay-multiplier: 1;
--v-theme-color_brand_activated: 255,89,89;
--v-theme-color_brand_activated-overlay-multiplier: 1;
--v-theme-color_brand_disabled: 255,153,153;
--v-theme-color_brand_disabled-overlay-multiplier: 1;
--v-theme-color_brand_background: 255,232,232;
--v-theme-color_brand_background-overlay-multiplier: 1;
--v-theme-on-background: 0,0,0;
--v-theme-on-surface: 0,0,0;
--v-theme-on-surface-bright: 0,0,0;
--v-theme-on-primary: 255,255,255;
--v-theme-on-primary-darken-1: 255,255,255;
--v-theme-on-secondary: 255,255,255;
--v-theme-on-secondary-darken-1: 255,255,255;
--v-theme-on-color_brand_default: 255,255,255;
--v-theme-on-color_brand_hover: 255,255,255;
--v-theme-on-color_brand_activated: 255,255,255;
--v-theme-on-color_brand_disabled: 0,0,0;
--v-theme-on-color_brand_background: 0,0,0;
--v-border-color: 0, 0, 0;
```

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