---
name: Aristide Benoist
description: "Worth including for its extreme typographic scale, sophisticated dark aesthetic, and motion-focused interaction patterns."
version: alpha

colors:
  background: "#1e1e1e"
  primary: "#bacbc2"
  secondary: "#bacbc2"
  neutral: "#cc9933"
  bg-soft: "#1a1a1a"
  bg-quiet: "#000000"
  line: "rgba(186, 196, 184, 0.2)"

typography:
  display:
    fontFamily: slab-serif
    fontSize: 337.5px
    lineHeight: 0.75
    fontWeight: 400
    letterSpacing: "-8px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 257.5px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 10px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.2px"

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

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 30px

---

## Overview

A dark, motion-focused developer portfolio with extreme typographic scale and photographic grids.

*A cinematic film reel in a dark gallery, showcasing visual craftsmanship.*

## Colors

Deep monochromatic dark mode with a primary light sage ink and occasional golden accents.

- **Background (`#1e1e1e`)** — uses `bg` token
- **Primary text (`#bacbc2`)** — uses `ink` token
- **Secondary text (`#bacbc2`)** — uses `ink-soft` token
- **Muted (`#cc9933`)** — uses `muted` token
- **Borders (`rgba(186, 196, 184, 0.2)`)** — uses `line` token

## Typography

- **Display:** slab-serif
- **Body:** grotesque-sans
- **Mono:** monospaced

## Layout

Full-screen dark canvas with a centered horizontal carousel of vertical images and pinned navigation elements.

*Rhythm:* A clear rhythm of 4px increments, with generous padding in navigation and contact areas.

## Elevation & Depth

- Borders: Hard-edge borders and sharp corners are used throughout, with a prominent 1px bottom border on the 'ABOUT' link.

## Shapes

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

## Components

- **button:** Text-based links with sharp, uppercase styling and optional arrow indicators.
- **card:** Vertical photographic cards arranged in a horizontal scrolling container.
- **hero:** An immersive full-screen dark area featuring a horizontal scrolling grid of black-and-white photographs.

## Do's and Don'ts

**Don't:**
- Don't use soft drop shadows — screenshot shows completely flat, hard-edged design.
- Don't use rounded corners — screenshot shows sharp 0px radius on all elements.
- Don't use a wide variety of colors — screenshot shows a restricted palette of dark background and sage ink.
- Don't use small, timid display text — screenshot shows massive typography dominating the viewport.
- Don't use busy background patterns — screenshot shows solid dark fills and photographic content.
- Don't use overly complex navigation — screenshot shows a minimal 'ABOUT' link with a simple underline.

---

## System Prompt (paste into AI agent)

```
This is a dark, motion-focused developer portfolio for Aristide Benoist. The design DNA is built on a deep monochromatic dark background (#1e1e1e) with light sage ink (#bacbc2) and occasional golden accents (#cc9933). It features extreme typographic scale using a slab-serif for display and a grotesque-sans for body text, with tight negative tracking on massive headlines. The layout is minimalist and cinematic, often centering a horizontal carousel of vertical black-and-white photographs. Critical design constraints: avoid any use of rounded corners, do not add decorative drop shadows or complex patterns, and never use more than two primary ink colors. Transitions should be smooth, using a 0.5s cubic-bezier timing function.
```