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

# Aevi · Design System

> Nordic skincare, framed with quiet editorial clarity

**Theme:** light · **Industry:** beauty · **Source:** https://liveaevi.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._

Aevi pairs a restrained white-and-blue storefront with refined editorial typography and close-up skincare imagery. Product merchandising, press recognition and customer stories sit within generous, mostly flat sections that keep the products and people in focus.

## North star

Keep the interface quiet and product-led: use white space, light editorial type and pale blue accents to frame compelling skincare imagery.

## Overview

The page uses a white canvas and near-black text as its quiet foundation, with pale blue section bands and powder-blue buttons providing the main branded color. A vivid blue is reserved for small links and low-stock labels; it does not compete with the warm amber and neutral tones that appear in product photography. Typography is light and editorial: delicate serif-like display headings contrast with clean, low-weight sans-serif body copy and compact utility labels. The homepage moves between a full-width photographic hero, product rows, editorial split sections, testimonials and a video strip. White backgrounds let these blocks breathe, while a pale-blue press and review band creates a clear visual pause. Images are central and varied, from monochrome portrait campaigns to product still lifes and candid customer videos. Borders define selected controls and product details; the overall page avoids decorative shadow and relies on whitespace, alignment and imagery for hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and clean product-section background; also appears in reverse text over imagery. |
| Soft Ink | `#231f20` | `--color-soft-ink` | brand | Primary headings, body copy, navigation, footer text and outlined button text. |
| Nordic Signal | `#134fc2` | `--color-nordic-signal` | accent | Small promotional and product links, plus blue text on low-stock and sale badges. |
| Fade Black | `#000000` | `--color-fade-black` | semantic | Measured as a hero section gradient overlay; treat as image-legibility shading, not a flat brand surface. |
| Mist Blue | `#d5e0ea` | `--color-mist-blue` | surface | Review and footer section bands, badge backgrounds, and fine borders around product options. |
| Powder Blue | `#a3bfdb` | `--color-powder-blue` | surface | Press-logo band and filled product buttons; supports the restrained blue-and-white palette. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#d5e0ea` (Mist Blue) · `--color-surface-2` → `#a3bfdb` (Powder Blue) · `--color-text` → `#231f20` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d5e0ea` (Mist Blue) · `--color-accent` → `#134fc2` (Nordic Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#231f20` | `#ffffff` | 16.3:1 | AAA |
| `#231f20` | `#d5e0ea` | 12.17:1 | AAA |
| `#231f20` | `#a3bfdb` | 8.56:1 | AAA |
| `#ffffff` | `#d5e0ea` | 1.34:1 | fail |
| `#ffffff` | `#a3bfdb` | 1.9:1 | fail |
| `#134fc2` | `#ffffff` | 7.18:1 | AAA |
| `#134fc2` | `#d5e0ea` | 5.36:1 | AA |
| `#134fc2` | `#a3bfdb` | 3.77:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgb(0, 0, 0), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Primary Font | `--font-body` | webfont | 300 | Body copy, product descriptions, navigation and most buttons. | Lato |
| Tertiary Font | `--font-tertiary-font` | webfont | 500 | Small captions and selected compact promotional links. | Montserrat |
| Heading Font | `--font-heading-font` | webfont | 300 | H3 and H4 headings across product and editorial sections. | Lora |
| Secondary Font | `--font-display` | webfont | 300 | Large H1 and H2 campaign and section headings. | Cormorant Garamond |
| Button Font | `--font-button-font` | webfont | 500 | Measured button label font family. | Lato |

- **Primary Font:** Light 300 weight predominates; keep copy clean and sentence case, with compact utility labels.
- **Tertiary Font:** Measured at 500; use sparingly for concise labels and small emphatic link text.
- **Heading Font:** Light 300 weight; retain a delicate, understated heading presence rather than bold display styling.
- **Secondary Font:** Light 300 weight; use refined editorial display styling with normal casing and no added tracking.
- **Button Font:** 500 weight in the measured sample; button instances also use the light Primary Font styling.

