One Bridge Road.
Three ways forward.
The working style guide for Marketing, Operations, and Business Systems. A shared identity, with a clear role for every discipline.
BRAND SYSTEM / VERSION 1.1 / SEPTEMBER 2026
01 / Brand architecture
A family. With distinct strengths.
Bridge Road is one connected practice with three clear entry points. Keep the BR mark consistent, then let each discipline’s color, typography, language, and examples do the differentiating.
Operations improves how work moves. Business Systems connects the tools and customer journey. Marketing creates a clearer path from attention to action. All three belong to Bridge Road Marketing LLC.
Manufacturers and industrial distributors
Less friction. More forward.
Connect the operational work: ERP, inventory, order processing, service knowledge, and the people who own each step.
Display: Archivo. Body + interface: Inter.
Voice: Precise, direct, grounded in the work.
Form: Square process sheets, clear lanes, 3–5px corners, and an orange top rule. Use geometry to show sequence, not decoration.
Imagery: Real workstations, products, process documents, and approved interface details. Show what enters, what changes, and who approves it.
Established SMBs, trades, eCommerce, and professional services
Make room for what’s next.
Connect the customer journey: CRM, accepted work, delivery, billing, reporting, and repeatable team habits.
Display: Fraunces. Body + interface: Inter.
Voice: Calm, human, clear about the next step.
Form: Roadmap folios with 20px top corners and 4px bottom corners. Use 7–12px corners for controls and cards, with purposeful grouping.
Imagery: Real teams and customer journeys, annotated briefs, shared views, and clean records. Warmth comes from people and clarity.
Established businesses ready to improve demand and conversion
Make the next move matter.
Connect positioning, websites, commerce, content, acquisition, conversion, and measurement around a useful customer promise.
Display: Inter. Body + interface: Inter.
Voice: Confident, creative, specific about customer value.
Form: Editorial layouts, campaign sheets, bold crops, 4–8px corners, and restrained yellow highlights. Give the offer room to lead.
Imagery: Approved product and interface captures, campaign concepts, and real customer contexts. Clearly label generated concepts and fictional examples.
02 / Identity
The BR signature.
The shared signature: BR, followed by a slash and the discipline name. Use the exact names Operations, Business Systems, and Marketing. The parent company name remains Bridge Road Marketing LLC in legal and copyright contexts.
One mark. Three clear destinations.
The tightly spaced BR is the recognizable anchor. The lighter descriptor adds the discipline without competing with it. Set both in Inter; a sub-brand’s display face never replaces the wordmark font.
On the web, use live text so the mark stays sharp, accessible, and lightweight. Give a linked mark a useful accessible name such as “Bridge Road Marketing home.”
| Property | Rule |
|---|---|
| BR letters | Inter 800; letter spacing −0.09em. Desktop navigation: 29px. Compact navigation: 26px. |
| Descriptor | Inter 500; letter spacing −0.03em. Desktop: 15px with a 9px gap. Compact: 11px with a 5px gap. |
| Clear space | Keep at least half the cap height of BR around the complete lockup. Increase space in large identity applications. |
| Minimum use | Keep the descriptor readable: 11px minimum on screen. At smaller sizes use BR alone, with the full brand name supplied accessibly. |
| Approved versions | Paper on the matching dark ink; dark ink on paper or white. A single-color reproduction uses the entire lockup in one color. |
| Avoid | Do not stretch, outline, tilt, add a drop shadow, change the slash, split BR across lines, or mix multiple accent colors within one lockup. |
03 / Palette
Color with a clear job.
Start with the matching ink and paper. Add the accent to focus attention on the action, the current step, or the important detail.
Working proportions
Use roughly 70% neutral surfaces, 20% supporting surfaces, and 10% accent as a starting point, not a rigid quota. Large accent areas need a specific purpose.
Readable accents
Use ink text on accent buttons. Avoid white text on orange, mint, or yellow. On light backgrounds, use dark ink for small text and reserve bright accents for decoration or larger elements with verified contrast.
Consistent meaning
Accent means emphasis, not automatically success. Pair status colors with text or icons. Do not use color alone to identify a brand, error, selected step, or action.
| Brand | Color pair | Calculated contrast | Use |
|---|---|---|---|
| Operations | #F4F2ED on #141B22 | 15.52:1 | Main text on dark |
| Operations | #141B22 on #EA6A0C | 5.43:1 | Primary button label |
| Operations | #EA6A0C on #141B22 | 5.43:1 | Accent text on dark |
| Business Systems | #F5F1E9 on #081712 | 16.33:1 | Main text on dark |
| Business Systems | #081712 on #3DCCA5 | 9.09:1 | Primary button label |
| Business Systems | #3DCCA5 on #081712 | 9.09:1 | Accent text on dark |
| Marketing | #F5F1E9 on #10101B | 16.76:1 | Main text on dark |
| Marketing | #10101B on #F2D13F | 12.56:1 | Primary button label |
| Marketing | #F2D13F on #10101B | 12.56:1 | Accent text on dark |
Ratios are calculated for the solid color pairs above; animated gradients and image overlays require separate checks. W3C’s contrast guidance specifies at least 4.5:1 for normal text and 3:1 for large text. A palette alone does not establish page conformance.
04 / Typography
A shared rhythm. A distinct voice.
Keep the shared reading experience simple. Inter carries body copy, navigation, labels, controls, and the BR signature across the family.
| Role | Desktop direction | Phone direction | Treatment |
|---|---|---|---|
| Operations display | Archivo 600–700 | Archivo 600–700 | Compact, clear, decisive. Avoid ornamental italics. |
| Business Systems display | Fraunces 600–700 | Fraunces 600–700 | Use a short italic phrase sparingly to express forward movement. |
| Marketing display | Inter 700–800 | Inter 700–800 | Strong editorial contrast, direct headlines, restrained yellow emphasis. |
| H1 | 64–82px; line height 1.03–1.08 | 44–52px; line height 1.05–1.12 | One H1. Usually 8–15 words or fewer. No fixed height. |
| H2 | 36–54px; line height 1.1–1.2 | 30–38px; line height 1.15 | One idea per section; balanced line lengths. |
| H3 | 22–28px; line height 1.2–1.3 | 21–25px | Describe the actual topic or deliverable. |
| Body | 17–18px; line height 1.6–1.75 | 16–18px; line height 1.6–1.75 | Aim for 45–75 characters per line. |
| Labels / supporting text | 11–13px; line height 1.5 | 11–13px; line height 1.5 | Use sparingly. Never shrink essential offer details to fit. |
05 / Layout + components
Make the useful thing easy to find.
A shared rhythm
Use an 88% content width capped at 1280px. Start with an 8px spacing scale: 8, 16, 24, 32, 48, 64, and 88. Desktop section padding usually falls between 64 and 88px; phone sections use 48–56px.
Use two columns for explanation plus evidence and three columns for genuinely parallel choices. Collapse to a single column when content no longer reads comfortably. Do not make mobile users pan sideways to read ordinary content.
Bring the promise forward
Keep the audience line close to the navigation. On the new brand pages, top-align the headline with the document preview instead of centering it against the card’s full height. Place the primary action and useful proof immediately after the introduction.
Differentiate problem and solution sections with background, composition, and content. A diagnostic section names real symptoms; a solution section shows the trigger, output, owner, and exception path.
| Element | Direction |
|---|---|
| Buttons | Minimum 44px touch area; typically 52px high. One primary action per decision point. Use verbs such as “Start my audit” or “See what you receive.” |
| Cards | Use cards to group a coherent choice, deliverable, or record. Let height follow content. Decorative card grids should not replace a readable story. |
| Forms | Persistent visible labels, meaningful required fields, clear errors, keyboard focus, and an honest submission result. Keep request forms distinct from paid checkout. |
| Tables and diagrams | Use semantic headers and a readable narrow-screen treatment. Show owners and exceptions, not just arrows. Label illustrative data. |
| Footer | Show the brand, related disciplines, contact route, legal links, and copyright. Put “Brand style guide” and “Accessibility” near copyright information. Each site links to its own accessibility statement. |
06 / Language
Specific beats spectacular.
Sound like a capable colleague who understands the work. Start with the customer’s problem, explain the useful next move, and show what the customer receives.
| Use | Instead of |
|---|---|
| “Find the handoffs slowing your team down.” | “Unlock limitless AI-powered transformation.” |
| “A draft your team can review before sending.” | “AI handles everything automatically.” |
| “A prioritized roadmap and first-build brief.” | “A revolutionary end-to-end solution.” |
| “We confirm scope and timing before payment.” | An implied instant delivery promise that the service cannot fulfill. |
| “Illustrative sample. Your audit is tailored after discovery.” | A fictional output presented as a customer result. |
Offers and evidence
State the deliverables, scope, price, exclusions, and next step together. Publish performance claims only when supported by approved evidence. Distinguish possible capacity released from realized cash savings.
Brand-specific emphasis
Operations leads with throughput, accuracy, handoffs, and ownership. Business Systems leads with clarity, continuity, and room to grow. Marketing leads with the audience, offer, experience, conversion, and measurable learning.
07 / Motion
Movement that earns its place.
Visible, calm, optional
The hero uses a broad, borderless accent glow with a six-second breathing cycle. Keep the light in visible negative space instead of burying its brightest point behind a solid card. Preserve text contrast at the brightest frame.
Use motion to explain a transition or signal activity. Do not animate the headline or require motion to understand the offer. A person can pause looping ambient effects, and reduced-motion preferences show a static treatment.
Motion specimen / Business Systems
A clearer sense of movement.
A slow breath. The content stays still.
| Motion | Rule |
|---|---|
| Ambient hero | 6-second ease-in-out cycle. No flashing. Provide a pause control and a static reduced-motion version. |
| Buttons | About 180ms; move no more than 2px. Keyboard focus must be visible without hover. |
| Simulation | Starts only when requested. Show discrete stages and a pause/resume action. Reduced-motion mode reveals the completed example directly. |
| Content arrival | About 350ms or less; small displacement and opacity only. Never hide critical content if a script fails. |
See W3C’s pause, stop, and hide guidance for moving content presented alongside other content.
08 / AI + imagery
Make the work visible.
Show what changes
A useful AI demonstration has a source, a direction, a visible draft, and a review decision. The workbench on the landing pages uses prewritten examples and says so. It does not imply a live model is analyzing the visitor’s business.
Show the broader range—writing, imagery, audio, video, code, and workflow assistance—through relevant business examples. Keep deterministic validation and financial calculations separate from generated suggestions.
Show what is real
Prefer approved product screenshots, working documents, and real process details over generic robots, glowing brains, or unsupported dashboards. Generated visual concepts must be labeled when they could be mistaken for delivered work or a real event.
Use consented voices and likenesses. Verify product details and rights before publication. Never invent customer testimonials, screenshots, statistics, certifications, or customer logos as decoration.
09 / Accessibility standard
Built for people. Across every site.
Accessibility is a core requirement for every Bridge Road brand, owned site, and client website we design, develop, or maintain. Each brand can look different; the standard of access stays consistent.
Visitors can read our separate Accessibility statement for our commitment, current review status, and a way to report a barrier.
Readable, adaptable design
- Use at least 4.5:1 contrast for ordinary text and 3:1 for large text: 24 CSS pixels, or approximately 18.67 CSS pixels bold. Check actual backgrounds, overlays, and every animation frame.
- Meaningful control boundaries, states, and graphics need applicable 3:1 non-text contrast. Never communicate meaning through color alone.
- Support 200% text resizing, user text-spacing changes, and reflow at 320 CSS pixels without losing content or functionality. Restrict two-dimensional scrolling to content that genuinely requires it.
- Our design target is 44 × 44 CSS pixels for standalone controls. WCAG 2.2 AA uses a 24 × 24 minimum or its specified spacing and other exceptions; 44 pixels is our stronger default.
Navigation and interaction
- Use semantic HTML, one descriptive main heading, logical heading levels, page language, meaningful link names, and a working skip link.
- Complete every journey with a keyboard. Keep focus visible and unobscured, maintain a logical order, and manage dialogs without trapping users.
- Support touch and assistive technology. Provide alternatives to dragging and hover-only interaction.
- Honor reduced-motion preferences. Provide pause controls for ongoing decorative motion and immediate access to simulation results. The six-second BR glow is optional decoration; never let it carry essential meaning. Avoid flashing and autoplay audio.
Forms, accounts, and AI
- Use visible, programmatically associated labels, clear instructions, autocomplete where appropriate, and understandable errors. Preserve input and announce success or failure.
- Allow password managers and pasted codes. Review authentication, payment, and bot checks with the same accessibility requirements as the rest of the journey.
- Keep AI input, progress, errors, and completed results accessible as text. Announce meaningful status changes without repeatedly reading the entire response or moving focus unexpectedly.
- Do not require a timed animation, voice interaction, or an AI response to reach essential information or contact us. Review generated content and code for accessibility before release.
Content, media, and documents
- Write plainly. Provide useful alt text for meaningful images and empty alternatives for decoration; explain diagrams in text.
- Provide accurate captions, transcripts, and descriptions of meaningful visual information as required by the media type and WCAG criteria.
- Prefer accessible HTML for essential information. Check downloadable documents for tags, reading order, headings, link names, and usable form fields; provide an accessible alternative when needed.
- Evaluate plugins, embedded tools, and generated assets. An accessibility overlay or toolbar does not replace fixing the underlying site.
Required release and maintenance checks
- Define the scope: record templates, content types, complete user journeys, third-party dependencies, the site owner, and applicable project requirements.
- Test beyond a scan: combine automated checks with keyboard, screen-reader, zoom/reflow, contrast, motion, and error-state testing. Cover navigation, forms, authentication, checkout, and the AI workbench where present. Record actual browser and assistive-technology versions and results.
- Resolve barriers: fix issues and retest the affected journey. A barrier that prevents access to core content or task completion blocks release of that feature. Track other findings with impact, owner, target date, and an accessible interim route. An exception is never a conformance pass.
- Publish an honest statement: every site needs a visible Accessibility footer link, an owner-monitored contact route, its real scope, review date, and known limitations. Client statements name the client and its site; do not copy BR contact details or imply that all client sites share a verified status.
- Keep it working: recheck affected journeys after template, plugin, content, or feature changes. Include a quarterly accessibility review in BR-owned site maintenance, and document the maintenance owner and review cadence at client handover.
Owner: Bridge Road Marketing LLC. Effective: September 6, 2026. This standard applies to future work and guides remediation of existing properties. It does not assert that earlier builds have already passed these checks.
References: WCAG 2.2; text contrast; reflow; target size; accessibility evaluation.
10 / Implementation
Keep the system connected.
Keep the brand values centralized. Scope new styles so a landing-page change cannot unintentionally restyle the rest of the WordPress site.
:root {
--brm-font-body: Inter, Arial, sans-serif;
--brm-content-max: 1280px;
--brm-content-width: 88%;
}
.operations { --ink: #141b22; --paper: #f4f2ed; --accent: #ea6a0c; }
.business-systems { --ink: #081712; --paper: #f5f1e9; --accent: #3dcca5; }
.marketing { --ink: #10101b; --paper: #f5f1e9; --accent: #f2d13f; }Reusable by design
The BR lockup, button rhythm, layout grid, footer structure, and AI demonstration pattern are shared. Preserve the discipline-specific color, display face, voice, and proof examples. Extend the family through those rules.
Ownership and version
Bridge Road Marketing LLC owns this working brand system. Version 1.1 · September 6, 2026. Update this page when a rule changes so web pages, proposals, PDFs, and campaign materials remain consistent.