Skip to content
DesignMunkDesignMunk Submit a site

M.M. LaFleur

mmlafleur.com
Style meets comfort. Easy care. Designed to last.
Ecommerce Lifestyle Shopify Tailwind Homepage Genath Inter
Share Visit site
mmlafleur.com DESKTOP · 1440
M.M. LaFleur

AI Breakdown

Design export

---
version: alpha
name: M.M. LaFleur
description: Style meets comfort. Easy care. Designed to last.
colors:
  primary: "#21262a"
  secondary: "#7c7c7c"
  tertiary: "#000000"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Genath
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.19
  headline-md:
    fontFamily: Genath
    fontSize: 39px
    fontWeight: 400
    lineHeight: 1.53
  headline-sm:
    fontFamily: Genath
    fontSize: 29px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: -0.01em
  headline-xs:
    fontFamily: Inter
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.19
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.1em
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 40px
  xl: 60px
components:
  button-primary:
    backgroundColor: "#3e3f40"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 16px 10px
    height: 48px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px 10px
    height: 48px
  button-link:
    textColor: "#3e3f40"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# M.M. LaFleur: Editorial Serif Headlines Over Quiet Grids

## Overview

A refined, editorial e-commerce system for modern womenswear. The tone is confident and understated: dark, cool neutrals; large serif headlines; spacious but not sparse layouts. Interfaces should feel calm, with hierarchy driven by type, whitespace, and subtle dividers rather than loud color. Prioritize clarity in shopping flows and keep promotional elements structured within the same quiet grid.

## Colors

