Centered content hero with maximum width constraints, stacking elements vertically on mobile.
07
Motion & Interaction
150msmicro
200mssmall
500msmedium
cubic-bezier(0, 0, 0.2, 1)easing
Smooth hover transitions on interactive elements · Subtle fade-in and slide-up animations for scroll-triggered content
Subtle background color shifts or opacity changes on buttons and links. · Slight scale-down or opacity reduction for immediate feedback.
08
Components
buttonPill-shaped primary buttons with solid white fill and black text; secondary buttons with translucent dark fill, white text, and a subtle white border.
cardDark surfaces with slightly lighter backgrounds, subtle inset borders, and soft corner radius.
chipSmall pill-shaped tags for categorization.
inputDark background fields with subtle borders and white placeholder text.
heroLarge, bold display typography centered above a prominent application screenshot.
09
Voice & Don'ts
ToneConfident, direct, and empowering.
HeadlinesBold, declarative statements emphasizing power and capability.
CTAsAction-oriented and inviting, frequently offering free entry points.
Don't use bright, saturated neon accents — the screenshot shows a strictly monochromatic dark palette with pure white text.
Don't use square corners on buttons — the screenshot shows fully rounded, pill-shaped buttons.
Don't use a serif display font — the screenshot shows a clean, modern humanist sans-serif for all headings.
Don't use light backgrounds — the screenshot shows a dominant pure black background with dark gray cards.
Don't use cluttered navigation — the screenshot shows a clean, centered horizontal menu with minimal links.
Don't use sharp drop shadows — the screenshot shows very subtle, soft shadows that blend into the dark background.
Captured from the live site · real computed styles
11
System prompt
This system generates designs for a dark-themed, premium AI creative suite. The aesthetic is modern, clean, and highly professional, relying on a strict monochromatic palette of pure black (#000000), dark grays (#111111, #171717, #404040), and crisp white (#FFFFFF). The typography utilizes a clean, humanist sans-serif with tight letter-spacing for headlines. Key interactions should feature smooth transitions and pill-shaped UI components. Critical constraints: avoid bright saturated accent colors, avoid square corners on primary buttons, avoid serif fonts, avoid light or cluttered layouts, avoid harsh shadows, and avoid passive or uncertain copy.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
