website/VISUAL-SPEC.md

# Visual Spec

## Purpose
This document turns the approved homepage and brand direction into a usable visual system for design and implementation.

The site should feel:
- light
- premium
- international
- calm
- materially rich
- editorial rather than promotional

Brand line:
**A refined way to experience music.**

---

## 1. Visual Intent

### Core Mood
The visual system should feel precise, spacious, and quietly confident.
It should not imitate retail electronics sites, dark gamer UI, or generic luxury landing pages.

### What the site should communicate
- modern premium audio brand
- carefully designed products
- credible engineering
- effortless service access
- global brand readiness

### What to avoid
- glossy over-styling
- aggressive contrast for its own sake
- loud color accents
- sales-driven visual cues
- over-designed motion
- decorative effects with no function

---

## 2. Theme Direction

### Approved Direction
**Light-first system**

The base experience uses a bright, low-noise canvas with restrained contrast.
Dark sections can appear selectively inside product pages or media modules, but the overall site identity stays light.

### Surface Logic
- Primary background: warm white or neutral white
- Secondary surfaces: very light gray
- Card surfaces: white
- Dividers: soft neutral gray
- Text contrast: strong but not stark blue-black

---

## 3. Color System

## Base Palette
These values are a starting point for implementation and can be refined once brand assets are audited.

- Background / Primary: `#F7F6F3`
- Background / Secondary: `#F1F0EC`
- Surface / Card: `#FFFFFF`
- Border / Soft: `#E3E0D8`
- Text / Primary: `#171717`
- Text / Secondary: `#5F5B55`
- Text / Muted: `#8A847C`
- Accent / Deep graphite: `#2C2A28`
- Accent / Champagne metal: `#B7A690`

### Usage Rules
- Use accent colors sparingly.
- Champagne metal is for subtle emphasis, not large fills.
- Primary CTAs should rely on contrast and shape, not bright color.
- Links should not become bright blue by default.

### Recommended CTA Treatment
Primary button:
- background: `#171717`
- text: `#FFFFFF`
- hover: `#2C2A28`

Secondary button:
- background: transparent
- text: `#171717`
- border: `#171717`
- hover background: `#F1F0EC`

---

## 4. Typography

## Direction
Typography should feel clean and international, with enough tension to feel premium.
The system should not depend on highly decorative display fonts.

## Recommended Stack
### English
- Primary: Inter
- Fallback: system-ui, sans-serif

### Chinese
- Primary: PingFang SC
- Fallback: Noto Sans SC, system-ui, sans-serif

### Why
- neutral enough for product UI and support content
- modern enough for brand storytelling
- good screen rendering across desktop and mobile
- easy to implement and maintain

## Hierarchy
### H1
- 56-72px desktop
- 34-42px mobile
- line-height: 1.05-1.12
- tracking: slightly tight
- weight: 500-600

### H2
- 40-48px desktop
- 28-32px mobile
- line-height: 1.1-1.2
- weight: 500-600

### H3
- 28-32px desktop
- 22-24px mobile
- line-height: 1.2
- weight: 500-600

### Body Large
- 18-20px desktop
- 16-18px mobile
- line-height: 1.55-1.65
- weight: 400

### Body
- 16px
- line-height: 1.6
- weight: 400

### Caption / Meta
- 12-14px
- line-height: 1.4-1.5
- weight: 400-500

## Typography Rules
- Keep headlines short.
- Avoid centered multi-line body copy.
- Chinese line length should be shorter than English in wide layouts.
- Never use all caps for long labels or navigation.
- Tracking should stay controlled; do not force a luxury feel with excessive letter spacing.

---

## 5. Layout and Grid

## Page Width
- Max content width: 1440px
- Standard content width: 1200-1280px
- Reading width for text blocks: 560-680px

## Grid
### Desktop
- 12-column grid
- 24px gutter
- outer margin: 48-64px

### Tablet
- 8-column grid
- 20px gutter
- outer margin: 32px

### Mobile
- 4-column grid
- 16px gutter
- outer margin: 20px

## Vertical Rhythm
Use a restrained spacing scale:
- 8
- 12
- 16
- 24
- 32
- 48
- 64
- 96
- 128

### Section Spacing
- Large homepage section top/bottom padding: 96-128px desktop, 64-80px mobile
- Tight utility modules: 48-64px desktop, 32-40px mobile

---

## 6. Imagery

## Photography Direction
Approved direction:
- light environment
- material detail
- interior lifestyle context
- cinematic but believable
- products should feel lived with, not staged like ads

## Hero Imagery
- Prefer still photography as default
- Support showcase video for launch or campaign moments
- Composition should leave intentional space for copy
- Avoid generic stock interiors
- Avoid over-dramatic shadows or fake lens flare

## Product Imagery
Approved direction:
- horizontal compositions
- premium detail shots
- real material rendering
- consistent background treatment across the set

