audio/website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c8ccaa992598ef09fb627b29309aac6cfc9b9faf
website/VISUAL-SPEC.md
T
Codex c8ddfdf660 chore: baseline import
2026-04-23 01:08:18 +08:00

9.7 KiB
Raw Blame History

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

: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.

Reference in New Issue View Git Blame Copy Permalink