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

# M.Gemi · Design System

> Italian craft, framed with editorial restraint

**Theme:** light · **Industry:** fashion · **Source:** https://mgemi.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._

M.Gemi’s homepage pairs Italian artisan storytelling with an understated, editorial storefront. A restrained black-and-white interface gives way to immersive footwear imagery, refined serif headlines, and carefully spaced product collections.

## North star

Let restrained black-and-white commerce UI frame large, tactile Italian footwear imagery and elegant serif editorial copy.

## Overview

The page relies on a near-monochrome interface: Gallery White (#ffffff) forms the main canvas, Ink (#000000) carries navigation and copy, and Soft Gray (#f2f2f2) marks subtle section surfaces and product-image backdrops. The measured palette is intentionally restrained; warm stone, leather, and skin tones belong to the photography rather than the UI system. Louize’s expressive serif gives headlines an editorial, fashion-magazine voice, balanced by lightweight Poppins for body copy and widely tracked uppercase navigation and labels. A narrow dark announcement strip and pale header introduce a full-bleed video hero with centered white copy. Below, product cards, paired image stories, and a four-item essentials row alternate with generous white space. The overall rhythm is comfortable rather than dense, with broad media blocks and simple text links. Thin gray footer dividers provide structure without decorative shadows or heavy card framing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, pale header, and open space around product photography. |
| Ink | `#000000` | `--color-ink` | brand | Primary navigation, body copy, product labels, footer content, and the dark announcement band. |
| Soft Gray | `#f2f2f2` | `--color-soft-gray` | surface | Subtle section and navigation surfaces, including the pale neutral backdrop used around product imagery. |
| Quiet Silver | `#b1b1b1` | `--color-quiet-silver` | semantic | Fine footer and utility dividers; keep borders understated. |
| Deep Charcoal | `#191919` | `--color-deep-charcoal` | neutral | Minor dark detail in measured elements; not a defining interface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f2f2` (Soft Gray) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#b1b1b1` (Quiet Silver)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#ffffff` | `#f2f2f2` | 1.12:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Poppins | `--font-body` | webfont | 300, 500, 700 | Body copy, navigation, product labels, buttons, captions, and utility links. | Jost |
| 205TF Louize | `--font-display` | webfont | 400 | Display and section headlines, including the hero statement and editorial product-story copy. | Cormorant Garamond |
| Times New Roman | `--font-times-new-roman` | system | 400 | Measured fallback on some product and navigation links; not the intended dominant brand face. | Libre Baskerville |

- **Poppins:** Light body weight; navigation and eyebrows use medium weight, uppercase, and generous tracking.
- **205TF Louize:** Regular-weight expressive serif; use natural casing and a refined editorial rhythm.
- **Times New Roman:** Appears in measured component samples; prefer the site’s Poppins and Louize pairing for deliberate styling.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.13 | 0 | — | 205TF Louize | Large hero and campaign statements over video or photography. |
| h1 | 56px | 400 | 1.14 | 0 | — | 205TF Louize | Primary page or campaign headline. |
| h2 | 48px | 400 | normal | 0 | — | 205TF Louize | Major collection and editorial section headings. |
| h3 | 40px | 400 | 1.2 | 0 | — | 205TF Louize | Secondary story and promotional headlines. |
| h4 | 32px | 400 | 1.31 | 0 | — | 205TF Louize | Smaller editorial and product-story titles. |
| body | 14px | 300 | 1.57 | 0.018em | — | Poppins | Descriptions, supporting copy, and footer information. |
| caption | 10px | 300 | 1.67 | 0.01em | — | Poppins | Compact product details and image captions. |
| button | 10px | 300 | 1.67 | 0.01em | — | Poppins | Small, understated CTA labels. |
| nav | 14px | 500 | 1.14 | 0.143em | uppercase | Poppins | Uppercase primary navigation labels. |
| link | 12px | 500 | 2.5 | 0.067em | — | Poppins | Product names and secondary commerce links. |
| eyebrow | 14px | 500 | 1.71 | 0.214em | uppercase | Poppins | Uppercase collection labels above editorial copy. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 5, 8, 10, 12, 16, 20, 24, 25, 32, 39, 40, 50, 64, 88 px.
- Section rhythm 64px · element gap 20px · card padding — · max content width 1312px.

A broad, centered storefront uses a slim announcement bar above a horizontal header, then opens into edge-to-edge video. Content sections sit within a wide page frame, with three-column bestseller merchandising, paired two-column editorial image stories, and a centered four-item essentials row. Alignment shifts deliberately: centered hero copy, left-aligned product and story text, and centered footer headings. Large media areas and generous white intervals keep the comfortable density from becoming crowded; the footer resolves into three columns.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is essentially flat: avoid drop shadows, floating cards, and conspicuous rounded containers. Product images sit directly in the page flow, while whitespace and alignment define the groups. Use fine, quiet gray dividers in the footer and a strong dark announcement strip for contrast. The circular chat control is a small utility exception.

## Imagery

Use real, tactile fashion photography and video: shoes worn on Italian streets, close views of leather and artisan work, and clean isolated product shots. The hero and artisan story are full-bleed moving-image moments with centered white overlay copy. Collection imagery alternates lifestyle framing with simple product presentation on pale neutral backgrounds. Preserve natural warm stone, leather, and skin tones; these are photographic content, not interface palette additions.

## Components

### Announcement bar

A narrow, full-width dark strip above the header, carrying a centered, compact light-colored message.

### Store header

Pale horizontal header with tracked uppercase category links, centered M.Gemi wordmark, and small search, account, and bag utilities.

### Video hero

Edge-to-edge lifestyle video with centered Louize headline and a small uppercase, tracked commerce link in white.

### Bestseller showcase

Editorial introduction beside a three-column product selection, with concise product names and prices beneath imagery.

### Editorial image pair

Two broad side-by-side image stories, each followed by an uppercase Poppins eyebrow and a Louize headline.

### Essentials product row

Centered serif heading above four evenly aligned isolated products, each followed by a compact underlined shop link.

### Three-column footer

Contact, sharing, and company link groups with centered headings, fine vertical dividers, and small utility text.

### Measured component styles

- **Primary button** (“Accessibility”): transparent background · text #000000 · radius 0px · padding 0px · 300 10px Poppins
- **Link** (“THE UNA $298”): transparent background · text #000000 · radius 0px · padding 0px · 400 25.6px Times New Roman
- **Navigation item** (“WOMEN HANDBAGS MEN SALE 0”): transparent background · text #000000 · radius 0px · padding 0px · 400 25.6px Times New Roman

## Do

- Keep the interface predominantly Gallery White (#ffffff) and Ink (#000000).
- Use Louize-style serif headlines for editorial moments.
- Set navigation and category eyebrows in tracked uppercase Poppins.
- Give lifestyle video and product photography room to dominate.
- Use Soft Gray (#f2f2f2) only as a quiet supporting surface.
- Separate content through whitespace and alignment rather than card effects.

## Don't

- Do not introduce unmeasured accent colors into interface elements.
- Do not turn warm photographic tones into brand UI colors.
- Do not add prominent shadows, gradients, or decorative card borders.
- Do not crowd product imagery with dense copy or controls.
- Do not replace editorial serif headlines with a generic heavy sans.
- Do not make navigation oversized or visually louder than the campaign image.

## Agent prompt

Build a new M.Gemi-style fashion storefront page using a restrained editorial system. Use Gallery White (#ffffff) as the main canvas and Ink (#000000) for navigation, copy, and links; reserve Soft Gray (#f2f2f2) for subtle image or section surfaces and Quiet Silver (#b1b1b1) for fine dividers. Set campaign and collection headlines in an elegant Louize-like serif, with lightweight Poppins-style body text and widely tracked uppercase navigation and eyebrows. Start with a slim dark announcement band and pale header, then prioritize a full-width lifestyle image or video. Follow with spacious product grids and paired editorial image stories, keeping product labels compact. Let authentic leather, footwear, and artisan imagery supply the warmth. Keep surfaces flat, avoid unnecessary shadows, and use generous whitespace to establish hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with centered overlay headline and shop link. | Campaign entry point, Direct shop CTA | Edge-to-edge video, Centered white serif copy, Small tracked link |
| 2 | product-showcase | Editorial intro beside a three-column product selection. | Browse bestsellers, Product names and prices | Serif supporting headline, Pale product-image fields, Compact labels |
| 3 | feature-grid | Two-column image-led editorial grid. | Explore featured styles, Image-led category discovery | Large paired imagery, Uppercase eyebrows, Serif captions |
| 4 | feature-grid | Two-column image-led editorial grid. | Explore product categories, Lifestyle-to-product browsing | Paired photographs, Eyebrow labels, Serif story headlines |
| 5 | product-grid | Centered heading above four aligned product tiles. | Shop named styles, Scan a compact collection | Centered serif heading, Four product images, Small underlined links |
| 6 | video | Full-width artisan video with centered story copy. | Brand storytelling, Meet the artisans CTA | Dark photographic treatment, White serif overlay, Centered compact link |
| 7 | newsletter | Compact single-column signup form between story and footer. | Email capture, Newsletter signup | Minimal form controls, Pale neutral band |
| 8 | footer | Three-column information area with brand mark and lower legal links. | Customer support access, Social sharing, Company navigation | Three link columns, Fine vertical dividers, Compact legal row |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--color-accent: #c4cdd5;
--color-body-text: #161d25;
--color-main-background: #fff;
--color-border: #849bb6;
--font-heading: ,;
--font-body: ,;
--font-body-bold-weight: bold;
--font-size-header: * 1px;
--font-size-base: px;
--font-sans-serif: 'Poppins', sans-serif;
--font-serif: '205TF Louize', serif;
--paragraph-font: 'Poppins', sans-serif;
--paragraph-font-italic: '205TF Louize', serif;
--paragraph-body-1-spacing: 0.25px;
--paragraph-body-2-spacing: 0.25px;
--paragraph-caption-spacing: 0.1px;
--paragraph-small-spacing: 0.1px;
--heading-font: '205TF Louize', serif;
--heading-font-sans-serif: 'Poppins', sans-serif;
--heading-1-spacing: normal;
--heading-1-s-spacing: 6px;
--heading-2-spacing: normal;
--heading-2-s-spacing: 6px;
--heading-3-spacing: normal;
--heading-3-s-spacing: 4px;
--heading-4-spacing: normal;
--heading-4-s-spacing: 4px;
--heading-5-spacing: normal;
--heading-5-s-spacing: 2px;
--heading-6-spacing: normal;
--heading-6-s-spacing: 2px;
--mobile-heading-4-spacing: 0;
--text-title-font: 'Poppins', sans-serif;
--text-title-weight: 500;
--text-title-light-weight: 400;
--text-title-1-size: 16px;
--text-title-1-height: 24px;
--text-title-1-spacing: 2px;
--text-title-2-size: 14px;
```

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