bentleymotors-com

byJhovany Beltran

Make me a app like Bentleymotors.com

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

Page 1 of 17

System Requirements Document for bentleymotors-com

1. Introduction

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.

Page 2 of 17

2. System Overview

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.

Page 3 of 17

2a. Product Interpretation and Delivery Boundary

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.

2c. Page Content and Component Coverage

Landing

  • Information / state. Anonymous first impression. Full-viewport hero composition: a low-key side-profile vehicle photograph bled off the right and bottom edges occupying the right seven columns; on the left, a stacked three-line display headline ("HAND-BUILT / IN CREWE / SINCE 1919") with the final line set inside a solid racing-green block bleeding to the viewport edge. A 1px off-white rule beneath, then a single row of three text links (Models / Mulliner / Enquire) in caps with a red 2px underline on the active one. A thin vertical hairline runs the full height at column 7.
  • Primary actions. Navigate to Models; navigate to Enquiry; navigate to Ownership.
  • Supporting actions. Scroll into the numbered section openers below the hero.
  • Domain entities. Brand statement, hero vehicle imagery, section eyebrows, navigation links.
  • Component responsibilities. 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).
  • States. Loading: hero image placeholder holds the near-black ground with the headline already rendered. Empty: not applicable — content is static. Success: hero image loads and scales from 1.06 to 1.00 over 1200ms. Error: if the hero image fails, the near-black field and headline remain fully legible and the navigation links stay usable. Recovery: image retries on next visit; no visitor action required.
Page 4 of 17

Models

  • Information / state. A stacked vertical list of full-bleed photography bands, each 68vh on desktop and 52vh on mobile, one per available model. The model name is set at 96px overlapping the image's lower-left corner; a right-aligned spec triad (power / 0–60 / range) sits on hairline rules in a right-hand column. No card grid, no hover-lift tiles.
  • Primary actions. Open an individual model (navigate to Model Details).
  • Supporting actions. Hover a model band to crossfade its photograph and slide in a 1px red rule from the left.
  • Domain entities. Model (name, hero photograph, power, 0–60, range).
  • Component responsibilities. ModelBand (full-bleed image, 96px overlapping model name, spec triad); SpecTriad (three label/value pairs on hairlines); SectionOpener ("01 — Models"); SiteNav; SiteFooter.
  • States. Loading: bands render as near-black fields with the model name and spec triad already in place; photography fades in. Empty: if no models are available, a single editorial line states that the lineup is being updated and offers the Enquiry link. Success: all bands render with photography, names, and spec triads. Error: if a band's photograph fails, the band keeps its height, name, and spec triad on the near-black field. Recovery: the band remains openable to Model Details regardless of image state.

Model Details

  • Information / state. A sticky left rail holding the model name rotated 90° in 12px caps with +0.18em tracking, while the right column scrolls a sequence of spec label/value rows separated by hairlines. Model imagery is presented full-bleed within the scrolling column.
  • Primary actions. Navigate to Enquiry with the current model carried as the subject of interest.
  • Supporting actions. Scroll the spec column; return to Models.
  • Domain entities. Model (name, imagery, specification rows as label/value pairs).
  • Component responsibilities. 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.
  • States. Loading: the sticky rail and spec row labels render immediately; values and imagery fill in. Empty: if a model has no specification rows, the rail and imagery remain and a single line states that full specifications are available on enquiry. Success: rail, imagery, and all spec rows render. Error: if imagery fails, spec rows remain fully readable on the near-black ground. Recovery: the Enquiry CTA remains available in every state.

Enquiry

  • Information / state. A contact and enquiry destination. A form collecting the visitor's name, email address, telephone number (optional), model of interest, and message. The model of interest is pre-filled when the visitor arrives from Model Details.
  • Primary actions. Submit the enquiry.
  • Supporting actions. Change the model of interest; return to Models or Model Details.
  • Domain entities. Enquiry (name, email, telephone, model of interest, message, submission timestamp).
  • Component responsibilities. 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.
  • States. Loading: the form renders immediately; the submit button shows a pending state while the request is in flight. Empty: the form renders with the model of interest unselected and all other fields blank. Success: on acceptance, the form is replaced by a confirmation panel stating that the enquiry has been received and that the brand's sales channel will respond. Error: if submission fails, the form retains every entered value and an inline message states that the enquiry could not be sent. Recovery: the visitor can resubmit without re-entering data; the submit control returns to its active state.
Page 5 of 17

Ownership

  • Information / state. Ownership and service information for existing owners: service and maintenance guidance, ownership support information, and a route to raise a service request.
  • Primary actions. Raise a service request.
  • Supporting actions. Read service and maintenance guidance; return to Landing or Models.
  • Domain entities. Ownership guidance content, service request (owner name, email, telephone, vehicle model, service description).
  • Component responsibilities. 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.
  • States. Loading: guidance content renders immediately; the service request form renders with the submit control active. Empty: the form renders with all fields blank. Success: on acceptance, the form is replaced by a confirmation panel stating that the service request has been received. Error: if submission fails, the form retains every entered value and an inline message states that the request could not be sent. Recovery: the visitor can resubmit without re-entering data.
