CURATED · OPEN · FREE

Guillaumetomasi

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

StudioGalleryPhotographicCleanExperimental

↓ Download design system (4 MB)Open in OpenDesign

Visit: https://www.guillaumetomasi.com

📦 Browse pack contents →

Identity DNA

experimentalartisticeditorialphotographydistorted

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

Color

#000000Ink

#FFFFFFBG

rgba(0,0,0,1.0)Line

Strictly monochromatic with photography providing all color variation.

Typography

grotesque-sans

display66px · 400
body23px · 400
meta20px · 400

All text is strictly uppercase.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Asymmetric with floating, collage-like positioning.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 0px

None. Elements rely on composition and spacing.

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

Freeform collage. Images and text overlap intentionally.

Motion & Interaction

220msmicro

400mssmall

1000msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

Long, smooth transitions for reveals.

Pointer cursor. · Pointer cursor.

Components

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

Voice & Don'ts

Tone Artistic, abstract, minimal.
Headlines Bold, uppercase, fragmented or poetic.
CTAs Uppercase, monospaced, understated.

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.
Avoid: Literal descriptions.
Avoid: Bright, unnatural colors.
Avoid: Rigid alignment.

Inside the pack — real screenshots

Guillaumetomasi — 桌面首屏（hero） — 桌面首屏（hero）

Guillaumetomasi — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko