Don't add heavy drop shadows — screenshot shows subtle, soft box-shadows.
Don't use bright, unvalidated accent colors — screenshot shows functional reds and oranges for data.
Don't use complex gradients — screenshot shows flat colors and simple linear scales.
Don't overcrowd the UI — screenshot shows generous white space and a focused layout.
Don't use rounded corners excessively — screenshot shows mostly sharp or slightly rounded edges.
Avoid: Emotional language
Avoid: Marketing hype
Avoid: Complex jargon
11
System prompt
VouchAtlas is a crowdsourced travel safety and infrastructure visualization tool. Its design relies on a clean, neutral palette of white (#FFFFFF) and light grays (#F4F4F5, #E4E4E7) with dark text (#18181B). Data is communicated through functional colors like red (#DC2626) and orange (#EA580C), rather than decorative accents. The typography is a clean humanist-sans-serif, optimized for legibility across different data densities. The layout is dominated by an interactive map, with a supporting sidebar for detailed data. Critical constraints include avoiding decorative elements, maintaining high data-to-ink ratio, and ensuring clear color contrast for data visualization. Do not use rounded corners excessively, do not add heavy shadows, and do not use complex gradients.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
