---
name: Maryloufaure
description: "An excellent example of restraint in portfolio design, where the UI intentionally steps back to let the creative work speak for itself."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#868785"
  line: "rgba(0,0,0,0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.5px"
  label:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.5px"

rounded:
  sm: 0px
  md: 8px
  lg: 0px
  pill: 50px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A minimalist portfolio site that serves as a clean canvas for Marylou Faure's vibrant and playful illustrations.

*A bold, playful art gallery showcasing vibrant character-driven illustrations.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#868785`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.2)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Consistent padding of 15px creates a uniform margin for content blocks and navigation elements.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 0px
- `md`: 8px
- `lg`: 0px
- `pill`: 50px

## Components

- **button:** Text-only navigation links with no background or border styling.
- **card:** Full-width image blocks that alternate between single large images and split grids, separated by thin lines.
- **chip:** A simple horizontal list of black-and-white monochrome client logos.
- **input:** Text links for contact information, styled with underline on hover.
- **hero:** A split section featuring a block of descriptive text on the left and a grid of two thumbnail images on the right.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```