- **primary (#21262a):** Deep charcoal for headings, UI text, and icons where strong contrast is required.
- **secondary (#7c7c7c):** Muted gray for secondary labels, metadata, and subdued UI states.
- **tertiary (#000000):** True black reserved for small, high-contrast details or legal copy.
- **neutral (#ffffff):** Pure white used as the default page and card background.
- **border (#e5e7eb):** Soft gray for dividers, input borders, and subtle section rules.
- **surface (#ffffff):** Surface color for cards and panels; matches neutral for a seamless canvas.
- **on-surface (#21262a):** Default text color on white or surface panels, ensuring consistent legibility.

## Typography

- Genath — custom (self-hosted). Roles: all display headlines. Sizes: 52px (headline-lg, 1.19 LH), 39px (headline-md, 1.53 LH), 29px (headline-sm, -0.01em tracking, 1.14 LH). Since agents cannot fetch custom fonts, use obtainable substitutes with similar old-style warmth: Playfair Display, Lora, or Spectral.
- Inter — Google Fonts (loadable). Roles: small headline-xs at 21px (1.19 LH) and all body copy at 16px (1.5 LH) with 0.1em letter-spacing for a refined, airy read. Also suitable for UI labels and buttons.
- Maison Neue — custom (self-hosted). When a neutral sans is desired beyond Inter, treat it as proprietary. Practical substitutes: Source Sans 3, Work Sans, or IBM Plex Sans.
Use Genath strictly for hero and section headings; keep paragraphs, navigation, and controls in Inter for consistency and accessibility.

## Layout

Spacing is an 8px baseline with steps at 8/16/32/40/60. Use sm (16px) for intra-component padding, md (32px) for gaps between cards, lg (40px) for section breathing room, and xl (60px) for hero or major banding. Keep content in wide, image-led sections with clear vertical rhythm. Lists and product grids prefer even gutters in multiples of 16px. Maintain generous margins around headlines so type, not decoration, carries hierarchy.

## Elevation & Depth

Depth is restrained. Use the measured sm shadow (rgba(0,0,0,0.2) 1px 1px 1px 1px) for small popovers or image hovers; md shadow (rgba(0,0,0,0.2) 0 0 25px 0) for modals and overlays. Larger levels are intentionally none. For everyday separation, rely on the border color #e5e7eb, light tonal shifts, and whitespace.

## Shapes

Corners are minimal and functional: 4px (rounded.sm) for interactive elements like buttons and inputs; 8px (rounded.md) for cards and larger containers. Zero-radius is acceptable for text links and underline-driven CTAs. Use roundness to signal clickability without softening the overall editorial feel.

## Components

### Button — Primary
- Background #3e3f40, text #ffffff, height 48px, padding 16px 10px, radius 4px. Default CTA across the site.

### Button — Secondary
- Text #21262a on transparent/surface, same 48px height and 4px radius. Use when emphasis is lower than primary.

### Button — Link
- Text #3e3f40, no radius. Inline or lightweight calls to action.

### Card
- Background #ffffff, text #21262a, radius 8px, padding 16px. Add border #e5e7eb or sm shadow for lift.

### Announcement Bar
- Full-width band above the hero. Set copy in Inter 16px with increased letter-spacing (0.1em). Include a single button-link for the campaign.

### Hero with Overlay Copy
- Full-bleed image with left-aligned Genath 52px headline and Inter 16px subcopy. Primary button at 48px height; maintain at least 60px top/bottom padding.

### "Meet Our Icons" Feature Row
- A horizontal set of product highlights. Each tile: product name in Genath 29px, short quote in Inter 16px, price beneath, optional star rating. Use card or border dividers.

### "Find What You Need" Category Grid
- Four tiles linking to key categories. Use 32px gaps, 8px card radius, and concise Inter labels. Each tile hosts an image and a compact overlay label/button.

### Utility Rail (Bento / Stores / Events / The M Dash)
- Four equal links with small icons, spaced by #e5e7eb dividers. Inter 16px labels; use button-link style for actions.

## Do's and Don'ts

- Do reserve Genath for headlines (52/39/29px) and keep all paragraphs, navigation, and UI text in Inter 16px.
- Do maintain the 48px button height and 4px radius across all CTAs for consistency.
- Do separate dense sections with #e5e7eb dividers or 32–40px gaps rather than heavy shadows.
- Don't introduce saturated brand colors for structural UI; keep text in #21262a on #ffffff surfaces.
- Don't exceed 8px corner radius on cards or modals; roundness should remain subtle.
- Don't tighten body copy tracking—leave 0.1em to match the brand's airy read.

## Agent Prompt Guide

Quick color reference
- Text: #21262a
- Background: #ffffff
- Border: #e5e7eb
- Accent/CTA: #3e3f40

1) Build a hero cover with editorial type
- Container: full-width image, inner max-width section.
- Heading: Genath 52px/1.19, color #ffffff or #21262a depending on image.
- Subcopy: Inter 16px/1.5, letter-spacing 0.1em, color #ffffff or #21262a.
- Primary CTA: background #3e3f40, text #ffffff, height 48px, padding 16px 10px, radius 4px.
- Spacing: 60px top and bottom.

2) Create a 4-up product feature row
- Each tile is a card: background #ffffff, radius 8px, padding 16px, border 1px #e5e7eb.
- Title: Genath 29px, color #21262a.
- Quote/price: Inter 16px/1.5, letter-spacing 0.1em.
- Gutter between tiles: 32px.

3) Add a campaign announcement bar
- Full-width band above the hero.
- Copy: Inter 16px/1.5 with 0.1em tracking, color #21262a on #ffffff.
- Action: button-link (text #3e3f40, no radius). Vertical padding 16px.

4) Build the newsletter sign-up card
- Card: background #ffffff, radius 8px, padding 16px, optional sm shadow (rgba(0,0,0,0.2) 1px 1px 1px 1px).
- Heading: Genath 39px.
- Inputs: height 48px, border 1px #e5e7eb, radius 4px.
- Submit: primary button #3e3f40 with #ffffff text, 48px tall.

## Similar Brands

- Everlane — similarly restrained neutrals and quiet borders; Everlane skews more utilitarian with tighter sans-serif headlines.
- Cuyana — shares a calm, editorial tone; Cuyana leans warmer with softer photography and slightly larger whitespace blocks.
- J.Crew — mixes serif display with sans body; J.Crew uses brighter accent colors and more promotional density.
- Theory — minimal grayscale palette and sharp CTAs; Theory is even more austere with fewer decorative textures.
- Reformation — fashion-forward serif display; Reformation's palette and copy are louder and trend-driven compared to M.M.'s steadier classicism.

More like this

Browse Ecommerce →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 1 day ago
joinpause.co
Pause Event
Pause
Meet one new Londoner each week—face-to-face, with no phone distractions.
Homepage · 2 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 3 days ago