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

# ULANZI · Design System

> Camera gear showcased with clarity, contrast, and creator-first utility.

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.ulanzi.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._

ULANZI’s homepage pairs a high-contrast campaign hero with a bright, product-led shopping experience. Crisp typography, compact merchandising, and vivid creator photography keep the page practical while giving featured gear a premium feel.

## North star

Keep the storefront clean and product-led, using white space for browsing and a dark photographic hero for impact.

## Overview

The page uses a white canvas for most of its shopping and editorial content, interrupted by a full-bleed charcoal hero with white navigation and copy. Black and near-black text keeps product information crisp, while saturated raspberry marks the brand’s purchase actions, small promotional cues, and occasional graphic accents. OPPO Sans supplies compact, bold headings and readable interface text; navigation uses Basis Grotesque Pro. The layout moves between broad campaign imagery, a three-column brand-stat band, dense horizontal product merchandising, and calmer editorial and testimonial blocks. Generous blank intervals separate the main content groups, while cards and controls stay compact. Photography does most of the visual work: close product shots, creator scenes, and dark campaign images establish variety without introducing decorative illustration. Rounded pill buttons contrast with restrained, fine card borders.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | neutral | Primary text, inverse surfaces, dark hero and media panels. |
| Ulanzi Raspberry | `#d60051` | `--color-ulanzi-raspberry` | brand | Primary CTA, promotional highlights, navigation accents and sale text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, cards, light hero buttons and reverse text. |
| Soft Ink | `#121212` | `--color-soft-ink` | neutral | Headings, body copy, product names and subdued navigation text. |
| Deep Fade | `#050505` | `--color-deep-fade` | surface | Dark gradient endpoint detected in media overlays; not a defining page color. |
| Graphite Panel | `#1c1c1e` | `--color-graphite-panel` | surface | Dark testimonial and inverse card surfaces. |
| Mist Hairline | `#f3f3f3` | `--color-mist-hairline` | neutral | Fine borders around product cards and other light surfaces. |
| Cool Caption | `#b8b8bf` | `--color-cool-caption` | neutral | Muted text and small secondary button details. |
| Footer Charcoal | `#262626` | `--color-footer-charcoal` | surface | Dark footer and inverse lower-page area. |
| Footer Silver | `#d4d4d4` | `--color-footer-silver` | neutral | Muted footer text and low-emphasis information. |
| Cloud Gray | `#dadada` | `--color-cloud-gray` | surface | Pale neutral blocks and secondary backgrounds. |
| Slate Indigo | `#646b8c` | `--color-slate-indigo` | semantic | Measured gradient/nav detail; secondary graphic color, not a core storefront hue. |
| Blue Charcoal | `#1f2937` | `--color-blue-charcoal` | neutral | Occasional heading text detected in measured styles. |
| Electric Violet | `#5046e4` | `--color-electric-violet` | accent | Isolated button accent; not a dominant brand color. |
| Muted Mauve | `#a39999` | `--color-muted-mauve` | semantic | Minor link color in measured data, not a defining page treatment. |
| Midnight Slate | `#2b3044` | `--color-midnight-slate` | neutral | Occasional navigation or text detail. |
| Editorial Red | `#bf0101` | `--color-editorial-red` | accent | Red editorial card accent, notably the TIME feature panel. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Studio Black) · `--color-surface-2` → `#1c1c1e` (Graphite Panel) · `--color-surface-3` → `#262626` (Footer Charcoal) · `--color-surface-4` → `#dadada` (Cloud Gray) · `--color-text` → `#000000` (Studio Black) · `--color-text-muted` → `#121212` (Soft Ink) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#f3f3f3` (Mist Hairline) · `--color-accent` → `#d60051` (Ulanzi Raspberry) · `--color-accent-2` → `#5046e4` (Electric Violet) · `--color-accent-3` → `#bf0101` (Editorial Red) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#1c1c1e` | 1.23:1 | fail |
| `#000000` | `#262626` | 1.39:1 | fail |
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#000000` | 1.12:1 | fail |
| `#121212` | `#1c1c1e` | 1.1:1 | fail |
| `#121212` | `#262626` | 1.24:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1c1c1e` | 17.01:1 | AAA |
| `#ffffff` | `#262626` | 15.13:1 | AAA |

### Gradients

