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

# Marylou Faure · Design System

> Quiet editorial structure, exuberant illustrative colour

**Theme:** light · **Industry:** portfolio · **Source:** https://maryloufaure.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 white portfolio canvas frames a long sequence of expressive commercial illustration projects. Compact navigation, fine black rules, and flexible image grids let each project’s artwork provide the colour and personality.

## North star

Keep the interface quiet and precisely ruled so the artwork—not the chrome—controls the colour, scale, and mood.

## Overview

The visual system keeps the portfolio shell deliberately quiet: a white canvas, black typography, compact top navigation, and thin black rules define the page without competing with the artwork. Helvetica Now is used throughout, with regular-weight text and a clear size contrast between the large project headings, introductory copy, and small tracked navigation and captions. The opening is an editorial split: descriptive copy occupies the broad left area while two small visual previews sit at the right, followed by a client-logo row. Project sections use large, asymmetrical image grids that shift between two-, three-, and four-column arrangements, with narrow white gutters and a heading aligned to the left. Red, cyan, pink, green, lavender, and orange are prominent within the work, not a fixed interface palette. Treat those colours as artwork-led accents; do not apply them as recurring site chrome. Images are mostly flat to the page, with clear perimeter rules and little decorative elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Portfolio Ink | `#000000` | `--color-portfolio-ink` | neutral | Primary text, navigation and links; also the fine section outlines and some dark image or video panels. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Continuous page canvas and whitespace around the project grids. |
| Artwork Red | `#ff0000` | `--color-artwork-red` | accent | Vivid colour inside Coca-Cola campaign illustrations; artwork content, not a general interface accent. |
| Warm Paper | `#f1dabe` | `--color-warm-paper` | surface | Measured project-section surface; use only where this warm band is actually part of the artwork or section. |
| Gallery Charcoal | `#201b15` | `--color-gallery-charcoal` | surface | Near-black measured section surface and dark media backdrop, distinct from the white portfolio canvas. |
| Ice Blue | `#e7f2f7` | `--color-ice-blue` | surface | Pale blue measured card surface, also echoed by cool tones in campaign imagery. |
| Vivid Green | `#04cd62` | `--color-vivid-green` | accent | Campaign-card colour within the Back Market work; not a recurring navigation or button colour. |
| Apricot Orange | `#ffbe7f` | `--color-apricot-orange` | accent | Warm illustration accent in measured project cards. |
| Bright Mint | `#00e288` | `--color-bright-mint` | accent | Artwork-only green appearing in project cards and campaign illustrations. |
| Periwinkle Blue | `#7a97ee` | `--color-periwinkle-blue` | accent | Illustration and campaign-image blue; not a fixed interface colour. |
| Studio Teal | `#529ebd` | `--color-studio-teal` | accent | Blue-green tone measured in project imagery, rather than a site-wide UI accent. |
| Graphic Orange | `#fe6b00` | `--color-graphic-orange` | accent | Bright orange within the McLaren and VELO campaign artwork. |
| Sky Illustration Blue | `#72c2f2` | `--color-sky-illustration-blue` | accent | Artwork-led blue used in image tiles and campaign illustrations. |
| Lavender Lilac | `#d7b6ff` | `--color-lavender-lilac` | accent | Pastel lavender visible within the illustrated project imagery. |
| Electric Cyan | `#00d6ff` | `--color-electric-cyan` | accent | High-energy cyan inside campaign illustrations and product artwork. |
| Candy Pink | `#ffabe8` | `--color-candy-pink` | accent | Pink used in illustrated work and campaign imagery, not as a persistent UI surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Portfolio Ink) · `--color-surface-2` → `#f1dabe` (Warm Paper) · `--color-surface-3` → `#201b15` (Gallery Charcoal) · `--color-surface-4` → `#e7f2f7` (Ice Blue) · `--color-text` → `#000000` (Portfolio Ink) · `--color-border` → `#000000` (Portfolio Ink) · `--color-accent` → `#ff0000` (Artwork Red) · `--color-accent-2` → `#04cd62` (Vivid Green) · `--color-accent-3` → `#ffbe7f` (Apricot Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f1dabe` | 15.51:1 | AAA |
| `#000000` | `#201b15` | 1.23:1 | fail |
| `#ff0000` | `#ffffff` | 4:1 | AA-large |
| `#ff0000` | `#000000` | 5.25:1 | AA |
| `#ff0000` | `#f1dabe` | 2.95:1 | fail |
| `#ff0000` | `#201b15` | 4.27:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Now | `--font-body` | system | 400, 600 | All site text, including navigation, introductory copy, project headings, links, and captions. | Inter |

- **Helvetica Now:** Regular weight dominates; use restrained tracking on small navigation and utility text, with mixed case and no forced uppercase.

### Type scale — Custom (ratio ≈ 2, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 0.8 | 0 | — | Helvetica Now | Large introductory or primary heading treatment. |
| body | 20px | 400 | 1.25 | 0 | — | Helvetica Now | Introductory artist statement and longer explanatory copy. |
| caption | 12px | 400 | 1.5 | 0.042em | — | Helvetica Now | Small project labels and supporting image captions. |
| button | 12px | 400 | 1 | 0.042em | — | Helvetica Now | Compact utility and button text. |
| nav | 12px | 400 | 1.5 | 0.042em | — | Helvetica Now | Small header navigation links. |
| link | 12px | 400 | 1.5 | 0.042em | — | Helvetica Now | Small contact, social, and inline links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 9, 10, 15, 16, 30, 33 px.
- Section rhythm 48px · element gap 15px · card padding — · max content width 1410px.

The measured page max width is 1410px, with a comfortable density and broad white canvas. A compact top navigation sits above the introduction; the introductory copy and preview images form a two-column split, followed by a widely distributed client-logo row. Project blocks are separated by thin horizontal rules and use left-aligned headings with grids that vary from two to four columns. The measured spacing scale includes 1, 4, 8, 9, 10, 15, 16, 30, and 33px; use the tighter values for image gutters and controls, and larger values for section breathing room. Keep occasional media blocks full bleed.

## Shape & elevation

- Radius: button `8px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.09) 0px 0px 14px 0px, rgba(0, 0, 0, 0.21) 0px 0px 4px 0px, rgba(0, 0, 0, 0.09) 0px 0px 0px 1px`
- Motion: standard transition `0.1s ease` on interactive elements.

The page is predominantly flat: thin black rules separate major blocks, and image tiles sit directly on the white canvas. Do not add floating-card styling to ordinary gallery work. A measured card shadow exists, but the screenshots show that image-led layouts and borders—not elevation—define the visual hierarchy.

## Imagery

The work combines bold character illustration, branded packaging and campaign photography, outdoor advertising, and video. Show images as large, clean tiles with minimal decoration and preserve each asset’s own colour palette. Project grids vary in column count and aspect ratio rather than forcing every image into a uniform card. Some media blocks are full bleed; other tiles sit within the restrained white page frame.

## Components

### Top navigation

Compact black text links on white, with the artist name at the left, primary links centered, and a small cart control at the right.

### Intro and contact

A broad left-aligned artist statement paired with two small preview images at the right; contact and social links sit below the copy.

### Client strip

Small muted label followed by a single horizontal row of monochrome client marks.

### Project heading

Large regular-weight black client or campaign title, aligned to the left above its image grid.

### Variable image grid

Editorial portfolio gallery switching between two, three, or four columns, with narrow white gutters and image-led colour.

### Section divider

Fine black horizontal rules and subtle frame lines create clear boundaries between the white project blocks.

### Campaign media

Large stills and video panels, sometimes arranged as a two-column pair and sometimes extending across the available width.

### Measured component styles

- **Primary button** (“Skip to content”): background #000000 · text #ffffff · radius 8px · padding 8px 30px 9px 30px · 400 12px Helvetica Now
- **Secondary button**: background #f2f2f2 · text #000000 · radius 50% · padding 0px · 400 16px Arial
- **Link** (“ask@maryloufaure.com”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Helvetica Now
- **Card** (“Cart Your cart is empty.”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Helvetica Now · shadow rgba(0, 0, 0, 0.09) 0px 0px 14px 0px, rgba(0, 0, 0, 0.21) 0px 0px 4px 0px, rgba(
- **Navigation item** (“Marylou Faure”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Helvetica Now

## Do

- Keep the portfolio canvas white and the site chrome black.
- Use Helvetica Now or a close neutral sans-serif substitute.
- Align project titles and introductory copy to the left.
- Let each project choose a flexible image-grid arrangement.
- Use thin rules and narrow gutters to separate gallery blocks.
- Preserve the original artwork’s colour and image framing.

## Don't

- Do not turn illustration colours into persistent interface accents.
- Do not add gradients, ornamental backgrounds, or decorative shadows.
- Do not make every gallery tile the same aspect ratio.
- Do not center the introductory copy or project headings.
- Do not use oversized navigation or heavy typographic decoration.
- Do not place artwork inside rounded, floating cards.

## Agent prompt

Build a new artist portfolio page with the restrained editorial shell of Marylou Faure’s site. Use Gallery White (#ffffff) as the continuous canvas and Portfolio Ink (#000000) for navigation, headings, links, and thin separators. Use Helvetica Now, or Inter as a free substitute, with regular weights and compact tracked utility text. Keep the header small; pair a broad left-aligned introduction with a few image previews, then place client marks in a quiet horizontal strip. Organize projects under left-aligned headings in flexible two-, three-, or four-column image grids with narrow white gutters. Preserve artwork colours as image content: Artwork Red (#ff0000), Vivid Green (#04cd62), and the other vivid tones belong to campaign assets, not repeated UI decoration. Favor flat images, crisp rules, and generous white breathing room over cards, shadows, or effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column introduction with copy and contact at left, preview images at right; client logos span below. | contact links, social link, client credibility | white canvas, compact text, monochrome logo row, thin side rules |
| 2 | product-showcase | Left-aligned project heading above a two-column lead image pair. | campaign case study, visual-first browsing | large project title, paired image tiles, white gutter |
| 3 | gallery | Three-column row of campaign images. | browse related work | three-column gallery, consistent narrow gutters |
| 4 | product-showcase | Left-aligned heading above a two-column image and video layout. | campaign case study, video media | two-column split, large image panels |
| 5 | gallery | Three-column grid of product and campaign artwork. | browse campaign variations | three-column image grid, bright artwork |
| 6 | gallery | Four-column row of small illustrated tiles. | scan illustrations | four-column grid, compact tile spacing |
| 7 | gallery | Two-column block of larger campaign images. | continue case study | two-column imagery, photographic packaging |
| 8 | product-showcase | Left-aligned heading above two lead campaign images. | campaign case study, visual-first browsing | paired image tiles, bold artwork colours |
| 9 | gallery | Full-bleed two-column media-led gallery. | view campaign in context | full-bleed media, large outdoor photography |
| 10 | gallery | Three-column row of colourful illustrations. | browse related illustrations | three-column grid, colourful flat artwork |
| 11 | video | Full-bleed two-column media block. | watch campaign media | large video panels, dark media frames |
| 12 | gallery | Full-bleed paired campaign display. | view final campaign artwork | full-bleed media, paired image composition |
| 13 | product-showcase | Left-aligned heading above a two-column image layout. | partnership case study, browse campaign assets | paired large images, project title |
| 14 | gallery | Three-column gallery of campaign details and photography. | browse project details | three-column grid, mixed photography and artwork |
| 15 | product-showcase | Left-aligned heading above a two-column image and video composition. | brand case study, watch campaign video | two-column panels, large media |
| 16 | video | Single-column video section. | watch video | wide video media |
| 17 | video | Single-column video section. | watch video | wide video media |
| 18 | gallery | Short single-column closing media block. | browse closing visuals | sparse closing composition, illustration-led |

## Source CSS custom properties (selected)

```css
--font-body-family: "Helvetica Now", "Helvetica Neue", Helvetica, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-heading-family: "Helvetica Now", "Helvetica Neue", Helvetica, sans-serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--color-black: 0, 0, 0;
--color-white: 255, 255, 255;
--color-grey: 243, 245, 248;
--color-foreground: 0, 0, 0;
--color-background: 255, 255, 255;
--color-link: 0, 0, 0;
--color-button: 0, 0, 0;
--color-button-text: 255, 255, 255;
--alpha-button-background: 1;
--alpha-button-border: 1;
--color-badge-background: 0, 0, 0;
--color-badge-border: 0, 0, 0;
--alpha-badge-border: .1;
--color-card-hover: 0, 0, 0;
--duration-short: .1s;
--duration-default: .2s;
--duration-long: .5s;
```

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