A complete breakdown of the existing easyriders.com visual identity - colors, typography, voice, and UI patterns - plus a direction recommendation for the redesign.
Easy Riders is the original American biker magazine, founded in 1971 and holding over 55 years of motorcycling culture. The brand identity lives in the intersection of rebellion, craftsmanship, and community. The current website reflects an older visual language that has drifted from its high-impact print heritage.
The Easyriders brand is strong but underexpressed on the web. The orange-and-black print DNA exists but is inconsistently applied digitally. A redesign should modernize the delivery without softening the edge.
Full color inventory captured from easyriders.com - navigation, shop, editorial, and functional UI layers. All color values are live-site observations or direct extractions from the WordPress/WooCommerce theme stack. The redesign should promote this ad-hoc palette into locked design tokens.
Colors sourced from live page inspection across homepage, shop, team, and archive pages. The site uses external CSS files only (no inline hex values in HTML) - values below are extracted from rendered visual inspection and WordPress theme defaults confirmed present on the live build.
The Easyriders nav exists in two modes depending on page and scroll state. Both variants are in active use across the live site.
WooCommerce-generated UI states plus editorial tag colors active across the shop and magazine layers.
| Token | Value | Role | Contrast vs White |
|---|---|---|---|
| --brand-orange | #E84E0F | Primary CTA, promo bar | 3.2:1 (AA large) |
| --brand-orange-deep | #C94200 | Hover, pressed | 4.6:1 (AA) |
| --brand-orange-light | #FF7033 | Warm accent, badges | 2.8:1 (AA large) |
| --brand-black | #0D0D0D | Nav bg, footer, hero | 20:1 (AAA) |
| --brand-gunmetal | #1A1A1A | Dark card surfaces | 17:1 (AAA) |
| --brand-asphalt | #2C2C2C | Dark sections | 14:1 (AAA) |
| --brand-chrome | #5C5C5C | Secondary text | 7.1:1 (AAA) |
| --brand-exhaust | #8C8C8C | Placeholder, disabled | 3.5:1 (AA) |
| --brand-dust | #D1CCCA | Borders, dividers | 1.4:1 (decorative) |
| --brand-parchment | #F5F0EA | Warm light bg | 1.1:1 (background) |
| --state-sold-out | #C0392B | SOLD OUT badge | 4.5:1 (AA) |
| --state-sale | #E74C3C | SALE badge | 3.7:1 (AA large) |
| --state-success | #27AE60 | In-stock, order success | 3.6:1 (AA large) |
| --state-notice | #F39C12 | WC notice bar | 2.4:1 (AA large) |
| --state-info | #2980B9 | External links, info | 4.7:1 (AA) |
The current site uses a mix of WordPress theme defaults with no clear typographic system. The print edition relies on bold condensed headlines and tight body copy - a direction the web presence should adopt.
Use Barlow Condensed for headlines - this captures the print-era energy. Pair with Source Serif Pro for editorial body copy to honor the magazine DNA. UI elements use a clean grotesque like DM Sans.
| Role | Font | Weight | Size Range |
|---|---|---|---|
| Display / Hero | Barlow Condensed | 700 Bold | 40-60px |
| Section H2 | Barlow Condensed | 700 Bold | 28-36px |
| Card H3 | DM Sans | 700 Bold | 18-22px |
| Body Editorial | Source Serif Pro | 400 Regular | 16-18px |
| UI / Nav / Labels | DM Sans | 400 / 600 | 13-15px |
| Captions / Meta | DM Sans | 400 | 12px |
Easyriders speaks with earned authority. This is not a polished corporate magazine - it is the voice of people who actually live the biker lifestyle. The copy is direct, enthusiastic, and uses the community's own language without manufacturing edge.
| Context | Tone | Example |
|---|---|---|
| Hero / Homepage | Bold, declarative | "The Biker's Bible. 55 Years. No apologies." |
| Subscription CTAs | Urgent, value-forward | "Don't miss a single issue. Get yours now." |
| Archive / History | Reverent, proud | "Almost 600 issues of the culture that started it all." |
| Shop | Direct, no fluff | "Gear. Art. Books. Straight from the source." |
| Blog / Editorial | Conversational, expert | First-person, opinionated, never neutral |
| Error / System | Plain, helpful | No personality forced into technical messages |
The current site uses default WordPress/WooCommerce components with minimal customization. The redesign should establish a small, locked component set that reinforces the brand on every page.
Current nav has 10+ top-level items. Recommendation: collapse to 5 primary items with sub-menus. Sticky header on scroll. Black background, white text, orange hover/active state.
Content cards (articles, products, issues) should use a dark background with orange-accented headers. Magazine issue cards should mimic the physical cover aspect ratio (approximately 8.5x11).
The existing announcement bar is orange-on-orange which causes contrast failures. Correct to: black background, orange text, white supporting copy.