# Lauramonin · Design system migration spec

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

> A strong example of editorial portfolio design where typography and photography are the primary expressive tools, supported by a minimal UI.

## 1. Identity DNA

The design system for Lauramonin functions as a curated gallery wall for a fashion designer's latest collection. Its identity is built on a strict monochrome base and expressive serif typography, creating a minimalist, photo-driven portfolio where the work itself commands the space.

**One-liner:** A minimalist, photo-driven portfolio for a fashion and textile designer.
**Keywords:** Fashion · Textile · Portfolio · Editorial
**Analogy:** A curated gallery wall for a fashion designer's latest collection

## 2. Color

The color system is a deliberate act of restraint. A high-contrast monochrome base of pure white and black ink establishes a neutral stage, ensuring the vibrant colors within the photographs remain the sole chromatic focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#666666` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast monochrome base to let photography dominate.

This principle of chromatic subservience is absolute, letting the textile and fashion work define the palette on each project page.

## 3. Typography

Typographic voice is split between two distinct roles: a refined transitional serif for expressive, large-scale project titles and a clean grotesque sans-serif for all functional, navigational text. This hierarchy establishes a clear distinction between editorial display and utilitarian interface.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 158px | 1.0 | 400 | -2.88px | Large project titles like 'La Croisette' |
| heading | 14px | 1.15 | 400 | 0 | Project descriptions and subheadings |
| body | 12px | 1.15 | 400 | 0 | Navigation and small labels |

**Type rules:**
- Use a serif font for large, expressive project titles.
- Use a grotesque sans-serif for all functional and navigational text.
- Apply uppercase transformation to small labels and navigation links.

## 4. Spacing

The spatial rhythm is defined by generous vertical padding between sections, creating an airy, unhurried feel that allows compositions to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding between sections, creating an airy, unhurried feel.

## 5. Surfaces

Depth is communicated not through literal shadows or borders, but through the deliberate layering and overlapping of photographic elements. Surfaces are flat and unadorned, with separation achieved purely through white space and compositional overlap.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible borders; separation is achieved through generous white space and overlapping image compositions.

## 6. Layout

The layout operates on a free-form, overlapping grid where images are arranged in a collage-like composition. Navigation is discreetly placed at the top edges, while a large, central serif title anchors each project's hero section.

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

**Skeleton:** A free-form, overlapping grid of images with a central, large title element. Navigation is placed at the top edges.

## 7. Motion & Interaction

Motion philosophy prioritizes calm over kinetic energy. Transitions are slow and smooth, for both page loads and element entrances, reinforcing an unhurried, premium cadence that respects the viewer's attention.

- **Durations:** micro 240ms · small 400ms · medium 1000ms
- **Easing:** `cubic-bezier(0.86, 0, 0.07, 1)`
- **Patterns:**
  - Slow, smooth page transitions and element entrances

- **Hover:** Subtle opacity or transform changes on interactive elements.
- **Click:** Standard link navigation.
- **Transition:** Smooth, long-duration transitions for page loads and element appearances.
- **Keyboard:** Standard tab navigation for links.

## 8. Voice & Don'ts

The editorial voice is sophisticated, artistic, and understated, communicated through large serif headlines and simple, unadorned text links. The system deliberately avoids loud interface elements in favor of quiet, confident presentation.

- **Tone:** Sophisticated, artistic, and understated.
- **Headline style:** Large, expressive serif titles that contrast with the sans-serif body.
- **CTA style:** Simple, unadorned text links, often in uppercase.
- **Avoid:** Loud call-to-action buttons / Decorative icons / Cluttered interfaces

### Don'ts
- ❌ Don't use a grid with visible borders or cards — screenshot shows an overlapping, free-form collage.
- ❌ Don't use multiple accent colors — screenshot shows a strict monochrome palette for text and UI.
- ❌ Don't use a bold sans-serif for titles — screenshot uses a refined serif for display typography.
- ❌ Don't add drop shadows to images — screenshot uses flat, overlapping photographs.
- ❌ Don't clutter the interface with many UI elements — screenshot shows vast white space and minimal controls.
- ❌ Don't use heavy borders or separators — screenshot relies on spacing and overlap for visual hierarchy.

The system explicitly rejects decorative icons, cluttered interfaces, and the use of accent colors or visible grid borders, committing fully to a sparse, photographic focus.

## System Prompt (paste into AI tool)

```
This is a portfolio site for a fashion and textile designer. The design DNA is minimalist, editorial, and photography-centric. Key colors are a pure white background (#FFFFFF) and deep black ink (#000000), creating a high-contrast monochrome base. Typography features a large, expressive transitional-serif for display titles and a clean grotesque-sans for all functional text. Critical donts: Do not use visible grids or card components; use an overlapping collage layout instead. Do not introduce accent colors; maintain the strict black-and-white palette. Do not use bold sans-serif fonts for headlines; use refined serif typography. The layout is expansive, with generous white space and smooth, long-duration transitions that create an unhurried, premium feel.
```