[PULSE-43] Design system standardization and branding alignment #11

2026-02-05T17:14:05Z

uz1mani commented

2026-02-05 17:14:05 +00:00

(Migrated from github.com)

Work Item

[PULSE-43]

Summary

Standardized button styling, border radius, and card components across entire Pulse frontend for visual consistency
Enhanced footer with comprehensive layout for unauthenticated users while maintaining simple footer for dashboard
Improved empty states with icons and helpful messaging; added entrance animations to marketing pages
Fixed PWA service worker bug, improved loading states, and ensured all UI elements match Ciphera branding guidelines

Changes

Phase 1: Button Standardization & Core Utilities (11 files)

Button Components: Removed all btn-primary/btn-secondary className usage; replaced with proper variant="primary"|"secondary" on Button components across homepage, pricing, dashboard, funnels, settings, 404, and public share pages
Pricing Page: Standardized button hierarchy - Team plan uses primary variant (orange), Solo/Business use secondary variant (neutral)
CSS Cleanup: Added TODO comment in styles/globals.css for future consolidation to @ciphera-net/ui
PWA Fix: Deleted malformed icon files (Icon Padding left & right 192x192.png, Icon Padding left & right 512x512.png) causing service worker precaching errors

Files: styles/globals.css, components/PricingSection.tsx, app/page.tsx, components/sites/SiteList.tsx, app/share/[id]/page.tsx, app/faq/page.tsx, app/not-found.tsx, app/sites/[id]/funnels/[funnelId]/page.tsx, app/sites/[id]/funnels/new/page.tsx, app/sites/[id]/funnels/page.tsx, app/sites/[id]/page.tsx

Phase 2: Footer Enhancement (2 files)

Footer Component: Complete rewrite with conditional rendering based on authentication state
Unauthenticated Footer: Comprehensive 5-column layout (Brand with Pulse logo/tagline, Products, Company, Resources with Installation/Integrations/Status/Docs/GitHub, Legal) plus Swiss flag indicator, social icons, and "Where Privacy Still Exists" tagline
Authenticated Footer: Simple footer with copyright + Why Pulse/Pricing/FAQ links; added gradient background effect for consistency
Layout Integration: Updated layout-content.tsx to import local Footer component and pass isAuthenticated prop

Files: components/Footer.tsx, app/layout-content.tsx

Phase 3: Border Radius & Card Standardization (26 files)

Cards: Standardized 30+ card containers from rounded-xl (12px) to rounded-2xl (16px) across all dashboard components, funnels, settings, and site management pages
Dashboard Components: Updated Chart, ContentStats, TopReferrers, Locations, TechSpecs, Campaigns, GoalStats, PerformanceStats, RealtimeVisitors, TopPages, Countries components
Tab Buttons: Changed 4 tab button groups from rounded-md (6px) to rounded-lg (8px) for better visual consistency
Input Fields: Standardized 15+ input/select fields from rounded-xl to rounded-lg including PasswordInput component, site settings inputs, funnel selectors
Info/Warning Cards: Updated 12+ info boxes and danger zone cards to rounded-2xl in settings pages

