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

# Abel · Design System

> Quiet typography, natural fragrance, immersive imagery.

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

Abel’s homepage pairs restrained black-and-white typography with immersive, atmospheric fragrance and lifestyle imagery. Full-width visual stories lead into product discovery, sustainability messaging, a curated fragrance range, and a compact newsletter-led footer.

## North star

Let immersive fragrance photography lead, while keeping the interface nearly monochrome, flat, and typographically restrained.

## Overview

The page uses a quiet palette of white, near-black, pale warm beige hairlines, and a light-gray band that appears behind the compostable-caps story. Let photography carry most of the colour: warm neutral product scenes, vivid pink fragrance imagery, and cool blue-green campaign footage are image content, not extra interface colours. Founders Grotesk supplies the light, understated display voice, while Founders Grotesk Mono gives labels, navigation, captions, and links their compact uppercase rhythm. The first viewport is a full-bleed video hero with small edge-positioned controls and copy anchored low on the left. Subsequent editorial sections alternate clean white space with immersive media, followed by a white product presentation and a full-width campaign image. Generous section breathing room contrasts with tightly set labels. Keep controls flat and square, use thin warm borders sparingly, and reserve the strongest black-white contrast for shopping actions and essential text.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, product presentation and testimonial band; also supports light overlay navigation and text over imagery. |
| Mist Grey | `#cccccc` | `--color-mist-grey` | surface | Distinct pale-gray band behind the returning-to-nature packaging story; not the dominant white page canvas. |
| Soft Ink | `#030303` | `--color-soft-ink` | brand | Primary text and links on white, footer content, and solid black shopping CTA backgrounds. |
| Oat Hairline | `#f6eada` | `--color-oat-hairline` | semantic | Subtle section and interface borders; keep as a delicate divider rather than a filled surface. |
| Charcoal Trace | `#414042` | `--color-charcoal-trace` | neutral | Sparse secondary footer detail only; measured at low frequency and not a defining brand colour. |

### Semantic aliases

`--color-canvas` → `#cccccc` (Mist Grey) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#030303` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#f6eada` (Oat Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#030303` | `#cccccc` | 12.84:1 | AAA |
| `#030303` | `#ffffff` | 20.62:1 | AAA |
| `#ffffff` | `#cccccc` | 1.61:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Founders Grotesk | `--font-display` | webfont | 300 | Light display headings and occasional sentence-case supporting copy. | Inter |
| Founders Grotesk Mono | `--font-mono` | webfont | 400 | Uppercase navigation, labels, captions, links, and compact interface copy. | IBM Plex Mono |

- **Founders Grotesk:** Use a light weight for display text; keep sentence case calm and tracking subtly open.
- **Founders Grotesk Mono:** Use regular monospaced text, uppercase labels, and tight tracking for a crisp editorial rhythm.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 300 | 1.1 | 0.01em | — | Founders Grotesk | Light display headline for campaign or product storytelling. |
| h2 | 28px | 400 | 1.1 | 0 | uppercase | Founders Grotesk Mono | Uppercase monospaced section titles and prominent editorial labels. |
| h3 | 20px | 300 | 1.2 | 0.02em | — | Founders Grotesk | Light subheads introducing supporting brand or product copy. |
| body | 13px | 400 | 1.1 | -0.02em | uppercase | Founders Grotesk Mono | Compact uppercase monospaced interface and supporting text. |
| caption | 11px | 400 | 1.1 | -0.02em | uppercase | Founders Grotesk Mono | Small uppercase notes beneath product imagery or media. |
| link | 13px | 400 | 1.1 | -0.02em | uppercase | Founders Grotesk Mono | Uppercase monospaced navigation and shopping links. |
| eyebrow | 16px | 400 | 1.1 | 0.03em | uppercase | Founders Grotesk Mono | Uppercase section kicker above a display heading. |
| code | 13px | 400 | 1.1 | -0.02em | uppercase | Founders Grotesk Mono | Monospaced utility labels or compact technical-style metadata. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 10, 12, 14, 20, 21, 32, 40, 54, 64, 73, 120, 121 px.
- Section rhythm 40px · element gap 73px · card padding — · max content width 1360px.

Use a spacious, vertically scrolling editorial layout with a measured maximum content width of 1360px. Open with a full-bleed, two-column-capable hero; align its small copy block toward the lower left. Alternate media-led campaign sections with a white testimonial strip and a centered product presentation. Keep product and footer content in clear columns, rather than boxed cards. The measured spacing scale runs from 3 to 121px, with a 40px section gap and 73px element gap; preserve generous breathing room and sparse density.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The interface is predominantly flat, with no measured shadow system or rounded component treatment. Separate content through whitespace, full-width image bands, and occasional fine warm-beige borders. Keep the black shopping button square-edged and visually decisive. Image overlays and video framing create depth; avoid adding interface cards, drop shadows, or decorative layers.

## Imagery

Photography and video define the page: softly lit bottle still lifes, close fragrance details, lifestyle footage, packaging materials, and a cool-toned campaign image. Use full-bleed crops for the hero and major stories, with text overlays kept small and edge-aligned. Product imagery sits on clean white with ample surrounding space. The screenshot’s pink, teal, and muted earthy tones belong to campaign media, not the interface palette.

## Components

### Overlay navigation

Place compact uppercase menu and cart controls near the hero edges, with a centered Abel wordmark and light controls over the opening image.

### Editorial hero

Use full-bleed video with a low-left uppercase kicker, brief sentence-case description, and an understated underlined shopping link.

### Campaign story

Pair a full-width lifestyle image or video with concise uppercase monospaced titles and small supporting copy; keep overlays legible but unobtrusive.

### Product presentation

