# Logo Palette + Luxury Active Menu Brief

## 1) Objective
Adopt the app's visual identity from the logo palette (teal + gold) and introduce a luxury-feel active menu state for both dark and light themes.

Key intent:
- Brand-consistent color system.
- Premium, elegant active menu treatment.
- Subtle animated gold shine (not flashy, not distracting).

## 2) Design Direction

### Brand mood
- Calm spiritual base: teal tones.
- Premium emphasis: gold used only for highlights/active states.
- Minimal and clean surfaces, with controlled depth (soft shadow + thin stroke).

### Usage rule
- Teal = foundation color.
- Gold = premium interaction color (active nav, selected/high-priority accents).
- Avoid using gold as the global background.

## 3) Proposed Color Tokens

These are starting values to tune after visual QA:

### Core brand tokens
- `brand.teal.500`: `#118A8D`
- `brand.teal.700`: `#0C676A`
- `brand.teal.900`: `#0A4447`
- `brand.gold.400`: `#D6A21D`
- `brand.gold.300`: `#E9C75B`
- `brand.gold.200`: `#F6DE96`
- `brand.gold.700`: `#8B6415`

### Dark theme base
- `bg.dark`: `#0F1217`
- `surface.dark`: `#171B22`
- `surface.dark.elevated`: `#1D222B`
- `text.dark.primary`: `#E8ECF2`
- `text.dark.secondary`: `#9AA4B2`

### Light theme base
- `bg.light`: `#F3F4F6`
- `surface.light`: `#FFFFFF`
- `surface.light.elevated`: `#F9FAFB`
- `text.light.primary`: `#1F2937`
- `text.light.secondary`: `#6B7280`

## 4) Active Menu Visual Spec

### Shape and structure
- Active menu item uses rounded-square container.
- Ring consists of:
  - Inner metallic gold stroke.
  - Soft outer glow (stronger in dark mode, lighter in light mode).
- Inactive items remain neutral gray/secondary text.

### Gold ring treatment
- Gradient on ring: dark-gold -> bright-gold -> pale-gold -> dark-gold.
- Keep ring thin and crisp (avoid thick glowing halo).
- Shine highlight should pass around the ring edge only.

### Light mode adaptation
- Reduce glow blur and opacity by ~35-45% vs dark mode.
- Add subtle neutral shadow to preserve depth on bright surfaces.

## 5) Motion Spec (Shine Animation)

- Animation target: active menu ring only.
- Loop duration: `2.8s-3.6s`.
- Shine pass visibility: short burst (`~700-900ms`) then calm period.
- Easing: smooth in/out (no linear harsh movement).
- Keep animation subtle enough to avoid drawing attention from content.

Reduced motion behavior:
- If reduced motion is enabled, disable moving shine and keep static gold ring.

## 6) Accessibility & Quality Constraints

- Maintain icon/text contrast minimum:
  - Non-text UI/icon target: at least `3:1`.
  - Small text target: at least `4.5:1`.
- Gold accents must not reduce legibility.
- Active state must remain distinguishable in both themes without relying only on color.

## 7) Product Rules

- Apply luxury active style only to active navigation state (not every component).
- Keep one source of truth for tokens across screens.
- Preserve current interaction speed and perceived responsiveness.

## 8) Rollout Plan

1. Approve token palette on static mockups (dark + light).
2. Apply to one pilot component: bottom navigation active item.
3. Validate contrast and motion comfort.
4. Roll out to other selected active states (tabs/chips), not all controls.

## 9) Acceptance Criteria

- Brand identity clearly reflects logo colors.
- Active menu looks premium in dark and light mode.
- Shine animation feels elegant and subtle, never distracting.
- No readability regressions.
- Reduced-motion path is supported.