Page 6 of 17

3. Functional Requirements

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

Page 7 of 17

4. User Personas

Luxury Vehicle Shopper

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.

Page 8 of 17

Prospective Owner / Enquirer

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.

Page 9 of 17

Existing Owner / Service Customer

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.

5. Core User Flows

Page 10 of 17

Flow 1 — Luxury Vehicle Shopper: browse the lineup and evaluate a model

  1. The shopper opens the site root and lands on Landing. The full-viewport hero renders: the low-key side-profile vehicle photograph bled off the right and bottom edges, the three-line display headline with its racing-green bleed block, the 1px off-white rule, and the three navigation links. The hero image scales from 1.06 to 1.00 over 1200ms.
  2. The shopper selects Models from the hero link row or the top navigation. The active link carries a red 2px underline.
  3. Models renders as a stacked vertical list of full-bleed photography bands, each 68vh on desktop and 52vh on mobile. Each band shows the model name at 96px overlapping the image's lower-left corner and a right-aligned spec triad — power, 0–60, range — on hairline rules.
  4. The shopper hovers a band. Its photograph crossfades over 300ms and a 1px red rule slides in from the left.
  5. The shopper compares spec triads across bands to narrow the field.
  6. The shopper selects a band. Model Details opens for that model.
  7. Model Details renders with the sticky left rail holding the model name rotated 90° in 12px caps, and the right column scrolling hairline-separated spec label/value rows with full-bleed model imagery.
  8. The shopper scrolls the spec column, reading each label/value pair, and reviews the imagery.
  9. Failure path: if a band's photograph fails to load on Models, the band keeps its height, model name, and spec triad on the near-black field and remains openable. If imagery fails on Model Details, the spec rows remain fully readable on the near-black ground.
  10. Continuation: the shopper either returns to Models to compare further, or proceeds to Enquiry with this model as their subject of interest.

Flow 2 — Prospective Owner / Enquirer: submit an enquiry

  1. From Model Details, the shopper selects the enquiry action. The solid red rectangle CTA with off-white caps text carries the current model forward.
  2. Enquiry opens with the model of interest field pre-filled with the model just viewed. The form shows rectangular inputs with 1px off-white borders and zero radius.
  3. The enquirer confirms or changes the model of interest using the model select.
  4. The enquirer enters their name, email address, and optionally a telephone number, and writes a message.
  5. The enquirer selects the submit control. It enters a pending state while the request is in flight.
  6. On acceptance, the form is replaced by a confirmation panel stating that the enquiry has been received and that the brand's sales channel will respond.
  7. The brand's sales channel — a non-persona participant — receives an enquiry record containing the enquirer's name, email, telephone, model of interest, message, and submission timestamp, and responds outside the product.
  8. Failure path: if submission fails, the form retains every entered value and an inline message states that the enquiry could not be sent. The submit control returns to its active state.
  9. Recovery: the enquirer resubmits without re-entering any data.
  10. Continuation: the enquirer returns to Models or Model Details, or leaves the site.
Page 11 of 17

Flow 3 — Existing Owner / Service Customer: find ownership guidance and raise a service request

  1. The owner opens Ownership from the top navigation or the footer.
  2. Ownership renders its editorial sections with numbered eyebrows ("03 — Ownership") and a 24px red rule to the left of each. Service and maintenance guidance and ownership support information are presented in columns 2–7 or 7–12.
  3. The owner reads the guidance section applicable to their need.
  4. The owner moves to the service request form and enters their name, email address, telephone number, vehicle model, and a description of the service needed.
  5. The owner selects the submit control. It enters a pending state while the request is in flight.
  6. On acceptance, the form is replaced by a confirmation panel stating that the service request has been received.
  7. The brand's service channel — a non-persona participant — receives a service request record containing the owner's name, email, telephone, vehicle model, and service description, and actions it outside the product.
  8. Failure path: if submission fails, the form retains every entered value and an inline message states that the request could not be sent.
  9. Recovery: the owner resubmits without re-entering any data.
  10. Continuation: the owner continues reading ownership guidance, returns to Landing or Models, or leaves the site.
Page 12 of 17

6. Visuals, Colors and Theme

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

