VÉLORA DESIGN SYSTEM / LIVING REFERENCE
A system for motion, trust and desire.
The source of truth for colour, type, interaction, component wiring and responsive behaviour across Vélora Motorhouse.
VERSION 1.0 / 04 SEP 2026 / OWNER: VÉLORA PRODUCT
SYSTEM STATUS
LIVE / NO-INDEX
28
Native components
45
Colour tokens
18
Responsive type styles
80
Component variants
01 / COLOUR AND MATERIAL
Carbon restraint. Volt intent.
Every swatch below is bound to the live project token. No decorative duplicates, no detached hex values.
Carbon / 950
Core canvas
Carbon / 900
Raised dark
Graphite / 700
Structural
Titanium / 400
Muted inverse
Pearl / 50
Soft canvas
Paper
Primary light
Volt / 500
Action
Focus / Ring
Keyboard focus
Available
Positive state
Reserved
Pending state
In transit
Transit state
Critical
Error state
02 / TYPOGRAPHY
Editorial character. Instrument clarity.
Forma leads with emotion; Acumin carries interface, data and trust. Every sample is bound to the live responsive preset.
Drive, distilled.
Objects of velocity.
Confidence in the details.
2024 Porsche 911 Carrera GTS
A considered collection of performance cars, presented with precision.
£78,950
03 / ACTION, BRAND AND STATE
Clear intent at every state.
These are live component instances. Update the source component and this page updates with it.
AVAILABLE
NEW ARRIVAL
RESERVED
IN TRANSIT
SOLD
Performance
24
Porsche
12
Archived
0
04 / FORMS AND INSTRUMENT DATA
Designed for confidence, not friction.
Labels, helper text, native field names and focus states remain connected to shared controls.
TEXT FIELD / DEFAULT
Used only to reply to your enquiry.
SELECT / DEFAULT
Choose a manufacturer.
CHECKBOX / CHECKED
VALUATION SUBMIT / DEFAULT
05 / INVENTORY SYSTEM
Discovery, proof and decision.
The Search Panel below is an illustrative component specimen. Live Inventory uses native search, availability, price and mileage fields connected to page variables and the Vehicles CMS list. Open Inventory to test filtering and reset.
VEHICLE CARD / STANDARD
SEARCH PANEL / ILLUSTRATIVE
Search panel specimen
Illustrative controls
We will only use this to reply.
Choose a manufacturer.
Choose a model.
Choose a body style.
Set your maximum budget.
INSPECTION / LIGHT
PAGINATION / DEFAULT
Vehicle dossier system
One CMS record, one reusable template. Enquiry Dossier composes the shared Button, Vehicle Price and Vehicle Status components. Editorial Media includes a native image lightbox. Equipment Item is fed by reusable Vehicle Features references.
Edit Vehicles for pricing, availability, editorial copy, images and the enquiry destination. Select Equipment references to reuse feature entries. Keep Demo Listing enabled for sample stock; it adds a visible disclosure and excludes that detail page from indexing. Images carry their own descriptions. Detail Photograph is optional.
Typography: existing Display, Body and Data styles remain the foundation. Heading/Item supplies compact semantic H3 card titles. Rich Text/Inverse H1–H6 and Body supply token-linked CMS typography on charcoal backgrounds. Use presets, not per-page text overrides.
AVAILABLE
VLR–911–042
2024 Porsche 911 Carrera GTS
£78,950
from £1,112/mo
48 months · £10,000 deposit
Reading
Demo listing. Prices and availability are illustrative; this is not a live offer.
Reference photography. Colour, model year and fitted equipment may differ.
A driver-focused example for the everyday journey and the road you take just because. This dossier brings the essential figures, equipment and next steps into one considered view.
Template demonstration only. Prices, mileage, availability and equipment are illustrative, not an offer for sale. Replace and verify this information before using the listing for real stock.
Availability changes the conversation.
Incoming vehicles ask about arrival. Reserved vehicles offer alternatives. Sold vehicles invite a similar-car enquiry. Every email link includes the vehicle name and reference. These are real instances, not detached mockups.
IN TRANSIT
VLR–DKR–077
2024 Porsche 911 Dakar
London
Demo listing. Prices and availability are illustrative; this is not a live offer.
RESERVED
DEMO–AMG–005
Mercedes-AMG GT
London
Demo listing. Prices and availability are illustrative; this is not a live offer.
SOLD
DEMO–VAN–009
Aston Martin Vantage
Manchester
Demo listing. Prices and availability are illustrative; this is not a live offer.
Visibility
LED lighting
Illustrative equipment entry. Confirm the fitted lighting package.
Everyday
Parking assistance
Ask for the exact sensors, camera views and assistance systems.
Technology
Navigation & connectivity
Confirm the navigation, phone integration and connected services.
Sell / Private Commission
Native layouts and shared actions. Enquiry: Vehicle → Contact → Review. Browser validation and value retention use a focused override; the last step opens an email draft, not an automatic submission. Questions, routes and process copy are maintained in their Sell CMS collections.
Edit questions in Sell Questions, routes in Sell Routes, and the process in Sell Process. The Sell page renders the same native components shown here.
01
Start with the details
Tell us about your vehicle.
06 / ACCESSIBILITY AND HANDOFF
Premium is a behaviour.
The system is only complete when it works with keyboard, touch, assistive technology and reduced motion.
01
Keyboard
Visible focus and logical order.
02
Contrast
Readable text and clear boundaries.
03
Semantics
One H1, real controls, named landmarks.
04
Motion
Purposeful, restrained, reducible.
Finance, considered together.
Native Starting Point and Direction components. Desktop and compact variants use shared typography, colour tokens and Button instances. Finance Principles is the editable CMS source. Enquiries open an email draft; no automatic submission or approval is implied.
Studio & Contact. One shared system.
Use the native Viewing Invitation on Studio and Contact. Its title, description, action and destination are editable controls. Choose Compact below desktop; keep the photograph illustrative and the action relevant.
Standards · Section: studio → Sell/Step · Editorial Light
Direct enquiry. Clear expectations.
The Enquiry Panel exposes title, description, email address, action label and destination. Keep the displayed email and mailto destination in sync. This is an email handoff, not a submitted form. Contact Routes manages the three linked service rows.