An artist's portfolio showcasing bold, modern textile creations
02
Color
#F15A24Accent
#333333Ink soft
#FFED8CBG
#F4A398BG soft
#FFFFFFBG quiet
#797791Muted
rgba(241,90,36,1)Line
Warm, saturated primary background with vibrant orange accents
03
Typography
humanist-sans · geometric-sans · monospace
display68px · 700
display36px · 400
body23px · 400
mono14px · 400
Text transform is uppercase for headlines · Letter spacing is increased for display and secondary text · Weight contrasts between bold headlines and regular body text
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous vertical rhythm with large section padding (96px top, 192px bottom)
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
4px solid rgb(241, 90, 36)
rgba(0, 0, 0, 0.1) 1px 0px 10px 6px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Split-screen hero with text left, image right
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Smooth color transitions on interactive elements · Scale transforms on hover states
Color change on borders and text · Transform scale (0.98) on buttons
08
Components
buttonPill-shaped with dashed border and solid text
cardImage-heavy with minimal border radius
chipNot visible in screenshot
inputNot visible in screenshot
heroSplit screen with large typography on the left and a featured image on the right
09
Voice & Don'ts
ToneProfessional, artistic, and informative
HeadlinesBold, uppercase, high-contrast
CTAsFriendly and inviting with a casual dashed border
Don't use thin or delicate typography — screenshot shows bold, heavy weights for headlines
Don't use a dark or cool-toned primary background — screenshot shows a warm, bright yellow
Don't use rigid, sharp corners for primary buttons — screenshot shows pill-shaped, dashed outlines
Don't use a minimalist, monochromatic palette — screenshot shows a vibrant, multi-colored geometric scheme
Don't hide the main navigation behind complex interactions — screenshot shows a simple hamburger icon
Don't use small, cramped spacing — screenshot shows generous padding and wide gutters
Captured from the live site · real computed styles
11
System prompt
A vibrant, art-focused portfolio for modern textile design, showcasing bold geometric quilts and apparel. The design DNA centers on a warm, high-chroma palette with #FFED8C as the primary background and #F15A24 as the dominant accent color. Typography utilizes a humanist-sans for display headlines and a geometric-sans for body text, emphasizing bold weights and generous letter spacing. Key critical donts: don't use a cold or dark primary background, don't use thin or delicate type weights, and don't use rigid, sharp corners for primary interactive elements. The layout features generous vertical rhythm and a split-screen approach that balances large typography with impactful imagery.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