Files: All dashboard components (11 files), components/sites/SiteList.tsx, components/settings/OrganizationSettings.tsx, app/page.tsx, app/sites/[id]/funnels/*.tsx (3 files), app/sites/[id]/realtime/page.tsx, app/sites/new/page.tsx, app/share/[id]/page.tsx, components/PricingSection.tsx, components/WorkspaceSwitcher.tsx, components/PasswordInput.tsx, components/tools/UtmBuilder.tsx, app/sites/[id]/settings/page.tsx

Phase 4: Badge & Empty State Improvements (8 files)

Badge Consolidation: Updated pricing "Most Popular" badge to use .badge-primary class for consistency with FAQ and homepage badges
Empty States Enhanced: Added icons, helpful titles, and explanatory text to TopReferrers (GlobeIcon), TechSpecs (GridIcon), Locations (GlobeIcon), Countries (GlobeIcon for both countries/cities), TopPages (LayoutDashboardIcon), ContentStats (LayoutDashboardIcon), and Realtime (UserIcon)
UX Improvements: Made realtime visitor counter clickable (navigates to /sites/[id]/realtime); fixed realtime page width from max-w-7xl to max-w-6xl to match dashboard

Files: components/PricingSection.tsx, components/dashboard/TopReferrers.tsx, components/dashboard/TechSpecs.tsx, components/dashboard/Locations.tsx, components/dashboard/Countries.tsx, components/dashboard/TopPages.tsx, components/dashboard/ContentStats.tsx, app/sites/[id]/realtime/page.tsx, app/sites/[id]/page.tsx

Phase 5: Animations & Final Polish (11 files)

Homepage Animations: Added framer-motion entrance animations with staggered timing - badge (0s) → headline (0.1s) → subtitle (0.2s) → CTAs (0.3s); feature cards stagger (0.1s each) when scrolled into view
About Page: Added fade-in animations to hero section, intro paragraph, and "What about Plausible?" callout box
Integrations Page: Added hero fade-in and integration card stagger animations (0.1s delay per card)
Pricing Page: Added fade-in animations to header section and pricing container
Dashboard Subtle Animation: Added ultra-fast 0.2s opacity-only fade-in to prevent harsh pop-in without delaying data access
Realtime Live Animations: Implemented entrance/exit animations for visitor list items using AnimatePresence for smooth real-time updates
Loading State Polish: Enhanced 6 modal/component loading states with brand-orange spinning indicators instead of plain "Loading..." text

Files: app/page.tsx, app/about/page.tsx, app/integrations/page.tsx, components/PricingSection.tsx, app/sites/[id]/page.tsx, app/sites/[id]/realtime/page.tsx, components/dashboard/ContentStats.tsx, components/dashboard/TopReferrers.tsx, components/dashboard/TechSpecs.tsx, components/dashboard/Locations.tsx, components/dashboard/Campaigns.tsx

Test Plan

Phase 1: Button Standardization

[ ] Verify all primary CTAs use brand orange color (#FD5E0F)
[ ] Verify Team plan button is orange, Solo/Business are neutral on pricing page
[ ] Verify no PWA service worker errors in console
[ ] Test all button hover states in both light and dark modes

Phase 2: Footer

[ ] Logged-out footer shows 5 columns with all sections (Brand, Products, Company, Resources, Legal)
[ ] Swiss flag icon and social media icons render correctly
[ ] Logged-in footer shows simple version (copyright + 3 links)
[ ] All footer links navigate correctly; external links open in new tabs
[ ] Footer responsive on mobile (columns stack properly)
[ ] Pulse logo not stretched in footer

Phase 3: Border Radius

[ ] All dashboard cards have rounded-2xl (16px) corners
[ ] All input fields have rounded-lg (8px) corners
[ ] All tab buttons have rounded-lg corners
[ ] Visual consistency across all pages in both light and dark modes

Phase 4: Empty States & Badges

[ ] All empty states show icons, helpful titles, and descriptions
[ ] "Most Popular" badge matches FAQ and homepage badge styling
[ ] Realtime visitor counter is clickable and navigates to realtime page
[ ] Realtime page width matches dashboard width

Phase 5: Animations

[ ] Homepage: Badge → headline → subtitle → CTAs animate in sequence (0-0.3s)
[ ] Homepage: Feature cards stagger in when scrolled into view
[ ] About, Integrations, Pricing pages have smooth entrance animations
[ ] Dashboard fades in very quickly (barely noticeable, 0.2s)
[ ] Realtime: New visitors slide in from left smoothly
[ ] Modal loading states show spinners with brand orange accent
[ ] All animations run at 60fps without jank
[ ] Animations don't block user interaction

Cross-cutting

[ ] No linter errors introduced
[ ] Dark mode works correctly for all changes
[ ] Mobile responsive at all breakpoints
[ ] No layout shifts during animations
[ ] All existing functionality preserved

## Work Item [PULSE-43] ## Summary - Standardized button styling, border radius, and card components across entire Pulse frontend for visual consistency - Enhanced footer with comprehensive layout for unauthenticated users while maintaining simple footer for dashboard - Improved empty states with icons and helpful messaging; added entrance animations to marketing pages - Fixed PWA service worker bug, improved loading states, and ensured all UI elements match Ciphera branding guidelines ## Changes ### Phase 1: Button Standardization & Core Utilities (11 files) - **Button Components**: Removed all `btn-primary`/`btn-secondary` className usage; replaced with proper `variant="primary"|"secondary"` on Button components across homepage, pricing, dashboard, funnels, settings, 404, and public share pages - **Pricing Page**: Standardized button hierarchy - Team plan uses primary variant (orange), Solo/Business use secondary variant (neutral) - **CSS Cleanup**: Added TODO comment in `styles/globals.css` for future consolidation to @ciphera-net/ui - **PWA Fix**: Deleted malformed icon files (`Icon Padding left & right 192x192.png`, `Icon Padding left & right 512x512.png`) causing service worker precaching errors Files: `styles/globals.css`, `components/PricingSection.tsx`, `app/page.tsx`, `components/sites/SiteList.tsx`, `app/share/[id]/page.tsx`, `app/faq/page.tsx`, `app/not-found.tsx`, `app/sites/[id]/funnels/[funnelId]/page.tsx`, `app/sites/[id]/funnels/new/page.tsx`, `app/sites/[id]/funnels/page.tsx`, `app/sites/[id]/page.tsx` ### Phase 2: Footer Enhancement (2 files) - **Footer Component**: Complete rewrite with conditional rendering based on authentication state - **Unauthenticated Footer**: Comprehensive 5-column layout (Brand with Pulse logo/tagline, Products, Company, Resources with Installation/Integrations/Status/Docs/GitHub, Legal) plus Swiss flag indicator, social icons, and "Where Privacy Still Exists" tagline - **Authenticated Footer**: Simple footer with copyright + Why Pulse/Pricing/FAQ links; added gradient background effect for consistency - **Layout Integration**: Updated `layout-content.tsx` to import local Footer component and pass `isAuthenticated` prop Files: `components/Footer.tsx`, `app/layout-content.tsx` ### Phase 3: Border Radius & Card Standardization (26 files) - **Cards**: Standardized 30+ card containers from `rounded-xl` (12px) to `rounded-2xl` (16px) across all dashboard components, funnels, settings, and site management pages - **Dashboard Components**: Updated Chart, ContentStats, TopReferrers, Locations, TechSpecs, Campaigns, GoalStats, PerformanceStats, RealtimeVisitors, TopPages, Countries components - **Tab Buttons**: Changed 4 tab button groups from `rounded-md` (6px) to `rounded-lg` (8px) for better visual consistency - **Input Fields**: Standardized 15+ input/select fields from `rounded-xl` to `rounded-lg` including PasswordInput component, site settings inputs, funnel selectors - **Info/Warning Cards**: Updated 12+ info boxes and danger zone cards to `rounded-2xl` in settings pages Files: All dashboard components (11 files), `components/sites/SiteList.tsx`, `components/settings/OrganizationSettings.tsx`, `app/page.tsx`, `app/sites/[id]/funnels/*.tsx` (3 files), `app/sites/[id]/realtime/page.tsx`, `app/sites/new/page.tsx`, `app/share/[id]/page.tsx`, `components/PricingSection.tsx`, `components/WorkspaceSwitcher.tsx`, `components/PasswordInput.tsx`, `components/tools/UtmBuilder.tsx`, `app/sites/[id]/settings/page.tsx` ### Phase 4: Badge & Empty State Improvements (8 files) - **Badge Consolidation**: Updated pricing "Most Popular" badge to use `.badge-primary` class for consistency with FAQ and homepage badges - **Empty States Enhanced**: Added icons, helpful titles, and explanatory text to TopReferrers (GlobeIcon), TechSpecs (GridIcon), Locations (GlobeIcon), Countries (GlobeIcon for both countries/cities), TopPages (LayoutDashboardIcon), ContentStats (LayoutDashboardIcon), and Realtime (UserIcon) - **UX Improvements**: Made realtime visitor counter clickable (navigates to /sites/[id]/realtime); fixed realtime page width from max-w-7xl to max-w-6xl to match dashboard Files: `components/PricingSection.tsx`, `components/dashboard/TopReferrers.tsx`, `components/dashboard/TechSpecs.tsx`, `components/dashboard/Locations.tsx`, `components/dashboard/Countries.tsx`, `components/dashboard/TopPages.tsx`, `components/dashboard/ContentStats.tsx`, `app/sites/[id]/realtime/page.tsx`, `app/sites/[id]/page.tsx` ### Phase 5: Animations & Final Polish (11 files) - **Homepage Animations**: Added framer-motion entrance animations with staggered timing - badge (0s) → headline (0.1s) → subtitle (0.2s) → CTAs (0.3s); feature cards stagger (0.1s each) when scrolled into view - **About Page**: Added fade-in animations to hero section, intro paragraph, and "What about Plausible?" callout box - **Integrations Page**: Added hero fade-in and integration card stagger animations (0.1s delay per card) - **Pricing Page**: Added fade-in animations to header section and pricing container - **Dashboard Subtle Animation**: Added ultra-fast 0.2s opacity-only fade-in to prevent harsh pop-in without delaying data access - **Realtime Live Animations**: Implemented entrance/exit animations for visitor list items using AnimatePresence for smooth real-time updates - **Loading State Polish**: Enhanced 6 modal/component loading states with brand-orange spinning indicators instead of plain "Loading..." text Files: `app/page.tsx`, `app/about/page.tsx`, `app/integrations/page.tsx`, `components/PricingSection.tsx`, `app/sites/[id]/page.tsx`, `app/sites/[id]/realtime/page.tsx`, `components/dashboard/ContentStats.tsx`, `components/dashboard/TopReferrers.tsx`, `components/dashboard/TechSpecs.tsx`, `components/dashboard/Locations.tsx`, `components/dashboard/Campaigns.tsx` ## Test Plan ### Phase 1: Button Standardization [ ] Verify all primary CTAs use brand orange color (#FD5E0F) [ ] Verify Team plan button is orange, Solo/Business are neutral on pricing page [ ] Verify no PWA service worker errors in console [ ] Test all button hover states in both light and dark modes ### Phase 2: Footer [ ] Logged-out footer shows 5 columns with all sections (Brand, Products, Company, Resources, Legal) [ ] Swiss flag icon and social media icons render correctly [ ] Logged-in footer shows simple version (copyright + 3 links) [ ] All footer links navigate correctly; external links open in new tabs [ ] Footer responsive on mobile (columns stack properly) [ ] Pulse logo not stretched in footer ### Phase 3: Border Radius [ ] All dashboard cards have rounded-2xl (16px) corners [ ] All input fields have rounded-lg (8px) corners [ ] All tab buttons have rounded-lg corners [ ] Visual consistency across all pages in both light and dark modes ### Phase 4: Empty States & Badges [ ] All empty states show icons, helpful titles, and descriptions [ ] "Most Popular" badge matches FAQ and homepage badge styling [ ] Realtime visitor counter is clickable and navigates to realtime page [ ] Realtime page width matches dashboard width ### Phase 5: Animations [ ] Homepage: Badge → headline → subtitle → CTAs animate in sequence (0-0.3s) [ ] Homepage: Feature cards stagger in when scrolled into view [ ] About, Integrations, Pricing pages have smooth entrance animations [ ] Dashboard fades in very quickly (barely noticeable, 0.2s) [ ] Realtime: New visitors slide in from left smoothly [ ] Modal loading states show spinners with brand orange accent [ ] All animations run at 60fps without jank [ ] Animations don't block user interaction ### Cross-cutting [ ] No linter errors introduced [ ] Dark mode works correctly for all changes [ ] Mobile responsive at all breakpoints [ ] No layout shifts during animations [ ] All existing functionality preserved

👍 1

greptile-apps[bot] commented

2026-02-05 17:16:38 +00:00

(Migrated from github.com)

Greptile Overview

Greptile Summary

This PR successfully standardizes the design system across the Pulse frontend, bringing visual consistency and improved UX throughout the application. The changes are well-organized into 5 phases covering button styling, footer enhancement, border radius standardization, empty states, and animations.

Key improvements:

Replaced inconsistent className="btn-primary/secondary" with proper variant props on Button components
Implemented conditional footer rendering with comprehensive layout for unauthenticated users and simplified version for authenticated users
Standardized all cards to rounded-2xl (16px), inputs to rounded-lg (8px), and tabs to rounded-lg (8px) for consistent visual hierarchy
Enhanced empty states with icons and helpful messaging across all dashboard components
Added subtle entrance animations to marketing pages and realtime visitor tracking using framer-motion
Fixed PWA service worker bug by removing malformed icon files
Made realtime visitor counter clickable for better navigation

Code quality:

Clean implementation with no security issues
Proper use of framer-motion for animations with appropriate durations
Good accessibility practices maintained (aria-labels, semantic HTML)
Consistent dark mode support across all changes

The changes align well with Ciphera branding guidelines and maintain the privacy-first focus of the application.

Confidence Score: 5/5

This PR is safe to merge with no blocking issues
All changes are cosmetic and UI-focused with no logic changes that could introduce bugs. The code is well-structured, maintains existing functionality, and follows React best practices. No security vulnerabilities introduced.
No files require special attention

Important Files Changed

Filename	Overview
components/Footer.tsx	Enhanced footer with conditional rendering based on authentication; comprehensive unauthenticated layout with 5 columns
components/PricingSection.tsx	Standardized button variants and added entrance animations to pricing page
app/page.tsx	Added staggered entrance animations to homepage hero section and feature cards; standardized button usage
app/sites/[id]/page.tsx	Added subtle fade-in animation and made realtime visitor counter clickable to navigate to realtime page
app/sites/[id]/realtime/page.tsx	Added entrance/exit animations for visitor list items and improved empty state; fixed width from max-w-7xl to max-w-6xl

Sequence Diagram

sequenceDiagram
    participant User
    participant Homepage
    participant Dashboard
    participant Realtime
    
    User->>Homepage: Visit site
    Homepage->>Homepage: Render with animations
    Homepage->>User: Show marketing content
    
    User->>Dashboard: Navigate to dashboard
    Dashboard->>Dashboard: Apply fade-in animation
    Dashboard->>User: Display site cards
    
    User->>Dashboard: Click realtime visitor counter
    Dashboard->>Realtime: Navigate to realtime page
    Realtime->>Realtime: Load visitor data
    Realtime->>User: Show visitor list
    
    loop Every 5 seconds
        Realtime->>Realtime: Poll for updates
        Realtime->>User: Animate visitor list changes
    end
    
    User->>Realtime: Select a visitor
    Realtime->>Realtime: Fetch session details
    Realtime->>User: Display session journey

<h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR successfully standardizes the design system across the Pulse frontend, bringing visual consistency and improved UX throughout the application. The changes are well-organized into 5 phases covering button styling, footer enhancement, border radius standardization, empty states, and animations. **Key improvements:** - Replaced inconsistent `className="btn-primary/secondary"` with proper `variant` props on Button components - Implemented conditional footer rendering with comprehensive layout for unauthenticated users and simplified version for authenticated users - Standardized all cards to `rounded-2xl` (16px), inputs to `rounded-lg` (8px), and tabs to `rounded-lg` (8px) for consistent visual hierarchy - Enhanced empty states with icons and helpful messaging across all dashboard components - Added subtle entrance animations to marketing pages and realtime visitor tracking using framer-motion - Fixed PWA service worker bug by removing malformed icon files - Made realtime visitor counter clickable for better navigation **Code quality:** - Clean implementation with no security issues - Proper use of framer-motion for animations with appropriate durations - Good accessibility practices maintained (aria-labels, semantic HTML) - Consistent dark mode support across all changes The changes align well with Ciphera branding guidelines and maintain the privacy-first focus of the application. <h3>Confidence Score: 5/5</h3> - This PR is safe to merge with no blocking issues - All changes are cosmetic and UI-focused with no logic changes that could introduce bugs. The code is well-structured, maintains existing functionality, and follows React best practices. No security vulnerabilities introduced. - No files require special attention <details><summary><h3>Important Files Changed</h3></summary> | Filename | Overview | |----------|----------| | components/Footer.tsx | Enhanced footer with conditional rendering based on authentication; comprehensive unauthenticated layout with 5 columns | | components/PricingSection.tsx | Standardized button variants and added entrance animations to pricing page | | app/page.tsx | Added staggered entrance animations to homepage hero section and feature cards; standardized button usage | | app/sites/[id]/page.tsx | Added subtle fade-in animation and made realtime visitor counter clickable to navigate to realtime page | | app/sites/[id]/realtime/page.tsx | Added entrance/exit animations for visitor list items and improved empty state; fixed width from max-w-7xl to max-w-6xl | </details> </details> <h3>Sequence Diagram</h3> ```mermaid sequenceDiagram participant User participant Homepage participant Dashboard participant Realtime User->>Homepage: Visit site Homepage->>Homepage: Render with animations Homepage->>User: Show marketing content User->>Dashboard: Navigate to dashboard Dashboard->>Dashboard: Apply fade-in animation Dashboard->>User: Display site cards User->>Dashboard: Click realtime visitor counter Dashboard->>Realtime: Navigate to realtime page Realtime->>Realtime: Load visitor data Realtime->>User: Show visitor list loop Every 5 seconds Realtime->>Realtime: Poll for updates Realtime->>User: Animate visitor list changes end User->>Realtime: Select a visitor Realtime->>Realtime: Fetch session details Realtime->>User: Display session journey ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ciphera-net/pulse#11