Face Formula

以肌肤生物学为本的静谧护肤Biology-led skincare in a calm editorial world

浅色主题美妆个护beauty ecommerce homepage极简编辑式排版北欧风产品摄影衬线大字原网页 faceformula.com ↗ · 2026-10-12 采集 · 1440×900 桌面端

Face Formula 将北欧护肤理念融入以影像为主的编辑式电商页面。浅冷色底、克制的蓝灰文字与醒目的衬线标题相互衬托，让产品和生活方式摄影成为视觉主角。

North star · Let restrained blue-gray typography and spacious editorial structure frame vivid, tactile skincare photography.

The page balances a pale, cool canvas with photographic sections that shift into deep teal, charcoal and natural earth tones. Gallery White (#f2f5f8) supports most of the store, while Ink Slate (#3b505a) anchors text and branding; white and near-black section bands create contrast without decorative effects. Libre Caslon Condensed gives headings a refined, editorial silhouette, paired with Circular Pro for compact navigation, descriptions and product information. The opening hero is full-bleed product imagery with a large wordmark, overlaid serif headline and small uppercase action link. Below it, product cards use quiet gray fields and restrained controls. Split image-and-copy sections alternate with open editorial space, then a dark journal feature and structured footer. Layout is spacious and asymmetrical, with deliberate image scale and generous separation. Borders stay thin and shadows are absent, keeping attention on photography, typography and material tones.

配色

点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。

品牌色

强调色

表层色

功能色

页面底色 · Gallery Mist表层 · Pure Black表层 2 · Studio White表层 3 · Deep Fjord表层 4 · Cloud Gray主文字 · Ink Slate次要文字 · Gallery Mist弱文字 · Muted Fjord描边 · Frost Line

文字	背景	对比度	WCAG
#3b505a Ink Slate	#f2f5f8 Gallery Mist	7.74:1	AAA
#3b505a Ink Slate	#000000 Pure Black	2.48:1	不达标
#3b505a Ink Slate	#ffffff Studio White	8.46:1	AAA
#3b505a Ink Slate	#202f3b Deep Fjord	1.62:1	不达标
#f2f5f8 Gallery Mist	#000000 Pure Black	19.19:1	AAA
#f2f5f8 Gallery Mist	#ffffff Studio White	1.09:1	不达标

字体

字号阶梯：Custom（比例约 1.743，正文 13px）。示例用免费替代字体渲染，数值为实测。

Aa 设计

Circular Pro

网络字体 · 字重 400 · 占比 89%

免费替代：DM Sans

Navigation, body copy, product labels, captions, and compact uppercase links.

Aa 设计

Libre Caslon Condensed

网络字体 · 字重 400 · 占比 11%

免费替代：Cormorant Garamond

Display, editorial headlines, product-feature headings, and prominent button labels.

角色	示例	字号	字重	行高	字距
特大标题 Oversized brand and hero display moments.	Face Formula	120px	400	1	-0.02em
一级标题 Primary hero headline and major editorial titles.	Face Formula	52px	400	1.1	-0.01em
二级标题 Section headlines and prominent brand-story statements.	Face Formula	32px	400	1.2	-0.01em
三级标题 Product and smaller feature headings.	The quick brown fox 敏捷的狐狸	24px	400	1.2	-0.01em
正文 Supporting descriptions and product details.	The quick brown fox 敏捷的狐狸	13px	400	1.4	0.02em
辅助文字 Small uppercase labels, metadata, and eyebrows.	The quick brown fox 敏捷的狐狸	12px	400	1.4	0.2em
按钮 Editorial-style prominent action labels.	The quick brown fox 敏捷的狐狸	24px	400	1.2	-0.01em
导航 Compact uppercase primary navigation.	The quick brown fox 敏捷的狐狸	12px	400	1.4	0.2em
链接 Small uppercase text links and understated actions.	The quick brown fox 敏捷的狐狸	12px	400	1.4	0.2em
眉题 Section labels such as journal or collection markers.	The quick brown fox 敏捷的狐狸	12px	400	1.4	0.2em

间距与布局

基准单位 8px · 密度：宽松

32px版块间距

32px元素间距

—卡片内边距

1376px内容最大宽度

2px

4px

6px

8px

12px

16px

20px

24px

32px

48px

85px

96px

The page uses a spacious, responsive composition within a measured maximum width of 1376px. Full-bleed media leads the hero and collection feature, while product areas use multi-column card grids and brand stories use asymmetric image-and-copy splits. Headings may center in story sections, but many text blocks align to the start. Section and element gaps are measured at 32px; the overall density remains open rather than dashboard-like. The long page moves between product browsing, brand narrative, editorial imagery, and footer navigation.

圆角与层次

没有测到阴影：页面是扁平的，层次靠底色和描边区分。

The interface is largely flat: measurements show no shadows or rounded-corner scale. Product cards sit on soft gray fields, while thin pale blue-gray borders define controls and footer details. Use whitespace, tonal section changes, and large image layers for depth rather than raised cards or ornamental effects.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。

Full-bleed hero

Large product image or video fills the opening section; overlay the wordmark, serif headline, brief copy, and a small uppercase SHOP NOW link.

Category product rail

Show category tabs above a multi-column product lineup; place isolated product images on Cloud Gray (#e6ebee) card fields with concise names and prices.

Editorial image split

Pair a substantial lifestyle image with centered or start-aligned copy, small supporting imagery, and a discreet uppercase text link.

Product feature grid

Combine a short explanatory text block with a compact multi-column set of product cards, keeping the pale canvas and muted card fields.

Dark journal feature

Use a Deep Fjord (#202f3b) band with a centered serif title, small uppercase eyebrow, and a light Explore button.

Directory footer

Organize many uppercase links into compact columns on Gallery Mist (#f2f5f8), ending with a large brand wordmark and small utility details.

Imagery · Photography defines the page: close-up cream dispensing in the hero, isolated product packaging, Scandinavian landscapes, skincare portraits, and natural-material collection imagery. Use large crops and full-bleed video or stills for immersive moments, with quieter card photography for shopping. The palette within images can be moody or earthy; these tones are photographic content, not additional interface colors.

页面版块

共 9 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。

首页

首屏舒缓修护主视觉

Full-bleed product imagery with left-aligned overlay copy.

图文交替挪威品牌故事

Two-column editorial story with imagery and centered copy.

产品展示按肤况选产品

Copy block alongside a compact product-card grid.

图集产品系列视觉

Full-bleed cinematic collection image or video.

行动号召品牌理念

Short standalone statement band with a text link.

图文交替北欧合作门店

Two-column image and information panel.

行动号召护肤专题

Centered content inside a full-width dark band.

页脚分类与页脚

Multi-column directory above a wide wordmark and utility row.

该做与不该做

✓ 该做

Use Gallery Mist (#f2f5f8) as the calm default canvas.
Set prominent headlines in Libre Caslon Condensed.
Keep navigation and utility links small, uppercase, and widely tracked.
Make product photography tactile, clear, and generously framed.
Alternate shopping grids with editorial image-and-copy sections.
Use Ink Slate (#3b505a) for primary text and restrained contrast.

✕ 不该做

Don't add gradients, shadows, or rounded card treatments.
Don't turn the page into a dense catalog dashboard.
Don't use bright interface colors that compete with photography.
Don't set every section in the same grid or alignment.
Don't use heavy bold typography where regular weights are measured.
Don't mistake photographic colors for brand-interface palette colors.

给 AI 的提示词

想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。

Build a new Face Formula page as a calm, editorial beauty storefront. Use Gallery Mist (#f2f5f8) for the main canvas, Ink Slate (#3b505a) for primary text, and Muted Fjord (#58737e) only for secondary emphasis. Set display and section headlines in Libre Caslon Condensed; use Circular Pro or a close sans-serif substitute for compact body copy, navigation, labels, and product details. Create a large photographic opening, then alternate quiet product grids with asymmetrical image-and-copy stories. Use Cloud Gray (#e6ebee) behind isolated product photography and reserve Deep Fjord (#202f3b) for a contrasting editorial band. Keep borders fine, corners square, and elevation flat. Preserve generous whitespace, small uppercase utility text, and restrained actions. Avoid decorative effects and let imagery provide texture and color.

相似风格

Aevi

liveaevi.com

以克制编辑感呈现北欧护肤

浅色美妆个护

Summer Fridays

summerfridays.com

柔和杂志感，聚焦日常护肤

浅色美妆个护

Basic.Space

basic.space

以克制编辑感呈现精选好物

浅色时尚服饰

Acne Studios

acnestudios.com

克制界面，鲜明时尚影像

浅色时尚服饰

Isla Beauty

isla-beauty.com

浓缩护肤，留白有度

浅色美妆个护

Glossier

glossier.com

简洁排版，鲜活美妆，沉浸式产品视觉

浅色美妆个护

下载

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

# Face Formula · Design System

> Biology-led skincare in a calm editorial world

**Theme:** light · **Industry:** beauty · **Source:** https://www.faceformula.com/en-no · **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._

Face Formula pairs Scandinavian skincare with an editorial, image-led storefront. Pale cool surfaces, restrained blue-gray text and oversized serif headlines let product and lifestyle photography carry the story.

## North star

Let restrained blue-gray typography and spacious editorial structure frame vivid, tactile skincare photography.

## Overview

The page balances a pale, cool canvas with photographic sections that shift into deep teal, charcoal and natural earth tones. Gallery White (#f2f5f8) supports most of the store, while Ink Slate (#3b505a) anchors text and branding; white and near-black section bands create contrast without decorative effects. Libre Caslon Condensed gives headings a refined, editorial silhouette, paired with Circular Pro for compact navigation, descriptions and product information. The opening hero is full-bleed product imagery with a large wordmark, overlaid serif headline and small uppercase action link. Below it, product cards use quiet gray fields and restrained controls. Split image-and-copy sections alternate with open editorial space, then a dark journal feature and structured footer. Layout is spacious and asymmetrical, with deliberate image scale and generous separation. Borders stay thin and shadows are absent, keeping attention on photography, typography and material tones.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Ink Slate | `#3b505a` | `--color-ink-slate` | brand | Primary text, headings, links, and the face wordmark; the main brand anchor across light areas. |
| Gallery Mist | `#f2f5f8` | `--color-gallery-mist` | surface | Cool pale canvas for navigation, product areas, and footer; also used for light text and the hero action. |
| Frost Line | `#cfdce6` | `--color-frost-line` | semantic | Fine outlines on controls and footer details; keep borders subtle against pale surfaces. |
| Pure Black | `#000000` | `--color-pure-black` | surface | Measured dark section surface and thin control outlines; use sparingly, not as the dominant page color. |
| Studio White | `#ffffff` | `--color-studio-white` | surface | Clean section and card surface, visible in product photography and open editorial sections. |
| Deep Fjord | `#202f3b` | `--color-deep-fjord` | surface | Dark blue-charcoal section surface, notably the journal feature; creates a quiet, high-contrast interlude. |
| Cloud Gray | `#e6ebee` | `--color-cloud-gray` | surface | Soft product-card background behind isolated packaging, distinct from the main pale canvas. |
| Muted Fjord | `#58737e` | `--color-muted-fjord` | accent | Secondary text, badges, and muted navigation or button details; use for restrained emphasis. |

### Semantic aliases

`--color-canvas` → `#f2f5f8` (Gallery Mist) · `--color-surface` → `#000000` (Pure Black) · `--color-surface-2` → `#ffffff` (Studio White) · `--color-surface-3` → `#202f3b` (Deep Fjord) · `--color-surface-4` → `#e6ebee` (Cloud Gray) · `--color-text` → `#3b505a` (Ink Slate) · `--color-text-muted` → `#f2f5f8` (Gallery Mist) · `--color-text-subtle` → `#58737e` (Muted Fjord) · `--color-border` → `#cfdce6` (Frost Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#3b505a` | `#f2f5f8` | 7.74:1 | AAA |
| `#3b505a` | `#000000` | 2.48:1 | fail |
| `#3b505a` | `#ffffff` | 8.46:1 | AAA |
| `#3b505a` | `#202f3b` | 1.62:1 | fail |
| `#f2f5f8` | `#000000` | 19.19:1 | AAA |
| `#f2f5f8` | `#ffffff` | 1.09:1 | fail |
| `#f2f5f8` | `#202f3b` | 12.53:1 | AAA |
| `#58737e` | `#f2f5f8` | 4.6:1 | AA |
| `#58737e` | `#000000` | 4.17:1 | AA-large |
| `#58737e` | `#ffffff` | 5.04:1 | AA |

### Gradients

- `linear-gradient(to right in oklab, rgb(59, 80, 90) 0%, rgb(59, 80, 90) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Circular Pro | `--font-body` | webfont | 400 | Navigation, body copy, product labels, captions, and compact uppercase links. | DM Sans |
| Libre Caslon Condensed | `--font-display` | webfont | 400 | Display, editorial headlines, product-feature headings, and prominent button labels. | Cormorant Garamond |

- **Circular Pro:** Regular weight; small utility text often uses uppercase and widely tracked lettering.
- **Libre Caslon Condensed:** Regular weight with tight tracking; use sentence case for headlines and preserve the elegant condensed serif character.

### Type scale — Custom (ratio ≈ 1.743, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 1 | -0.02em | — | Libre Caslon Condensed | Oversized brand and hero display moments. |
| h1 | 52px | 400 | 1.1 | -0.01em | — | Libre Caslon Condensed | Primary hero headline and major editorial titles. |
| h2 | 32px | 400 | 1.2 | -0.01em | — | Libre Caslon Condensed | Section headlines and prominent brand-story statements. |
| h3 | 24px | 400 | 1.2 | -0.01em | — | Libre Caslon Condensed | Product and smaller feature headings. |
| body | 13px | 400 | 1.4 | 0.02em | — | Circular Pro | Supporting descriptions and product details. |
| caption | 12px | 400 | 1.4 | 0.2em | uppercase | Circular Pro | Small uppercase labels, metadata, and eyebrows. |
| button | 24px | 400 | 1.2 | -0.01em | — | Libre Caslon Condensed | Editorial-style prominent action labels. |
| nav | 12px | 400 | 1.4 | 0.2em | uppercase | Circular Pro | Compact uppercase primary navigation. |
| link | 12px | 400 | 1.4 | 0.2em | uppercase | Circular Pro | Small uppercase text links and understated actions. |
| eyebrow | 12px | 400 | 1.4 | 0.2em | uppercase | Circular Pro | Section labels such as journal or collection markers. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 20, 24, 32, 48, 85, 96 px.
- Section rhythm 32px · element gap 32px · card padding — · max content width 1376px.

The page uses a spacious, responsive composition within a measured maximum width of 1376px. Full-bleed media leads the hero and collection feature, while product areas use multi-column card grids and brand stories use asymmetric image-and-copy splits. Headings may center in story sections, but many text blocks align to the start. Section and element gaps are measured at 32px; the overall density remains open rather than dashboard-like. The long page moves between product browsing, brand narrative, editorial imagery, and footer navigation.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `1s cubic-bezier(0.16, 1.08, 0.38, 0.98)` on interactive elements.

The interface is largely flat: measurements show no shadows or rounded-corner scale. Product cards sit on soft gray fields, while thin pale blue-gray borders define controls and footer details. Use whitespace, tonal section changes, and large image layers for depth rather than raised cards or ornamental effects.

## Imagery

Photography defines the page: close-up cream dispensing in the hero, isolated product packaging, Scandinavian landscapes, skincare portraits, and natural-material collection imagery. Use large crops and full-bleed video or stills for immersive moments, with quieter card photography for shopping. The palette within images can be moody or earthy; these tones are photographic content, not additional interface colors.

## Components

### Full-bleed hero

Large product image or video fills the opening section; overlay the wordmark, serif headline, brief copy, and a small uppercase SHOP NOW link.

### Category product rail

Show category tabs above a multi-column product lineup; place isolated product images on Cloud Gray (#e6ebee) card fields with concise names and prices.

### Editorial image split

Pair a substantial lifestyle image with centered or start-aligned copy, small supporting imagery, and a discreet uppercase text link.

### Product feature grid

Combine a short explanatory text block with a compact multi-column set of product cards, keeping the pale canvas and muted card fields.

### Dark journal feature

Use a Deep Fjord (#202f3b) band with a centered serif title, small uppercase eyebrow, and a light Explore button.

### Directory footer

Organize many uppercase links into compact columns on Gallery Mist (#f2f5f8), ending with a large brand wordmark and small utility details.

### Measured component styles

- **Primary button** (“EXPLORE”): background #f2f5f8 · text #3b505a · radius 0px · padding 0px 48px · 400 12px Circular Pro · uppercase
- **Secondary button**: transparent background · text #000000 · border 1px solid #cfdce6 · radius 0px · padding 0px · 400 12px Circular Pro · uppercase
- **Link** (“SOS Paste Antibacterial Spot Treatment 7”): transparent background · text #3b505a · radius 0px · padding 0px · 400 16px Circular Pro
- **Input** (“Austria / EUR Belgium / EUR Bulgaria / E”): transparent background · text #f2f5f8 · radius 0px · padding 0px 15px 0px 0px · 400 13px Circular Pro · capitalize
- **Card**: background #e6ebee · text #3b505a · radius 0px · padding 0px · 400 16px Circular Pro
- **Badge** (“BESTSELLER”): background #58737e · text #f2f5f8 · radius 0px · padding 6px 5.6px 5px 8px · 400 12px Circular Pro · uppercase
- **Navigation item** (“HOME”): transparent background · text #3b505a · radius 0px · padding 0px · 400 12px Circular Pro · uppercase

## Do

- Use Gallery Mist (#f2f5f8) as the calm default canvas.
- Set prominent headlines in Libre Caslon Condensed.
- Keep navigation and utility links small, uppercase, and widely tracked.
- Make product photography tactile, clear, and generously framed.
- Alternate shopping grids with editorial image-and-copy sections.
- Use Ink Slate (#3b505a) for primary text and restrained contrast.

## Don't

- Don't add gradients, shadows, or rounded card treatments.
- Don't turn the page into a dense catalog dashboard.
- Don't use bright interface colors that compete with photography.
- Don't set every section in the same grid or alignment.
- Don't use heavy bold typography where regular weights are measured.
- Don't mistake photographic colors for brand-interface palette colors.

## Agent prompt

Build a new Face Formula page as a calm, editorial beauty storefront. Use Gallery Mist (#f2f5f8) for the main canvas, Ink Slate (#3b505a) for primary text, and Muted Fjord (#58737e) only for secondary emphasis. Set display and section headlines in Libre Caslon Condensed; use Circular Pro or a close sans-serif substitute for compact body copy, navigation, labels, and product details. Create a large photographic opening, then alternate quiet product grids with asymmetrical image-and-copy stories. Use Cloud Gray (#e6ebee) behind isolated product photography and reserve Deep Fjord (#202f3b) for a contrasting editorial band. Keep borders fine, corners square, and elevation flat. Preserve generous whitespace, small uppercase utility text, and restrained actions. Avoid decorative effects and let imagery provide texture and color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed product imagery with left-aligned overlay copy. | shop action, short product introduction | oversized wordmark, serif headline, small uppercase link |
| 2 | product-grid | Category tabs above a multi-column product grid. | category switching, product browsing, quick product access | muted tabs, gray product fields, compact product details |
| 3 | feature-split | Two-column editorial story with imagery and centered copy. | brand education, read more link | serif title, paired small images, large lifestyle portrait |
| 4 | product-showcase | Copy block alongside a compact product-card grid. | formula discovery, product browsing | short intro, gray card backgrounds, bestseller badge |
| 5 | gallery | Full-bleed cinematic collection image or video. | collection discovery | large serif collection names, light overlay copy |
| 6 | cta | Short standalone statement band with a text link. | brand introduction, about link | editorial sentence, minimal text action |
| 7 | feature-split | Two-column image and information panel. | retailer discovery, nearest-location link | centered serif heading, large lifestyle image, small supporting image |
| 8 | cta | Centered content inside a full-width dark band. | journal discovery, Explore action | Deep Fjord background, serif title, light button |
| 9 | footer | Multi-column directory above a wide wordmark and utility row. | category navigation, newsletter signup, policy links | compact uppercase links, pale footer canvas, large brand wordmark |

## Source CSS custom properties (selected)

```css
--lq-primary: #3B505A;
--lq-secondary: #CBD3D8;
--jdgm-primary-color: #3B505A;
--jdgm-secondary-color: rgba(59,80,90,0.1);
--jdgm-star-color: #3B505A;
--jdgm-write-review-text-color: white;
--jdgm-write-review-bg-color: #3B505A;
--jdgm-paginate-color: #3B505A;
--jdgm-border-radius: 0;
--jdgm-reviewer-name-color: #3B505A;
```

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

AI 辅助生成：数值为实测，命名与说明为模型解读 · 把文件放进项目根目录，告诉 AI「按 DESIGN.md 实现」