# Maryloufaure · Design system migration spec

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

> An excellent example of restraint in portfolio design, where the UI intentionally steps back to let the creative work speak for itself.

## 1. Identity DNA

The Marylou Faure portfolio operates on a principle of curatorial restraint. It is a bold, playful art gallery where the architecture—clean, neutral, and linear—exists solely to showcase vibrant character-driven illustrations.

**One-liner:** A minimalist portfolio site that serves as a clean canvas for Marylou Faure's vibrant and playful illustrations.
**Keywords:** Artist · Illustration · Playful · Bold · Joyful
**Analogy:** A bold, playful art gallery showcasing vibrant character-driven illustrations.

## 2. Color

A strictly neutral, high-contrast black and white interface is the foundational principle. The system uses a simple #000000 ink on #FFFFFF background, with #868785 reserved for muted labels, ensuring the artwork's vibrant palette always dominates the visual hierarchy.

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

**Color principle:** The UI is strictly neutral (black and white) so the artwork's bold colors can dominate the visual hierarchy.

The system is a study in intention, where the absence of UI color becomes the strongest design choice.

## 3. Typography

Typography employs a standard grotesque sans-serif (Helvetica/Arial) at a consistent 400 weight to maintain a minimalist backdrop. Its voice is expressed through spatial tension: tight letter-spacing for large display titles creates impact, while generous tracking for navigation and captions ensures clarity.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.0 | 400 | -0.5px | Project titles |
| body | 16px | 1.5 | 400 | 0.5px | Descriptive text |
| label | 12px | 1.5 | 400 | 0.5px | Navigation and captions |

**Type rules:**
- Use clean sans-serif typography to maintain a minimalist backdrop for the illustrations.
- Apply tight letter-spacing (-0.5px) for large display titles.
- Apply generous letter-spacing (0.5px) for small navigation and caption labels.

## 4. Spacing

A consistent padding of 15px establishes a uniform, predictable rhythm across all content blocks and navigation elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent padding of 15px creates a uniform margin for content blocks and navigation elements.

## 5. Surfaces

Surfaces are defined by subtle, layered shadows and thin structural lines. Shadows are soft and diffused (rgba(0, 0, 0, 0.09) to 0.21), providing depth without competing, while 1px solid rgba(0,0,0,0.2) borders create clean horizontal separators.

- **Radius:** sm 0px · md 8px · lg 0px · pill 50px
- **Shadows:**
  - 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
- **Borders:** 1px solid rgba(0,0,0,0.2) used for horizontal separators and thin structural lines.

## 6. Layout

The skeleton is a full-width, single-column layout that alternates between wide descriptive text blocks and full-bleed, edge-to-edge image grids. This linear flow prioritizes content clarity and creates a direct, unmediated viewing path.

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

**Skeleton:** A full-width, single-column layout that alternates between wide descriptive text blocks and full-bleed, edge-to-edge image grids.

## 7. Motion & Interaction

Motion philosophy is rooted in subtlety and utility, employing opacity fades (0.4s to 0.5s) for smooth state transitions. Interactions are functionally transparent, using transform and opacity shifts for element reveals without decorative flourish.

- **Durations:** micro 100ms · small 200ms · medium 500ms
- **Easing:** `ease-out`
- **Patterns:**
  - Opacity fades (0.4s to 0.5s) for smooth transitions between states.
  - Text-decoration toggles for link hover interactions.
  - Transform and opacity shifts for hidden element reveals.

- **Hover:** Text-decoration underline appears on links.
- **Click:** Standard pointer cursor on all clickable elements.
- **Transition:** A mix of transition: all for general elements and specific opacity/transform transitions for reveals.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and subtly playful, conveyed through large, clean, direct headlines and subtle text-only calls to action. The system deliberately avoids decoration to prevent any UI element from competing with the artwork.

- **Tone:** Confident, professional, and subtly playful.
- **Headline style:** Large, clean, and direct titles (e.g., 'Coca-Cola').
- **CTA style:** Subtle text-only links for navigation and contact.
- **Avoid:** Avoid decorative fonts or complex typography treatments. / Avoid busy UI elements that compete with the artwork. / Avoid using color in the UI elements; keep them strictly black and white.

### Don'ts
- ❌ Don't use decorative fonts — the screenshot shows a clean, standard grotesque sans-serif (Helvetica/Arial).
- ❌ Don't add shadows or rounded corners to content cards — the screenshot shows flat, edge-to-edge images.
- ❌ Don't use a single dominant accent color for UI — the screenshot shows a strictly black-and-white interface.
- ❌ Don't use solid background colors for buttons — the screenshot shows text-only navigation links.
- ❌ Don't use complex, cluttered layouts — the screenshot shows a simple, linear, single-column flow.
- ❌ Don't use heavy typography weights — the screenshot shows a standard 400 weight throughout.

This design systematically refuses to use decorative fonts, UI accent colors, or complex visual treatments, making the artist's work the sole carrier of expression.

## System Prompt (paste into AI tool)

```
This is a minimalist artist portfolio site that acts as a clean, neutral canvas for vibrant, playful illustrations. The UI relies on a strict black-and-white color scheme (#000000 ink on #FFFFFF background) with #868785 for muted labels. Typography uses a standard grotesque sans-serif (Helvetica/Arial) at a consistent 400 weight, with tight tracking for large titles (-0.5px) and wide tracking for small labels (0.5px). Critical don'ts include: never use decorative fonts, never add UI shadows or rounded corners to content cards, and never introduce a dominant UI accent color. The layout is a simple, linear, single-column flow with full-bleed images separated by thin 1px lines.
```