- `linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(0deg, rgb(100, 107, 140) 0%, rgb(100, 107, 140) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| OPPO Sans | `--font-body` | webfont | 500, 800, 700, 600, 900 | Headings, body copy, buttons, product cards, links and most interface text. | Inter |
| Basis Grotesque Pro | `--font-basis-grotesque-pro` | system | 500, 600 | Navigation text, with a small measured share. | DM Sans |

- **OPPO Sans:** Measured webfont; bold, compact headings and clear product labels, with mostly sentence case.
- **Basis Grotesque Pro:** Medium-weight sans-serif navigation; understated and sentence case.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 35px | 700 | 1.14 | 0 | — | OPPO Sans | Campaign hero headline and primary page-level title. |
| h2 | 30px | 800 | 1.3 | 0 | — | OPPO Sans | Major section headings, including category and testimonial sections. |
| h3 | 25px | 600 | 1.2 | 0 | — | OPPO Sans | Subsection headings and editorial or service-feature titles. |
| h4 | 22px | 600 | 1.3 | 0 | — | OPPO Sans | Smaller feature, product, or supporting section headings. |
| body | 14px | 800 | 1.3 | 0 | — | OPPO Sans | Prominent short descriptions, product details, and emphasized copy. |
| caption | 13px | 500 | 1.6 | 0 | — | OPPO Sans | Secondary labels, supporting descriptions, and compact annotations. |
| button | 16px | 600 | 1.6 | 0 | — | OPPO Sans | Primary calls to action and prominent shopping controls. |
| nav | 16px | 500 | 1.25 | 0 | — | Basis Grotesque Pro | Main category navigation across the header. |
| link | 13px | 500 | 1.6 | 0 | — | OPPO Sans | Product links, footer destinations, and supporting actions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 5, 6, 10, 12, 15, 16, 17, 18, 20, 24, 28, 30, 50 px.
- Section rhythm 50px · element gap 10px · card padding — · max content width 1340px.

The page follows a centered storefront structure with a measured maximum width of 1340px, while the campaign hero and media can run full bleed. A three-column statistics band leads into a 12-column product area and compact multi-column editorial content. Text is mostly left aligned, and product rows prioritize scanability. The overall density is comfortable: shopping content is compact, but large white intervals create deliberate pauses between categories, features, testimonials, and footer. The measured spacing system is based on a 2px unit.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `10px` · nav `8px` · link `12px` · xs `3px` · sm `8px` · md `10px` · lg `12px` · xl `14px` · 2xl `16px` · pill `9999px`
- Shadow `sm` (nav, other): `rgba(18, 18, 18, 0.05) 0px 4px 6px 0px`
- Shadow `inset` (card): `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px inset`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `hairline-2` (button): `rgba(255, 255, 255, 0.05) 0px 1px 2px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.1) 0px 4px 12px 0px`
- Shadow `hairline-3` (button): `rgba(18, 18, 18, 0.05) 0px 1px 2px 0px`
- Motion: standard transition `0.2s linear` on interactive elements.

Most product cards are flat, with thin #f3f3f3 borders and 10px measured corners. Buttons use subtle hairline shadows rather than strong elevation. A soft shadow appears around select navigation or cards, while dark image overlays and inverse surfaces create depth through contrast instead of layered panels.

## Imagery

Photography is the main expressive material: the hero uses dramatic low-key imagery of camera equipment, while category tiles show creators at work and product cards isolate accessories against light backgrounds. Editorial cards pair press branding with short quotations; testimonial cards use creator portraits over darkened images. Image crops and full-bleed treatments provide contrast without relying on decorative illustration.

## Components

### Campaign hero

Full-bleed dark product image with white navigation and copy; a white pill CTA uses raspberry text.

### Primary CTA

Rounded pill button; the measured raspberry treatment is #d60051 with white text, while hero purchase buttons may reverse to white with raspberry text.

### Category tiles

Large photographic links in a three-column band, with white labels over image edges.

### Product cards

Compact shopping cards with product imagery, #121212 names, fine #f3f3f3 borders, and price and purchase links.

### Press features

Two-column quote cards using recognizable publication wordmarks and distinct black or red header panels.

### Creator testimonials

Portrait-led cards with dark image treatment and compact white attribution and review copy.

### Newsletter and footer

Email signup transitions into a charcoal footer with grouped navigation and muted details.

### Measured component styles

- **Primary button** (“Skip to content”): background #d60051 · text #ffffff · border 1px solid #d60051 · radius 30px · padding 11px 22px · 500 14px OPPO Sans · shadow rgba(18, 18, 18, 0.05) 0px 1px 2px 0px
- **Secondary button** (“Buy Now”): background #ffffff · text #d60051 · border 1px solid #ffffff · radius 30px · padding 15px 50px · 800 14px OPPO Sans · shadow rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
- **Link** (“Buy Now”): transparent background · text #000000 · radius 0px · padding 0px · 500 13px OPPO Sans
- **Input**: transparent background · text #ffffff · radius 8px · padding 15px · 500 14px OPPO Sans
- **Card** (“Falcam TreeRoot Quick Lock Travel Tripod”): transparent background · text #121212 · border 1px solid #f3f3f3 · radius 10px · padding 0px · 500 16px OPPO Sans
- **Navigation item** (“Mobile Studio Vibe Working Camera New Ar”): transparent background · text #ffffff · radius 0px · padding 0px · 500 16px OPPO Sans

## Do

- Use a clean white canvas for most shopping sections.
- Reserve deep charcoal for campaign imagery and inverse panels.
- Use #d60051 as the clearest purchase and promotional accent.
- Keep product names and prices easy to scan.
- Use photography to explain products and creator use cases.
- Separate major content groups with generous breathing room.

## Don't

- Do not make every section dark or heavily boxed.
- Do not use multiple vivid accents as equal primary colors.
- Do not add decorative illustrations that compete with gear photography.
- Do not turn compact product cards into oversized editorial panels.
- Do not apply strong shadows to every card and control.
- Do not replace the white storefront canvas with a tinted page background.

## Agent prompt

Build a new ULANZI-style storefront page with a bright #ffffff canvas and a strong, full-bleed dark photographic hero. Use Studio Black (#000000) and Soft Ink (#121212) for crisp text, and reserve Ulanzi Raspberry (#d60051) for primary shopping actions and small promotional emphasis. Use OPPO Sans or a close sans-serif substitute such as Inter for compact, confident headings, product details, and controls; keep navigation understated. Structure content in a centered storefront grid with clear left alignment, dense but scannable product merchandising, and generous pauses between major sections. Lead with real camera and creator photography rather than decorative graphics. Keep cards mostly flat with fine #f3f3f3 borders and restrained rounding. Make buttons pill-shaped and use subtle shadows only where needed. End with a charcoal footer and subdued text.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark campaign carousel with overlaid left-aligned copy and header navigation. | campaign carousel, primary shopping CTA | dark product photography, white navigation, pill button |
| 2 | stats | Three-column proof-point band beneath a short ranking statement and creator category imagery. | trust signals, browse creator categories | stat labels, photographic tiles |
| 3 | product-grid | Category tabs above a compact multi-column product grid with shopping links. | category filtering, product browsing, quick purchase | product cards, price labels, promotional badges |
| 4 | feature-grid | Three-column service benefits with small images or icons and short text. | service reassurance, shipping information | benefit blocks, compact headings |
| 5 | content-feed | Two editorial quote cards arranged side by side under a section heading. | brand credibility, editorial proof | publication wordmarks, contrasting card headers |
| 6 | testimonials | Horizontal row of portrait-led testimonial cards with darkened image backgrounds. | social proof, creator attribution | portrait imagery, dark cards, small review copy |
| 7 | gallery | Single-row community or real-life media gallery. | community discovery, visual browsing | repeating image tiles |
| 8 | newsletter | Two-column signup band with offer copy and a compact email form. | email capture, first-purchase incentive | email input, subscribe button |
| 9 | footer | Dark footer with contact details, several link columns, app links, and payment/social marks. | support access, site navigation, social discovery | charcoal surface, grouped links, muted labels |

## Source CSS custom properties (selected)

```css
--color-foreground: 18, 18, 18;
--color-background: 255, 255, 255;
--gradient-background: #ffffff;
--color-button-text: 255, 255, 255;
--color-button: 214, 0, 81;
--color-sale-off-price: 214, 0, 81;
--color-compare-at-price: 148, 163, 184;
--color-review-stars: 251, 191, 36;
--color-background-input: 250, 250, 250;
--free-shipping-tracking-background: linear-gradient(269.94deg, rgba(239, 68, 68, 1) 0.05%, rgba(251, 191, 36, 1) 99.95%);
--color-text-message-success: 22, 101, 52;
--color-background-message-success: 239, 253, 244;
--color-text-message-warning: 160, 98, 7;
--color-background-message-warning: 254, 252, 232;
--color-text-message-error: 152, 28, 27;
--color-background-message-error: 254, 242, 242;
--font-body-family: 'OPPO Sans', sans-serif;
--font-body-style: normal;
--font-body-weight: 500;
--font-body-weight-bold: 800;
--font-body-weight-medium: 500;
--font-body-weight-large: 500;
--font-heading-family: 'OPPO Sans', sans-serif;
--font-heading-style: normal;
--font-heading-weight: 800;
--font-heading-weight-bold: 800;
--font-heading-weight-rte-bold: 800;
--font-heading-weight-semi-bold: 800;
--font-heading-weight-medium: 500;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--font-button-family: 'OPPO Sans', sans-serif;
--font-button-style: normal;
--font-button-weight: 500;
--font-button-scale: 1.0;
--font-button-weight-medium: 500;
--font-button-weight-bold: 800;
--product-card-text-alignment: left;
--product-card-border-opacity: 0.05;
--product-card-shadow-position: 0rem;
```

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