Codex
443 lines
9.7 KiB
Markdown
443 lines
9.7 KiB
Markdown
# 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.
|