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

# Afterglo · Design System

> Everyday care, styled with sensual editorial warmth

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

Afterglo pairs a quiet, warm-neutral storefront with expressive typography and intimate product imagery. Its shopping experience feels editorial and human, balancing clear product discovery with community stories and reassuring care content.

## North star

Keep the storefront calm and legible, then use expressive serif headlines and intimate imagery to add sensuality without clutter.

## Overview

The visual identity is built on a pale, warm canvas (#f3f2ec) and soft gray-green (#e3e4df), with near-black text for crisp navigation, product names, and compact buttons. A muted taupe band (#cbc9bd) distinguishes the community editorial section, while coral accents appear sparingly in the footer glow rather than defining the core interface. Aeonik handles navigation, body copy, labels, and product information with a practical, modern voice; Cardinal Fruit brings a sensual editorial contrast to selected headlines. The hero uses oversized, high-impact type over full-bleed intimate still-life photography, while subsequent sections alternate spacious brand storytelling with dense product carousels. Product imagery sits in clean, pale blocks with minimal framing. The overall rhythm is comfortable and open: restrained interface chrome, large image-led moments, concise captions, and occasional bold typographic gestures keep commerce legible without losing warmth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#131313` | `--color-soft-ink` | brand | Primary navigation, body copy, product links, and dark CTA fills. |
| Sage Mist | `#e3e4df` | `--color-sage-mist` | surface | Cool gray-green canvas tone and occasional product-card or stock-label background. |
| True Black | `#000000` | `--color-true-black` | semantic | Strong heading and badge text, plus fine dark outlines and icon details. |
| Warm Gallery | `#f3f2ec` | `--color-warm-gallery` | surface | Dominant page background, pale button text, footer panel, and light hairlines. |
| Peach Glow | `#ffaa8e` | `--color-peach-glow` | accent | Measured radial glow accent; use as a soft atmospheric gradient, not a primary control color. |
| Stone Taupe | `#cbc9bd` | `--color-stone-taupe` | surface | Distinct background band behind the community and editorial content. |
| Powder Blue | `#7faad2` | `--color-powder-blue` | semantic | Appears in a small badge or graphic detail; not a defining brand surface. |
| Coral Ember | `#f68e6d` | `--color-coral-ember` | accent | Footer gradient accent, blending into a vivid but localized warm glow. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Small badge backgrounds and occasional high-contrast details, not the main canvas. |

### Semantic aliases

`--color-canvas` → `#e3e4df` (Sage Mist) · `--color-surface` → `#f3f2ec` (Warm Gallery) · `--color-surface-2` → `#cbc9bd` (Stone Taupe) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#131313` (Soft Ink) · `--color-text-subtle` → `#f3f2ec` (Warm Gallery) · `--color-border` → `#f3f2ec` (Warm Gallery) · `--color-accent` → `#ffaa8e` (Peach Glow) · `--color-accent-2` → `#f68e6d` (Coral Ember)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#e3e4df` | 16.43:1 | AAA |
| `#000000` | `#f3f2ec` | 18.72:1 | AAA |
| `#000000` | `#cbc9bd` | 12.63:1 | AAA |
| `#131313` | `#e3e4df` | 14.54:1 | AAA |
| `#131313` | `#f3f2ec` | 16.57:1 | AAA |
| `#131313` | `#cbc9bd` | 11.17:1 | AAA |
| `#f3f2ec` | `#e3e4df` | 1.14:1 | fail |
| `#f3f2ec` | `#cbc9bd` | 1.48:1 | fail |
| `#ffaa8e` | `#e3e4df` | 1.44:1 | fail |
| `#ffaa8e` | `#f3f2ec` | 1.64:1 | fail |

### Gradients

- `radial-gradient(circle, rgb(255, 170, 142), rgba(255, 170, 142, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aeonik | `--font-body` | webfont | 500, 400 | Navigation, body copy, product titles and details, labels, buttons, and sans-serif display headings. | Inter |
| Cardinal Fruit | `--font-display` | webfont | 400, 500 | Editorial display headlines, including the hero subheading and selected brand-story and standards copy. | Cormorant Garamond |

- **Aeonik:** Use mostly medium or regular weights; keep interface copy compact and clear, with uppercase treatment for small captions.
- **Cardinal Fruit:** Use regular serif forms for expressive contrast; selected display treatments use uppercase, with open, untracked letterforms.

### Type scale — Golden Ratio (ratio ≈ 1.656, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 187px | 400 | 1 | 0 | uppercase | Cardinal Fruit | Oversized uppercase editorial display moments, especially expressive hero lettering. |
| h1 | 132.5px | 500 | 0.9 | 0 | — | Aeonik | Large sans-serif hero headline and primary page statement. |
| h2 | 54px | 400 | 1.1 | 0 | — | Cardinal Fruit | Editorial section headlines and prominent storytelling copy. |
| h3 | 50px | 500 | 0.8 | 0 | — | Aeonik | Bold sans-serif collection and feature headings. |
| h4 | 41.5px | 400 | 1 | 0 | uppercase | Cardinal Fruit | Uppercase serif subheads and compact editorial headings. |
| body | 15px | 500 | 1.3 | 0 | — | Aeonik | Paragraphs, product descriptions, and general supporting copy. |
| caption | 12.5px | 500 | 1 | 0 | uppercase | Aeonik | Uppercase micro-labels, product metadata, and small section identifiers. |
| button | 15px | 500 | normal | 0 | — | Aeonik | Shop, contact, and editorial CTA labels. |
| nav | 15px | 500 | 1.3 | 0 | — | Aeonik | Header navigation and footer link text. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 3, 4, 5, 8, 10, 13, 17, 25, 29 px.
- Section rhythm 33px · element gap — · card padding — · max content width 1382px.

The page uses a broad, centered storefront canvas with a measured maximum width of 1382px. A full-width photographic hero leads into a single-column brand story, then wide product collections arranged in a dense 12-column carousel grid. Editorial content shifts into a two-column layout on a taupe field, followed by an open contact section and a full-bleed newsletter footer. Keep the section rhythm comfortable and let large headings, image blocks, and whitespace create variation.

## Shape & elevation

- Radius: button `5px` · badge `5px` · xs `5px`
- Shadow `inset` (text): `rgb(203, 201, 189) 0px -6.66667px 0px 0px inset`
- Shadow `inset-2` (input): `rgb(243, 242, 236) 0px 0px 0px 1000px inset`
- Motion: standard transition `0.3s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The interface is predominantly flat, relying on background changes and image composition rather than card shadows. Use thin pale hairlines where needed, clean product image fields, and small rounded corners on buttons and badges. Layering is reserved for hero type over photography and the inset pale newsletter panel over the colorful footer background.

## Imagery

Use tactile, close-cropped still-life and product photography with intimate, art-directed subjects. The hero is a full-bleed collage-like photograph with the headline layered over it; product collections use isolated objects against pale, quiet backgrounds. Editorial imagery can be darker, more documentary, or illustrative, while the footer uses a bright, atmospheric gradient. Avoid treating measured screenshot colors from photos as interface palette.

## Components

### Header navigation

Compact two-row header on a pale background, with the wordmark and utility icons above or alongside concise category and community links.

### Editorial hero

Full-bleed intimate still-life imagery, oversized layered headline, smaller serif supporting line, and a pale outlined CTA.

### Product collection carousel

Wide collection bands with a large sans-serif category title, product tiles, concise names and prices, and simple previous/next controls.

### Product badges

Small uppercase badges such as stock status or team favorite, set in compact Aeonik and lightly rounded.

### Editorial community feed

A taupe section pairing a short community introduction with varied story images and compact titles and dates.

### Newsletter footer

Full-bleed warm gradient behind an inset pale panel containing an uppercase serif newsletter prompt, email field, and grouped navigation links.

### Measured component styles

- **Primary button** (“About Us”): background #131313 · text #f3f2ec · radius 5px · padding 10px 16.7px · 500 15px Aeonik
- **Secondary button** (“Start Exploring”): transparent background · text #f3f2ec · border 1px solid #f3f2ec · radius 5px · padding 10px 16.7px · 500 15px Aeonik
- **Link** (“Cuffii Silicone handcuffs $25.00 CAD ●”): transparent background · text #131313 · radius 0px · padding 0px 16.7px 0px 0px · 400 15px Aeonik
- **Input** (“ALL L AMD դր. ANG ƒ AUD $ AWG ƒ BAM КМ B”): transparent background · text #131313 · radius 0px · padding 0px 16.7px 0px 0px · 500 15px Aeonik
- **Card** (“OUT OF STOCK”): background #e3e4df · text #000000 · radius 0px · padding 0px · 400 15px Aeonik
- **Badge** (“OUT OF STOCK”): background #000000 · text #ffffff · radius 5px · padding 3.3px 5px · 500 12.5px Aeonik · uppercase
- **Navigation item** (“New Pleasure Afterglo Collection ✨ Vazzi”): transparent background · text #131313 · radius 0px · padding 0px · 500 15px Aeonik

## Do

- Use Warm Gallery (#f3f2ec) as the principal page canvas.
- Keep Soft Ink (#131313) text crisp against pale surfaces.
- Pair practical Aeonik UI text with selective Cardinal Fruit editorial headlines.
- Let product photography carry color while interface surfaces stay restrained.
- Use Stone Taupe (#cbc9bd) to distinguish community editorial content.
- Make collection browsing clear with compact captions and simple carousel controls.

## Don't

- Do not turn coral into the dominant interface color.
- Do not add heavy shadows or layered card chrome to product tiles.
- Do not use decorative display typography for navigation or product metadata.
- Do not crowd the hero with extra controls or supporting copy.
- Do not treat colors sampled from product photographs as brand palette.
- Do not force every section into the same grid or visual density.

## Agent prompt

Build a new Afterglo-style ecommerce page with a calm, editorial storefront rather than a conventional promotional template. Use Warm Gallery (#f3f2ec) as the main canvas, Soft Ink (#131313) for navigation, body copy, and dark CTAs, and Stone Taupe (#cbc9bd) for a distinct editorial band. Reserve Coral Ember (#f68e6d) and Peach Glow (#ffaa8e) for a restrained footer atmosphere. Use Aeonik or a close sans-serif for interface and product content; use Cardinal Fruit or a similar expressive serif for selected headlines. Lead with tactile, intimate photography and confident layered type, then provide legible product collections with clean pale image fields, concise captions, and simple carousel controls. Keep surfaces flat, use small rounded buttons and badges, and vary section layouts between story, product, community, contact, and newsletter content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width image-led hero beneath a compact two-row navigation header. | primary exploration CTA, global navigation | layered headline, outlined button, full-bleed photography |
| 2 | feature-split | Open single-column section with an expressive composition of text and offset imagery. | brand introduction, about link | mixed serif and sans, offset photography, large editorial heading |
| 3 | product-grid | Wide product collection carousel presented as a multi-column grid. | browse products, previous and next controls | product image tiles, price captions, collection heading |
| 4 | product-grid | Wide product collection carousel with repeated image tiles and compact metadata. | browse category, stock and favorite indicators | uppercase product badges, carousel arrows, clean image backgrounds |
| 5 | product-grid | Wide carousel grid with category heading and product tiles. | browse category, view product details | isolated product imagery, price captions, small badges |
| 6 | feature-split | Centered editorial statement with a small supporting image and CTA. | learn more, reassurance content | serif statement, center alignment, minimal imagery |
| 7 | content-feed | Two-column editorial field with varied image sizes and a taupe background band. | explore blog, open story links | asymmetric story images, compact dates, editorial heading |
| 8 | contact | Open pale section with a prominent supportive message and contact link. | contact support, assistance prompt | large serif copy, minimal CTA, graphic motifs |
| 9 | newsletter | Full-bleed footer backdrop with an inset pale panel and grouped link columns. | email signup, footer navigation, social links | newsletter input, warm gradient backdrop, pale inset panel |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--cc-modal-border-radius: .5rem;
--cc-btn-border-radius: .4rem;
--cc-modal-transition-duration: .3s;
--cc-link-color: #131313;
--cc-bg: #F3F2EC;
--cc-primary-color: #2c2f31;
--cc-secondary-color: #5e6266;
--cc-btn-primary-bg: #131313;
--cc-btn-primary-color: #fff;
--cc-btn-primary-border-color: #131313;
--cc-btn-primary-hover-bg: #FAFAF6;
--cc-btn-primary-hover-color: #131313;
--cc-btn-primary-hover-border-color: #131313;
--cc-btn-secondary-bg: #CFCEC9;
--cc-btn-secondary-color: #131313;
--cc-btn-secondary-border-color: #CFCEC9;
--cc-btn-secondary-hover-bg: #FAFAF6;
--cc-btn-secondary-hover-color: #131313;
--cc-btn-secondary-hover-border-color: #131313;
--cc-separator-border-color: #f0f4f7;
--cc-toggle-on-bg: #131313;
--cc-toggle-off-bg: #CFCEC9;
--cc-toggle-on-knob-bg: #fff;
--cc-toggle-off-knob-bg: #fff;
--cc-toggle-enabled-icon-color: #F3F2EC;
--cc-toggle-disabled-icon-color: #F3F2EC;
--cc-toggle-readonly-bg: rgba(8,163,57, .35);
--cc-toggle-readonly-knob-bg: #fff;
--cc-toggle-readonly-knob-icon-color: rgba(8,163,57, .35);
--cc-section-category-border: #FAFAF6;
--cc-cookie-category-block-bg: #FAFAF6;
--cc-cookie-category-block-border: #f0f4f7;
--cc-cookie-category-block-hover-bg: #FAFAF6;
--cc-cookie-category-block-hover-border: #e9eff4;
--cc-cookie-category-expanded-block-bg: #FAFAF6;
--cc-cookie-category-expanded-block-hover-bg: #dee4e9;
--cc-overlay-bg: rgba(0,0,0,.65);
--cc-webkit-scrollbar-bg: #131313;
--cc-webkit-scrollbar-hover-bg: #131313;
```

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