ChatPRD

Overview

ChatPRD embodies a "Gradient-Forward Minimalism" aesthetic—a design philosophy that pairs a serene, light-mode canvas (pure white #ffffff backgrounds, soft grays at #f5f5f5 and #f1f1f1) with vibrant, multi-color gradient accents that command attention and energy. The brand serves product managers and teams who need clarity without clutter; the UI transforms complex product workflows into intuitive, joyful interactions. The emotional response is one of confidence and momentum: users feel empowered to ship better products faster.

The voice is direct, encouraging, and human-centered—never corporate, never breathless. ChatPRD speaks in active verbs and concrete outcomes. Example sentence: "Turn ideas into clear requirements in minutes, then coach your team to ship." The vocabulary favors simplicity ("docs," "coaching," "integrate") over jargon, and the tone celebrates progress without overselling.

Colors

The color system is anchored by a vibrant gradient primary (#b480ff to #f96b2f to #fc85ae), deployed on all primary CTAs, hero accents, and brand moments. This gradient is not merely decorative—it signals energy, progress, and the AI-powered transformation at ChatPRD's core. Secondary colors are coral (#f96b2f) and pink (#fc85ae), used independently for supporting actions, highlights, and status indicators. The surface stack is deliberately minimal: pure white (#ffffff) for the base, with subtle grays (#f9fafb, #f5f5f5, #f1f1f1, #ededed) for container hierarchy. On-surface text is near-black (#0a0a0a), ensuring 16:1 contrast for accessibility. Outline borders use #cccccc at 80% opacity (rgba(204, 204, 204, 0.5)) to create soft visual separation without harshness. The inverse-primary (#f96b

Typography

The type system pairs two distinct families: seasonMix (a custom serif display face) for headlines and hero copy, and Inter (a humanist sans-serif) for body, labels, and UI text. This pairing creates visual hierarchy through contrast—the serif headlines feel premium and intentional, while Inter body text remains approachable and scannable. Display (76.8px, 400 weight, -0.04em letter-spacing, 0.95 line-height) is reserved for hero H1s and major section breaks; it should always be set in black (#0a0a0a) or the gradient brand. Headline-lg (48px, 400 weight) and headline-md (32px, 400 weight) are used for section titles and card headers. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) form the core reading experience. Label-md (14px, 600 weight, 0.

Layout

The layout follows a 12-column grid with a max-width of 1400px, centered on the viewport. Horizontal padding is 24px on mobile (sm), 32px on tablet (md), and 48px on desktop (lg), creating a responsive gutter that scales with screen size. The spacing scale is semantic: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. White-space is generous—sections breathe with lg spacing (40px) between major blocks, and cards use md padding (24px) internally. The container-max-width of 1400px ensures content remains readable on ultra-wide displays without becoming overwhelming. Hero sections use full-width backgrounds with centered content, while feature sections empl

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through dark overlays or heavy contrast. The elevation system uses three levels: sm (0 1px 6px 0 rgba(0, 0, 0, 0.06)) for standard cards and inputs, md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards and modals, and lg (0 2px 32px 0 rgba(0, 0, 0, 0.16)) for floating elements and dropdowns. Primary CTAs receive a custom glow: box-shadow: 0 8px 30px -6px rgba(180, 128, 255, 0.3), which reinforces the gradient brand and draws the eye. On hover, buttons lift with transform: translateY(-2px) and a stronger shadow (0 12px 40px -8px rgba(1

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners are used consistently to soften the interface without sacrificing clarity or hierarchy. Buttons and primary CTAs use full border-radius (9999px), creating pill-shaped affordances that feel modern and friendly. Cards and containers use xl radius (24px), balancing softness with definition. Inputs and secondary UI elements use DEFAULT radius (6px), a subtle rounding that maintains visual distinction from buttons. The rationale: full-radius buttons are unmistakable CTAs, while moderate radii on containers prevent the interface from

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use the gradient brand background (linear-gradient(135deg, #F96B2F 0%, #FC85AE 50%, #B480FF 100%)) with white text, full radius (9999px), 16px horizontal padding, and 48px height. On hover, apply opacity: 0.9, transform: translateY(-2px), and enhance the shadow to 0 12px 40px -8px rgba(180, 128, 255, 0.4) over 300ms. Secondary buttons use a transparent background with a 1px outline border (#cccccc) and on-surface text; on hover, fill the background with surface-container-high (#ededed). Ghost buttons (for tertiary actions) have no border or background, only text; on hover, add a subtle background (surface-container-low, #f5f5f5). All button transitions should use cubic-bezier(0.22, 1, 0.36, 1) for a snappy, co

Do's and Don'ts

**Do**

• Do use the gradient brand on primary CTAs and hero accents—it is the signature of ChatPRD's energy and forward momentum.
• Do maintain generous white-space (lg spacing, 40px) between major sections to create a calm, confident reading experience.
• Do apply the gradient brand text effect (background-clip: text, -webkit-text-fill-color: transparent) sparingly—only on hero headlines and key brand moments, never on body text.
• Do use the full-radius pill shape (9999px) exclusively for primary buttons to make CTAs unmistakable.
• Do transition all interactive states (hover, focus, active) over 200–300ms using cubic-bezier(0.22, 1, 0.36, 1) for a snappy, confident feel.

**Don't**

• Don't use the gradient brand on secondary or tertiary UI elements—reserve it for primary CTAs and hero moments to maintain visual hierarchy.
• Don't apply sharp corners (0px radius) to buttons or cards; the soft-technical aesthetic requires consistent, moderate rounding.
• Don't use dark overlays or heavy shadows to create depth; ChatPRD's light-mode canvas relies on subtle elevation (sm/md/lg shadows) and soft borders.
• Don't mix serif (seasonMix) and sans-serif (Inter) within a single line of text; use serif for headlines and sans-serif for body to maintain clarity.
• Don't reduce padding or spacing below the semantic scale (xs: 4px minimum); the generous rhythm is core to the brand's calm, confident voice.