# Myafterglo · Design system migration spec

> Source: https://myafterglo.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of how to elevate e-commerce through artistic photography and restrained, elegant UI design.

## 1. Identity DNA

Myafterglo is conceived as a curated gallery of intimate wellness objects presented with the restraint of a high-end design magazine. The system's identity is built on four pillars: intimate wellness, sculptural objects, editorial photography, and soft luxury. Every design decision serves this vision, creating a refined, gallery-like e-commerce experience where products are elevated through artistic composition.

**One-liner:** A refined, gallery-like e-commerce experience for intimate wellness products, blending editorial photography with minimalist UI.
**Keywords:** intimate wellness · sculptural objects · editorial photography · soft luxury
**Analogy:** A curated gallery of intimate wellness objects presented with the restraint of a high-end design magazine.

## 2. Color

The color system is built on a foundation of warm, muted neutrals that act as a soft canvas, ensuring rich photographic imagery commands primary attention. This palette creates a calm, premium atmosphere without competing with the visual storytelling.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f3f2ec` | main background |
| `--bg-soft` | `#e3e4df` | card background |
| `--bg-quiet` | `#ffffff` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#131313` | secondary text |
| `--muted` | `#e3e1d9` | placeholder |
| `--line` | `rgba(19, 19, 19, 0.15)` | divider |

**Color principle:** Warm, muted neutrals provide a soft canvas that lets the rich, photographic imagery take center stage.

The core principle is that color should recede to let content—specifically the curated photography—dominate the visual hierarchy.

## 3. Typography

Typography is split between a transitional serif for expressive, elegant headlines and a humanist sans for clear navigation and UI text. This pairing establishes a voice that is both sophisticated and readable, with generous letter-spacing applied to uppercase display text for added refinement.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 132px | 0.9 | 400 | -1px | Hero headline 'The sensual touch' |
| heading | 50px | 1.0 | 400 | 0px | Sub-headline 'TO YOUR EVERYDAY SELF-CARE' |
| body | 15px | 1.3 | 400 | 0px | Main body text and navigation |

**Type rules:**
- Use transitional-serif for large, expressive headlines to convey elegance.
- Use humanist-sans for navigation and UI elements for clarity.
- Maintain generous letter-spacing for uppercase display text.

## 4. Spacing

The system's rhythm is defined by generous, open spacing that allows large photographic elements room to breathe, reinforcing the gallery-like sensibility.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A generous, open layout with wide spacing around large photographic elements.

## 5. Surfaces

Surfaces are treated with minimal, flat depth cues. A subtle inset shadow provides a faint sense of recession, while thin, semi-transparent borders are used sparingly for inputs and delicate dividers.

- **Radius:** sm 5px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgb(203, 201, 189) 0px -6.66667px 0px 0px inset
- **Borders:** 1px solid rgba(19, 19, 19, 0.15) for inputs and subtle dividers.

## 6. Layout

The layout skeleton begins with a full-bleed hero section featuring centered text overlay. This is followed by a centered content column that prioritizes editorial imagery and generous whitespace over dense grid structures.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero with centered text overlay, followed by a centered content column for editorial imagery.

## 7. Motion & Interaction

Motion philosophy favors subtlety and polish over announcement. Smooth, cubic-bezier transitions are applied to functional elements like carousels and text fades, ensuring movement feels refined and integral to the experience rather than decorative.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.38, 0.005, 0.215, 1)`
- **Patterns:**
  - Smooth slide-in transitions for product carousels.
  - Subtle fade-in effects for text overlays on hero sections.

- **Hover:** Subtle cursor changes (pointer) on interactive elements; minimal visual feedback to maintain aesthetic.
- **Click:** Immediate response with smooth state transitions.
- **Transition:** All properties transition smoothly over 150ms for a refined feel.
- **Keyboard:** Standard keyboard navigation support for accessibility.

## 8. Voice & Don'ts

The editorial voice is sophisticated, intimate, and empowering, expressed through large, expressive serif headlines that blend with imagery. Calls-to-action are intentionally simple, direct, and understated.

- **Tone:** Sophisticated, intimate, and empowering.
- **Headline style:** Large, expressive transitional-serif typography that blends with photographic imagery.
- **CTA style:** Simple, direct, and understated, often using outlined buttons.
- **Avoid:** Loud, aggressive marketing language / Overly technical or clinical descriptions / Cluttered layouts with heavy borders or shadows

### Don'ts
- ❌ Don't use vibrant, neon colors — the screenshot shows a muted palette of warm greys, off-whites, and deep blacks.
- ❌ Don't use a dark mode interface — the primary background is a warm off-white (#f3f2ec).
- ❌ Don't use harsh, geometric sans-serif fonts — the display typography is a refined transitional-serif.
- ❌ Don't use heavy drop shadows or thick borders — surfaces are flat with minimal, subtle inset shadows.
- ❌ Don't use a cluttered grid with small gaps — the layout is spacious with generous whitespace between sections.
- ❌ Don't use generic product photography — the site uses artistic, still-life compositions with unique lighting.

The system deliberately avoids loud marketing language, cluttered interfaces, and any visual noise that would disrupt the serene, curated atmosphere.

## System Prompt (paste into AI tool)

```
This is a refined, gallery-like e-commerce site for intimate wellness products. It uses a warm, muted color palette (off-white #f3f2ec, deep black #000000) to create a calm, premium atmosphere. The typography features a mix of elegant transitional-serif for display headlines and a clean humanist-sans for body text. Key design elements include large, artistic photography, generous whitespace, and minimal UI components with subtle borders. The layout is spacious and centered, emphasizing the curated nature of the products. Critical donts include avoiding dark mode, bright neon colors, or cluttered grids. The tone is sophisticated and intimate.
```