# CLOCK-020: [Theme Inconsistency] Landing Page Branding Not Reflected in /app

**Status:** deployed-to-dev
**Priority:** P2 (Medium)
**Reporter:** Zel
**Created:** 2026-02-18
**Assignee:** ARIA
**Environment:** DEV – https://clocklane.dev.apps.symph.co/app

## Description
The branding (colors, accents, and overall theme) used on https://clocklane.com/ is not consistently reflected in https://clocklane.com/app.

- Marketing site and app use different visual styles
- Text contrast not consistently optimized for both Dark Mode and Light Mode
- Branding/theme from clocklane.com should be applied across /app for unified identity

## Impact
Brand inconsistency; does not block functionality but affects product polish and visual consistency.

## Solution Implemented (2026-07-14)

### Changes:
Updated the theme system in `ClocklanePOS.tsx` to use red (#EF4444) as the brand accent color, matching the landing page.

**Dark Mode:**
| Property | Before | After |
|----------|--------|-------|
| accent | #22C55E (green) | #EF4444 (red) |
| accentHover | #16A34A | #DC2626 |
| gradientFrom | #22C55E | #EF4444 |
| gradientTo | #059669 | #DC2626 |

**Light Mode:**
| Property | Before | After |
|----------|--------|-------|
| accent | #0D9F5F (green) | #DC2626 (red) |
| accentHover | #0B8A52 | #B91C1C |
| gradientFrom | #0D9F5F | #DC2626 |
| gradientTo | #059669 | #B91C1C |

**Also added:**
- `success` color (green) for positive feedback states (sale completed toast)
- Updated success toast to use green instead of accent for proper UX semantics

### File Modified:
- `src/components/ClocklanePOS.tsx` — Theme system + success toast

### Result:
App now uses red brand colors matching the landing page while keeping green for success states.
