A digital canvas showcasing bold, playful, and illustrative creative work.
02
Color
#000000Ink
#1E1E1EInk soft
#FFFFFFBG
#FAFAFABG soft
#6B7280Muted
rgba(0,0,0,1.0)Line
High-contrast black and white with a functional palette of distinct colors for interactive elements.
03
Typography
geometric-sans
display32px · 400
body16px · 400
All text is uppercase for navigation and labels. · Geometric sans-serif font family used consistently throughout. · Light font weight (400) is standard for most text elements.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Standard 4px grid with generous 64px padding for section containers.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Solid 2px black borders define all major containers and sections.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Boxy, grid-based layout with prominent 2px black borders separating sections.
07
Motion & Interaction
150msmicro
200mssmall
300msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
Smooth transitions for hover states and interactive elements.
Pointer cursor changes on interactive elements. · Visual feedback via cursor change (zoom-in on images).
08
Components
buttonCircular outline button for primary actions (CONNECT).
cardGrid-based display of artwork images without borders.
chipColor swatches in a horizontal row for selection.
heroLarge, interactive line-art illustration with color selection tools.
09
Voice & Don'ts
ToneDirect, professional, and creative.
HeadlinesClear, descriptive sentences in title case.
CTAsAction-oriented and uppercase (e.g., CONNECT, STORE).
don't use drop shadows — screenshot shows flat, border-defined surfaces instead
don't use rounded corners on containers — screenshot shows sharp, 0px radius boxes
don't use gradient backgrounds — screenshot shows solid white or light gray
don't use a third font for accents — screenshot shows consistent use of a single geometric sans
don't use subtle 1px borders — screenshot shows prominent 2px black borders
don't use multi-column text blocks in the hero — screenshot shows single, large headline
Captured from the live site · real computed styles
11
System prompt
A portfolio website for a graphic design and illustration studio, utilizing a stark, high-contrast black-and-white aesthetic with a clean geometric sans-serif typeface. The design is anchored by solid 2px black borders that define sections and containers, creating a structured, grid-like layout. Key colors are #FFFFFF for the background, #000000 for ink and borders, and #1E1E1E for secondary text, with a small functional palette of bright swatches for interactive color selection. Critical don'ts: avoid using drop shadows, rounded corners on containers, or gradient backgrounds, as the design strictly uses flat surfaces and sharp edges. The tone is professional yet playful, relying on bold line-art illustrations and curated gallery displays.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