RoleTokenHex
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-hairlinergba(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.

  • Headings: Playfair Display, 400–500 weight, leading 0.94–1.0, tracking -0.02em. Sentence case for editorial headlines; all-caps only for section eyebrows at 12px with +0.18em tracking.
  • Body and UI: Jost, 300/400, 16–18px, 1.7 leading, 62ch measure.
  • Spec numerals: Jost 400 with tabular figures.
  • Scale: 1.333 modular — 12 / 14 / 18 / 24 / 32 / 44 / 64 / 96 / 128px.
  • Hero display: 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.

Page 13 of 17

7. Signature Design Concept

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.

Page 14 of 17

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief.

  • Focal subject. The low-key side-profile vehicle photograph, bled off the right and bottom edges of the viewport, occupying the right seven columns at full height.
  • Input → transformation → outcome thesis. On load, the hero image scales from 1.06 to 1.00 over 1200ms while the three-line headline and its racing-green bleed block lift up by 24px under a 600ms 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.
  • Motion vocabulary. One gesture per view: a 600ms mask reveal lifting type and imagery by 24px on enter. Model list rows crossfade their photograph on hover with a 300ms opacity swap and a 1px red rule sliding in from the left. The hero image scales 1.06 → 1.00 over 1200ms on load. No bounce, no parallax scroll-jacking, no marquees.
  • Composed first frame. Near-black ground; the headline's three lines stacked left with the third line inside a solid racing-green block bleeding to the viewport edge; the 1px off-white rule beneath; the three caps links with a red 2px underline on the active one; the vehicle photograph cropped by the viewport on the right; the column-7 hairline running the full height.
  • Reduced-motion state. Under prefers-reduced-motion, all reveals become instant opacity changes and the hero holds at scale 1.00. The composed first frame is otherwise identical.
Page 15 of 17

9. Non-Functional Requirements

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

Page 16 of 17

10. Tech Stack

  • Frontend: React, rendered as a custom first-party web application with five destinations. (provenance: basic_default — not specified by user.)
  • Backend: Python with FastAPI, serving model content and receiving enquiry and service request submissions. (provenance: basic_default — not specified by user; required by the accepted enquiry and service-request behavior.)
  • Storage: A relational database for model content and submitted enquiry and service request records. (provenance: basic_default — not specified by user.)
  • Containerization: Docker with docker-compose for local and single-host deployment. (provenance: basic_default — not specified by user.)
  • Kubernetes: Not included. Deployment does not require orchestration at this scope. (provenance: basic_default — not specified by user.)

11. Assumptions and Constraints

Assumptions.

  • A-1. The five destinations — Landing, Models, Model Details, Enquiry, and Ownership — are the complete current information architecture. (narrow, labeled assumption.)
  • A-2. Model content (names, specifications, imagery) is supplied by the brand and served by the application; the product does not author it. (narrow, labeled assumption.)
  • A-3. The brand's sales and service channels respond to submitted enquiries and service requests outside the product; no in-product response thread exists. (narrow, labeled assumption.)
  • A-4. The reference site's terminology is used only as domain context. No Bentley-specific content, model names, copy, or imagery is reproduced. (narrow, labeled assumption.)

Constraints.

  • C-1. The product is a public-facing brand website. No account or authentication requirement was specified, and none is introduced. (explicit.)
  • C-2. No explicit page count, participation boundary, or exclusion was stated by the user beyond the above. (explicit.)
  • C-3. The reference at bentleymotors.com is inspiration-only for domain context, structure, and visual presentation. Its content is not copied. (explicit.)

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.

Page 17 of 17

12. Glossary

  • Model — A vehicle in the brand's lineup, presented on Models as a full-bleed photography band and on Model Details as a specification and imagery destination.
  • Spec triad — The three label/value pairs shown per model band on Models: power, 0–60, and range.
  • Spec row — A single hairline-separated label/value pair in the scrolling column on Model Details.
  • Enquiry — A submitted contact request from a Prospective Owner / Enquirer, carrying name, email, optional telephone, model of interest, message, and submission timestamp.
  • Service request — A submitted request from an Existing Owner / Service Customer, carrying owner name, email, telephone, vehicle model, and service description.
  • Column-7 spine — The persistent 1px vertical hairline at grid column 7 that divides editorial type from vehicle imagery across the site.
  • Numbered eyebrow — A section-transition label in Jost caps with a 24px red rule to its left, e.g. "01 — Models".
  • Sales channel — The non-persona participant that receives submitted enquiries and responds outside the product.
  • Service channel — The non-persona participant that receives submitted service requests and actions them outside the product.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open site root
Landing: Select Ownership
Ownership: Read service guidance
Ownership: Read ownership support
Ownership: Enter service request details
Ownership: 1. Submit service request
Ownership: Read receipt confirmation
Ownership: 2. Resubmit retained details
Models: Return to lineup

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open site root
Landing: Select Ownership
Ownership: Read service guidance
Ownership: Read ownership support
Ownership: Enter service request details
Ownership: 1. Submit service request
Ownership: Read receipt confirmation
Ownership: 2. Resubmit retained details
Models: Return to lineup