Rebrand from AlecRae to 48co with light UI redesign #3989 — ccantynz/48co.v1

Originally written by @ccantynz-alt on GitHub.
Imported from https://github.com/ccantynz-alt/48co.v1/pull/48

Summary

Complete rebrand from "AlecRae Voice" to "48co Voice" with a comprehensive light mode UI redesign. The extension and web app now use a clean, modern light theme with improved typography, spacing, and color palette while maintaining all functionality.

Key Changes

Branding & Naming

Updated all user-facing text from "AlecRae Voice" to "48co Voice"
Changed domain references from alecrae.ai to 48co.nz
Updated logo in popup and welcome pages to "48co" with indigo accent
Updated manifest, page titles, and internal documentation

UI Theme Redesign

Color scheme: Migrated from dark theme (#0a0a0e background) to light theme (white background with #1a1a2e text)
Primary accent: Changed from cyan (#00f0ff) to indigo (#4f46e5)
Typography: Switched from monospace (JetBrains Mono) to Inter sans-serif with improved font smoothing
Borders & dividers: Updated from semi-transparent white to subtle grays (#f0f0f5, #e4e4ee)
Component styling:
- Toggle switches: Larger (40x22px), solid indigo when active
- Buttons: Solid indigo background with white text, improved hover states
- Input fields: Light gray backgrounds (#f8f8fc) with indigo focus states
- Status badges: Added background colors (green for connected, red for disconnected)
- Mic button: Larger (56x56px), gradient background section, improved recording animation

Grammar Checker Updates

Updated tooltip styling to match light theme
Improved correction display with better visual hierarchy
Added "Daily limit reached" message with helpful guidance
Enhanced accessibility with better contrast ratios

Welcome Page Redesign

Light theme with improved card styling
Better visual hierarchy and spacing
Updated SVG icons for microphone setup
Improved site badge styling with hover effects
Better typography and line heights

Footer & Navigation

Restructured footer with better organization
Added product/company sections
Updated link styling and hover states
Added privacy and terms pages (new files)

Documentation

Updated CLAUDE.md with new brand identity
Updated all internal comments referencing product name

Implementation Details

All color values updated systematically across extension and web app
Maintained all existing functionality—this is purely a visual rebrand
Improved spacing and padding throughout for better visual breathing room
Enhanced transitions and animations with ease timing functions
Better mobile responsiveness with viewport-aware sizing
Added new privacy and terms of service pages with comprehensive legal text

https://claude.ai/code/session_013Axk9jGWk1jnWfaXtXuK8m