Website

WEBSITE

rpgmotor-works.com

It records how the site looks, reads and is organized, so new pages, campaign landing pages and partner content stay consistent with it.

---

1. Purpose and scope

This page describes the website as it is built today. It is a working reference for the people who add to it: the Digital Marketing team, product managers who write product pages, regional teams preparing local content and the agencies that build campaign landing pages. If the site and this page disagree, tell Digital Marketing so one of them gets fixed.

It covers three areas:

• Visual style: layout, color, imagery, components, accessibility and type (Sections 2 and 3).
• Structure: the complete site map with page paths (Section 4).
• Voice: how the site speaks to visitors and what it gives them (Section 5).

Brand-wide rules for the logo, color and type live in their own sections of this guide and take priority.

All type values in Section 3 come from the live stylesheets. If a page shows something different, the stylesheet is right and the page needs fixing.

---

2. Site style

2.1 Overall character

The site looks like the company's machines: Stator Navy surfaces, plenty of white space, square edges and a single red accent. Every page is built from a small set of components on a 12-column grid, so a servo product page, a careers page and a press release share the same rhythm. Nothing is there for decoration. Each panel either carries information or points the visitor to the next step.

Product photography does most of the visual work. Motors appear cut out on white or installed in real machines, never as abstract renders floating in space. Headlines are short and set large in Barlow, and supporting copy stays to a few lines per block so a visitor can scan a page in seconds.

2.2 Layout system

2.3 Color

The site uses the core brand palette with two firm habits: Stator Navy and white carry the page, and RPG Red is saved for the one thing on screen we most want a visitor to click.

Red should cover no more than about 15 percent of any screen. Never set body text on a red background, and never use Data Blue or Signal Yellow for decoration, section fills or buttons.

2.4 Imagery and motion

• Product photos: shot on white at a three-quarter angle with the shaft pointing left and the same lighting setup across families. Delivered as WebP with a JPEG fallback, 2,400 px on the long side.
• Application photos: real installations in plants, labs and vehicles, with people at work where possible. No stock images of handshakes, glowing circuit boards or generic factories.
• Illustrations: line drawings in Stator Navy with a single red highlight, used for cutaways and how-it-works diagrams.
• Icons: the RPG line icon set, 2 px stroke on a 24 px grid, in Stator Navy or white. No filled or multicolored icons.
• Video: hero loops run muted, under 15 seconds and under 4 MB, with a visible pause control. Longer videos open in a player with captions.
• Motion: transitions of 200–300 ms with an ease-out curve, used only to show a change such as a menu opening or a tab switching. All motion respects the visitor's reduced-motion setting.

2.5 Interface conventions

2.6 Accessibility and compliance

The site targets WCAG 2.2 level AA on every template. In practice that means a contrast ratio of at least 4.5:1 for body text, every function reachable by keyboard with a visible focus ring (2 px Stator Navy with a white offset, or white on dark panels), alt text on all meaningful images, captions on video and touch targets of at least 24 by 24 px. New templates are tested with a screen reader before launch.

As a German company with many EU visitors, we follow GDPR. Analytics and marketing cookies load only after a visitor opts in through the consent banner, which offers accept and reject with equal weight. Forms say why we collect data and link to the privacy policy. The Imprint page is a legal requirement in Germany and stays linked from every footer.

---

3. Typography

3.1 Character of the type

The site is set entirely in Barlow, the brand typeface, served from our own servers as WOFF2 files rather than from a third-party font service. Barlow's slightly rounded, industrial shapes suit the product: it reads like the lettering on a machine nameplate but stays easy on the eye at text sizes. Hierarchy comes mainly from weight contrast, ExtraBold and Bold headlines against Regular and Light text, rather than from color.

Barlow Condensed SemiBold, in caps with wide tracking, is kept for small labels: section kickers, product family descriptors and spec table headers. If Barlow fails to load, the font stack falls back to Arial and then the system sans-serif.

3.2 Type hierarchy

3.3 Capitalization and writing conventions

• Headlines, buttons and navigation use sentence case: "Request a quote", not "Request A Quote".
• All caps only in Barlow Condensed labels (kickers, descriptors, table headers), never for sentences or headlines.
• Product families keep their own capitalization: ServoPrime, MicroX, HVAC ProDrive. eMotion keeps its lowercase e, even at the start of a sentence.
• Write the company name as RPGMotor Works with ® on its first prominent use on a page. Never RPG Motor Works, RPG-Motor Works or RPGMOTOR WORKS in running text.
• Use numerals for all measurements, a space between number and unit (40 Nm, 3,000 rpm) and an en dash for ranges (0.1–40 Nm).

3.4 Checking type in the browser

When you build or review a page, check the type against the table above rather than judging by eye. The developer tools in any desktop browser show the exact values in under a minute.

• Right-click the text, choose Inspect, open the Computed tab and read font-family, font-size, font-weight and line-height.

To see every font file the page actually loaded:

• Open the Network tab, filter by Font and reload. You should see only Barlow and Barlow Condensed WOFF2 files served from rpgmotor-works.com.

If you find another family, a font loaded from a third-party domain or a size that isn't in Section 3.2, send the page URL and a screenshot to marketing@rpgmotor-works.com. Third-party font loads are also a privacy issue, so they are fixed first.

---

4. Complete site map

The main navigation has six primary sections, plus global and utility pages linked from the header and footer. Paths below are for the English site. The German site mirrors them under /de/ with translated slugs where a page has been localized, for example /de/produkte/servo/servoprime/. Use these paths when linking from campaigns, emails and printed QR codes, and add UTM parameters instead of creating duplicate pages.

4.1 Top-level structure

4.2 Products

4.3 Industries

4.4 Service & support

4.5 Resources

4.6 Company

4.7 Global and utility

---

5. How the site speaks to visitors

5.1 The voice in one paragraph

The site sounds like a senior applications engineer who also knows how to sell: sure of what the motors do, exact about the numbers and quick to get to the point. It starts with the visitor's problem, such as a conveyor that needs more torque in less space or a robot joint that has to lose weight, then shows the product that solves it and backs that up with a spec, a test result or a real application. It avoids claims it can't prove and explains a technical term the first time it appears.

5.2 Defining characteristics

5.3 Who it is written for

The site serves three groups. Most pages are written for the first, with a clear path for the other two.

• Design and applications engineers at machine builders and vehicle makers, who need specs, CAD, sizing tools and someone technical to talk to.
• Purchasing, maintenance and plant managers, who care about lead times, spare parts, service coverage and total cost of ownership.
• Distributors, channel partners and our own 350 sales reps, who use product pages and downloads as sales material in front of customers.

Job seekers, journalists and suppliers are served by their own pages under Company.

5.4 What the site provides

5.5 Summary and next steps

The site does its main job well. An engineer can find a motor, check the numbers and download what they need without registering, and the visual system holds together across product, industry and company pages. The strongest pages are the ServoPrime and RoboTorq family pages, which pair clear spec tables with real application photos and a single next step. The weakest are the older industry pages, where long paragraphs and generic stock photos are still waiting to be replaced.

Priorities for the next twelve months: move the remaining industry pages to the current templates, bring the German site to full parity with English (about 80 percent of pages are localized today), add in-browser CAD previews and get median product page weight below 1.5 MB. Every change goes through the same review: Digital Marketing checks structure and content, Brand checks visuals and naming.

Questions about this page, or found a page that doesn't follow it? Contact Sofia Romano, Digital Marketing Lead, at marketing@rpgmotor-works.com. Brand questions go to brand@rpgmotor-works.com.