Style Guide: ImpactPulse Design System

Overview

ImpactPulse needs a consistent design system generated via styleguide.ideaplaces.com. The generated style guide will be exported as a Tailwind config and integrated into the frontend.

Product Description (Use This as the Styleguide Prompt)

Copy this into the styleguide generator chat to generate the palette:

ImpactPulse is a survey and impact measurement platform built for nonprofit
organizations, community programs, and social impact teams. It helps organizations
measure and track the real-world impact of their programs on the people they serve.

The core feature is the Maslow Needs Assessment, a 20-question survey based on
Maslow's hierarchy of needs (Physiological, Safety, Love/Belonging, Esteem,
Self-Actualization). Organizations assign this assessment to their beneficiaries
and track progress over time with before/after comparisons, scoring deltas, and
trend analysis. The platform visualizes results as an interactive pyramid where
each level is color-coded by strength.

Beyond Maslow, organizations create custom surveys with multiple question types
(rating scales, yes/no, multiple choice, free text) to measure program-specific
outcomes. Every response is scored, and the platform calculates impact by comparing
baseline assessments to follow-ups.

The typical users are:
- Nonprofit program directors who need to demonstrate impact to funders and boards
- Community health workers tracking beneficiary well-being over months or years
- Social workers running youth mentorship, food security, or housing programs
- Organizational leaders measuring team wellness and employee satisfaction

The platform serves a dual purpose: it gives individuals a private space to track
their personal growth (unlimited attempts, progress comparison, auto-saved sessions),
and it gives organizations aggregate analytics to prove their programs work.

Key user journeys include:
- A program director creates an organization, invites team members, creates a
  pre-program survey, assigns it to 50 beneficiaries, then runs a post-program
  survey 6 months later to measure impact delta
- An individual takes the Maslow assessment quarterly, sees their pyramid evolve,
  identifies areas of growth and areas needing attention
- A funder reviews an organization's impact dashboard showing response rates,
  average scores, and before/after comparisons across all programs

The emotional context matters: the people taking these surveys are often in
vulnerable situations (recovering from crisis, in transitional housing, in
mentorship programs). The interface must feel safe, calm, and encouraging. It
should never feel clinical, bureaucratic, or intimidating.

Design direction:
- Warm and human, not cold and corporate
- Professional enough for board presentations and funder reports
- Accessible and simple for people who may not be tech-savvy
- Hopeful and growth-oriented (measuring progress, not judging)
- Clean data visualization that tells a story
- Works on both desktop (admin) and mobile (survey takers)

The brand sits at the intersection of "data-driven rigor" and "human warmth."
Think of it as: if a compassionate social worker and a data analyst designed
an app together.

Competitive references (for positioning, not copying):
- SurveyMonkey: too generic and corporate
- Typeform: beautiful but too playful for serious impact measurement
- Google Forms: functional but soulless
- Impact measurement tools (Sopact, Social Suite): too enterprise and complex

ImpactPulse should feel more approachable than enterprise tools, more serious
than consumer survey tools, and more beautiful than government/NGO tools.

Color considerations:
- Primary color should evoke trust, growth, and positive impact
- Avoid pure blue (too corporate/tech), pure red (too aggressive), pure yellow
  (too playful)
- Greens, teals, warm blues, or deep oranges work well for the "growth + warmth"
  intersection
- The Maslow pyramid visualization needs 5 distinct but harmonious colors for
  each level
- Status badges need clear semantic colors (published/active, draft/pending,
  error/closed)
- Data visualizations need a palette that works for charts and score displays
- Background should be warm (not pure white or cold gray)

Typography should be:
- Highly readable at small sizes (survey questions on mobile)
- Professional for reports and dashboards
- Warm and friendly for onboarding and empty states

Current State

No custom design system. The frontend uses default Tailwind colors inconsistently:

• Orange (orange-500/600): Auth buttons (sign in, sign up)
• Indigo (indigo-500/600/700): Survey actions (create, share, preview)
• Purple (purple-100/800): Organization cards, owner badges
• Blue (blue-600): Member management buttons
• Green (green-100/500): Success states, published badges
• Yellow (yellow-100/800): Draft badges, preview banner
• Red (red-600): Error states, delete buttons

This creates a disjointed visual identity. Every page looks slightly different.

Goal

Generate a unified color palette and design tokens for ImpactPulse using the styleguide generator, then apply them across all pages for a consistent look.

Color Intent

• Primary: Main actions, navigation, brand identity (buttons, links, active states)
• Secondary: Supporting actions, cards, hover states
• Accent: Calls to action, highlights, attention grabbers
• Success: Published surveys, completed actions, positive scores
• Warning: Draft states, pending invitations, caution
• Error: Validation errors, destructive actions, failed states
• Neutral: Text, backgrounds, borders, cards
• Maslow levels: 5 distinct colors for pyramid visualization (Physiological, Safety, Love/Belonging, Esteem, Self-Actualization)

Implementation Steps

Step 1: Generate Style Guide

1. Go to styleguide.ideaplaces.com
2. Create project "ImpactPulse"
3. Paste the product description prompt above into the chat
4. Iterate until the palette feels right for a nonprofit impact platform
5. Export as Tailwind config format

Step 2: Integrate into Frontend

1. Copy the generated tailwind.config.js colors into the project
2. Update frontend/tailwind.config.js with the custom palette
3. Create a color reference: frontend/src/styles/colors.ts (optional)

Step 3: Apply Across Pages

Replace all hardcoded Tailwind color classes with the design system colors:

Step 4: Typography

• Define heading sizes (h1 through h4)
• Body text size and line height
• Small text / captions
• Font weight scale (regular, medium, semibold, bold)

Step 5: Component Patterns

Document the standard patterns:

• Buttons: Primary, Secondary, Danger, Ghost
• Cards: White with shadow, border radius
• Badges: Status colors (Published, Draft, Pending, Closed)
• Forms: Input borders, focus rings, error states
• Navigation: Top bar style, active states
• Maslow Pyramid: 5 levels with distinct colors, strength indicators

Files to Modify

• frontend/tailwind.config.js (add custom color palette)
• frontend/src/pages/*.tsx (all pages, replace color classes)
• frontend/src/components/**/*.tsx (all components)

Acceptance Criteria

• Style guide generated in styleguide.ideaplaces.com
• Tailwind config exported and integrated
• All pages use consistent colors from the design system
• No more raw Tailwind color names (orange, indigo, purple) for semantic usage
• Visual consistency across dashboard, surveys, organizations, auth pages
• Maslow pyramid has 5 harmonious but distinct level colors
• Data visualization palette defined for charts and score displays