---
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