108 lines
3.4 KiB
Markdown
108 lines
3.4 KiB
Markdown
# 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.
|
|
|