Design Library
The mark
The WMG® monogram and wordmark lockup are the signature of every touchpoint. Use the supplied files only and never redraw, recolor or rearrange them.
Keep clear space on every side equal to the height of the W in the monogram. Nothing enters that zone.
Monogram 24px tall on screen and 0.25 inches in print. Lockup 120px wide on screen and 1 inch in print.
White on black is the default. White on WMG® Red for accent moments. Black on white for print and light surfaces only.
Stretch, rotate, outline, add shadows, recolor outside the palette or place the mark on busy imagery without a dark scrim.
Black, white and one signal red
A restrained palette that lets the work lead. Red is used sparingly so that when it appears, it means something.
The foundation of every page. Backgrounds, sections and large surfaces.
Primary text, logo, icons and hairline structure on black.
The brand accent. Primary actions, the light path, highlights and moments that need attention.
Pressed and hover state for red buttons. Never used as a standalone color.
Black carries the page. White carries the message. Red carries the action. If a layout feels loud, remove red before adding anything else.
On screen, WMG® Red renders in Display P3 so it matches Photoshop at full saturation on wide gamut displays; other screens fall back to #FF2800. Set Photoshop and Figma documents to Display P3 when designing for web. Pantone references are the nearest Solid Coated matches by Delta E 2000. Always proof against a physical Pantone guide before print production.
White text on WMG® Red passes only at large sizes, 24px regular or 19px bold and above. Keep button labels and body copy on red at that size or switch to black backgrounds.
Two families, one voice
BDO Grotesk does the talking. DM Mono labels, tags and annotates. Together they read as precise, modern and engineered.
The site sets text at 350 through the variable weight axis, which reads lighter and more refined than a standard regular. Buttons and navigation step up to 400 for legibility at small sizes.
Sizes come from two Webflow variables: a 15px base unit and a 1.26 scale factor on desktop and tablet. Below 768px the factor drops to 1.19, and below 480px the base drops to 14px. Line heights run from 1.2 on H1 to 1.5 on body copy.
Drawn on a dot grid
Service icons are built from dots on a fixed grid, echoing the precision of circuitry and data. Interface icons stay quiet and functional.
Red tags mark the icons live under the home page hero. Display service icons at 24px or exact multiples such as 48px so dots stay crisp. Never mix dot icons with line icons in the same group.
A 12 column system on a 24px rhythm
Every measure on the site is a multiple of one 24px unit. Consistent spacing is what makes a sparse black page feel intentional.
Section padding uses its own 96px base: 48px for tight sections, 96px standard and 192px for statement moments.
Reveal, never perform
Motion exists to guide the eye and confirm an action. It is quick to start, slow to settle and always respects reduced motion settings.
A red light travels the hairlines of the client grid row by row at 1500px per second and replays whenever the grid returns to view.
Built once, used everywhere
Buttons, links and form fields are Webflow components. Edit the component, never a single instance, so every page stays in sync.
Direct, confident, human
We write the way a trusted senior partner talks. Clear claims, plain words and no filler.
Say what changes for the client first. Process comes second.
Short sentences. Common words. No jargon unless the audience uses it daily.
No hyphens or em dashes in copy. No filler phrases. Always write WMG® with the registered mark.