A refined personal portfolio for a Brand Designer and Creative Director, featuring a bilingual layout with bold typography and a restrained color palette.
A calm, typographic gallery for a creative director
02
Color
#FFFFFFInk
#000000BG
rgba(0,0,0,1)Line
High-contrast monochrome with stark white text on a solid black background, occasionally featuring subtle accents like the pale yellow logo.
03
Typography
transitional-serif · grotesque-sans
display36px · 700
Headlines use a classic serif font (Times New Roman fallback) for elegance and authority. · Body text uses a clean sans-serif (Roboto) for maximum readability against the dark background. · Typography is left-aligned with generous line heights to maintain a clean, breathable layout.
04
Spacing
4px
8px
16px
20px
24px
32px
40px
60px
Vertical rhythm is established through generous top/bottom padding on main sections and consistent margins between text blocks.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
No visible borders are used; depth is created entirely through typography and color contrast.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width black canvas with a centered, left-aligned content block that avoids edge-to-edge text.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
All elements have a transition property applied, suggesting smooth state changes on hover or interaction.
Subtle cursor interactions are implied by the global transition property. · Standard link behavior for professional affiliations (R/GA, Stink Studios).
08
Components
buttonNo traditional buttons visible; navigation is handled via text links and a minimal toggle icon.
cardThe 'ST·S·2·OS' element acts as a graphic card with a subtle background color shift and large custom typography.
heroA minimalist text-based hero section featuring a large serif headline and a concise professional summary.
09
Voice & Don'ts
ToneProfessional, concise, and confident
HeadlinesDirect and personal, using a classic serif font to establish authority.
CTAsImplicit; professional affiliations are presented as underlined text links.
Don't use a light or colorful background — screenshot shows a stark black (#000000) canvas instead.
Don't use sans-serif fonts for headlines — screenshot shows a transitional serif (Times New Roman) instead.
Don't use drop shadows or complex borders — screenshot shows a flat, borderless design instead.
Don't use a prominent, high-chroma accent color — screenshot shows a neutral monochrome palette instead.
Don't use small, dense text — screenshot shows generous line-heights and large font sizes for readability.
Don't center-align all text — screenshot shows left-aligned paragraphs and headlines instead.
Avoid: Avoid overly casual language
Avoid: Avoid complex navigation menus
Avoid: Avoid cluttered layouts
Avoid: Avoid using multiple competing accent colors
Captured from the live site · real computed styles
11
System prompt
This is a refined personal portfolio for a Brand Designer and Creative Director. It uses a high-contrast, monochrome palette with a solid black background (#000000) and crisp white text (#FFFFFF). The typography mixes a transitional serif for headlines with a grotesque sans-serif for body copy, creating a balance of elegance and modern readability. The layout is spacious and strictly left-aligned, avoiding clutter. Critical design rules: never use a light background, always use a serif font for main headlines, and maintain generous vertical spacing between content blocks to preserve the minimalist aesthetic.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
