[PULSE-59] Design consistency audit fixes

[uz1mani]

Work Item

PULSE-59

Summary

• Fix 18 design inconsistencies across Pulse frontend to align with the Ciphera design system
• Standardize typography, buttons, containers, colors, dark mode, padding, and spacing
• Fix org slug domain and remove stale /tools reference

Changes

Typography:

• Standardized heading sizes: text-4xl md:text-5xl for marketing H1s (integrations, changelog, features, welcome)
• Features page H1: text-4xl md:text-6xl → text-4xl md:text-5xl; H2s → text-2xl font-bold

Buttons:

• Replaced custom <button> with <Button> from @ciphera-net/ui in Site Settings (3), VerificationModal (3), Pricing Enterprise (1)

Containers:

• Unified page container to max-w-6xl across org-settings, settings, site-settings, sites, sites/new, notifications
• Removed inner max-w-4xl from OrganizationSettings and ProfileSettings (ciphera-ui)

Colors:

• Replaced 30+ hardcoded hex values in Chart, WorldMap, Funnels, Uptime with CSS variables (var(--color-brand-orange), etc.)
• Replaced VS Code hex backgrounds with bg-neutral-900/bg-neutral-800 in integrations + installation pages

Dark mode:

• Added 28 dark: variants across OrganizationSettings, site settings, PricingSection, funnels page

Padding & spacing:

• Standardized card padding to p-6 (~30 instances)
• Integration sub-pages: pt-12 → pt-20 (4 static pages + IntegrationGuide.tsx)
• Standardized gap values: gap-1.5 → gap-2, gap-2.5 → gap-3, gap-0.5 → gap-1 (19 instances)

Tailwind:

• Replaced arbitrary values with standard scale: text-[10px]/text-[11px] → text-xs, gap-[2px] → gap-0.5, rounded-[2px] → rounded-sm, h-[320px] → h-80, min-w-[160px] → min-w-40, mt-[-10px] → -mt-2.5

Shadows:

• Added transition-shadow duration-300 to 7 shadow elements across Chart, Funnels, Share, Uptime, OfflineBanner

Copy & cleanup:

• Org slug prefix: drop.ciphera.net/ → pulse.ciphera.net/
• Removed stale **Tools:** UtmBuilder from DESIGN_SYSTEM.md

ciphera-ui:

• ProfileSettings: removed inner max-w-4xl wrapper for full-width layout
• Bumped to 0.0.58

Test Plan

• Verify marketing pages (integrations, changelog, features, welcome) have consistent H1/H2 sizing
• Verify Site Settings and Org Settings "Save Changes" buttons match (both use standard Button)
• Verify all settings pages (Settings, Org Settings, Site Settings) span full max-w-6xl width
• Toggle dark mode on Org Settings, Site Settings, Pricing, Funnels — confirm text is readable
• Verify chart colors (dashboard, funnels, uptime) render correctly in light/dark mode
• Verify integration sub-pages have consistent top padding (pt-20)
• Verify org slug shows pulse.ciphera.net/ in Org Settings → General

[greptile-apps]

Greptile Summary

This PR implements comprehensive design consistency improvements across the Pulse frontend, successfully aligning 35 files with the Ciphera design system. The changes are well-structured and focus on standardization without introducing breaking changes.

Key improvements:

• Replaced 30+ hardcoded hex color values with CSS variables (var(--color-brand-orange), etc.) for better theming
• Standardized typography across marketing pages (H1: text-4xl md:text-5xl, H2: text-2xl font-bold)
• Replaced custom button implementations with the Button component from @ciphera-net/ui
• Unified page containers to max-w-6xl across settings pages
• Added 28 dark: variants for improved dark mode support
• Standardized spacing values (card padding to p-6, gaps to standard Tailwind scale)
• Updated domain references from drop.ciphera.net to pulse.ciphera.net
• Added smooth shadow transitions with transition-shadow duration-300

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• All changes are cosmetic design improvements focused on consistency and maintainability. No business logic modified, no new features added, no breaking changes introduced. The refactoring improves code quality by replacing hardcoded values with design tokens.
• No files require special attention

Important Files Changed

Filename	Overview
components/dashboard/Chart.tsx	Replaced hardcoded hex colors with CSS variables, standardized gaps and spacing, added shadow transitions
components/settings/OrganizationSettings.tsx	Updated domain to pulse.ciphera.net, added dark mode variants, standardized padding and gaps, removed max-w-4xl container
components/sites/VerificationModal.tsx	Replaced custom buttons with Button component from @ciphera-net/ui
app/sites/[id]/settings/page.tsx	Replaced custom buttons with Button component, updated container to max-w-6xl, standardized padding, added dark mode variants
app/features/page.tsx	Standardized H1 to text-4xl md:text-5xl and H2s to text-2xl font-bold, updated card padding to p-6
components/dashboard/WorldMap.tsx	Replaced hardcoded colors with CSS variables, standardized negative margin value
app/sites/[id]/funnels/[funnelId]/page.tsx	Replaced hardcoded colors with CSS variables, added shadow transitions, added dark mode variants
package.json	Bumped version to 0.10.0-alpha and updated @ciphera-net/ui to 0.0.58

_{Last reviewed commit: 1a97027}