### Type scale — Perfect Fourth (ratio ≈ 1.319, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48.5px | 300 | 1.14 | 0 | — | Secondary Font | Large campaign headline over hero imagery. |
| h2 | 41px | 300 | 1.07 | 0 | — | Secondary Font | Prominent editorial and section headings. |
| h3 | 26px | 300 | 1.23 | 0 | — | Heading Font | Product feature and supporting section headings. |
| h4 | 20px | 300 | 1.2 | 0 | — | Heading Font | Smaller product and content subheadings. |
| body | 16px | 300 | 1.31 | 0 | — | Primary Font | Product details, brand narrative and descriptive copy. |
| caption | 14px | 500 | 1.29 | 0 | — | Tertiary Font | Compact labels and supporting metadata. |
| link | 14px | 300 | 1.29 | 0 | — | Primary Font | Navigation, product actions and small text links. |

## Spacing & layout

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

Use a centered, wide desktop layout with a measured maximum width of 1376px, opening with a full-bleed campaign image and slim navigation. Follow with product grids, two-column editorial features, review bands, a compact video gallery and curated product sets. Sections are predominantly white and switch to pale blue where social proof or footer content needs separation. Keep alignment calm and whitespace generous; the measured density is comfortable, with an 8px base unit, a 60px section gap and small element gaps. Adapt grids responsively without changing the editorial hierarchy.

## Shape & elevation

