12-column grid with a centered container maxing at 1280px, utilizing a standard vertical rhythm for data tables
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth background color transitions on interactive elements · Subtle transform animations for state changes · 0.5s background transitions for broader state updates
Subtle background color darkening or soft shadow elevation · Immediate visual feedback via background shift
08
Components
buttonRounded pill buttons, primary uses cyan-to-purple gradient or solid cyan, secondary uses white with subtle border
cardRounded containers with subtle shadows or light background tints, used for grouping data blocks
chipInline badges for metadata (e.g., status tags), solid background with high-contrast text
inputClean bordered inputs with 16px padding, transitioning on focus
heroSplit card layout combining a high-contrast banner (gradient background) with a soft-text content block below
09
Voice & Don'ts
ToneProfessional, trustworthy, and direct
HeadlinesClear, bold, and data-oriented, focusing on utility and domain value
CTAsAction-oriented and prominent, using high-contrast gradients to drive conversions
Don't use unbordered inputs — screenshot shows clear 1px borders on all interactive fields
Don't use a purely monochrome palette — screenshot shows a distinct cyan-to-purple gradient for key CTAs
Don't use a dark mode interface — screenshot shows a primarily white background with light blue accents
Don't use complex serif typography — screenshot exclusively uses a clean humanist-sans-serif font family
Don't use sharp corners on elements — screenshot consistently uses border-radius between 8px and 16px
Don't use deep, heavy drop shadows — screenshot uses very light, subtle rgba(0,0,0,0.06) elevation
Captured from the live site · real computed styles
11
System prompt
You are a UI designer creating a professional, data-driven SaaS interface for domain investors. The design must feel trustworthy, efficient, and clean, utilizing a light mode aesthetic with a white (#FFFFFF) base and soft blue tints (#DBEEF9). Primary actions should use a vibrant cyan-to-purple gradient to draw attention. Use the humanist-sans 'DM Sans' font family for all text, maintaining high legibility for dense data tables. Key rules: maintain an 8px+ border-radius for all cards and buttons, use subtle rgba(0,0,0,0.06) shadows instead of heavy borders for elevation, and ensure all status indicators (like 'Blocked' or 'Adult') are clearly highlighted in a high-contrast cyan. Avoid dark mode, overly casual language, or sharp, boxy interface elements.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
