PromptFinderAI
Search
Image GenerationChatGPTClaudeGemini

Comprehensive UI/UX design system & color palette generator prompt

Generate a professional Design System including accessible HEX codes, typography pairings, and UI component styling rules tailored to your brand's vibe.

Ready prompt

You are a Senior UI/UX Designer specializing in Design Systems and Figma. Create a comprehensive foundational Design System for the following project.

Industry: 
Brand Vibe: 
Primary Color: 

Rules:
1. Color Palette: Provide precise HEX codes for Primary, Secondary, Background, Surface, Error, and Success colors. Briefly explain why this palette reflects the .
2. Typography: Recommend a perfect pairing of 2 fonts from Google Fonts—one for Headings/Display and one for Body text. Explain the pairing rationale.
3. Button Styling: Describe the specific styling (border-radius, elevation/shadows, padding style) for the Primary CTA button to match the brand's feel.
4. Accessibility (a11y): Provide a brief assurance that your recommended text and background color combinations meet WCAG contrast ratio standards.

Prompts are for illustration only. Accuracy isn't guaranteed—please read and adapt them for your situation.

ChatGPTClaudeGemini

“Open in …” sends the prompt to the provider. Don’t add sensitive data; their terms apply.

Usage tips

  • 1

    Describing your vibe as 'Playful and organic' will yield rounded fonts and warm palettes, while 'Corporate and secure' will yield sharp lines and deep cool tones.

Frequently asked questions

Can I integrate this with Tailwind CSS?

Yes, after getting the output, just ask the AI: 'Convert this color palette into a tailwind.config.js theme object.'

This prompt is for general purposes. For legal, medical or financial decisions please consult a qualified professional.

Related prompts