---
name: Myafterglo
description: "This site is a great example of how to elevate e-commerce through artistic photography and restrained, elegant UI design."
version: alpha

colors:
  background: "#f3f2ec"
  primary: "#000000"
  secondary: "#131313"
  neutral: "#e3e1d9"
  bg-soft: "#e3e4df"
  bg-quiet: "#ffffff"
  line: "rgba(19, 19, 19, 0.15)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 132px
    lineHeight: 0.9
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 50px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 5px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A refined, gallery-like e-commerce experience for intimate wellness products, blending editorial photography with minimalist UI.

*A curated gallery of intimate wellness objects presented with the restraint of a high-end design magazine.*

## Colors

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

- **Background (`#f3f2ec`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#131313`)** — uses `ink-soft` token
- **Muted (`#e3e1d9`)** — uses `muted` token
- **Borders (`rgba(19, 19, 19, 0.15)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* A generous, open layout with wide spacing around large photographic elements.

## Elevation & Depth

- rgb(203, 201, 189) 0px -6.66667px 0px 0px inset
- Borders: 1px solid rgba(19, 19, 19, 0.15) for inputs and subtle dividers.

## Shapes

- `sm`: 5px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimal, outlined buttons with rounded corners (border-radius: 5px) for 'Start Exploring'.
- **card:** Clean, borderless cards that rely on high-quality photography and generous whitespace.
- **chip:** Simple text-based navigation links in the header.
- **input:** Minimal search and account icons integrated into the top navigation bar.
- **hero:** Full-screen, split-image hero with large, overlapping serif typography and a simple CTA button.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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