---
name: Charlielemaignan
description: "This site is worth including as a prime example of an expressive, typography-driven portfolio that pushes creative boundaries while maintaining a clean, functional structure."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#838383"
  neutral: "#838383"
  line: "rgba(255,255,255,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 360px
    lineHeight: 0.7
    fontWeight: 700
    letterSpacing: "-18px"
  heading:
    fontFamily: neue-haas-grotesk
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: neue-haas-grotesk
    fontSize: 20px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

An experimental graphic design portfolio defined by massive, expressive typography and a stark high-contrast color palette.

*A graphic designer's personal portfolio showcasing bold, experimental typography and vibrant, high-contrast visuals.*

## Colors

High-contrast monochrome base with vibrant, project-specific colors introduced through portfolio imagery.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#838383`)** — uses `ink-soft` token
- **Muted (`#838383`)** — uses `muted` token
- **Borders (`rgba(255,255,255,1.0)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** neue-haas-grotesk

## Layout

Full-width, vertically stacked sections with centered content, dominated by a large hero logo.

*Rhythm:* Loose, centered layout with generous whitespace to emphasize large typographic elements.

## Elevation & Depth

- Borders: 2px solid #FFFFFF for pill buttons, otherwise no borders.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with transparent backgrounds, white borders, and white text.
- **card:** Project cards presented as large, full-bleed images or videos within a grid.
- **hero:** A massive, custom typographic logotype 'Charlie' that serves as the primary visual hook.

## Do's and Don'ts

**Don't:**
- Don't use subtle colors — screenshot shows high-contrast black and white as the primary palette.
- Don't use standard web fonts — screenshot shows highly customized, expressive display type.
- Don't use sharp corners for buttons — screenshot shows consistent pill-shaped (border-radius: 999px) navigation elements.
- Don't clutter the layout with many elements — screenshot shows a sparse, centered layout focused on a single large visual.
- Don't use traditional grid layouts — screenshot shows a full-bleed, vertically stacked presentation of work.
- Don't use small, safe typography — screenshot shows massive, tightly tracked type that dominates the viewport.

---

## System Prompt (paste into AI agent)

```
This is an experimental graphic design portfolio characterized by a stark, high-contrast monochrome base and massive, expressive typography. The design uses a black background (#000000) and white text (#FFFFFF) to create a bold visual impact. The primary font categories are geometric-sans for display elements and grotesque-sans for body text. Key interactive elements are pill-shaped buttons with white borders. The layout is sparse and vertically centered, focusing attention on large, custom-designed typographic logos. Critical donts: avoid using subtle or muted colors, avoid standard or generic typography, avoid sharp corners on buttons, avoid cluttered or complex layouts, avoid traditional grid structures, and avoid small, safe font sizes.
```