# Ashleyandco · Design system migration spec

> Source: https://ashleyandco.co  ·  Curated by OpenDesign  ·  en

> A textbook example of modern minimalism for luxury consumer goods, proving that restraint and high-quality imagery are more effective than complex UI elements.

## 1. Identity DNA

The system for Ashley and Co operates on the principle of atmospheric restraint, like a high-end minimalist boutique where the space itself is curated to let a few carefully chosen objects speak. Its identity is defined by scent, modernity, and refinement, using a calm, neutral palette as a quiet stage for photographic storytelling rather than as a dominant visual element.

**One-liner:** A modern scent company using soft neutrals and photographic minimalism to create a calm, premium shopping experience.
**Keywords:** scent · modern · clean · refined · minimal
**Analogy:** A high-end minimalist boutique that relies on atmospheric photography and quiet typography.

## 2. Color

The palette is a disciplined study in warm, desaturated neutrals designed specifically to recede. Colors are not used for emphasis but to create a serene, consistent backdrop that allows high-quality lifestyle photography to become the primary focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F6F3F0` | main background |
| `--ink` | `#3C3C3C` | body text |
| `--muted` | `#939393` | placeholder |
| `--line` | `rgba(3C3C3C, 0.1)` | divider |

**Color principle:** Warm, desaturated neutrals that recede to let lifestyle photography dominate.

The governing principle is chromatic deference; every hue serves the imagery, never competing with it.

## 3. Typography

The typographic voice pairs an elegant transitional serif for display with a clean grotesque-sans for body text, creating a refined contrast between moments of emphasis and steady, unobtrusive reading. Navigation and secondary text are set in heavily tracked uppercase, imposing a clean, rhythmic order across the interface.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 42px | 1.0 | 400 | -1px | Hero headlines |
| body | 12px | 1.2 | 400 | 0.28px | Base text and navigation |

**Type rules:**
- Display uses a serif for elegant contrast against the clean sans-serif body text.
- Navigation and secondary text are heavily tracked uppercase to maintain a clean, rhythmic baseline.
- Body text remains small and unobtrusive to maximize the negative space.

## 4. Spacing

The rhythm of the layout is established through generous, deliberate padding within containers and wide gutters between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding within containers to maintain a premium, uncluttered feel.

## 5. Surfaces

Depth is communicated almost entirely through negative space and the careful layering of content, not through skeuomorphic effects. Surfaces are flat, with borders kept to a minimal, functional 1px line where structural definition is necessary.

- **Radius:** sm 4px · md 8px · lg 10px · pill 999px
- **Borders:** Minimal, often defined by a simple 1px line in dark ink or muted gray.

## 6. Layout

The structural skeleton favors asymmetrical split layouts that dynamically balance text and imagery. Full-width atmospheric photography is used as a foundational layer, establishing mood and scale before the typographic hierarchy is applied.

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

**Skeleton:** Asymmetrical split layouts and full-width atmospheric photography.

## 7. Motion & Interaction

Motion is treated as a subtle enhancement to the calm browsing experience, never as a distraction. The philosophy favors smooth fade-ins and gentle easing curves, ensuring transitions feel like a natural part of the interface's quiet rhythm.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade-ins and gentle easing for a calm browsing experience.

- **Hover:** Subtle opacity shifts or color transitions.
- **Click:** Immediate visual feedback through state changes.
- **Transition:** 0.3s cubic-bezier(0.4, 0, 0.2, 1) for most interactive elements.
- **Keyboard:** Standard focus outlines, likely styled to match the minimal aesthetic.

## 8. Voice & Don'ts

The editorial voice is refined, calm, and evocative, using short, transitional serif headlines that suggest mood over explicit description. Calls to action remain direct, uppercase, and purely functional, creating a clear distinction between poetic introduction and practical step.

- **Tone:** Refined, calm, and evocative.
- **Headline style:** Short, evocative phrases using transitional serif.
- **CTA style:** Direct, uppercase, and functional.
- **Avoid:** Loud colors / Heavy shadows / Dense text blocks

### Don'ts
- ❌ Don't use vibrant or high-chroma colors — the screenshot shows a strictly warm, desaturated neutral palette.
- ❌ Don't use decorative or heavy fonts — the screenshot shows clean grotesque-sans for body and a refined transitional-serif for display.
- ❌ Don't add drop shadows or heavy borders — the screenshot shows flat, borderless surfaces that rely on negative space.
- ❌ Don't use rounded buttons or cards — the screenshot shows sharp, rectangular corners (even 10px radius is used sparingly).
- ❌ Don't use small, crowded layouts — the screenshot shows generous padding and wide gaps between elements.
- ❌ Don't use an aggressive or promotional tone — the screenshot shows calm, refined language focused on lifestyle.

The system deliberately avoids loud colors, heavy shadows, dense text blocks, and any promotional language, defining its premium character through consistent, thoughtful omission.

## System Prompt (paste into AI tool)

```
This design DNA is for a premium scent company with a calm, minimalist, and photographic approach. It uses a warm neutral palette (#F6F3F0, #3C3C3C, #939393) and a clean typographic hierarchy pairing a transitional-serif display font with a grotesque-sans body font. The layout relies on generous negative space and high-quality lifestyle imagery. Critical donts: avoid vibrant colors, avoid heavy shadows or borders, avoid decorative fonts, avoid rounded UI elements, avoid dense text, and avoid aggressive or promotional language. This style is suitable for premium consumer brands, editorial sites, or high-end product showcases where atmosphere is paramount.
```