# Guillaumetomasi · Design system migration spec

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

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

## 1. Identity DNA

The site operates as a digital gallery where the browser itself becomes the canvas for a curated collage. Like a physical exhibition, it uses a stark white void to frame photographic works, allowing digital distortion and typographic placement to dictate the viewer's path through the space.

**One-liner:** An artistic photography portfolio featuring experimental layouts with distorted image elements and bold typography.
**Keywords:** experimental · artistic · editorial · photography · distorted
**Analogy:** A digital art gallery or photographer's portfolio that uses digital distortion and collage.

## 2. Color

The color system is deliberately reductive, using a strict monochrome pair to establish the gallery's spatial architecture. Photography provides the sole chromatic content, preventing the interface from competing with the art it presents.

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

**Color principle:** Strictly monochromatic with photography providing all color variation.

The principle is one of absolute restraint: the design system's role is to provide a neutral, silent frame.

## 3. Typography

Typography is treated as a graphic form rather than a reading instrument. A single geometric grotesque is used at a uniform weight, with all text rendered in uppercase to function as bold, fragmented shapes within the collage.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 66px | 1.1 | 400 | -1px | Main headline / Title |
| body | 23px | 1.6 | 400 | normal | Navigation and standard text |
| meta | 20px | 1.3 | 400 | normal | Pagination and small UI text |

**Type rules:**
- All text is strictly uppercase.

## 4. Spacing

Spacing follows the logic of a collage, not a grid, employing asymmetric placement to create visual tension and guide the eye across overlapping planes.

- **Base unit:** 8px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric with floating, collage-like positioning.

## 5. Surfaces

Surfaces are defined entirely by composition and proximity. The system eliminates all decorative depth cues—shadows, borders, and rounding—to maintain a flat, graphic quality where elements exist as pure form on the stark white field.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None. Elements rely on composition and spacing.

## 6. Layout

The layout skeleton is a freeform collage where images and text blocks intentionally overlap, rejecting rigid alignment. This creates a sense of discovered arrangement, as if each element has been carefully placed within a physical space.

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

**Skeleton:** Freeform collage. Images and text overlap intentionally.

## 7. Motion & Interaction

Motion is architectural, used to reveal content rather than decorate it. Transitions are long and smooth, employing custom easing to give movement a considered, physical weight as elements emerge or reconfigure.

- **Durations:** micro 220ms · small 400ms · medium 1000ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Long, smooth transitions for reveals.

- **Hover:** Pointer cursor.
- **Click:** Pointer cursor.
- **Transition:** Smooth transitions on scroll/navigate.
- **Keyboard:** Standard browser defaults.

## 8. Voice & Don'ts

The editorial voice is artistic and abstract, using minimal, poetic headlines to complement the visual work. It avoids literal description, favoring fragmented language that mirrors the distorted, collage-like composition.

- **Tone:** Artistic, abstract, minimal.
- **Headline style:** Bold, uppercase, fragmented or poetic.
- **CTA style:** Uppercase, monospaced, understated.
- **Avoid:** Literal descriptions. / Bright, unnatural colors. / Rigid alignment.

### Don'ts
- ❌ 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.

The system deliberately forgoes conventional UI components, rejecting buttons, cards, and grids in favor of a pure, compositional approach.

## System Prompt (paste into AI tool)

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