Juozas Auto Design Brief

Feature Summary

Build the full Juozas Auto static website for a Lithuanian single-seller used-car inventory. Listing pages are the highest-priority surface because each one doubles as a Meta ad landing page and must convert mobile visitors into calls or WhatsApp messages.

Primary User Action

A buyer should quickly understand the car, see the price, trust the presentation, and contact the seller without friction.

Design Direction

Color strategy: Restrained burgundy. Use tinted off-white and charcoal neutrals, with deep burgundy reserved for primary contact actions, prices, focus states, and a few editorial details.

Theme scene: A buyer opens a Meta ad on a phone in daylight or near a car, wants quick trust and contact, so the site uses a light theme with high readability and quiet contrast.

Anchor references: boutique automotive retail, restrained fashion ecommerce, and calm Swiss-style inventory presentation. The site must avoid Autoplius, Skelbiu, marketplace density, and generic SaaS hero sections.

Image gate: skipped because this harness has no native image-generation tool.

Scope

Fidelity: production-ready.

Breadth: full site, including homepage, listing detail pages, about, contact, content collection, SEO metadata, Meta Pixel stub, README, and responsive behavior.

Interactivity: shipped-quality static site with minimal client JavaScript only where it directly supports conversion or gallery use.

Time intent: polish until build verification passes and the 375px experience answers the conversion checklist.

Layout Strategy

Mobile-first. Listing pages put the photo gallery, title, price, and contact actions at the top so buyers can evaluate and act within seconds. Desktop uses a sticky gallery on the left and a sticky information/contact column on the right. The homepage stays sparse and image-led, with inventory cards only where they help comparison.

Key States

Current inventory with 1-10 cars.
Sold inventory hidden by default behind a config flag.
Empty inventory with a calm contact prompt.
Optional specification fields missing.
Mobile sticky contact bar after initial scroll.
Desktop sticky contact area in the right column.
Reduced-motion mode with no spatial animation dependency.

Interaction Model

Car cards are full-link targets with subtle lift on hover-capable devices and no image zoom. The gallery is swipeable with a counter and minimal controls. Phone and WhatsApp links fire the Meta Contact event when a pixel ID is configured. Contact remains reachable without requiring the buyer to hunt through the page.

Content Requirements

All UI strings are Lithuanian and centralized in src/i18n/lt.ts. Copy should be confident, honest, and quiet. Formatting must match Lithuanian expectations: 12 500 €, 145 000 km, 140 kW (190 AG), and Lithuanian WhatsApp text.

Recommended References

brand.md for brand-register distinctiveness and anti-slop checks.
spatial-design.md for mobile-first hierarchy and avoiding unnecessary cards.
typography.md for fluid display type, readable measure, and tabular figures.
responsive-design.md for 375px and touch-target behavior.
color-and-contrast.md for OKLCH burgundy and tinted neutrals.
motion-design.md for restrained micro-interactions and reduced motion.

Open Questions

None blocking. Use placeholder seller contact details and form endpoint values that are easy to replace in config.

3.4 KiB Raw Blame History