bentleymotors-com is a public-facing luxury automotive brand website modeled on the structure and presentation of bentleymotors.com. The product presents a handcrafted luxury vehicle marque to an affluent, design-literate audience: prospective buyers browsing the model lineup, visitors evaluating a specific vehicle's specifications and imagery, interested parties submitting an enquiry to connect with the brand's sales channel, and existing owners seeking ownership and service information.
The intent is a brand and premium-services surface — not a data-dense application. It carries model browsing, model detail with specifications and imagery, an enquiry path, and ownership/service guidance. The site is dark-first, editorial, and restrained: oversized display typography, full-bleed vehicle photography, deep racing green brand fields, and a single hot signal red accent.
The audience is composed of three accepted visitor roles: the Luxury Vehicle Shopper exploring the lineup, the Prospective Owner / Enquirer moving toward contact, and the Existing Owner / Service Customer seeking support. All three are anonymous public visitors; no account or authentication requirement was specified.
The current delivery is a first-party, publicly reachable brand website with five destinations: Landing, Models, Model Details, Enquiry, and Ownership. All five are anonymously accessible; no visitor identity, login, or account is required or established anywhere in the current product.
Accepted behavior covers: presenting the brand and routing visitors (Landing); browsing the vehicle model lineup (Models); evaluating a single model through specifications and imagery (Model Details); submitting an enquiry about a vehicle (Enquiry); and finding ownership and service information (Ownership). A backend integration supports the enquiry submission and the model content that the pages present.
Narrow exclusions. The reference site's broader sitemap — Mulliner commissioning, Bentley Home, Residences, Pre-Owned, Concept Cars, Culture articles, Community, Careers, News, Factory Tours, Financial Services, Accessories, Connectivity, and dealer locator — is inspiration-only reference material and is not current product scope. No vehicle configurator, no dealer locator, and no account system are part of this generation. The reference is used only for domain context, structural instinct, and visual inspiration; none of its content, names, or copy is reproduced.
The product is a first-party brand website owned and delivered by the application itself. Every destination is a custom page rendered by the application; there is no provider-owned surface, no external destination, and no headless delivery in the current scope.
Access ownership. The user stated no account or authentication requirement, and the Planning Scope records this as an explicit hard constraint. Accordingly, all five destinations are anonymous and public. No identity is established, no session continuity is required, and no protected state exists. The Enquiry submission is a one-shot anonymous contact action: the visitor supplies their details, the submission is delivered to the brand's sales channel, and the visitor receives an on-page confirmation. No account is created and no durable visitor-owned state is retained.
Current vs. future. Everything described in Sections 3–5 is current. The reference site's configurator, dealer locator, Mulliner commissioning, lifestyle, and editorial sections are explicitly out of current scope and are recorded only as future horizons in Section 11.
HeroComposition (headline block, racing-green bleed block, hero image crop, column-7 hairline); SectionOpener (numbered eyebrow with 24px red rule, section display headline); MaterialPanel (1:1 square macro material photography with 12px sage-grey caption); SiteNav (top navigation and header controls); SiteFooter (racing-green field).ModelBand (full-bleed image, 96px overlapping model name, spec triad); SpecTriad (three label/value pairs on hairlines); SectionOpener ("01 — Models"); SiteNav; SiteFooter.StickyModelRail (rotated model name); SpecRowList (hairline-separated label/value rows, tabular figures); ModelImageSequence (full-bleed imagery); EnquiryCTA (solid red rectangle, off-white caps text); SiteNav; SiteFooter.EnquiryForm (rectangular inputs with 1px off-white borders, zero radius); ModelOfInterestSelect; SubmitButton (solid red rectangle, off-white caps text, 44px minimum height); ConfirmationPanel; SiteNav; SiteFooter.OwnershipContentSections (numbered section openers, editorial body in columns 2–7 or 7–12); ServiceRequestForm (rectangular inputs, zero radius); SubmitButton (solid red rectangle, off-white caps text); ConfirmationPanel; SiteNav; SiteFooter.FR-1 — Brand landing and routing. As a Luxury Vehicle Shopper, I should land on a full-viewport brand composition that introduces the marque and routes me onward, so that I can immediately choose a path into the site. (provenance: required_inference; lifecycle: initiator = any visitor; trigger = opening the site root; observable result = hero composition renders with headline, hero vehicle photograph, and the three navigation links; access = anonymous; failure/recovery = if the hero image fails, the near-black field, headline, and links remain fully legible and usable; continuation = the visitor selects Models, Enquiry, or Ownership.)
FR-2 — Model lineup browsing. As a Luxury Vehicle Shopper, I should browse the brand's vehicle model lineup as a stacked sequence of full-bleed photography bands, so that I can survey the range and identify models worth pursuing. (provenance: explicit; lifecycle: initiator = Luxury Vehicle Shopper; trigger = opening Models; observable result = one band per available model, each with its photograph, 96px model name, and right-aligned spec triad; access = anonymous; failure/recovery = a band whose photograph fails keeps its height, name, and spec triad on the near-black field; continuation = the shopper opens a model.)
FR-3 — Model comparison inputs. As a Luxury Vehicle Shopper, I should see each model's power, 0–60, and range presented as a spec triad on hairline rules, so that I can compare models without leaving the lineup. (provenance: required_inference; lifecycle: initiator = Luxury Vehicle Shopper; trigger = viewing the Models list; observable result = three label/value pairs aligned to a right-hand column per band; access = anonymous; failure/recovery = if a value is unavailable the label remains with an explicit unavailable marker rather than a blank; continuation = the shopper opens the model whose triad best matches their intent.)
FR-4 — Model detail with specifications. As a Luxury Vehicle Shopper, I should open a single model and review its specifications and imagery in a focused destination, so that I can evaluate that vehicle in depth. (provenance: explicit; lifecycle: initiator = Luxury Vehicle Shopper; trigger = selecting a model band; observable result = Model Details renders with a sticky rotated model-name rail and a scrolling column of hairline-separated spec label/value rows plus full-bleed imagery; access = anonymous; failure/recovery = if imagery fails, spec rows remain fully readable on the near-black ground; continuation = the shopper proceeds to Enquiry.)
FR-5 — Model detail imagery. As a Luxury Vehicle Shopper, I should view full-bleed photography of the selected model within its detail destination, so that I can judge the vehicle's design and material character. (provenance: explicit; lifecycle: initiator = Luxury Vehicle Shopper; trigger = scrolling Model Details; observable result = model imagery renders full-bleed within the scrolling column; access = anonymous; failure/recovery = the spec column remains complete and readable if imagery fails; continuation = the shopper continues scrolling or proceeds to Enquiry.)
FR-6 — Enquiry submission. As a Prospective Owner / Enquirer, I should submit an enquiry about a vehicle of interest, so that I can connect with the brand's sales channel. (provenance: explicit; lifecycle: initiator = Prospective Owner / Enquirer; trigger = completing and submitting the enquiry form; observable result = the enquiry is accepted and a confirmation panel states that it has been received and that the sales channel will respond; access = anonymous; failure/recovery = on failure the form retains every entered value and an inline message states the enquiry could not be sent, and the visitor can resubmit without re-entering data; continuation = the visitor returns to Models or Model Details, or leaves the site.)
FR-7 — Enquiry subject continuity. As a Prospective Owner / Enquirer, I should arrive at the enquiry form with the model I was viewing already selected as my subject of interest, so that I do not have to restate what I am asking about. (provenance: required_inference; lifecycle: initiator = Prospective Owner / Enquirer; trigger = selecting the enquiry action on Model Details; observable result = the model of interest field is pre-filled with that model; access = anonymous; failure/recovery = if the pre-fill is unavailable the field renders unselected and the visitor selects a model manually; continuation = the visitor completes and submits the enquiry.)
FR-8 — Enquiry receipt by the sales channel. As the brand's sales channel, I should receive the submitted enquiry with the visitor's contact details and model of interest, so that the enquiry can be answered. (provenance: required_inference; lifecycle: initiator = Prospective Owner / Enquirer; indispensable participant = the brand's sales channel, which receives the enquiry record; trigger = accepted enquiry submission; observable result = an enquiry record containing name, email, telephone, model of interest, message, and submission timestamp is delivered to the sales channel; access = not a human-facing surface; failure/recovery = if delivery fails, the visitor sees the submission error state and can resubmit; continuation = the sales channel responds to the visitor outside the product.)
FR-9 — Ownership and service information. As an Existing Owner / Service Customer, I should find ownership and service information for my vehicle, so that I know how to maintain and support it. (provenance: explicit; lifecycle: initiator = Existing Owner / Service Customer; trigger = opening Ownership; observable result = ownership and service guidance renders in editorial sections with numbered eyebrows; access = anonymous; failure/recovery = content is static and remains readable if any decorative imagery fails; continuation = the owner raises a service request or returns to the lineup.)
FR-10 — Service request submission. As an Existing Owner / Service Customer, I should raise a service request from the ownership destination, so that I can initiate service for my vehicle. (provenance: required_inference; lifecycle: initiator = Existing Owner / Service Customer; trigger = completing and submitting the service request form; observable result = the request is accepted and a confirmation panel states that it has been received; access = anonymous; failure/recovery = on failure the form retains every entered value and an inline message states the request could not be sent, and the owner can resubmit without re-entering data; continuation = the owner continues reading ownership guidance or leaves the site.)
FR-11 — Service request receipt. As the brand's service channel, I should receive the submitted service request with the owner's contact details and vehicle model, so that the request can be actioned. (provenance: required_inference; lifecycle: initiator = Existing Owner / Service Customer; indispensable participant = the brand's service channel, which receives the request record; trigger = accepted service request submission; observable result = a service request record containing owner name, email, telephone, vehicle model, and service description is delivered to the service channel; access = not a human-facing surface; failure/recovery = if delivery fails, the owner sees the submission error state and can resubmit; continuation = the service channel responds to the owner outside the product.)
FR-12 — Anonymous access throughout. As any visitor, I should reach every destination without creating an account or signing in, so that I can browse and make contact without an identity barrier. (provenance: explicit; lifecycle: initiator = any visitor; trigger = navigating to any destination; observable result = the destination renders with no authentication gate; access = anonymous on all five destinations; failure/recovery = not applicable — no credential state exists; continuation = the visitor proceeds with the destination's primary action.)
Product context. An affluent, design-literate visitor exploring a handcrafted luxury marque's site. They arrive without a specific commitment, often comparing several models before forming a preference. They are anonymous and expect the site to behave like a gallery wall — restrained, material-led, and confident — rather than a feature-list brochure.
Primary goal. Identify a preferred model and take the next step toward ownership.
Distinct accepted responsibilities. Browsing the full model lineup; reading each model's power, 0–60, and range as a comparable triad; opening an individual model; reviewing that model's specifications and imagery in depth. Their work is evaluative and comparative — they are narrowing a field, not transacting.
Relevant inputs or decisions. Which model band to open; whether a model's spec triad and imagery justify deeper review; whether to proceed to enquiry or return to the lineup.
Interactions with other accepted participants. The shopper's evaluation is the precondition for the Prospective Owner / Enquirer's action: the model they settle on becomes the subject of interest carried into the enquiry form. They do not interact with the Existing Owner / Service Customer's work.
Observable success. The shopper has reviewed the lineup, opened at least one model, and either identified a preferred model or moved to enquiry.
Product context. A visitor who has already identified a model of interest and wants to move forward. They are past browsing and into contact. They expect a short, unambiguous path from the vehicle they were viewing to a submitted enquiry.
Primary goal. Submit a contact or enquiry request that connects them with the brand's sales channel.
Distinct accepted responsibilities. Arriving at the enquiry destination with their model of interest already carried over; supplying their name, email address, optional telephone number, and message; submitting the enquiry; and receiving confirmation that it has been received. Their work is committal and transactional — it produces an obligation on the brand to respond.
Relevant inputs or decisions. Confirming or changing the model of interest; deciding what to write in the message; deciding whether to include a telephone number; deciding whether to resubmit after a failure.
Interactions with other accepted participants. They depend on the Luxury Vehicle Shopper's evaluation having produced a model of interest. Their submission produces a record that the brand's sales channel — a non-persona participant — receives and acts on outside the product.
Observable success. A confirmation panel states the enquiry has been received, and the sales channel holds a record with their contact details and model of interest.
Product context. A current owner of a vehicle from the marque, seeking support rather than a purchase. They arrive with a specific vehicle already in their possession and a maintenance or service need. They are anonymous and expect ownership guidance to be direct and practical, presented with the same editorial restraint as the rest of the site.
Primary goal. Find the relevant ownership or service information, or initiate a service request.
Distinct accepted responsibilities. Reading service and maintenance guidance; reading ownership support information; raising a service request with their vehicle model and a description of the service needed; and receiving confirmation that the request has been received. Their work is support-oriented and post-purchase — it concerns a vehicle they already own.
Relevant inputs or decisions. Which guidance section applies to their need; whether to raise a service request; what to describe in the service description; whether to resubmit after a failure.
Interactions with other accepted participants. They do not interact with the Luxury Vehicle Shopper's or the Prospective Owner / Enquirer's work. Their submission produces a record that the brand's service channel — a non-persona participant — receives and actions outside the product.
Observable success. The owner has found the applicable guidance, or has received confirmation that their service request has been received.
Muse and headline. Tobias van Schneider — Editorial swagger for a handcrafted grand tourer: oversized type, deep racing green, one hot signal red.
Mode. Dark-first. The site is dark at every viewport; off-white is a type colour only, never a page ground.
Colour tokens (dark mode).
| Role | Token | Hex |
|---|---|---|
| Background (ground for the whole site) | --color-bg | #0E100F |
| Surface (panels, detail sheets) | --color-surface | #161917 |
| Text (only text colour) | --color-text | #F2EFE6 |
| Primary (brand field, footer, selected state) | --color-primary | #14352A |
| Accent (single hot signal) | --color-accent | #D8232A |
| Muted (metadata, spec labels, captions) | --color-muted | #8C8F85 |
| Hairline | --color-hairline | rgba(242,239,230,0.14) |
Proportion. 70% near-black, 18% off-white type, 8% racing green fields, 4% red. No blue anywhere, no gradients, no glass. Never two red elements competing in one viewport.
Typography.
clamp(44px, 9vw, 128px). Section display: clamp(32px, 5vw, 72px). Model name: clamp(24px, 3vw, 36px). Body: 17px. Label: 12px uppercase.Shape language. Sharp corners everywhere — zero border-radius on cards, images, buttons, and inputs. Structure comes from 1px hairlines in rgba(242,239,230,0.14) and from colour blocks meeting edge-to-edge, never from shadows or rounded containers. Buttons are rectangles with a 1px off-white border and a 44px minimum height; the primary enquiry button is a solid red rectangle with off-white caps text. Images are cropped hard at the grid line, often bleeding off the right or bottom edge. No diagonal flow — tension comes from asymmetry and scale, not angles.
Layout. A 12-column editorial grid with an intentionally broken rhythm: heroes and section openers span all 12 columns, while body content sits in columns 2–7 or 7–12, never centred. Every section is separated by a full-width hairline and a numbered eyebrow ("01 — Models", "02 — Mulliner"). The Models page is a stacked vertical list of full-bleed photography bands, each 68vh desktop / 52vh mobile, with the model name at 96px overlapping the image's lower-left corner and the spec triad aligned to a right-hand column. Model Details uses a sticky left rail for the model name and a scrolling right column of spec rows, each a label/value pair on a hairline. At 375px the grid collapses to a single 20px-margin column, display type drops to its clamp minimum, and all spec rows wrap to two lines with the label above the value.
Imagery. Full-bleed, low-key studio and location photography of vehicles in near-black environments, lit from one side so the bodywork reads as a single continuous highlight. Crops are aggressive and editorial — a wheel arch and a headlamp can carry a whole viewport. Macro material shots (stitched hide, open-pore walnut, knurled aluminium, the Mulliner thread) appear as 1:1 square panels between type sections, each captioned in 12px sage-grey. No stock people, no dealership forecourt shots, no flat vector illustration, no 3D renders of the vehicle on a turntable, no clip art. Where a person appears it is a hand or a silhouette at the edge of frame.
Readable text and controls. Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering them. Imagery and decoration may be cropped, bled, overlapped, or cut as the direction asks, provided they cover no readable text or control.
The column-7 spine. The public entry is composed around a single persistent 1px vertical hairline at grid column 7 that runs the entire page height, dividing editorial type from machine.
On Landing, the composition is a full viewport, not a centred hero. The vehicle photograph is a single low-key side-profile shot, bled off the right and bottom edges so it is cropped by the viewport itself, occupying the right seven columns and the full height. On the left, in the near-black field, a stacked three-line Playfair Display headline — "HAND-BUILT / IN CREWE / SINCE 1919" — is set at clamp(44px, 9vw, 128px) with 0.96 leading, left-aligned, with the third line sitting in a solid racing-green block that extends to the viewport edge. The block's top and bottom edges align exactly to the type's cap-height and baseline. Beneath it a 1px off-white rule, then a single row of three text links (Models / Mulliner / Enquire) in Jost 300 caps with a red 2px underline on the active one. No button, no subtext paragraph, no gradient, no floating card.
The spine turns red for one 400ms beat when a new section enters, and the numbered section eyebrows ("01 — Models", "02 — Mulliner", "03 — Ownership") in Jost caps with a 24px red rule to their left are the only section-transition device across the whole site. The concept recomposes accepted content, states, and controls only — it introduces no new behavior, page, or destination.
Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat
Landing Hero Motion Brief.
cubic-bezier(0.16, 1, 0.3, 1) mask reveal. The outcome is a composed first frame in which type and machine settle into their final positions and the column-7 spine holds the division between them.prefers-reduced-motion, all reveals become instant opacity changes and the hero holds at scale 1.00. The composed first frame is otherwise identical.NFR-1 — Anonymous public access. Every destination is reachable without an account, login, or session. No authentication gate, credential store, or account-management capability exists in the current product. (provenance: explicit; rationale: the user stated no account or authentication requirement, recorded as an explicit hard constraint.)
NFR-2 — Responsive integrity. Headlines, wordmarks, labels, numbers, card text, and controls remain entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. At 375px the grid collapses to a single 20px-margin column, display type drops to its clamp minimum, and spec rows wrap to two lines with the label above the value. (provenance: explicit; rationale: stated readable-text-and-controls constraint.)
NFR-3 — Reduced-motion support. Under prefers-reduced-motion, all reveals become instant opacity changes and the hero holds at scale 1.00. (provenance: explicit; rationale: stated motion constraint.)
NFR-4 — Enquiry and service request durability. A submitted enquiry or service request is delivered to the brand's sales or service channel with the visitor's contact details and subject, and the visitor receives an on-page confirmation. A failed submission preserves all entered values so the visitor can resubmit without re-entering data. (provenance: required_inference; rationale: indispensable for the accepted enquiry and service-request outcomes to be usable.)
NFR-5 — Content integrity. Model names, specification values, and imagery presented on Models and Model Details are served from the application's own content source and remain consistent between the lineup and the detail destination. (provenance: required_inference; rationale: the accepted browsing-to-detail journey requires the same model facts in both destinations.)
NFR-6 — No blue, no gradients, no glass. No blue or indigo appears on any surface in any state. No gradients, glassmorphism panels, frosted cards, or blurred backdrops are used. (provenance: explicit; rationale: stated palette and surface constraints.)
Assumptions.
Constraints.
Future horizons (not current scope). The reference site's configurator, dealer locator, Mulliner commissioning, Pre-Owned, Concept Cars, Culture and editorial articles, Community, Careers, News, Factory Tours, Financial Services, Accessories, Connectivity, Bentley Home, and Residences sections are recorded as possible future horizons only. They are not current pages, requirements, or acceptance criteria.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!