Warm black
#0B0A07
Site background
Connects photography and text sections into a continuous visual backdrop.
← Back to portfolio
BrandingWeb designDevelopmentMarketingWaymark Garage2026
Waymark Garage - small parts, a distinctive brand
From the W mark to the parts catalogue: identity, website, and storytelling for a studio creating 3D-printed automotive solutions. Dark surfaces, a yellow accent, and real garage photography.
- Brand strategy and positioning
- Logo and mark design
- Colour palette and typography
- Information architecture
- Website design and development
- Product catalogue and Garage Notes
- Copywriting and inquiry flow
Project at a glance
Waymark Garage makes replacements, protection pieces, and small modifications when OEM parts are missing, weak, or overpriced. We built its brand and website around one principle: fitment on the real car. The site presents the process, two parts for the Honda Civic Type R FL5, and Garage Notes documenting product development.
Context & problem
Small parts can solve a real problem. Waymark Garage designs and prints automotive components when the factory solution is unavailable, expensive or needs improvement. The project brought the brand identity and website together around the part, its purpose and the work behind it.
Fitment on a specific car was the starting point. A customer needs to know whether a part fits, what it is made from and how it mounts. The site had to answer those questions while expressing the brand’s automotive character.
The current catalogue centres on two Honda Civic Type R FL5 products: fender rock guards and a MagSafe charger mount. Photography, WGM-001 and WGM-002 identifiers, and dedicated product pages give the offer a concrete structure.
The site leads from recognising a problem through the process and project documentation to a short brief. That journey accommodates both available small-batch parts and inquiries about custom projects.
Constraints
- A small workshop producing in short runs
- A technical offer that needs fitment and material information
- Available products and custom projects within one site
- Detailed content that also works on a phone
Strategic principles
- 01
Start with the car and the problem
The offer is organised by use: replacements, protection pieces, functional modifications and CAD prototyping. Technology appears in the context of a specific need.
- 02
Make the detail visible
Installed-part photography, named materials and specifications show what the customer gets. Each product page connects that information to its development story.
- 03
Show the process
The process page and Garage Notes explain the work: measuring, modelling, test prints and revisions after fitting.
- 04
Give the inquiry context
The recurring “Ask for a part” call to action leads to a form with space for the car, part or idea and a description of the problem.
Creative direction
Waymark Garage is built around attention to the small parts of a car. “Small parts. Important details. For cars we love.” connects practical purpose with enthusiasm for cars. Dark surfaces, large type and automotive photography set the mood; product images bring the story back to the actual work.
Brand character
- Precision
- Fitment
- Automotive
- Craft
- Practicality
Tone of voice
The language is direct and specific. Descriptions cover the vehicle, mounting, material and intended use. Short headlines give the brand energy; longer copy helps a visitor assess the product before getting in touch.
What we deliberately avoided
- Generic quality claims
- Technology without a use case
- Mass-production promises
- An interface overloaded with decoration
Logo story
A geometric “W” forms a compact mark from sharp, directional shapes. It echoes the name Waymark, a point of orientation, and fits the brand’s technical character. The standalone symbol keeps the identity recognisable where the full wordmark would take too much room.
Initial
The letter “W” connects the symbol directly to the brand name.
Direction
The pointed ends recall arrows and route markers.
Precision
Repeated angles and a clear outline reinforce the technical character of the identity.
The monochrome form works on light and dark backgrounds. The symbol and full wordmark provide two options for different proportions and sizes.
Colour system
Warm black and off-white form the foundation of the current site. Yellow highlights buttons and selected details, guiding the eye through the dark, photographic layout.
Off-white
#F7F7F2
Headings and primary content
Gives text a clear contrast against dark surfaces.
Signal yellow
#FFC400
Buttons and highlights
Identifies key actions, including “Ask for a part” and product inquiries.
Steel grey
#7A7A75
Labels and metadata
Separates information levels without expanding the palette.
Typography
Barlow Condensed gives headlines strength and compactness. DM Sans carries descriptions, forms and specifications.
Barlow Condensed
700 · 800
Headings and display copy
Small parts. Important details.
Condensed proportions make room for large, compact blocks of text alongside photography.
DM Sans
300 · 400 · 500
Descriptions and technical information
Modelled around real fitment, tolerances and OEM surfaces.
A neutral design provides a quiet foundation for longer descriptions and product specifications.
User flow
The home page establishes context, while dedicated pages provide depth. Visitors can go straight to a product or first explore how the workshop works.
- 01
See what gets made
The hero combines the brand headline, car photography and a link to a specific product.
- 02
Find your use case
Four “What we solve” categories help visitors relate their own problem to the offer.
- 03
Understand the work
Four workflow stages run from understanding the problem to refining the part before release.
- 04
Inspect a specific part
The catalogue leads to photography, specifications, mounting information and the product story. Garage Notes add further documentation.
- 05
Send a brief
The form collects contact details, the car, part or idea, and a description of the problem.
UX/UI decisions
- Problem
- The technology alone says little about the value of the service.
- Decision
- The offer is grouped by use and presented alongside specific parts.
- Rationale
- The customer’s frame of reference is their car and the problem they need to solve.
- Impact
- Replacements, protection pieces and modifications each have a recognisable place in the offer.
- Problem
- A part photograph does not answer fitment and installation questions.
- Decision
- Product pages combine part and installation photography with the vehicle, material, specifications and sale status.
- Rationale
- The information needed to assess a product should be available in one place.
- Impact
- WGM-001 has a dedicated page covering PETG / ASA, mounting and the first production batch.
- Problem
- Two catalogue entries cannot show the full scope of the workshop’s work.
- Decision
- The catalogue is supported by the workflow, Garage Notes and a route to a custom project.
- Rationale
- The process explains how existing work relates to future commissions.
- Impact
- The site presents available products while making room for new customer needs.
- Problem
- Detailed technical content needs a clear hierarchy.
- Decision
- Large headings, labels, specification grids and yellow buttons distinguish the story, technical details and actions.
- Rationale
- Different information scales support both scanning the page and reading in depth.
- Impact
- Each product follows the same order: purpose, specifications, photography, story and contact.
Key interface sections
The mobile layout retains the large headline and a clear route to the offer.
From design to delivery
The site structure supports a growing catalogue: products, the process and notes have dedicated pages, while shared navigation leads to an inquiry.
- Dedicated product URLsEach part can be opened and shared directly with its specifications and photography.
- Consistent catalogueWGM identifiers, vehicle information, specifications and product status create a repeatable structure for future entries.
- Garage NotesDedicated articles document projects and expand on the concise information found on product pages.
- Project brief formFields reflect a real part inquiry: contact details, the car or idea, and a description of the problem.
What we delivered
- 01Visual identity with a wordmark and standalone symbol
- 02Colour palette, typography and brand messaging direction
- 03Responsive home page presenting use cases and the process
- 04Catalogue and detailed WGM-001 and WGM-002 product pages
- 05Garage Notes documenting the work
- 06Inquiry form for a part or custom project
The key decision
The strongest part of this story is specific: a part, a car and the problem addressed by the product design. The identity gives them a shared character, while the site structure leads from interest into detail. The result is a coherent brand website with a two-product catalogue and a clear path to an inquiry about the next part.
Live site
Waymark Garage
Next projectOTC S.A. - website redesign for a software company
Modernising the heavily outdated website of a Polish software company - a clean, conversion-focused site presenting their database products.
LET'S TALK
Let's talk about your project
Have a technical offer that deserves a clearer presentation? Let’s talk about your project.