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

# Laifen · Design System

> Precision personal care, presented with quiet confidence

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

Laifen’s homepage pairs a restrained black-and-white commerce framework with warm, lifestyle-led product imagery. Rounded shopping controls, broad section spacing, and repeated product grids guide visitors from brand storytelling to product discovery.

## North star

Keep the commerce UI quiet and monochrome so large, warm product photography carries the emotional impact.

## Overview

The page uses white as its primary canvas, with pale gray category bands and large black sections reserved for expert and customer stories. Black carries the navigation announcement, headings, and primary shopping buttons; muted gray supports secondary copy, while the warm beige hero button is a localized image-led accent rather than a sitewide color system. Typography mixes Poppins for prominent display messaging with Lato for navigation, product details, and controls; headings are bold and compact, while body copy stays small and readable. Product and lifestyle photography dominates, often spanning the full viewport or sitting in clean, rounded cards. The layout alternates broad promotional panels, category tiles, product carousels, trust marks, and editorial cards. Generous section breaks keep the long homepage breathable, while repeated pill-shaped buttons and restrained hairlines make its commerce interactions feel consistent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, header, product cards, and light-section background. |
| Carbon Black | `#000000` | `--color-carbon-black` | brand | Primary CTA fill, announcement strip, text, and full-width dark story section. |
| Soft Mist | `#f5f5f5` | `--color-soft-mist` | surface | Pale gray band behind popular categories and light content areas. |
| Quiet Gray | `#888888` | `--color-quiet-gray` | semantic | Muted secondary text and subdued links. |
| Deep Ink | `#151515` | `--color-deep-ink` | neutral | Body copy, navigation text, product titles, and dark surface details. |
| Slate Text | `#666666` | `--color-slate-text` | semantic | Secondary button and supporting copy details. |
| Fine Silver | `#e8e8e8` | `--color-fine-silver` | neutral | Subtle divider and hairline border color. |
| Cloud Gray | `#f0f0f0` | `--color-cloud-gray` | surface | Pale product-link and card background. |
| Graphite Surface | `#1c1c1c` | `--color-graphite-surface` | surface | Occasional dark card surface; not a dominant brand color. |
| Edge Gray | `#e2e2e2` | `--color-edge-gray` | neutral | Light button and component borders. |
| Pale Stone | `#cccccc` | `--color-pale-stone` | semantic | Occasional subdued text and control detail. |
| Rose Taupe | `#958784` | `--color-rose-taupe` | accent | Rare warm-toned heading or copy detail. |
| Silver Haze | `#bbbbbb` | `--color-silver-haze` | semantic | Low-emphasis text details. |
| Night Ink | `#111111` | `--color-night-ink` | neutral | Navigation and button details close to, but distinct from, black. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Soft Mist) · `--color-surface-2` → `#000000` (Carbon Black) · `--color-surface-3` → `#151515` (Deep Ink) · `--color-surface-4` → `#f0f0f0` (Cloud Gray) · `--color-text` → `#000000` (Carbon Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#888888` (Quiet Gray) · `--color-border` → `#e8e8e8` (Fine Silver)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#000000` | `#151515` | 1.15:1 | fail |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#151515` | 18.26:1 | AAA |
| `#888888` | `#ffffff` | 3.54:1 | AA-large |
| `#888888` | `#f5f5f5` | 3.25:1 | AA-large |
| `#888888` | `#000000` | 5.92:1 | AA |
| `#888888` | `#151515` | 5.15:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 82%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lato | `--font-body` | webfont | 400, 600, 500, 700 | Navigation, body copy, product details, buttons, and captions. | Lato |
| Poppins | `--font-display` | webfont | 700, 500, 600, 520, 400 | Hero messaging, selected section headings, links, and eyebrow labels. | Poppins |
| Mulish | `--font-mulish` | system | 400 | Supporting body text and secondary interface copy. | Mulish |
| MiSans Latin | `--font-misans-latin` | system | 500, 700 | Selected prominent section headings. | Inter |

- **Lato:** Regular to bold; compact controls use uppercase labels and lightly tracked captions.
- **Poppins:** Medium to bold display weights; some eyebrow text is uppercase with modest tracking.
- **Mulish:** Regular-weight sans serif; use for unobtrusive supporting copy.
- **MiSans Latin:** Bold heading treatment; keep display lines clean and untracked.

### Type scale — Perfect Fourth (ratio ≈ 1.324, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 520 | 1.2 | 0 | capitalize | Poppins | Main hero campaign heading. |
| h2 | 34px | 700 | 1.2 | 0 | — | MiSans Latin | Major section headings, including category and testimonial sections. |
| h3 | 28px | 600 | 1.2 | 0 | — | Lato | Product and secondary section titles. |
| h4 | 20px | 500 | 1.5 | 0 | — | Poppins | Compact promotional and supporting headings. |
| body | 13px | 400 | 1.5 | 0 | — | Lato | Product descriptions, reviews, and explanatory copy. |
| caption | 12px | 600 | 1.6 | 0.042em | — | Lato | Small labels, metadata, and supporting card text. |
| button | 12px | 600 | 1.6 | 0.042em | — | Lato | Short uppercase shopping and navigation actions. |
| nav | 16px | 500 | 1.2 | 0 | — | Lato | Primary header category navigation. |
| link | 19px | 600 | 1.3 | 0 | — | Poppins | Prominent editorial and product links. |
| eyebrow | 14px | 500 | 1.6 | 0.036em | uppercase | Poppins | Uppercase section or promotional labels. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 5, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30 px.
- Section rhythm 72px · element gap 8px · card padding — · max content width 1270px.

The page is organized around a centered content area capped at the measured 1270px maximum, interrupted by full-bleed campaign imagery and dark storytelling bands. Sections alternate between broad hero panels, category tiles, two-column promotion cards, product grids, and compact trust or editorial rows. Headings generally align to the start of their content group. The measured density is comfortable: generous gaps separate major blocks, while product cards and navigation remain compact. At smaller widths, preserve the clear hierarchy and allow multi-column content to collapse naturally.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `8px` · badge `9999px` · nav `50%` · link `12px` · xs `8px` · sm `12px` · md `16px` · lg `20px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.15) 0px 2px 10px 0px`
- Motion: standard transition `0.25s cubic-bezier(0.104, 0.204, 0.492, 1)` on interactive elements.

The interface is mostly flat, with section backgrounds and photography doing the separation work. Product cards use rounded corners without prominent shadows; subtle gray hairlines distinguish selected controls and boundaries. Layering is clearest in the black expert-and-review section, where image cards and text sit directly against the dark surface. Keep shadows understated and reserve them for occasional floating elements.

## Imagery

High-quality product photography and lifestyle campaign images define the page. Hero imagery uses expansive compositions with people and devices, while shopping sections use isolated products against pale, neutral backgrounds. Expert portraits and customer media appear within the dark editorial area. Keep photography crisp and softly lit; the warm cream, taupe, and beige tones belong primarily to the imagery rather than the interface palette.

## Components

### Announcement and header

A narrow black announcement strip sits above a white navigation row, with dark Lato menu text and compact utility icons.

### Primary shopping button

Black pill-shaped CTA with white uppercase Lato text; measured button styling uses a full pill radius.

### Hero campaign

Full-bleed lifestyle banner pairing product imagery with a large Poppins headline, supporting line, and warm muted CTA.

### Category tiles

A pale gray category band contains product-image links arranged in a compact multi-column row.

### Product cards

White cards pair isolated product photos with concise Lato titles, specifications, prices, and black pill CTAs.

### Editorial cards

Rounded image cards and small text blocks present customer stories, expert recommendations, and journal content.

### Trust strip

Compact assurance items combine small icons with short labels for delivery, returns, payment, help, rewards, and warranty.

### Measured component styles

- **Primary button** (“SHOP NOW”): background #000000 · text #ffffff · radius 100px · padding 12px 28px · 600 12px Lato
- **Secondary button** (“VIEW MORE”): background #ae9384 · text #fdfdfd · border 1px solid #fdfdfd · radius 100px · padding 8px 23.9px · 500 14px Poppins · uppercase
- **Link** (“High-Speed Tech For Better Hair Care Fas”): transparent background · text #151515 · radius 0px · padding 0px · 400 17px Lato
- **Input**: transparent background · text #151515 · radius 0px · padding 0px · 400 16px Lato
- **Card** (“NEW Laifen Swift 4 High-Speed Hair Dryer”): background #ffffff · text #151515 · radius 12px · padding 0px · 400 17px Lato
- **Badge** (“West K.”): background #090909 · text #ffffff · radius 100px · padding 8px 16px · 500 12px Lato
- **Navigation item** (“Best Sale”): transparent background · text #111111 · radius 0px · padding 0px · 500 16px Lato

## Do

- Use white and pale gray as the default shopping surfaces.
- Reserve black for primary actions, key text, and story-led dark sections.
- Let product and lifestyle photography provide most of the visual warmth.
- Use Poppins selectively for campaign headings and Lato for commerce UI.
- Keep shopping actions short, high-contrast, and pill-shaped.
- Separate long-page content with clear, generous section breaks.

## Don't

- Do not turn the hero’s warm beige tones into a global accent system.
- Do not add bright interface colors absent from the measured palette.
- Do not rely on heavy shadows to distinguish cards.
- Do not crowd product cards with oversized decorative text.
- Do not apply one display typeface to every page element.
- Do not treat image colors as interface palette tokens.

## Agent prompt

Build a new Laifen-style commerce page with a quiet, premium personal-care aesthetic. Use Gallery White (#ffffff) as the primary canvas, Soft Mist (#f5f5f5) for selected section bands, and Carbon Black (#000000) for primary CTAs, navigation accents, and dark editorial sections. Use Deep Ink (#151515) for body and product text and Fine Silver (#e8e8e8) for restrained hairlines. Set campaign headings in Poppins and navigation, product details, and controls in Lato. Feature large, warm lifestyle photography and crisp product imagery; keep their colors inside the media, not as new UI accents. Organize the page into spacious, clearly separated sections with category tiles, product grids, and rounded image cards. Keep buttons pill-shaped, cards mostly flat, and copy concise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign carousel with large lifestyle imagery and overlaid copy. | Campaign carousel, View-more action, Slide indicators | Full-bleed photography, Large heading, Pill CTA |
| 2 | category-nav | Pale gray band with a heading and a row of category image links. | Browse by category, Image-led links | Gray section background, Compact tile grid |
| 3 | product-showcase | Two-column promotional card grid on a light canvas. | Shop featured products, Direct product actions | Rounded image cards, Short text overlays, Black pill buttons |
| 4 | product-grid | Tabbed category controls above a multi-column product card collection. | Switch product category, View more, Shop product | Product photography, Price labels, Pill CTAs |
| 5 | testimonials | Horizontal logo and quotation carousel on a white background. | Browse press quotes, Carousel pagination | Publication wordmarks, Centered quote |
| 6 | stats | Heading above four evenly spaced certification items. | Review trust credentials | Certification marks, Compact labels |
| 7 | feature-grid | Heading above a multi-column set of assurance items. | Reassure before purchase, Scan service benefits | Small icons, Short benefit labels, Light cards |
| 8 | gallery | Full-width visual banner between the trust content and dark editorial area. | Build professional credibility | Edge-to-edge image, Brand overlay |
| 9 | testimonials | Dark section with expert imagery and a multi-column set of recommendation cards. | Browse expert advice, Carousel controls | Black background, Portrait cards, Light text |
| 10 | testimonials | Dark customer-review area with a row of image- and video-led cards. | Read customer reviews, Show more | Review cards, Star ratings, Customer media |
| 11 | content-feed | Editorial heading and category tabs above a three-column article-card layout. | Filter by category, Read article | Rounded thumbnails, Article titles, Read-more links |
| 12 | footer | Multi-column footer with support details, navigation links, and utility information. | Contact support, Navigate product collections, Access policies | Dark footer surface, Column headings, Social and payment marks |

## Source CSS custom properties (selected)

```css
--bg-body: #ffffff;
--bg-body-rgb: 255,255,255;
--color-body: #151515;
--color-body-rgb: 21,21,21;
--color-accent: #151515;
--color-accent-rgb: 21,21,21;
--color-border: #E2E2E2;
--color-form-border: #dedede;
--color-star: #FD9A52;
--color-overlay-rgb: 0, 0, 0;
--section-spacing-mobile: 20px;
--section-spacing-desktop: 50px;
--font-body-scale: 1.0;
--font-body-line-height-scale: 1.0;
--font-body-letter-spacing: 0.0em;
--font-announcement-scale: 1.0;
--font-heading-scale: 1.0;
--font-heading-line-height-scale: 1.0;
--font-heading-letter-spacing: 0.0em;
--font-navigation-scale: 1.0;
--font-product-title-scale: 1.0;
--font-product-title-line-height-scale: 1.0;
--button-letter-spacing: 0.0em;
--bg-body-darken: #f7f7f7;
--payment-terms-background-color: #ffffff;
--color-announcement-bar-text: #ffffff;
--color-announcement-bar-bg: #151515;
--color-header-bg: #ffffff;
--color-header-bg-rgb: 255,255,255;
--color-header-text: #000000;
--color-header-text-rgb: 0,0,0;
--color-header-links: #151515;
--color-header-links-hover: #151515;
--color-header-icons: #151515;
--color-header-border: #E2E2E2;
--solid-button-background: #151515;
--color-price: #151515;
--color-dots: #151515;
--color-inventory-instock: #279A4B;
--color-inventory-lowstock: #FB9E5B;
```

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