---
name: Guillaumetomasi
description: "This site is a strong example of experimental web design that treats the browser as a canvas for artistic expression rather than a standard UI."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 66px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: grotesque-sans
    fontSize: 23px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"
  meta:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "normal"

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

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

---

## Overview

An artistic photography portfolio featuring experimental layouts with distorted image elements and bold typography.

*A digital art gallery or photographer's portfolio that uses digital distortion and collage.*

## Colors

Strictly monochromatic with photography providing all color variation.

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

## Typography

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

- All text is strictly uppercase.

## Layout

Freeform collage. Images and text overlap intentionally.

*Rhythm:* Asymmetric with floating, collage-like positioning.

## Elevation & Depth

- Borders: None. Elements rely on composition and spacing.

## Shapes

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

## Components

- **button:** None visible.
- **card:** None visible.
- **chip:** None visible.
- **input:** None visible.
- **hero:** Large typography overlapping floating images with digital distortion.

## Do's and Don'ts

**Don't:**
- Don't use grid-based alignment — screenshot shows a freeform collage layout.
- Don't use drop shadows on elements — screenshot shows flat compositions.
- Don't use mixed font weights — screenshot shows uniform weight (400).
- Don't use lowercase text — screenshot shows exclusively uppercase text.
- Don't use border-radius — screenshot shows strictly rectangular elements.
- Don't use highly saturated background colors — screenshot shows a stark white background.

---

## System Prompt (paste into AI agent)

```
Position this as an experimental photography portfolio or artistic studio site. Key colors are stark white (#FFFFFF) and deep black (#000000), with all color coming from the photography itself. The typography uses a geometric, uppercase grotesque sans-serif font. Critical design donts include: avoid using drop shadows, avoid rounded corners, and avoid lowercase text. The layout is a freeform, overlapping collage rather than a rigid grid. Transitions are smooth and slow.
```