Center fragrance imagery on white, surrounded by product details and uppercase labels; use a solid #030303 CTA with #ffffff text.

### Newsletter footer

Combine a short signup introduction and simple email fields with compact multi-column uppercase navigation and sparse brand sign-off.

### Section divider

Use whitespace or a restrained #f6eada hairline to separate content; avoid elevated or rounded card containers.

### Measured component styles

- **Primary button** (“SHOP TIBI”): background #030303 · text #ffffff · radius 0px · padding 12px 63px · 400 13px Founders Grotesk Mono · uppercase
- **Link** (“EAU DE PARFUM”): transparent background · text #030303 · radius 0px · padding 0px · 400 13px Founders Grotesk Mono · uppercase
- **Input** (“AUD BAM CHF CZK DKK EUR GBP HUF NZD PLN ”): transparent background · text #000000 · radius 0px · padding 0px 31px 0px 0px · 400 13px Founders Grotesk Mono

## Do

- Use full-bleed photography or video for the major campaign stories.
- Keep interface colours to Gallery White, Soft Ink, and restrained neutral details.
- Set navigation, captions, and links in uppercase monospaced text.
- Leave generous white space around products and editorial copy.
- Use square, flat black shopping buttons with white labels.
- Treat vivid campaign hues as image content, not reusable UI colours.

## Don't

- Do not add gradients, shadows, or rounded card treatments.
- Do not introduce bright interface accents absent from the measured palette.
- Do not cover photography with oversized text or dense copy.
- Do not box every story into a card grid.
- Do not use decorative colours sampled from campaign imagery as brand tokens.
- Do not crowd the product presentation or footer columns.

## Agent prompt

Build a new Abel-style natural fragrance page as a spacious editorial storefront. Use Gallery White (#ffffff) as the main canvas and Soft Ink (#030303) for text, links, and the primary shopping action; reserve Oat Hairline (#f6eada) for subtle dividers and Mist Grey (#cccccc) for an occasional story band. Use Founders Grotesk for light display copy and a monospaced alternative such as IBM Plex Mono for compact uppercase navigation, labels, and captions. Lead with immersive, full-bleed product or lifestyle media, then alternate clean editorial space, story imagery, and a centered product showcase. Keep text overlays short and edge-aligned. Make controls square and flat, with no shadows, gradients, or rounded cards. Give the product and footer areas generous breathing room, and let photography—not interface decoration—supply colour and atmosphere.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed two-column campaign video with copy anchored at the lower left and centered wordmark above. | shop link, overlay menu, cart access | full-bleed video, light overlay controls, uppercase mono kicker |
| 2 | testimonials | Clean white band with a sequence of short press and brand statements. | rotating quotes, press endorsement | white surface, large quote spacing, dark statement typography |
| 3 | video | Full-width immersive video with compact text and quiz link aligned to the left. | fragrance finder, take quiz link | full-bleed video, uppercase mono heading, text overlay |
| 4 | feature-split | Full-bleed lifestyle story with concise lower-left copy and a discovery-set link. | shop discovery set, brand story | lifestyle photography, small text overlay, uppercase label |
| 5 | feature-split | Pale-gray band with packaging imagery and a short text overlay near the bottom edge. | learn about packaging, sustainability education | #cccccc section band, product-material image, quiet link |
| 6 | product-showcase | White product area with centered featured fragrance and a broad multi-column product range. | browse fragrances, shop product, product details | white canvas, product photography, black CTA |
| 7 | video | Full-bleed campaign video with a small left-side title and product controls near the lower edge. | product selection, campaign storytelling | cool-toned video, overlay product panel, light uppercase text |
| 8 | footer | White footer with newsletter signup at left, grouped navigation columns, and a sparse lower brand bar. | email signup, customer support links, social links | multi-column link lists, thin form underline, minimal brand sign-off |

## Source CSS custom properties (selected)

```css
--font-orion: "Founders Grotesk", sans-serif;
--label-font-family: "Founders Grotesk Mono", Helvetica;
--label-font-weight: 400;
--label-font-size: 12px;
--label-letter-spacing: -.24px;
--label-font-style: normal;
--button-font-family: "Founders Grotesk Mono", Helvetica;
--button-font-weight: 400;
--button-font-size: 12px;
--button-letter-spacing: -.24px;
--button-font-style: normal;
--caption-font-family: "Founders Grotesk Mono", Helvetica;
--caption-font-weight: 400;
--caption-font-size: 12px;
--caption-letter-spacing: -.48px;
--caption-font-style: normal;
--1440-h1-font-family: "Founders Grotesk", Helvetica;
--1440-h1-font-weight: 300;
--1440-h1-font-size: 120px;
--1440-h1-letter-spacing: -2.4px;
--1440-h1-font-style: normal;
--1440-h2-font-family: "Founders Grotesk", Helvetica;
--1440-h2-font-weight: 300;
--1440-h2-font-size: 90px;
--1440-h2-letter-spacing: -1.8px;
--1440-h2-font-style: normal;
--1440-h3-font-family: "Founders Grotesk Mono", Helvetica;
--1440-h3-font-weight: 400;
--1440-h3-font-size: 28px;
--1440-h3-letter-spacing: -.56px;
--1440-h3-font-style: normal;
--1440-h3-intro-font-family: "Founders Grotesk", Helvetica;
--1440-h3-intro-font-weight: 300;
--1440-h3-intro-font-size: 42px;
--1440-h3-intro-letter-spacing: .42px;
--1440-h3-intro-font-style: normal;
--1440-h4-font-family: "Founders Grotesk", Helvetica;
--1440-h4-font-weight: 300;
--1440-h4-font-size: 32px;
--1440-h4-letter-spacing: .32px;
```

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