Design a light-mode web interface screen: tactile mid-century warmth meets modern geometric clarity for analog music lovers.
LAYOUT
The page flows with an asymmetric editorial rhythm. A tight 36px black utility bar sits at the top, followed by an airy 80px white header with centered navigation. The hero section pairs an off-center bold headline and CTA on the left with a dominant square lifestyle photo on the right. Below, a three-column monolithic block integrates an image, brand history, and feature icons into a unified card, followed by an open-grid product showcase.
PALETTE (use these exact hex values)
- #FAF7F2 — Warm Linen Canvas: Primary page background across all main editorial and product sections.
- #F3EFE9 — Muted Parchment: Contrasting background fill for the three-part narrative and feature section.
- #111111 — Charcoal Black: Utility top announcement bar and high-contrast primary navigation button background.
- #AF5A44 — Terracotta Rust: Primary hero CTA button, active navigation indicator, category eyebrows, and outline icons.
- #161616 — Deep Pitch: Display headlines, section titles, logo, and active text links.
- #5E5A54 — Muted Timber: Secondary editorial body copy, captions, and narrative story text.
- #EFE8DC — Parchment Stamp: Circular badge surface overlaying the hero image.
TYPOGRAPHY
Typeface Gilroy (or Poppins, Avenir, DM Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 28px heading, 40px heading-lg, 56px display. Tracking -0.03em at display, 0.05em at uppercase eyebrows. The typography speaks with mid-century geometric modernism, reminiscent of high-end design catalogs. The single-story geometric letterforms offer a human, approachable rhythm while bold display weights convey definitive audio authority. Gilroy or Avenir provide the ideal balance of pure geometry and warm editorial elegance.
GEOMETRY & SPACING
Corner radii — cards 16px, links 0px, inputs 6px, buttons 6px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, airy density.
DEPTH
Depth is created entirely without drop shadows. The system uses flat, layered surface steps: the linen canvas (#FAF7F2) sits back, section modules (#F3EFE9) step slightly forward, and photographic cards provide visual mass. The only floating illusion comes from graphic overlays, such as the circular badge overlapping the hero photography.
IMAGERY
Photography emphasizes tactile mid-century textures: rich walnut turntable plinths, matte record player vinyl, warm residential lighting, and vintage vinyl sleeves. Imagery must feel candid, warm-toned, and grounded in physical music culture, avoiding cold renders or detached studio sweeps on pure white backgrounds.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive move is the juxtaposition of warm earthen linen surfaces (#FAF7F2 and #F3EFE9) with rich terracotta interactive elements (#AF5A44) and an overlapping circular graphic badge ('AMPLIFY YOUR STYLE'). This immediately telegraphs boutique vinyl lifestyle rather than generic tech consumer electronics. Misusing it involves turning the terracotta into a generic broad fill or swapping the linen base for pure stark white.
MUST
- Anchor hero and section headlines in bold, single-story geometric sans with tight negative tracking.
- Use terracotta #AF5A44 sparingly for key interactions, active underlines, and small eyebrow text.
- Rely on the warm linen tone #FAF7F2 for overall page canvas rather than clinical white #FFFFFF.
- Maintain generous 96px vertical section spacing to preserve an unhurried, editorial feel.
AVOID
- Never use harsh drop shadows; all depth must come from flat surface tonal stepping.
- Avoid bright saturated primary colors like blue, red, or green that clash with warm earth tones.
- Do not crowd editorial copy; maintain at least 1.5 to 1.6 line height on long-form paragraphs.
- Never make call-to-action buttons fully circular pill shapes unless they are the dark nav button.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1328:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
