jamshalat-diary/logo-luxury-theme-brief.md

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.