# Aliciamoore · Design system migration spec

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

> This site is a masterclass in luxury e-commerce design, using extreme restraint and spatial composition to elevate the product.

## 1. Identity DNA

The system is engineered like a quiet, dimly lit luxury showroom. Its purpose is to disappear, directing all attention to the single point of focus: the product. Every rule serves this atmosphere of restrained exhibition.

**One-liner:** A premium fashion brand website that uses extreme restraint and full-bleed imagery to create an immersive, gallery-like shopping experience.
**Keywords:** Minimalist · High-end · Fashion · Atmospheric
**Analogy:** A quiet, dimly lit luxury showroom where the product is the only focus.

## 2. Color

The palette is a study in contrast, built from a strict monochromatic foundation of deep black and off-white. A deep navy provides a subtle secondary state, ensuring the visual field remains a neutral stage for photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-quiet` | `#222A37` | quiet area |
| `--ink` | `#F1F0EC` | body text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(241, 240, 236, 0.15)` | divider |

**Color principle:** High-contrast monochromatic palette with a secondary deep navy state, relying on photography for warmth.

Color exists not as decoration, but as the ultimate frame for content.

## 3. Typography

Typography is a clean, architectural element, using Founders Grotesk in light and regular weights. Its role is functional and atmospheric, set with wide tracking and generous space to establish a sophisticated, whisper-quiet voice.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.2 | 400 | 0.36px | Brand Name (Logo) |
| body-small | 12px | 1.4 | 300 | 0.36px | Navigation and UI Elements |
| body | 14px | 1.2 | 400 | 0px | Secondary Labels and CTA |

**Type rules:**
- Use Founders Grotesk as the primary typeface
- Navigation links use a light weight (300) with wide letter spacing
- Maintain generous negative space around typographic elements

## 4. Spacing

Spatial rhythm is defined by vast fields of negative space, creating deliberate pauses that guide the eye.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 36 / 48 / 64 / 96 / 108 px
- **Rhythm:** Generous padding (36px) frames the edges, with 108px vertical breathing room in the hero.

## 5. Surfaces

Surfaces are flat and weightless, stripped of shadows or dimensional cues. Separation is achieved solely through the most subtle 1px borders in the ink color, applied with severe restraint.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Subtle 1px borders in ink color used sparingly for separation.

## 6. Layout

The layout is a full-screen canvas, its skeleton built on a dominant central visual. Typographic and interactive elements are anchored to the periphery—corners and edges—leaving the core of the viewport entirely to the image.

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

**Skeleton:** A full-screen canvas with a dominant central visual, anchored by corner-aligned navigation and brand elements.

## 7. Motion & Interaction

Motion is a fluid undercurrent, not a spectacle. The system employs smooth opacity fades and staggered entrances to create elegant, purposeful transitions that feel like a natural extension of the interface's calm demeanor.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.32, 0.94, 0.6, 1)`
- **Patterns:**
  - Smooth opacity fades for UI elements
  - Staggered entrance animations for text and images

- **Hover:** Subtle opacity reduction on interactive text links.
- **Click:** Immediate visual feedback with smooth transition to the next state.
- **Transition:** Cubic-bezier easing curves (0.32, 0.94, 0.6, 1) for fluid movement.
- **Keyboard:** Focus states follow standard accessibility outlines.

## 8. Voice & Don'ts

The editorial voice is minimalist and sophisticated, expressed through uppercase, wide-tracked headlines and peripheral, lowercase CTAs. It speaks in understated prompts, never shouts.

- **Tone:** Minimalist, sophisticated, and understated.
- **Headline style:** Uppercase, wide-tracked, and light-weight.
- **CTA style:** Simple, lowercase text prompts placed peripherally.
- **Avoid:** Excessive adjectives / Loud call-to-actions / Crowded layouts / Vibrant colors

### Don'ts
- ❌ don't use drop shadows — screenshot shows flat imagery and text
- ❌ don't use rounded corners — screenshot shows perfectly square edges
- ❌ don't add decorative borders — screenshot shows a borderless, edge-to-edge layout
- ❌ don't use multiple accent colors — screenshot shows a strictly monochromatic palette
- ❌ don't use heavy font weights — screenshot shows only light (300) and regular (400) weights
- ❌ don't center-align text — screenshot shows left-aligned and right-aligned peripheral text

The system deliberately avoids decorative elements, vibrant colors, and any component that might compete with the primary visual narrative.

## System Prompt (paste into AI tool)

```
Design a premium, minimalist fashion e-commerce interface with a gallery-like feel. Use a deep black (#000000) background and off-white (#F1F0EC) text for maximum contrast. Typography should be a clean grotesque-sans in light and regular weights with generous letter spacing. Prioritize large, high-quality photography as the primary visual element, with UI elements pushed to the periphery. Use cubic-bezier(0.32, 0.94, 0.6, 1) for smooth, elegant motion. Avoid any decorative elements like shadows, rounded corners, or vibrant colors; maintain absolute restraint. Navigation should be discreet and text-only.
```