Design Prompts Enterprise

Overview

Design Prompts Enterprise is a modern SaaS platform design system built on the principle of 'Gradient-Driven Minimalism'—a visual language that combines vibrant, purposeful color gradients (indigo-to-violet primary accent) with clean, light surfaces to convey trust, clarity, and forward momentum. The brand serves product teams and designers seeking AI-ready design inspiration, transforming complex data into intuitive, accessible interfaces. The emotional response is one of confidence and capability: users feel empowered to explore, create, and iterate without friction.

The voice is professional yet approachable, precise without being cold. Vocabulary emphasizes action and outcome: 'Transform,' 'streamline,' 'drive results.' Tone avoids hype; instead, it speaks in concrete benefits. Example sentence in brand voice: 'Acme Platform brings your team together with powerful tools designed to streamline workflows, boost productivity, and drive results.'

Colors

The color system is anchored by a vibrant primary gradient from indigo (#4F46E5) to violet (#7C3AED), applied to all primary CTAs, focus states, and brand-defining interactive elements. This gradient conveys innovation and trust simultaneously—indigo suggests stability and intelligence, while violet adds energy and forward-thinking vision. Secondary colors include cyan (#06B6D4) for status and tertiary accents, and a warm error red (#DC2626) for critical feedback. The surface stack uses a light, airy palette: #F8FAFC (surface) as the primary background, with progressively darker containers (#E2E8F0, #CBD5E1) for layering and depth. Text on light surfaces uses slate-900 (#0F172A) for maximum contrast and readability (WCAG AAA). All interactive elements use the primary gradient as their base

Typography

The type system uses Plus Jakarta Sans across all scales, a modern geometric sans-serif that balances approachability with technical credibility. Display (60px, 800 weight, -0.04em tracking) anchors hero sections and major announcements, commanding attention without aggression. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) structure content hierarchy, with tighter line-height (1.2x) to reinforce visual weight. Body text (16–18px, 400 weight, 1.5x line-height) prioritizes legibility on screens; the generous line-height (24–28px) reduces cognitive load and improves scannability. Labels (12–14px, 500–600 weight) use increased letter-spacing (0.01–0.05em) to add visual distinction in UI controls and badges. On small labels over busy backgrounds or gradient overlays, apply t

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered with 24px gutters on desktop and 16px on mobile. The spacing scale is semantic: 'xs' (4px) for micro-interactions and icon spacing, 'sm' (12px) for compact component padding, 'md' (24px) for standard section separation and card padding, 'lg' (40px) for major section breaks, and 'xl' (64px) for hero-to-content transitions. White-space is generous—sections are separated by lg spacing (40px) minimum, creating visual breathing room and reducing cognitive overload. Container max-width of 1280px ensures content remains scannable on ultra-wide displays. Hero sections use full-width backgrounds with gradient overlays, while content sections constrain to the container for readability. Responsive breakpoints follow Tailwind conven

Elevation & Depth

Depth is achieved through a three-tier shadow system combined with subtle background color shifts. Level 1 (Base): flat surfaces with no shadow, relying on color contrast (surface vs. surface-container). Level 2 (Standard Cards & Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background: {colors.surface-bright}, creating a gentle lift. Level 3 (Elevated Modals & Popovers): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), background: {colors.surface-bright}, with a 1px border at rgba(0, 0, 0, 0.05) to define edges. Interactive hover states elevate cards from Level 2 to Level 3 with a 200ms ea

Shapes

The shape philosophy is 'Soft-Technical Precision'—rounded corners are used strategically to soften the corporate aesthetic while maintaining clarity and hierarchy. Buttons use full rounding (border-radius: 9999px) to create pill-shaped CTAs that feel approachable and modern, contrasting with the structured grid. Cards and containers use lg rounding (1rem / 16px) for a balanced, professional appearance. Input fields and smaller UI elements use DEFAULT rounding (0.5rem / 8px) for subtle definition without visual noise. Badges and status indicators use full rounding (9999px) to emphasize their c

Components

Action Elements Primary buttons use a gradient background (linear-gradient(135deg, #4F46E5, #7C3AED)) with white text, 48px height, 12px vertical / 32px horizontal padding, and full rounding. On hover, the gradient darkens to #4338CA with an elevated shadow (0 6px 20px rgba(79, 70, 229, 0.23)) and a -2px upward transform over 200ms (cubic-bezier(0.4, 0, 0.2, 1)). Focus state adds a 3px ring at rgba(79, 70, 229, 0.5) with 2px offset. Secondary buttons use a transparent background with a 1px border at rgba(255, 255, 255, 0.2), white text, 40px height, and lg rounding; on hover, background becomes rgba(255, 255, 255, 0.15). Ghost buttons have no background or border, text color matches on-surface, and hover state applies surface-container-high background. All buttons use label-md typograp

Do's and Don'ts

**Do**

• Do use the primary gradient (indigo-to-violet) exclusively for CTAs, focus states, and brand-defining moments—never on neutral UI elements.
• Do maintain at least 24px (md spacing) between major sections to create visual breathing room and reduce cognitive load.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels over gradient overlays to ensure WCAG AAA contrast.
• Do use Plus Jakarta Sans at 400, 500, 600, 700, or 800 weight only—no intermediate weights—to maintain visual clarity.
• Do elevate cards on hover with a shadow transition (200ms ease-out) and a subtle -2px upward transform to signal interactivity.

**Don't**

• Don't use the primary gradient on non-interactive elements (backgrounds, borders, decorative shapes)—reserve it for actions and focus states.
• Don't apply shadows deeper than lg (0 16px 40px rgba(0, 0, 0, 0.12)) except in rare modal/popover cases; excessive depth flattens the modern aesthetic.
• Don't mix rounded and sharp corners within a single component—choose a consistent radius (full for buttons, lg for cards, DEFAULT for inputs).
• Don't use system fonts or fallback sans-serif; always load Plus Jakarta Sans from Google Fonts to maintain brand consistency.
• Don't reduce spacing below md (24px) for section separation; tight spacing creates visual clutter and reduces scannability.