High-contrast base with bold, saturated accents and generous white space.
03
Typography
humanist-sans · system-sans
display80px · 500
headline30px · 400
body16px · 400
caption14px · 400
Use Geometric/Humanist sans for display headlines. · Use system fonts for UI elements. · Ensure tight letter-spacing for large display text.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
4px base grid with tight, intentional spacing for compact UI elements.
05
Surfaces
sm · 4px
md · 10px
lg · 20px
pill · 999px
1px solid rgba(40,40,40,0.24)
0 2px 8px rgba(0,0,0,0.05)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Standard 12-column grid with flexible gutters and high-density gallery layouts.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
Smooth opacity transitions for UI state changes. · Subtle transform animations for interactive elements. · Fade-in/out for modal and overlay appearances.
Subtle brightness or opacity change on interactive elements. · Immediate visual feedback with slight transform or color shift.
08
Components
buttonPill-shaped with bold orange background and white text, or outlined with dark borders.
cardImage-heavy with tight borders and minimal padding, focusing on visual content.
chipNot prominently featured, used for tags or small status labels.
inputClean text inputs with bottom borders or subtle backgrounds.
heroLarge expressive typography paired with a high-density image gallery or bold color blocks.
09
Voice & Don'ts
ToneConfident, direct, and creatively focused.
HeadlinesBold, minimalist, and often experimental or oversized.
CTAsDirect and action-oriented, often using bold primary colors.
Don't use decorative or script fonts — screenshot shows clean, functional sans-serif typography.
Don't use low-contrast colors for text — screenshot shows high-contrast black and white with bold accents.
Captured from the live site · real computed styles
11
System prompt
This is a premium design tool platform for creating expressive, gallery-like websites. The primary background is white (#FFFFFF) with dark ink (#282828) for text, accented by a bold orange (#FF5000) for CTAs and purple (#8800FF) for highlights. Typography uses a humanist-sans display font and system sans-serif for body text. Critical donts: don't use decorative fonts, don't use low-contrast text, and don't use cluttered layouts. The layout is grid-based with high-density visual galleries and generous white space, focusing on showcasing design work.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.