---
title: "Laura Monin design system"
variant: extended
source: https://lauramonin.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/lauramonin-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Laura Monin · Design System

> Fashion work framed as a quiet editorial collage

**Theme:** light · **Industry:** fashion · **Source:** https://lauramonin.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained portfolio homepage introduces a fashion and textile designer through overlapping project photography and an oversized editorial title. A white canvas and compact navigation keep attention on the imagery and typography.

## North star

Let a sparse white canvas, expressive serif lettering, and layered fashion photography form one quiet editorial composition.

## Overview

The page is built on a clean white canvas, with the screenshot’s muted photographic grays and greens coming from the project imagery rather than a documented interface palette. Typography provides the main graphic contrast: an oversized, lightweight serif project title sits across the collage, while a restrained sans-serif handles navigation, labels, and small uppercase metadata. The composition is deliberately asymmetric: several photographs of different proportions occupy the upper and central page, overlapping around the title instead of following a conventional card grid. Navigation is distributed across the top edge, leaving substantial white space around the content. Image edges and overlaps do the work of grouping; the interface itself reads flat, with no visible shadows, ornamental borders, or rounded containers. Preserve the unhurried rhythm and generous blank canvas, allowing the title to bridge the images without obscuring the overall impression of a carefully arranged portfolio.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Full-page canvas and the open negative space surrounding the collage, title, and navigation. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White)

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| content | `--font-body` | webfont | 400 | Navigation, project labels, metadata, and supporting interface text | Montserrat |
| title | `--font-display` | webfont | 400 | Oversized featured project title and editorial headings | Cormorant Garamond |

- **content:** Use a clean sans-serif at regular weight; navigation and small metadata are uppercase, with compact, unembellished spacing.
- **title:** Use a high-contrast serif at regular weight; the display title is very large with subtly tight tracking.

### Type scale — Custom (ratio ≈ 1.834, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 158.5px | 400 | 1.2 | -0.018em | — | title | Oversized serif project title laid across the central image collage. |
| h1 | 57.5px | 400 | 1.2 | 0 | — | title | Large serif heading for prominent portfolio content. |
| h2 | 22px | 400 | 1.2 | 0 | uppercase | content | Uppercase sans-serif section headings and labels. |
| h3 | 18px | 400 | 1.15 | 0 | — | content | Supporting sans-serif subheads. |
| body | 14px | 400 | 1.2 | 0 | uppercase | content | Compact uppercase supporting copy and project metadata. |
| nav | 14px | 400 | 1.15 | 0 | uppercase | content | Small uppercase site identity and navigation links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 7, 9, 12, 37, 45, 58, 86, 115, 122, 182, 200 px.
- Section rhythm 37px · element gap — · card padding — · max content width —.

An open, white desktop canvas holds a compact navigation row near the top and a loose collage concentrated in the upper and central area. Images vary in size and align asymmetrically, with the large serif project title crossing their edges. Preserve generous unused space below and around the composition. Avoid imposing a conventional card grid or a tightly bounded content container; the page’s rhythm comes from uneven image placement and broad intervals of blank canvas.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The interface is visually flat: no measured shadows, rounded components, or visible decorative borders. Build depth through photographs overlapping and sitting behind or beside the large title. Keep image edges clean and let differences in crop and placement create the layering.

## Imagery

Use fashion and textile portfolio photography: a model in a street setting, studio work and materials, and a garment or botanical detail. Mix portrait and landscape crops, with images positioned as independent collage pieces. Keep their natural, muted photographic tones; do not add interface color treatments that compete with the large serif title.

## Components

### Top navigation

Distribute the designer name, discipline/contact details, social link, and page navigation across the upper edge in compact uppercase sans-serif.

### Project collage

Arrange several differently sized fashion and studio photographs as an asymmetric composition, with deliberate overlap and open white space.

### Featured project title

Set the project name in an oversized, regular-weight serif across the middle of the collage so it visually bridges image edges.

### Project caption

Place a small uppercase project descriptor close beneath the featured title, keeping it subordinate to both title and photography.

### Measured component styles

- **Link** (“Blurred lines”): transparent background · text #ffffff · radius 0px · padding 0px · 400 18px content
- **Navigation item** (“FASHION & TEXTILE DESIGNER HELLO@LAURAMO”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px content · uppercase

## Do

- Keep the page canvas white and visually quiet.
- Use a large editorial serif for the featured project title.
- Set navigation and small metadata in restrained uppercase sans-serif.
- Compose project photographs asymmetrically and let them overlap.
- Leave substantial open space around the collage.
- Use imagery as the source of muted tones and visual texture.

## Don't

- Do not invent interface colors beyond the measured palette.
- Do not organize the hero as a uniform card grid.
- Do not add decorative shadows or rounded containers.
- Do not let navigation compete with the project title.
- Do not fill the large areas of white space with extra content.
- Do not flatten the collage into one full-bleed background image.

## Agent prompt

Build a fashion textile designer portfolio page in a restrained editorial style. Use Gallery White (#ffffff) as the page canvas; the measured interface palette contains only this hex, so do not invent brand or accent colors. Place compact uppercase sans-serif navigation across the top, then create an asymmetric collage from varied fashion and studio photographs. Layer an oversized regular-weight serif project title across the central images, with a small uppercase project caption nearby. Keep image tones natural and muted, and create depth through overlap and crop rather than shadows, borders, or rounded cards. Preserve generous white space, particularly beyond the collage, and avoid a conventional grid. Use Montserrat as a free sans-serif substitute and Cormorant Garamond as a free serif substitute.

## Source CSS custom properties (selected)

```css
--primary: #fff;
--secondary: #000;
--primary_grey: #f7f7f4;
--secondary_grey: #1f1f1f;
--brand_primary: #eb493e;
--brand_secondary: #073f34;
--space-unit: 1.64em;
--space-xxxxs: calc(1.64em*0.125);
--space-xxxs: calc(1.64em*0.25);
--space-xxs: calc(1.64em*0.375);
--space-xs: calc(1.64em*0.5);
--space-sm: calc(1.64em*0.75);
--space-md: calc(1.64em*1.25);
--space-lg: calc(1.64em*2);
--space-xl: calc(1.64em*3.25);
--space-xxl: calc(1.64em*5.25);
--space-xxxl: calc(1.64em*8.5);
--space-xxxxl: calc(1.64em*13.75);
--font-content: "content",Arial,sans-serif;
--font-title: "title",serif;
--text-base-size: 1.125em;
--text-scale-ratio: 1.25;
--text-xs: calc(1em/1.25*1.25);
--text-sm: calc(1em/1.25);
--text-md: calc(1em*1.25);
--text-lg: calc(1em*1.25*1.25);
--text-xl: calc(1em*1.25*1.25*1.25);
--text-xxl: calc(1em*1.25*1.25*1.25*1.25);
--text-xxxl: calc(1em*1.25*1.25*1.25*1.25*1.25);
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lauramonin-com