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

# 1MORE · Design System

> Immersive audio campaigns, led by the product

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.1more.com/index.html · **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._

1MORE’s homepage pairs cinematic audio campaigns with clean product-focused sections. A restrained white-and-gray framework lets warm photography, oversized Chinese headlines, and vivid red accents carry the brand identity.

## North star

Keep the interface quiet and light so full-width audio campaigns and product imagery—not decorative UI—command attention.

## Overview

The visual strategy is campaign-first: broad photographic banners occupy the main canvas, with each image supplying its own atmosphere rather than relying on decorative interface color. The measured palette is anchored by white (#ffffff), pale gray (#eeeeee and #e8e8e8), and near-black text; the screenshots add warm brown tones and soft lavender within campaign photography, not as general UI colors. Red appears as a small, high-contrast signal in carousel indicators and customer-service controls. Chinese headlines are prominent and spare, while Gotham family faces and Book support product labels, navigation, and compact utility copy. Large, image-led sections alternate with quieter product and footer areas. The result is a restrained shell around expressive headphone imagery, with minimal visible borders, flat surfaces, and clear separation between campaigns.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, light campaign backgrounds, and white type on dark customer-service controls. |
| Soft Mist | `#eeeeee` | `--color-soft-mist` | surface | Pale gray section band behind campaign or product content. |
| Slate Copy | `#484848` | `--color-slate-copy` | neutral | Muted text and link color for secondary interface content. |
| Vermilion | `#f93b1d` | `--color-vermilion` | accent | Red campaign-button gradient accent and restrained promotional emphasis. |
| Signal Red | `#ff0000` | `--color-signal-red` | accent | Second measured red gradient accent for campaign buttons. |
| Footer Gray | `#e8e8e8` | `--color-footer-gray` | surface | Light gray footer section background. |
| Deep Ink | `#010101` | `--color-deep-ink` | neutral | Primary measured text color for strong contrast on light surfaces. |
| Graphite Copy | `#333333` | `--color-graphite-copy` | neutral | Secondary text tone for supporting page copy. |
| Near Black | `#0d0d0d` | `--color-near-black` | semantic | Sparse near-black text and button details. |
| Charcoal Link | `#434343` | `--color-charcoal-link` | neutral | Muted link text, including measured 1MORE links. |
| Coral Red | `#ff5138` | `--color-coral-red` | accent | Bright customer-service button background. |
| Soft Black | `#1b1b1b` | `--color-soft-black` | neutral | Dark supporting text in the measured palette. |
| Night Panel | `#232323` | `--color-night-panel` | surface | Small inverse dark surface, consistent with the dark navigation strip. |
| Pale Link | `#c8c8c8` | `--color-pale-link` | neutral | Low-emphasis link detail; keep usage subtle. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#eeeeee` (Soft Mist) · `--color-surface-2` → `#e8e8e8` (Footer Gray) · `--color-surface-3` → `#232323` (Night Panel) · `--color-text` → `#010101` (Deep Ink) · `--color-text-muted` → `#484848` (Slate Copy) · `--color-text-subtle` → `#333333` (Graphite Copy) · `--color-accent` → `#f93b1d` (Vermilion) · `--color-accent-2` → `#ff0000` (Signal Red) · `--color-accent-3` → `#ff5138` (Coral Red) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#010101` | `#ffffff` | 20.87:1 | AAA |
| `#010101` | `#eeeeee` | 17.99:1 | AAA |
| `#010101` | `#e8e8e8` | 17.04:1 | AAA |
| `#010101` | `#232323` | 1.33:1 | fail |
| `#484848` | `#ffffff` | 9.15:1 | AAA |
| `#484848` | `#eeeeee` | 7.88:1 | AAA |
| `#484848` | `#e8e8e8` | 7.46:1 | AAA |
| `#484848` | `#232323` | 1.72:1 | fail |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#eeeeee` | 10.89:1 | AAA |

### Gradients

- `linear-gradient(rgb(249, 59, 29), rgb(249, 59, 29)), linear-gradient(rgb(255, 0, 0), rgb(255, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Book | `--font-book` | system | 400 | Utility labels, captions, buttons, and compact links. | Noto Sans |
| GothamLight | `--font-gothamlight` | system | 400 | Light-weight supporting Latin copy and product messaging. | Montserrat |
| GothamMedium | `--font-body` | system | 400 | Medium-weight body and product description text. | Montserrat |
| Microsoft Yahei | `--font-display` | system | 400 | Chinese primary heading and product text. | Noto Sans SC |
| GothamBold | `--font-gothambold` | system | 700 | Bold section headings and product titles. | Montserrat |
| Helvetica Neue | `--font-helvetica-neue` | system | 400 | Compact customer-service button text. | Inter |

- **Book:** Regular weight; keep small utility copy calm and unembellished.
- **GothamLight:** Use a light sans-serif feel for restrained secondary messaging.
- **GothamMedium:** Measured as regular; use medium visual emphasis without heavy display styling.
- **Microsoft Yahei:** Keep Chinese forms clean and legible; measured heading uses regular weight.
- **GothamBold:** Use for concise headings, not dense body copy.
- **Helvetica Neue:** Small regular sans-serif utility label; no special tracking measured.

### Type scale — Perfect Fourth (ratio ≈ 1.313, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 34.5px | 400 | normal | 0 | — | Microsoft Yahei | Chinese campaign headline and primary page message. |
| h2 | 29px | 700 | normal | 0 | — | GothamBold | Bold product or campaign section titles. |
| body | 20px | 400 | normal | 0 | — | GothamMedium | Product descriptions and supporting campaign copy. |
| caption | 12px | 400 | normal | 0 | — | Book | Small product captions and footer details. |
| button | 16px | 400 | 2.5 | 0 | — | Book | Customer-service and action labels. |
| link | 12px | 400 | normal | 0 | — | Book | Navigation, footer, and product links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 3, 8, 9, 10, 12, 14, 15, 20, 25, 29, 30, 44, 50, 62, 144 px.
- Section rhythm 62px · element gap — · card padding — · max content width 1200px.

Use a dark, compact top navigation strip above wide campaign panels. The measured page max width is 1200px, while hero and campaign media run full bleed. Stack large visual sections vertically, then divide product content into paired side-by-side panels where appropriate. Keep text aligned within each campaign image or product block instead of imposing a dense card grid. The measured spacing scale is comfortable, with a section gap of 62px; preserve generous separation around content and a quieter, compact footer.

## Shape & elevation

- Radius: button `4px`
- No box shadows measured: the page is flat.

The page reads as mostly flat: measured data reports no shadow system, and the screenshots show little visible border treatment. Separate campaigns through changes in background tone and image composition rather than raised cards. Keep the navigation visually distinct with its dark strip and use the measured small button radius only where relevant; do not add broad shadow effects.

## Imagery

Use high-quality product and lifestyle photography as the primary visual language: headphones, earbuds, and campaign talent are presented large, often inside full-width banners. Keep each campaign's photographic color grading intact; warm brown and lavender hues belong to the imagery rather than the UI palette. Product panels use clean, pale backgrounds and isolated product compositions. Avoid adding decorative illustration or interface overlays that compete with the photography.

## Components

### Top navigation

A slim dark header with the white 1MORE mark and a small set of centered, muted navigation links.

### Campaign carousel

Full-width photographic hero with embedded campaign messaging and understated slide indicators, including a red active indicator.

### Product campaign banner

A separate full-width lifestyle or product image block; let the campaign artwork carry its own colors and typography.

### Product showcase panels

Paired image-led product areas with concise Chinese titles and descriptive copy on pale backgrounds.

### Customer-service control

A compact dark consultation control and a coral-red online service button; measured service button text is white.

### Footer

A light gray closing section with grouped product, company, and contact links, customer hotline details, and compact legal copy.

### Measured component styles

- **Primary button** (“在线客服”): background #ff5138 · text #ffffff · radius 0px · padding 0px · 400 16px Book
- **Secondary button** (“点此咨询客服”): background #110f10 · text #ffffff · radius 4px · padding 0px · 400 14px Helvetica Neue
- **Link** (“时尚红 万魔熊”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Microsoft Yahei

## Do

- Lead with wide, high-impact product or lifestyle photography.
- Keep the surrounding interface predominantly white and pale gray.
- Use red sparingly for active indicators and service actions.
- Set Chinese campaign messaging large and uncluttered.
- Keep product descriptions and utility links visibly secondary.
- Separate sections with quiet changes of background and imagery.

## Don't

- Do not turn the measured palette into a multicolor UI theme.
- Do not apply campaign-image brown or lavender tones to generic interface surfaces.
- Do not add card shadows or decorative borders.
- Do not crowd the hero with navigation, badges, or extra copy.
- Do not replace the image-led rhythm with a dense product grid.
- Do not use red as a large persistent page background.

## Agent prompt

Build a new 1MORE-style consumer audio page with a quiet interface around expressive product campaigns. Use Gallery White (#ffffff) as the main canvas, Soft Mist (#eeeeee) and Footer Gray (#e8e8e8) for occasional section bands, and Deep Ink (#010101) or Slate Copy (#484848) for text. Reserve Vermilion (#f93b1d), Signal Red (#ff0000), and Coral Red (#ff5138) for small, purposeful campaign or service accents. Place a compact dark navigation above broad, image-led hero content; use concise Chinese headlines and product copy. Alternate full-width lifestyle banners with clean product showcases and finish with a restrained footer. Keep surfaces flat, avoid decorative shadows, and let image color grading provide atmosphere rather than extending it into the UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign media beneath a compact dark navigation bar. | carousel indicators, campaign navigation | dark top strip, large photographic banner, red active indicator |
| 2 | gallery | A wide, full-bleed campaign panel with image-led content. | campaign link, visual storytelling | full-width imagery, light campaign field, compact service control |
| 3 | product-showcase | Product imagery and copy arranged in broad campaign panels. | product discovery, linked product details | paired product panels, pale backgrounds, Chinese product titles |
| 4 | footer | Light gray footer with grouped link lists and a separate contact area. | site navigation, customer contact, legal information | gray band, compact links, service action |

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