## Image Rules
- Never mix too many photographic styles on one page.
- Avoid heavy overlays that reduce image quality.
- Crop for subject and atmosphere, not symmetry alone.

---

## 7. Motion

## Principle
Motion should help pacing and focus, not call attention to itself.

## Rules
- Page load motion: subtle fade / translate only
- Duration range: 180ms-320ms for UI interactions
- Hero media transitions: slow and minimal
- Avoid parallax-heavy scrolling
- Avoid staggered animation on large content blocks

## Hover Behavior
- Product cards: slight image shift or opacity adjustment only
- Buttons: contrast shift, not bounce or glow
- Links: underline or opacity transition, not color theatrics

---

## 8. Component Specs

## Header
- Transparent over hero only if contrast is stable
- Otherwise solid light background
- Height: 72-84px desktop, 60-68px mobile
- Navigation should remain single-line on desktop
- Language switch must be quiet but visible

## Hero
- Large media-first section
- Copy width: max 520px
- CTA group: two buttons max
- Use still image by default; video remains optional and secondary

## Product Card
Approved direction:
- horizontal image composition
- editorial spacing
- no boxy e-commerce framing

### Structure
- image
- model name
- one-line descriptor
- CTA

### Visual Treatment
- white or nearly white card background
- minimal border or no border
- shadow only if extremely soft
- radius: 12-16px

## Statement Section
Approved direction:
- image + text split layout
- one dominant statement
- one supporting paragraph
- optional single link

## Support Shortcut Card
- simpler than product cards
- should read as utility, not hero content
- icon optional, not necessary
- use spacing and type hierarchy over decoration

## Awards / Reviews Module
Approved direction:
- included on homepage
- should feel editorial and secondary

### Recommended Treatments
Option A:
- award logo strip above 1 featured review quote

Option B:
- 2 review quotes with minimal media logos beneath

### Rules
- keep monochrome or near-monochrome
- avoid loud award badges
- do not turn the section into a noisy logo wall

## News Card
- low-emphasis image ratio
- title, meta, short excerpt
- lighter than product cards in visual weight

## Footer
- quiet, airy, information-first
- clear separation of support and company links
- language switch and legal links remain legible

---

## 9. Border Radius, Lines, and Shadows

### Radius
- Buttons: 9999px or 12px depending on final brand preference
- Cards: 12-16px
- Input fields: 10-12px

### Borders
- 1px soft neutral borders only
- avoid dark outlines except on key buttons or focused inputs

### Shadows
- extremely restrained
- use depth only when needed to separate surfaces
- avoid floating-card aesthetics

---

## 10. EN / ZH Layout Rules

## Shared Rule
Page hierarchy stays mirrored across English and Chinese.
Content density may differ, but the visual system should hold together in both languages.

## English
- more negative space is acceptable
- headlines can carry more brand tone
- shorter lines feel premium

## Chinese
- allow slightly denser copy blocks when needed
- keep headings concise
- test card heights carefully because product descriptions may wrap differently
- avoid over-wide text blocks

## Layout Safeguards
- cards should tolerate 1-2 extra lines in Chinese
- buttons should avoid text overflow by design
- headline containers must be tested in both locales before sign-off

---

## 11. Accessibility Baseline

- text contrast must meet WCAG 2.1 AA
- focus states visible in both English and Chinese versions
- body text never below 16px for primary reading contexts
- buttons and interactive cards must remain easy to use on mobile
- video hero must have poster fallback and not block copy readability

---

## 12. Homepage-Specific Visual Rules

### Order
1. Hero
2. Featured Products
3. Brand / Technology Statement
4. Support Shortcuts
5. News / Awards / Reviews
6. Footer

### Density
- maximum 5 content sections before footer
- every section should have one dominant idea
- support must stay lighter than product presentation
- awards / reviews should support trust, not dominate the narrative

---

## 13. Implementation Tokens

### CSS Variable Draft
```css
:root {
  --bg-primary: #F7F6F3;
  --bg-secondary: #F1F0EC;
  --surface-card: #FFFFFF;
  --border-soft: #E3E0D8;
  --text-primary: #171717;
  --text-secondary: #5F5B55;
  --text-muted: #8A847C;
  --accent-graphite: #2C2A28;
  --accent-champagne: #B7A690;
}
```

### Tailwind Mapping Draft
- `bg-page`
- `bg-subtle`
- `bg-card`
- `border-soft`
- `text-primary`
- `text-secondary`
- `text-muted`
- `text-accent`

---

## 14. Pending Asset Inputs

Still needed from the brand side:
- approved logo pack
- official wordmark usage rules
- product image library
- lifestyle photography library
- showcase video assets
- awards / review source assets
- legal-approved media quotes

---

## 15. Final Rule

The visual system should feel authored.
Not trendy, not overloaded, not anonymous.
It should feel like a serious audio brand with taste, discipline, and room to breathe.