A high-end design studio meets cutting-edge AI research lab
02
Color
#D2FC31Accent
#FFFFFFInk
#000000BG
#707070Muted
rgba(0,0,0,0.15)Line
High-contrast dark mode with vibrant accent for primary CTAs
03
Typography
condensed-sans · humanist-sans · monospace
display72px · 900
heading24px · 600
body16px · 400
caption12px · 400
Display text uses extremely heavy weight (900) with negative letter-spacing · Body text maintains comfortable 1.4 line-height for readability · All-caps treatment for secondary labels and navigation
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base unit with generous whitespace in hero sections
05
Surfaces
sm · 5px
md · 15px
lg · 30px
pill · 50px
1px solid rgba(0,0,0,0.15)
rgba(0,0,0,0.3) 0px 11px 40px 0px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width hero with overlaid text, centered content blocks
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth carousel transitions between hero images · Subtle hover effects on interactive elements
Color shifts and subtle scale on interactive elements · Immediate visual feedback with state changes
08
Components
buttonRounded rectangles with 5px radius, high contrast fill for primary actions
cardFull-bleed image cards with minimal chrome
chipSmall rounded badges for navigation labels
inputClean text fields with subtle borders
heroDramatic full-viewport image with overlaid typography and CTAs
09
Voice & Don'ts
ToneConfident and sophisticated, emphasizing craftsmanship
HeadlinesBold, condensed, all-caps statements with technical precision
CTAsDirect action-oriented verbs like 'Start creating' and 'Get API'
Don't use serif fonts — screenshot shows consistent sans-serif typography throughout
Don't use muted pastel colors — screenshot shows high-contrast black background with vibrant accent
Don't use thin font weights — screenshot shows extremely heavy 900-weight display text
Don't use sharp corners — screenshot shows consistent 5-15px border-radius on all components
Don't use dense layouts — screenshot shows generous whitespace and breathing room
Don't use multiple accent colors — screenshot shows single dominant chartreuse green for CTAs
Captured from the live site · real computed styles
11
System prompt
Recraft.ai is a premium AI image generation platform targeting professional designers and creative teams. The design DNA features a dark, high-contrast aesthetic with a dominant black background (#000000) and vibrant chartreuse accent (#D2FC31) for primary calls-to-action. Typography utilizes condensed sans-serif faces at extreme weights (900) for display text, creating dramatic impact. Key constraints: Never use serif typefaces, avoid muted color palettes, always maintain generous whitespace in layouts, use heavy font weights for headlines, keep corner radii between 5-15px, and ensure all CTAs use the signature green accent color.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
