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

# Hohem · Design System

> Precision stabilizers, presented with cinematic clarity

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

Hohem’s homepage pairs cinematic, full-bleed stabilizer imagery with a restrained white-and-gray storefront. Orange marks purchase actions, while clean sans-serif typography and generous spacing keep the product lineup and editorial content easy to scan.

## North star

Let cinematic product imagery create impact, then return to a bright, uncluttered catalog with orange reserved for high-priority actions.

## Overview

The visual strategy shifts between immersive product campaigns and a quiet, bright storefront. The hero uses near-black cinematic imagery as a dramatic stage for stabilizer hardware, with white navigation and copy and vivid orange purchase actions. Below it, a white canvas and occasional very pale gray surfaces let product cards, a retail banner, editorial photography, and service links breathe without competing for attention. OPPO Sans 4.0 supplies a modern, compact voice across headings, body copy, and navigation; stronger weights make product names and calls to action legible over imagery. Layouts move from full-bleed campaign media to a centered product-card grid, a wide blog feature, a press-logo row, and a multi-column footer. Rounded controls and media corners soften the technical product category. Use measured palette colors for interface chrome; darker and cooler colors in the screenshot largely belong to campaign photography rather than the core UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and inverse text on dark campaign imagery and orange buttons. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Muted product links, secondary text, and some input outlines. |
| Soft Pewter | `#afafaf` | `--color-soft-pewter` | neutral | Measured secondary button fill, notably for repeated Learn More actions. |
| Cloud Surface | `#f7f7f7` | `--color-cloud-surface` | surface | Pale section bands and low-contrast backgrounds separating content. |
| Signal Orange | `#ff4d00` | `--color-signal-orange` | accent | Primary buy actions, highlighted links, and small interface accents. |
| Graphite Ink | `#333333` | `--color-graphite-ink` | brand | Main headings, body copy, and dark text on white surfaces. |
| Fine Divider | `#e5e5e5` | `--color-fine-divider` | semantic | Subtle borders and hairline separators across light interface areas. |
| Deep Charcoal | `#3d3d3d` | `--color-deep-charcoal` | neutral | Secondary heading and text tone; subordinate to the primary ink. |
| Pale Line | `#cccccc` | `--color-pale-line` | neutral | Low-contrast border detail and segmented control marks. |
| Mid Gray | `#808080` | `--color-mid-gray` | neutral | Occasional muted supporting text. |
| Slate Link | `#777777` | `--color-slate-link` | neutral | Low-emphasis link text; not a dominant brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Cloud Surface) · `--color-text` → `#333333` (Graphite Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#999999` (Quiet Gray) · `--color-border` → `#e5e5e5` (Fine Divider) · `--color-accent` → `#ff4d00` (Signal Orange) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#f7f7f7` | 11.79:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#f7f7f7` | 2.66:1 | fail |
| `#ff4d00` | `#ffffff` | 3.33:1 | AA-large |
| `#ff4d00` | `#f7f7f7` | 3.1:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(255, 77, 0) 0%, rgb(255, 77, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| OPPO Sans 4.0 | `--font-body` | webfont | 400, 600, 700 | Site-wide interface, headings, product copy, and buttons. | Inter |

- **OPPO Sans 4.0:** Use measured 400, 600, and 700 weights; hierarchy is weight-led with no measured tracking or uppercase requirement.

### Type scale — Minor Third (ratio ≈ 1.189, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 600 | normal | 0 | — | OPPO Sans 4.0 | Campaign headline and leading product message. |
| h2 | 32px | 700 | normal | 0 | — | OPPO Sans 4.0 | Major section titles and prominent feature headings. |
| h3 | 28px | 400 | normal | 0 | — | OPPO Sans 4.0 | Product or editorial subsection headings. |
| h4 | 24px | 400 | normal | 0 | — | OPPO Sans 4.0 | Smaller card and service headings. |
| body | 18px | 400 | normal | 0 | — | OPPO Sans 4.0 | Product descriptions, editorial copy, and supporting text. |
| caption | 14px | 400 | normal | 0 | — | OPPO Sans 4.0 | Compact labels and secondary explanatory copy. |
| button | 18px | 600 | 3.11 | 0 | — | OPPO Sans 4.0 | Primary and secondary calls to action. |
| link | 14px | 400 | normal | 0 | — | OPPO Sans 4.0 | Navigation, product links, and compact inline actions. |

## Spacing & layout

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

Use a centered content frame capped at the measured 1260px maximum width, while campaign media can extend edge to edge. The page rhythm alternates full-bleed hero storytelling with inset content: a wide retail banner, a two-column product-card arrangement, editorial feature, press marks, service links, and a dense footer. Align catalog content consistently and keep the overall density comfortable. The measured spacing system is based on an 8px unit, with a 64px section gap; preserve generous separation rather than compressing sections.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `10px` · media `10px` · link `9999px` · xs `10px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.16) 0px 4px 16px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

Most of the page is flat, using white space and subtle surface changes instead of stacked panels. Cards and media use measured 10px rounding, while buttons and some controls are pill-shaped. A measured medium shadow appears on a feedback panel, not as a general card treatment. Separate sections primarily through spacing and pale fills, with #e5e5e5 hairlines where borders are needed.

## Imagery

Prioritize high-quality product photography and campaign video featuring smartphone and camera stabilizers in use. The hero can use cinematic, dark imagery with product hardware prominently framed; subsequent cards use bright, clean product cutouts against pale surfaces. Mix in lifestyle photography for editorial storytelling and a wide retail banner. Treat screenshot colors from scenes and product renders as image content, not interface palette.

## Components

### Campaign hero

Full-bleed cinematic product campaign with white overlay navigation and copy, orange Buy Now action, and a quieter Learn More link.

### Primary CTA

Pill-shaped #ff4d00 button with white text; prioritize purchase actions over secondary links.

### Secondary CTA

Measured repeated Learn More button uses #afafaf with white text and a rounded capsule form.

### Product cards

Bright product tiles with hardware imagery, #333333 titles, muted supporting copy, and softly rounded media.

### Editorial feature

Wide lifestyle image-led blog feature with compact title and secondary Learn More affordance.

### Service links

Three service destinations presented as a simple row with restrained line icons and ample breathing room.

### Feedback overlay

White rounded survey panel layered over campaign content with a soft measured shadow and orange-tinted Continue control.

### Measured component styles

- **Primary button** (“Continue”): background #ff4d00 · text #ffffff · radius 50px · padding 12px 20px · 600 14px OPPO Sans 4.0
- **Secondary button** (“LEARN MORE”): background #afafaf · text #ffffff · radius 28px · padding 0px 32px · 600 18px OPPO Sans 4.0
- **Link** (“iSteady V3 Ultra”): transparent background · text #999999 · radius 0px · padding 0px · 400 14px OPPO Sans 4.0
- **Input**: transparent background · text #333333 · border 1px solid #999999 · radius 17px · padding 0px 16px · 400 13.3333px Arial
- **Card** (“iSteady V3 Ultra Your Touch. Your Moment”): background #fafafa · text #333333 · radius 10px · padding 0px · 400 16px OPPO Sans 4.0

## Do

- Use #ff4d00 for the clearest purchase action.
- Keep campaign media immersive and product-led.
- Return to white and pale gray for catalog sections.
- Use OPPO Sans 4.0 or a close sans-serif substitute.
- Reserve rounded pills for buttons and compact controls.
- Give product imagery generous room and consistent alignment.

## Don't

- Do not use campaign photography colors as interface tokens.
- Do not make every action orange.
- Do not add heavy card shadows throughout the page.
- Do not crowd the product grid with dense copy.
- Do not introduce decorative gradients absent from the measured interface.
- Do not overuse borders where spacing can separate content.

## Agent prompt

Build a responsive consumer-electronics page in Hohem’s clean, product-led style. Use Gallery White (#ffffff) as the main canvas, Cloud Surface (#f7f7f7) for quiet section separation, Graphite Ink (#333333) for primary copy, and Signal Orange (#ff4d00) only for high-priority purchase actions. Set typography in OPPO Sans 4.0 or Inter, using weight and scale for hierarchy rather than decorative tracking. Open with a cinematic, full-width stabilizer campaign image and restrained overlay navigation. Follow with spacious product tiles, editorial lifestyle imagery, service links, and a structured footer. Keep cards and media softly rounded, controls pill-shaped, and most surfaces flat. Use generous measured spacing and a centered content frame, while allowing campaign media to bleed edge to edge. Treat scene colors as photography, not UI tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign media with overlay navigation, copy, and calls to action. | Buy Now action, Learn More action, campaign carousel | cinematic dark imagery, white overlay copy, orange pill CTA |
| 2 | other | Single wide retail promotional image inside the page frame. | retailer destination | wide image banner, rounded media |
| 3 | product-grid | Product showcase arranged as a spacious two-column tile grid. | product discovery, product detail links | bright product cutouts, soft card surfaces, muted descriptions |
| 4 | content-feed | Wide editorial feature with compact heading and image-led content. | read article, browse blog | lifestyle photography, overlay article labels |
| 5 | testimonials | Centered proof point with press logos and a brief supporting quote. | credibility building | logo row, centered quote, open white space |
| 6 | feature-grid | Three evenly distributed service destinations in a pale band. | online store access, tutorial access, after-sales support | simple line icons, centered labels, pale surface |
| 7 | footer | Multi-column footer with category links, support details, email field, and social icons. | product navigation, support access, newsletter signup | compact link columns, email input, social icons |

## Source CSS custom properties (selected)

```css
--atlas-background-main: #FFFFFF;
--atlas-background-content: #FFFFFF;
--atlas-background-success: #518b22;
--atlas-background-error: #be2119;
--atlas-text-primary: #000000;
--atlas-text-secondary: #00000080;
--atlas-text-negative: #be2119;
--atlas-text-positive: #366d12;
--atlas-text-placeholder: #747576;
--atlas-text-primary-inverse: #FFFFFF;
--atlas-primary-color: #000000;
--atlas-button-primary: #000000;
--atlas-button-disabled-color: grey;
--atlas-button-text-disabled-color: lightgrey;
--atlas-border-light: rgba(0, 0, 0, 0.05);
--atlas-border-focus: #41a1e6;
--atlas-border-dark: rgba(0, 0, 0, 0.5);
--atlas-focus-outline-color: rgba(65, 161, 230, 0.2);
--atlas-text-selection: rgba(150, 180, 255, 0.5);
--atlas-font-family: "OPPO Sans 4.0", "Microsoft YaHei", 微软雅黑, "PingFang SC", -apple-system;
--atlas-font-size-tiny: 12px;
--atlas-font-size-small: 14px;
--atlas-font-size-normal: 16px;
--atlas-font-size-large: 18px;
--atlas-font-weight-normal: 400;
--atlas-font-weight-bold: bolder;
--atlas-heading-font-family: "OPPO Sans 4.0", "Microsoft YaHei", 微软雅黑, "PingFang SC", -apple-system;
--atlas-heading-text-primary: #000000;
--atlas-heading-text-secondary: #00000080;
--atlas-heading-text-negative: #be2119;
--atlas-font-size-display: 40px;
--atlas-font-size-h1: 40px;
--atlas-font-size-h2: 32px;
--atlas-font-size-h3: 24px;
--atlas-font-size-h4: 18px;
--atlas-font-size-h5: 16px;
--atlas-font-weight-heading: 700;
--atlas-font-weight-heading-bold: bolder;
--atlas-shadow-medium: 0px 8px 16px 0px rgba(55, 63, 71, 0.2);
--atlas-window-shadow: 2px 4px 5px 0 rgba(0, 0, 0, 0.03), 8px 16px 9px 0 rgba(0, 0, 0, 0.03), 18px 36px 12px 0 rgba(0, 0, 0, 0.02);
```

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