- Radius: button `9999px` · badge `2px` · xs `2px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The interface is predominantly flat: no measured box shadows. Use hairline borders to define product choices and selected controls, and pale-blue fills for badges, press bands and buttons. The hero gradient is a subtle black-to-transparent overlay for image legibility. Build hierarchy through spacing, color blocks and image layering rather than raised cards.

## Imagery

Use polished skincare product still lifes, close-up packaging and natural-light portraits. Mix monochrome campaign photography with warm amber product imagery, while keeping image crops large and immersive in the hero and split features. Product grids use clean individual pack shots; customer and lifestyle video tiles introduce candid, human moments. No illustration or 3D style defines the page.

## Components

### Header and announcement

Compact white navigation with centered Aevi wordmark, small utility links and icons; place a narrow blue-toned announcement strip above it.

### Campaign hero

Full-width photographic campaign with centered light display headline, short supporting line and understated text CTA over the image.

### Product card

Clean product image with concise title, price and rating; small Mist Blue badges use Nordic Signal text for stock or sale status.

### Add to bag button

Powder Blue pill with Soft Ink text and a thin Soft Ink outline; keep the label light and centered.

### Press strip

Horizontal Powder Blue band featuring white publication wordmarks, providing a clear pause after product imagery.

### Editorial split feature

Pair a large product or lifestyle photograph with a restrained heading, short copy and a small Nordic Signal text link.

### Newsletter footer

Mist Blue footer surface with a concise email signup and separated link groups for company, legal and social destinations.

### Measured component styles

- **Primary button** (“ADD TO BAG”): background #a3bfdb · text #231f20 · border 1px solid #231f20 · radius 60px · padding 0px 24px · 300 14px Primary Font
- **Secondary button** (“Every 30 days”): transparent background · text #231f20 · border 1px solid #d5e0ea · radius 2px · padding 0px · 300 14px Primary Font
- **Link** (“SHOP”): transparent background · text #231f20 · radius 0px · padding 0px · 300 14px Primary Font
- **Input**: transparent background · text #231f20 · radius 0px · padding 8px 0px · 300 12px Primary Font
- **Badge** (“LOW STOCK”): background #d5e0ea · text #134fc2 · radius 2px · padding 2px 8px · 300 14px Primary Font

## Do

- Keep white as the dominant interface canvas.
- Use Powder Blue for selected buttons and press bands.
- Reserve Nordic Signal for small links and badge text.
- Let product and portrait photography carry the emotional tone.
- Use light editorial display headings above restrained body copy.
- Separate major content blocks with generous whitespace.

## Don't

- Do not turn the measured black gradient into a large flat section color.
- Do not use vivid blue as a dominant background.
- Do not add heavy shadows or raised-card styling.
- Do not crowd product photography with extra decorative UI.
- Do not make headings bold, uppercase display lettering by default.
- Do not treat warm colors inside product images as interface palette colors.

## Agent prompt

Build a new Aevi-style skincare storefront page with a quiet Nordic editorial character. Use Gallery White (#ffffff) as the primary canvas and Soft Ink (#231f20) for most text. Apply Mist Blue (#d5e0ea) to soft section bands, footer surfaces and badges; use Powder Blue (#a3bfdb) for select filled CTAs and press strips. Keep Nordic Signal (#134fc2) limited to small links and badge text. Set light display headings against clean, low-weight sans-serif body copy. Compose a photographic campaign hero, spacious product grids, editorial image-and-copy splits, social proof and a restrained newsletter footer. Favor large, natural-looking skincare and portrait photography, with occasional monochrome treatment. Use thin borders and image overlays only where useful; avoid shadows, clutter and invented color accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with centered overlay copy, beneath the top announcement and navigation. | Campaign CTA, Promotional announcement | Immersive photography, Light display headline, Subtle dark gradient |
| 2 | product-grid | Introductory copy followed by a multi-column product carousel or grid. | Product discovery, Stock and sale cues, Subscription offer | Pack-shot cards, Compact labels, Price and rating |
| 3 | feature-split | Large product photograph on one side, product story and link on the other. | Product education, Shop link | Editorial two-column layout, Product close-up, Compact proof points |
| 4 | reviews | Wide pale-blue band divided into evenly spaced review snippets. | Social proof, Review scanning | Star ratings, Light text on blue, Multi-column quotes |
| 5 | feature-split | Two-column editorial section with brand copy beside an image composition. | Brand education, Collection discovery | Open text column, Layered portrait image, Understated text link |
| 6 | video | Four-column horizontal strip of short vertical video tiles. | Customer storytelling, Visual browsing | Portrait video crops, Edge-to-edge tile row |
| 7 | product-grid | Introductory heading and short copy above a wide curated product row. | Bundle discovery, Savings comparison, Add to bag | Product cards, Savings badges, Rating and price |
| 8 | feature-split | Full-bleed lifestyle image with left-aligned white copy overlay. | Brand storytelling, About link | Immersive lifestyle photography, Overlay text, Soft blue image tones |
| 9 | footer | Pale-blue footer with newsletter signup and three link-group columns. | Email subscription, Site navigation, Social links | Soft tinted background, Compact form, Grouped footer links |

## Source CSS custom properties (selected)

```css
--background_color: #ffffff;
--background_color_2: #d5e0ea;
--primary_text: #231f20;
--secondary_text: #ffffff;
--primary_accent: #264ebb;
--secondary_accent: #2538b0;
--primary_grey: #495a6f;
--secondary_grey: #a3bfdb;
--button-bg: #264ebb;
--button-border: #264ebb;
--body_color: #FFFFFF;
--loader_color: #A3BFDB;
--label_onSale_Bg: #d5e0ea;
--label_onSale_text: #134fc2;
--label_custom_Bg: #d5e0ea;
--label_custom_text: #134fc2;
--label_soldOut_Bg: #d5e0ea;
--label_soldOut_text: #134fc2;
--pageTransitionColor: #A3BFDB;
--btn_primary_on_light_bg: rgb(163, 191, 219);
--btn_primary_on_light_txt: rgb(35, 31, 32);
--btn_primary_on_light_border: rgb(35, 31, 32);
--btn_primary_on_light_bg_hover: rgb(213, 224, 234);
--btn_primary_on_dark_bg: rgb(213, 224, 234);
--btn_primary_on_dark_txt: rgb(35, 31, 32);
--btn_primary_on_dark_border: rgb(73, 90, 111);
--btn_primary_on_dark_txt_hover: rgb(19, 79, 194);
--btn_primary_on_dark_border_hover: rgb(19, 79, 194);
--type_header_font: 'Heading Font';
--type_paragraf_font: 'Primary Font';
--type_paragraf_bold_font: 'Secondary Font';
--type_tertiary_font: 'Tertiary Font';
--type_quaternary_font: 'Quaternary Font';
--type_button_font: 'Button Font';
--weight_header_font: 300;
--weight_paragraf_font: 300;
--weight_paragraf_bold_font: 300;
--weight_tertiary_font: 500;
--weight_quaternary_font: 300;
--weight_button_font: 500;
```

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