08-baylis

Source URL: https://www.baylis.uk.com/
Status: ready
Created by: url_auto

Extracted metadata

Palette

#e30613

#0e0e10

#000000

#ffffff

#f2f2f4

#6b7280

#1a1a1a

Fonts

Body: regular (400) 14-16px, line-height generoso (~1.5).

Headings: weight bold (700) per H1/H2 ("Baylis", "New & Used Car Dealer"), dimensioni stimate 32-48px nell'hero, 22-28px per section title.

Vision analysis (read-only)

## Palette
- `#E30613` — Primary accent (rosso brand, usato per CTA principali "Find nearest dealership", "Get a free valuation", logo Baylis)
- `#0E0E10` / `#000000` — Background scuri delle sezioni hero e footer, card immagine
- `#FFFFFF` — Background principale, testo su sfondi scuri
- `#F2F2F4` — Grigio chiaro per sezioni alternate / sfondi card secondarie
- `#6B7280` — Grigio testo secondario, label, meta info (mileage, fuel type)
- `#1A1A1A` — Testo primario su sfondo chiaro

## Typography
- **Sans-serif geometrico/moderno**, simile a Inter, Manrope o un custom proprietario. Nessuna serif.
- **Headings**: weight bold (700) per H1/H2 ("Baylis", "New & Used Car Dealer"), dimensioni stimate 32-48px nell'hero, 22-28px per section title.
- **Body**: regular (400) 14-16px, line-height generoso (~1.5).
- **Prezzi**: weight bold, dimensione enfatizzata (~22-26px) con simbolo £ inline. Label "Only" / "Finance" in caps piccole sopra.
- **Tab/Nav**: medium (500), tracking neutro.
- **Microcopy/meta**: 12-13px, grigio, spesso con icone inline (📍 location, ⛽ fuel).

## Layout patterns
- Contenuto principale entro **max-width ~1200-1280px**, centrato, con sezioni full-bleed per hero, brand strip e footer.
- **Hero asimmetrico**: foto full-width con titolo centrato + search bar prominente (input + icona lente rossa).
- **Brand logos strip** orizzontale subito sotto hero, allineata orizzontalmente in flex equidistante.
- **Grid 2-up e 4-up**: card grandi (Used Cars / New Cars) accoppiate, poi 3 card secondarie (Offers / Aftersales / Motability).
- **Card prodotto**: ratio fisso ~4:3 per immagine, info compatta sotto con titolo, meta (miles/petrol/manual chips), prezzo, location pin, CTA "View details".
- **Vertical rhythm**: ~80-100px di padding tra sezioni maggiori, 24-32px tra elementi interni.
- Footer molto denso, **multi-column grid** (4 colonne) con micro-copy legale finale.
- Tabs/filtri stile pill con bordo sottile e stato attivo dark filled.

## Imagery
- **Foto fotografiche full-color, alta qualità**, scenario di vita reale (famiglie in showroom, persone in test drive, meccanici in officina).
- Hero usa **overlay scuro graduato** in basso per leggibilità del titolo bianco.
- Card categoria: foto lifestyle con **overlay scuro semi-trasparente** + titolo bianco in basso a sinistra + CTA "Browse stock"/"Find out more" link sottolineato.
- Foto prodotto (auto) su **sfondo neutro grigio chiaro** o studio, taglio coerente, watermark "Baylis" in alto a sinistra.
- Nessuna illustrazione, nessuna icona decorativa: tutte funzionali (lente, pin, freccia).

## Micro-copy
- **Lingua: inglese UK**, tono professionale-rassicurante, mai colloquiale.
- Headlines brevi e descrittivi: "New & Used Car Dealer, UK - Baylis", "Find your nearest dealership", "Value my car".
- CTA verbali e dirette: "Browse stock", "Book online", "Find out more", "Get a free valuation".
- Paragrafi descrittivi più lunghi nella sezione SEO ("Welcome to Baylis, your trusted destination for...") con linguaggio corporate/affidabile.
- Niente esclamazioni, niente emoji, punteggiatura sobria.
- Microlabel funzionali: "Only", "Finance", "Representative Example" + disclosure legale lunga in piccolo.

## What to emulate
- **Rosso brand acceso come unico accent** su palette neutra nero/bianco/grigio — alta riconoscibilità senza saturazione.
- **Search bar centrale prominente** nell'hero come elemento dominante (input + filtri secondari sotto: "Monthly Price / Lifestyle / EV").
- **Card immagine con overlay scuro + titolo + link CTA in basso**, pattern ripetuto per categorizzare aree del sito.
- **Brand/partner strip** orizzontale con loghi grayscale o colorati equispaziati subito sotto hero.
- **Footer denso e strutturato in colonne** con disclosure finanziaria distinta visivamente dalle link list.

## What to avoid
- **Niente gradienti colorati o effetti decorativi** (no glassmorphism, no neon): lo stile è piatto e funzionale.
- **Niente serif o font display** — manterrebbe il rigore corporate del sans-serif uniforme.
- **Non saturare di rosso**: usato solo per CTA primario, logo e icone chiave; tutto il resto è neutro.

Operator notes (markdown)

# baylis-automotive — Concessionaria Auto UK

Reference: https://www.baylis.uk.com/
Suggested choice: Dealer automobilistico multi-brand o qualsiasi business ad alto volume di inventory con necessità di search prominente e categorizzazione rapida dello stock.

## What I like about this style
- **Rosso come unico accent su neutri assoluti**: il `#E30613` appare solo dove conta (CTA primari, logo) — il resto è bianco/nero/grigio. Nessuna distrazione cromatica.
- **Search bar hero come gesto principale**: input centrato e largo, con filtri secondari pill sotto ("Monthly Price / Lifestyle / EV") — l'utente capisce immediatamente cosa fare senza scrollare.
- **Card categoria con overlay scuro + titolo in basso a sinistra**: pattern visivamente pulito che trasforma foto editoriali in navigazione funzionale senza aggiungere elementi UI ridondanti.
- **Prezzi con gerarchia tipografica netta**: "Only" in micro-caps, cifra in bold 22-26px, label "Finance" secondaria — la scansione avviene in un secondo.
- **Brand strip orizzontale a piena larghezza** subito dopo l'hero: posiziona l'identità multi-brand in modo istituzionale senza rumore visivo.
- **Footer a 4 colonne denso ma ordinato**, con disclosure finanziaria isolata visivamente dalla navigation — rigore legale senza compromettere la leggibilità.

## When to use it
Funziona per qualsiasi vertical con **inventory navigabile e transazione ad alta considerazione**: concessionarie, broker immobiliari, noleggio attrezzature. Il tono — professionale, rassicurante, zero colloquiale — è esattamente giusto quando l'utente deve fidarsi prima di convertire. Adatto anche a business con **multiple brand affiliate** da mostrare in modo ordinato.

## Things to avoid
- **Non aggiungere un secondo colore accent**: l'equilibrio dipende dall'isolamento del rosso. Un secondo tono rompe il sistema.
- **Non usare illustrazioni o icone decorative**: tutto il linguaggio visivo è fotografico e funzionale — inserire elementi illustrativi creerebbe un clash di registro immediato.
- **Non semplificare il footer**: la densità informativa è intenzionale e costruisce fiducia — tagliarlo troppo tradirebbe il tono istituzionale dell'intero sito.

Cancel