Design idea: the journey and the fitting table. A graphite showroom opens onto the car in the Jura; chalk workshop chapters then show the luggage, personal fitting and serviceable parts that make its touring proposition tangible. Newsreader carries the invitation, while Manrope carries the practical detail.
Read with design.jpg, a complete 1440 × 4366 px desktop concept image. The image is an art-direction reference, not a production page asset: build all copy as selectable HTML, using the exact copy and font metrics below. Content determines the implemented page height; never compress text or fix section heights to reproduce the overview’s height. This specification resolves the raster mockup’s approximations of type and spacing.
Sources: ../../BRIEF.md, profile.md, ../../research/design-guidelines.md and ../../research/accessibility.md. The house, people and vehicle are fictional. Development targets and proposed ownership commitments must retain their qualifications.
min(100% - 160px, 1280px). At 1440 px this gives 80 px outer margins, 1280 px content and 84.67 px columns. On narrower desktop screens, interpolate outer margins from 32 px at 1024 to 80 px at 1440. Above 1440, centre the 1280 px content.aspect-ratio: 3 / 1. Other image ratios are listed below. No fixed text-box heights; min-width: 0 on grid children; use overflow-wrap: anywhere for contact strings.Use precisely these five solid tokens. Photographic material colours are not UI tokens. Do not sample a photograph for a text background, apply opacity to text, or place copy on photography.
| Token | Hex | Role |
|---|---|---|
| Graphite | #171B1D |
Showroom sections, navigation and footer; all primary text on chalk; light-theme button ink and borders |
| Chalk | #F1EEE7 |
Workshop sections; all primary text on graphite; dark-theme button ink or fill |
| Mineral silver | #AFB8B9 |
Secondary text, captions, ledgers and functional rules on graphite only |
| Fired clay | #80543F |
Underlined links, eyebrows, field borders/errors and focus rings on chalk only |
| Pale brass | #D7B98E |
Focus rings and hovered links on graphite only; below 5% of page area |
Exhaustive permitted text/background combinations, including hover, focus, error and disabled states:
| Text | Background | Contrast | Used for | WCAG 2.2 AA normal text |
|---|---|---|---|---|
Chalk #F1EEE7 |
Graphite #171B1D |
14.97:1 | Dark-section headings/body, nav, default dark links, outline-button labels | Pass |
Mineral silver #AFB8B9 |
Graphite #171B1D |
8.57:1 | Dark captions/helpers, secondary navigation, disabled text | Pass |
Pale brass #D7B98E |
Graphite #171B1D |
9.27:1 | Dark links on hover | Pass |
Graphite #171B1D |
Chalk #F1EEE7 |
14.97:1 | Light headings/body, labels, filled dark-theme buttons, outline light-theme buttons | Pass |
Fired clay #80543F |
Chalk #F1EEE7 |
5.56:1 | Light links/eyebrows/errors/helpers and disabled text | Pass |
Ratios calculated from the exact sRGB values using WCAG relative luminance and (Llighter + 0.05) / (Ldarker + 0.05), rounded to two decimals. All pairs exceed 4.5:1 even for the smallest specified type; body copy always uses the 14.97:1 primary pairing. Reverse primary colours for button hover fills; this introduces no additional pair.
Functional non-text contrast: silver rules on graphite 8.57:1; graphite borders/diagram on chalk 14.97:1; clay borders/focus on chalk 5.56:1; brass focus on graphite 9.27:1. Diagram strokes have a 1 px minimum rendered width. Use a 2 px outer focus ring, separated from the component by a 4 px gap in the local section background: brass on graphite, clay on chalk. The gap keeps the ring distinct from either button fill. In forced-colours mode use the system Highlight outline.
Never use silver or brass as text on chalk, or clay as text on graphite. Selection uses chalk on graphite within light sections and graphite on chalk within dark sections. Do not introduce unlisted hover colours or semitransparent fills.
Google Fonts: Newsreader 400, normal, for editorial headings and large specification values; Manrope 400/500, normal, for everything functional. Load only these weights with display=swap; Newsreader uses optical sizing. Fallbacks: Georgia, serif and Arial, sans-serif, respectively. Keep the root at the user’s browser default; the px below are design values at a 16 px root and must be implemented in rem. No weight below 400 or synthetic bold.
| Role | Family / weight | Desktop size / line-height | Mobile size / line-height | Letter spacing |
|---|---|---|---|---|
| H1 | Newsreader 400 | 80 / 84 px | 40 / 44 px | -0.02em |
| H2 | Newsreader 400 | 48 / 52.8 px | 32 / 38.4 px | -0.02em |
| H3 / appointment office | Manrope 500 | 20 / 28 px | 20 / 28 px | 0 |
| Large figures | Newsreader 400 | 48 / 52.8 px | 32 / 38.4 px | -0.02em |
| Body and lead | Manrope 400 | 18 / 28.8 px | 18 / 28.8 px | 0 |
| Navigation, buttons, field labels | Manrope 500 | 16 / 24 px | 16 / 24 px | 0 |
| Captions, helpers, legal, ledger labels | Manrope 400 | 16 / 25.6 px | 16 / 25.6 px | 0 |
| Eyebrows / chapter labels | Manrope 500 | 14 / 21 px | 14 / 21 px | +0.14em |
Use fluid heading sizes between mobile and desktop, capped at the endpoints. At 320 px permit normal word wrapping; the H1 can reduce to 36 / 40 px if needed without shrinking body copy. Uppercase only the eyebrows and wordmark, not buttons. Use tabular lining numerals for every measurement. No forced <br> in body text; desktop art-directed headline wraps are optional and must disappear on mobile. The mockup’s fitted logotype is supplied as artwork, not a third web font.
The eight numbered stories below are the complete main-content order. The unnumbered arrival is followed by editorial chapter labels 01–07; these labels do not replace semantic headings. main#main contains one H1 and seven H2s. Set lang="en" and page title “Veyravel 01 — Made for the distance between places.”
#arrivalPurpose: introduce the house and its single car, with a plain account of what is offered and one invitation.
Layout: graphite. Above the photograph, H1 spans columns 1–7; description/action spans columns 9–12. Both sit on the solid background. The house wordmark appears in the navigation. After the text row, leave 48 px then show the full-width 3:1 profile plate.
Exact copy:
Image: hero-profile.webp. Original graphite two-seat fastback, full side profile, both wheels visible, on wet tarmac beside pale limestone in overcast Jura daylight. No badges, text or familiar manufacturer styling. Alt: “Graphite Veyravel 01 in side profile beside a limestone wall, with wet Jura roads and cliffs beyond.”
Mobile: headline, description, action, helper, then image. Use the separate 4:3 hero-profile-mobile.webp crop to keep the complete car visible; do not crop the wheels. The action may wrap to two lines and must grow vertically.
#touringPurpose: show the utility of the two-person touring package through an actual loaded compartment.
Layout: chalk. Loaded-car photograph columns 1–7, 4:3 ratio. Text/ledger columns 8–12. Use a semantic dl with three individually ruled rows; values and labels stay in the same row until space requires a wrap.
Exact copy:
Image: touring-luggage.webp. Camera at the open rear hatch, both seats beyond the luggage; exactly two fitted cases and two soft weekend bags, plausible compartment depth. Alt: “Open rear hatch showing two fitted cases and two weekend bags arranged behind the 01’s two seats.”
Mobile: text and ledger first, image below. Match this reading order in the HTML and position the image left on desktop using named grid areas. No horizontal specification table.
#fitPurpose: make the fitting process personal and specific.
Layout: graphite. Text columns 1–5; column 6 empty; portrait columns 7–12. Use a 4:5 portrait in the implementation, with attention on the maker’s face, hands, wool seat and adjustment mechanism. The overview shows a tighter crop of this scene.
Exact copy:
Image: fitting-portrait.webp. A fictional maker kneels beside the open driver door adjusting seat support. Show tactile wool upholstery, reach-adjustable steering and physical controls. Alt: “A maker adjusts the wool driver’s seat support beside the open door, with steering wheel and physical controls visible.”
Mobile: text, detail, portrait and caption; 4:5 portrait retained. Never place text over the portrait.
#materialsPurpose: connect named materials to the parts they become and show how assembly permits replacement.
Layout: chalk. Heading/body across columns 1–9, followed by a 32 px gap and two figures: samples columns 1–6; assembly columns 7–12. Both frames 16:9 with square edges. This is a static pair, not a carousel.
Exact copy:
Images: materials-worktable.webp, rough graphite wool, warm brown leather contact material, cut satin aluminium with visible edges on a limestone worktable. Alt: “Graphite wool, brown leather and satin aluminium samples laid together on a stone worktable, their unfinished edges visible.” assembly-controls.webp, hands fastening a replaceable satin aluminium climate-control panel, physical knobs and screw heads visible. Alt: “A maker fastens a satin aluminium climate-control panel, showing physical knobs, component edges and accessible screw heads.”
Mobile: heading/body, samples/caption, assembly/caption; 32 px between figures. Keep each caption attached to its image.
#engineeringPurpose: distinguish development ambition from evidence that a buyer could inspect.
Layout: graphite, typographic ledger, no photograph. Heading/body occupy columns 1–9. Below, three equal stat groups each span four columns. Use visible silver rules and a dl, not cards or animated counters. Conditions and evidence controls span all twelve columns.
Exact copy:
Use two native details disclosures, collapsed initially. Their summary elements are the two controls visible in the image; add a decorative disclosure marker without changing their accessible names. Expanded text is exact:
Images: none. Do not fabricate a certification seal, test graph or downloadable report.
Mobile: stack all three stats, each with its label immediately adjacent in document order; horizontal separators replace vertical ones. Stack disclosure controls; expanded text flows in the page.
#ownershipPurpose: make service access visible and describe the scope and status of the support agreement.
Layout: chalk. Technical figure columns 1–7, 4:3 frame; copy columns 8–12. The diagram is a fine-line graphite isometric chassis study with battery access panel separated below and replaceable interior parts above. Technical labels are live HTML outside the SVG.
Exact copy:
Image: service-access.svg. Alt: “Exploded service-access study of the 01 chassis, battery access panel and removable interior components; explanation follows.” Keep the SVG itself free of baked-in small text; no claimed dimensions or repair sequence.
Mobile: heading/body, diagram, caption and text equivalent. Use this same DOM reading order on desktop with grid placement. Diagram remains full column width and secondary text must not become tiny to fit it.
#housePurpose: identify the founders, place and working practice behind the car.
Layout: graphite. Wide atelier photograph columns 1–7, 16:9; text columns 9–12. Alignment is deliberately offset from the previous chapter, with column 8 empty.
Exact copy:
Image: founders-atelier.webp. Two fictional founders at a material-covered worktable in the same limestone/steel workshop; the graphite coupe visible behind them. Alt: “Iria Veyravel and Lucan Esmeret at the material worktable inside their Jura atelier, with the graphite 01 behind them.”
Mobile: heading/body then image. Match this reading order in the DOM. Do not invent awards, production history or founder signatures.
#appointmentPurpose: explain the visit and let a reader prepare an inquiry without suggesting a booking or deposit has been accepted.
Layout: chalk. Road photograph columns 1–6 at 16:9; invitation columns 7–12. Under body, action/helper and direct contact sit side by side in the right half, separated by a 1 px graphite rule. The final invitation has 128 px desktop vertical padding.
Exact copy:
Image: jura-road.webp. Empty wet secondary road, stone parapet, overcast limestone gorge; no car needed. Alt: “A wet secondary road curves beside a stone parapet beneath pale limestone cliffs in the French Jura.”
Mobile: invitation, action/helper, contact block, road image. Replace the vertical contact divider with a horizontal rule. Email wraps; keep 44 px action targets and 18 px body copy at 320 px.
Action contract for all three appointment CTAs: use an actual link to mailto:appointments@veyravel.example?subject=Demonstration%20private%20appointment%20request&body=This%20is%20a%20demonstration%20draft.%20No%20appointment%20is%20booked.%0A%0AMy%20usual%20journey%3A%0AMy%20preferred%20visit%20dates%3A. It opens the visitor’s email application if configured; the site sends nothing. Preserve the exact visible label “Request a private appointment” in header, arrival and closing. Associate each helper using aria-describedby. The direct email link opens the same labelled demonstration draft. Keep the address selectable so it can be copied if no mail app is configured. A real monitored inbox and agreed service terms are production launch inputs; do not invent contact details.
Desktop: wordmark left, The 01, Making, Ownership, The House centred, appointment CTA right with Demonstration email draft below it. Map these links to #touring, #fit, #ownership, #house for this one-page showcase; do not create dead links to unbuilt pages. Wordmark links to #arrival, accessible name “Veyravel home”. First focusable link: “Skip to main content”, pointing to #main; hidden off-screen until focused, then displayed on an opaque chalk plate with graphite text and clay ring.
Default nav text chalk/graphite; hover keeps the same ink and adds a 1 px underline; focus adds the standard brass ring plus underline. Current location may use aria-current="location" and a permanent underline. All nav targets at least 44 × 44 px. No disabled nav items on the homepage; if a destination is unavailable, render silver noninteractive text with “Unavailable” and no href, without opacity.
Below 1024 px, put the wordmark above a full-width appointment link and an inline native details menu with summary “Menu”. It opens a vertical list in the document flow. No modal, focus trap or off-canvas overlay. Summary gets the same hover/focus treatment and announces its expanded state natively. At 320 px the appointment label wraps within its padded target.
Appointment links use button styling, not button semantics. Min-height 48 px, min-width 44 px, 16 px horizontal and 8 px vertical padding; allow multiline labels. Border 1 px, corners 0 px.
| Surface | Default | Hover / pointer active | Keyboard focus | Disabled, if ever needed |
|---|---|---|---|---|
| Graphite | Chalk label and border, graphite fill | Graphite label, chalk fill/border | Default or hover state plus brass outer ring with graphite gap | Silver label and dashed silver border on graphite; no opacity |
| Chalk | Graphite label and border, chalk fill | Chalk label, graphite fill/border | Default or hover state plus clay outer ring with chalk gap | Clay label and dashed clay border on chalk; no opacity |
No disabled appointment CTA in this design: the demonstration draft is available. For a future actual disabled action use native disabled on a button, with visible explanation “Unavailable”. Do not apply a fake disabled appearance to a working link. Focus indication appears immediately, never after the hover transition.
Body links are underlined from rest: chalk on graphite, clay on chalk. Hover increases underline thickness from 1 to 2 px; dark link ink may become brass, light link ink becomes graphite. Focus adds the local ring while preserving the underline. Disabled references are noninteractive plain text: silver on graphite, clay on chalk, plus “Unavailable”. Do not use colour alone to indicate disabled/current state. Give standalone links 44 px minimum height; inline prose links may retain their natural line box.
The evidence controls use native details/summary keyboard behaviour: Enter or Space toggles, focus stays on the summary, content remains inline, and no dialog opens. Use a CSS plus/minus marker hidden from assistive technology. They share link colours and focus states; native disclosure content works without JavaScript.
No form fields appear on this homepage. The authorised static action is the demonstration email draft; do not add a fake submission flow. Reserve the following tokens for a later appointment page so the component handoff covers inputs without adding a section to this design:
disabled, visible “Unavailable” helper; never fade the entire control.aria-invalid="true" and connect the message with aria-describedby; error state retains the focus ring. Required state must include visible “(required)” text.type="email", autocomplete="email"; name uses autocomplete="name". Permit paste and browser autofill; no placeholder-only labels, account requirement, CAPTCHA or custom date picker. Production submission needs a real endpoint and an accurate success state.Graphite, 64 px desktop / 48 px mobile padding. Logo left, same four navigation links in the same order, then Privacy, Accessibility, then Fictional house. Demonstration website. Silver legal text; chalk links. Contact information stays directly above it in the appointment section, in the same DOM position on future pages. Mobile stacks these groups with 24 px gaps and uses two columns only when each 44 px link target fits comfortably.
Privacy and Accessibility are native inline details summaries styled like the footer links; their expanded text appears below the footer row. This keeps both destinations useful in the static showcase without unbuilt pages. Exact text:
Footer hover/focus/disabled states follow the dark link rules above. Logo alt is “Veyravel”; decorative image-internal duplicate lettering, if any, must not generate a second accessible name. No newsletter, tracking banner, social icons or deposit flow is needed.
| Element | Behaviour | Duration / easing | Reduced-motion fallback |
|---|---|---|---|
| Story photographs | Optional one-time opacity reveal from 0.85 to 1 when entering the viewport; text stays visible | 600 ms, cubic-bezier(0.22, 1, 0.36, 1) |
Fully opaque, immediately visible |
| Link underline | Extend underline or change thickness on hover | 400 ms, same curve | Immediate underline change |
| Button fill and label | Swap both approved colours together immediately; a decorative underline may extend | Colour swap 0 ms; underline 400 ms, same curve | Immediate state change |
| Focus rings | Appear as soon as focus arrives | 0 ms | Same visible ring |
| Menus and disclosures | Native inline opening/closing; no height animation | 0 ms | Same native behaviour |
Content is visible by default, including without JavaScript. Any reveal enhancement must be isolated to photographs; never hide an entire section, heading or interactive control while waiting for an observer. No translation, parallax, autoplay, zoom, counters, smooth-scroll interception, custom cursor or automatic carousel. Native document scrolling remains intact.
Do not tween text or fill colours: interpolating between an inverted button’s two states would create low-contrast intermediate frames. Only underline geometry and photo opacity animate; all text/background combinations remain the audited solid pairs at every moment.
Under prefers-reduced-motion: reduce, disable all animation and transitions and use scroll-behavior: auto. Respond if the preference changes during the session. Hover styles must also work without hover-capable input; they convey no essential information that is absent from the default state.
Before acceptance, check keyboard order, visible rings, inline disclosures with JavaScript disabled, 200% text zoom, 320 px reflow, and text-spacing overrides (1.5 line height, 0.12em letter spacing, 0.16em word spacing, paragraph spacing 2em). Text must grow without clipping and the diagram must never force horizontal scrolling. These are implementation acceptance checks, not claims that a raster image establishes WCAG conformance.
The asset team will create the following files in clients/car/assets/. Sizes are export sizes, not fixed layout dimensions; photos are approximately 2× the largest intended display size. All photos must depict the same original coupe, fictional people and consistent workshop. No real brand names, logos, registration marks or manufacturer-specific control designs. All textual UI, captions, measurements and diagram explanations remain HTML.
| File name | Kind | Size in px | Format | What it shows |
|---|---|---|---|---|
veyravel-wordmark.svg |
logo | 360 × 48 viewBox | SVG | Original widely spaced VEYRAVEL wordmark; chalk on transparent, with a graphite colour variant implemented through currentColor inline use; no inherited real-world insignia |
hero-profile.webp |
photo | 2880 × 960 | WebP | Graphite two-seat coupe in complete side profile, wet tarmac, pale limestone wall and Jura cliffs; full-bleed 3:1 desktop plate |
hero-profile-mobile.webp |
photo | 1200 × 900 | WebP | Art-directed 4:3 view of the same location and complete car; both wheels and roof line retained |
touring-luggage.webp |
photo | 1600 × 1200 | WebP | Open rear hatch, exactly two fitted cases and two weekend bags, both seats visible beyond |
fitting-portrait.webp |
photo | 1200 × 1500 | WebP | Maker’s face and hands adjusting the wool driver’s seat; steering reach and physical controls visible |
materials-worktable.webp |
photo | 1280 × 720 | WebP | Wool, leather and satin aluminium samples with tactile cut edges on the atelier worktable |
assembly-controls.webp |
photo | 1280 × 720 | WebP | Hands assembling a satin aluminium climate-control unit, exposed fasteners and physical knobs |
service-access.svg |
icon (technical diagram) | 1600 × 1200 viewBox | SVG | Graphite fine-line isometric chassis, separated lower battery access panel, removable interior parts; transparent background, no raster text or repair instructions |
founders-atelier.webp |
photo | 1600 × 900 | WebP | Iria and Lucan at their worktable, limestone/steel workshop and same graphite coupe behind |
jura-road.webp |
photo | 1440 × 810 | WebP | Wet quiet secondary road with stone parapet beneath limestone cliffs; no text, road branding or vehicle required |
No separate monogram or texture is required: the wordmark is sufficient and the material photography supplies texture. Navigation, disclosure markers and underlines are native text/CSS; do not commission redundant icon files. The technical drawing uses non-scaling strokes so it stays legible at mobile width. Use width/height attributes, meaningful alt text as specified, srcset when smaller derivatives are available, eager loading for the hero and lazy loading for later photos. Hero should target at most 450 KB, mobile hero 200 KB and each other photo 250 KB, preserving visible material grain. Treat these as export targets, not reasons to blur critical details.
Implementation delivery remains static HTML, CSS and minimal JavaScript, without a build step or framework. Reference assets relatively from the future site as ../../clients/car/assets/<file>. Google Fonts is the only external resource request; email opens are explicit user actions. Never use design.jpg as the website’s background or a single image-of-text page.
Generated with the built-in image generation tool in ui-mockup mode; no CLI/API fallback. The selected complete image was saved to design.jpg and normalised to the requested 1440 px delivery width. Its original generated raster was 720 × 2183 px; the delivered 1440 × 4366 px file is a 2× resample, not newly resolved detail. The font choices, exact readable copy and accessibility states in this specification govern the production build. The full generation prompt follows for reproducibility.