A digital portfolio of a seasoned design professional
02
Color
#ffffffInk
#575757Ink soft
#000000BG
#1c1c1cBG soft
#454545Muted
rgba(87, 87, 87, 0.3)Line
High-contrast monochrome with bold typographic impact
03
Typography
geometric-sans · humanist-sans
display64px · 1000
h232px · 400
body14px · 400
Headings use very heavy weight (1000) and tight tracking · Body text uses standard weight (400) with slight negative tracking · Navigation links are uppercase and small
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
Consistent spacing based on a 4px grid
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Thin subtle lines for separation
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width sections with generous padding
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Subtle hover transitions on interactive elements
Visual feedback through opacity or color changes · Immediate response with cursor changes
08
Components
buttonPill-shaped buttons with arrow icons
heroFull-width hero with large 3D rendered cursor assets
09
Voice & Don'ts
ToneProfessional, confident, and craft-focused
HeadlinesBold and direct statements
CTAsClear and action-oriented with arrows
Don't use light backgrounds — the site is predominantly black (#000000)
Don't use thin/light font weights for headings — the design uses very heavy weights (1000)
Don't add excessive shadows or 3D effects to UI elements — the 3D is reserved for imagery
Don't use wide letter-spacing for body text — the site uses tight tracking (-0.28px)
Don't introduce bright accent colors — the palette is strictly monochrome with imagery providing color
Don't use decorative fonts — the typography is clean, geometric sans-serif
Avoid: Jargon-heavy language
Avoid: Overly casual tone
Avoid: Excessive exclamation marks
11
System prompt
This is a personal portfolio website for designer and educator Claudio Guglieri. The design is premium and refined with a focus on bold typography and high contrast. The color palette is dominated by black (#000000) and white (#ffffff) with muted grays (#575757) for secondary text. Typography uses geometric and humanist sans-serif categories with very heavy font weights (1000) for display text and tight letter spacing. The layout is generous with space and focuses on visual impact. Critical donts: never use light backgrounds, avoid thin font weights for headings, and don't add unnecessary decorative elements that detract from the bold, clean aesthetic. The site showcases work through high-quality 3D imagery against the dark background.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
