BMJ Style Guide

assetactive

The Black Male Journal — UI/UX & Visual Style Guide

Current as of March 2026. This document captures every design token, visual convention, and component pattern used across the site.

1. Brand Identity

Tagline: Independent media house. Revolutionary masculinist platform.

Visual DNA: Vintage propaganda poster + newspaper grid + Black Panther pamphlet energy. Think high-contrast, print-inspired design with texture and weight — not sleek SaaS.

Logo Mark: Five-pointed star rendered in BMJ Red (#C0281F). Used as logo icon, section dividers (StarDivider component), and placeholder imagery.

2. Color Palette

All colors are defined as CSS custom properties (--bmj-*) and mapped into Tailwind as bmj-* utilities.

| Token | Hex | Tailwind Class | Usage | |------------------|-----------|-----------------|--------------------------------------------------| | --bmj-black | #0D0C0B | bmj-black | Primary background (body, cards, inputs) | | --bmj-cream | #E8DCC8 | bmj-cream | Primary text on dark backgrounds | | --bmj-red | #C0281F | bmj-red | Accents, star icon, active borders, CTAs, links | | --bmj-amber | #C8852A | bmj-amber | Quote cards, highlights, premium badges | | --bmj-brown | #3B2417 | bmj-brown | Secondary backgrounds (cards, footer) | | --bmj-tan | #B8986A | bmj-tan | Metadata text, dates, muted labels, social icons | | --bmj-white | #F2EDE4 | bmj-white | Maximum-contrast text (headings, wordmark) |

Opacity Conventions

  • bmj-cream/70 — body text on dark cards
  • bmj-tan/60 — very muted metadata (dates, copyright)
  • bmj-tan/40 — divider lines, borders
  • bmj-tan/20 — subtle card borders
  • bmj-black/95 — scrolled navbar background (with backdrop-blur)
  • bmj-black/80 — premium lock badge background

Selection Color

Text selection uses red background with white text (::selection).

Prohibited Colors/Effects

Pastels, gradients, purple, blue, neon, rounded corners > 4px, drop shadows, glassmorphism, or any "modern SaaS" aesthetic.

3. Typography

All fonts loaded via next/font/google with display: "swap".

| Role | Font | Tailwind Class | Weight(s) | Style Rules | |----------------|-------------------|------------------|--------------------|----------------------------------------------| | Display | Bebas Neue | font-display | 400 | ALL-CAPS, letter-spacing: 0.05em | | Body | Libre Baskerville | font-body | 400, 700 (+ ital.) | Editorial serif, leading-relaxed | | Labels | Oswald | font-label | 400, 500, 600 | UPPERCASE, tracking-widest, xs/sm sizes | | Mono | IBM Plex Mono | font-mono | 400, 500 | Dates, issue numbers, metadata, xs size |

Heading Defaults (CSS Base Layer)

All h1–h6 are automatically:

  • font-family: var(--font-display) (Bebas Neue)
  • font-weight: 400
  • text-transform: uppercase
  • letter-spacing: 0.05em
  • color: var(--bmj-white)

Common Typography Patterns

| Element | Font | Size | Color | Extra | |----------------------|--------------|-------------|--------------------|-----------------------------| | Page title | font-display| text-4xl+ | text-bmj-white | Uppercase auto | | Article card title | font-display| text-xl | text-bmj-white | line-clamp-2 | | Briefing card title | font-display| text-3xl | text-bmj-white | sm:text-4xl | | Body paragraph | font-body | text-sm | text-bmj-cream/70| leading-relaxed | | Nav links | font-label | text-xs | text-bmj-cream | uppercase tracking-widest | | Metadata (dates) | font-mono | text-xs | text-bmj-tan | — | | Issue numbers | font-mono | text-xs | text-bmj-tan | uppercase tracking-widest | | Section headers | font-label | text-xs | text-bmj-tan | uppercase tracking-widest | | CTA buttons | font-label | text-xs | text-bmj-white | uppercase tracking-widest |

4. Spacing & Layout

Spacing Scale (CSS Custom Properties)

| Token | Value | |----------------|-----------| | --space-xs | 0.25rem | | --space-sm | 0.5rem | | --space-md | 1rem | | --space-lg | 1.5rem | | --space-xl | 2rem | | --space-2xl | 3rem |

Max-Width Scale

| Token | Value | Usage | |--------------------|------------|--------------------------------| | --width-content | 1200px | Main content container | | --width-article | 720px | Article body / reading width | | --width-wide | 1440px | Full-bleed sections |

Page Container Pattern

mx-auto max-w-content px-6

All main sections use px-6 horizontal padding and py-12 (or py-16/py-20) vertical padding.

5. Visual Treatments & Textures

Grain Overlay

Applied to <body> via the .grain class. Creates a fixed, full-screen film-grain texture at 4% opacity using an inline SVG noise filter. Non-interactive (pointer-events: none, z-index: 9999).

Halftone Image Treatment

Images use the .halftone class:

filter: contrast(1.2) grayscale(0.3);
mix-blend-mode: multiply;

Accent Borders

  • .accent-border-top — 3px solid red top border (used on footer)
  • .accent-border-bottom — 3px solid red bottom border (used on navbar)

6. Component Inventory

Navbar

  • Sticky, with red bottom accent border
  • Scrolled state: semi-transparent black with backdrop blur
  • Logo: star SVG + "The Black Male Journal" wordmark (font-display)
  • Desktop nav: label font, xs uppercase tracking-widest
  • Active link: red bottom border
  • CTA: "Join" button in red
  • Mobile: hamburger icon triggers slide-out MobileMenu

Footer

  • Brown background with red top accent border
  • 3-column grid: Brand, Navigation, Connect (newsletter form + social icons)
  • Copyright bar at bottom with mono text

StarDivider

  • Horizontal rule replacement: two lines with a red star SVG centered between them
  • Lines use border-bmj-tan/40

LensBadge

  • Inline tag showing the content lens
  • Health: red bg, white text
  • Philosophy: amber bg, black text
  • Politics: brown bg, white text, with tan border

ArticleCard

  • Vertical card with 16:9 cover image area
  • Halftone image treatment
  • LensBadge, title (display font), excerpt (body font), reading time + date footer
  • Premium lock icon (amber, top-right of image)
  • Hover: lifts -1px, border highlights to red

BriefingCard

  • Horizontal card with 4px red left border
  • Issue number + date row (mono font)
  • Large display title
  • First section title as preview (label font)
  • Premium badge: amber lock icon + "Premium" text

PaywallGate

  • Blocks content behind tier-based access control

LensFilterTabs / TagFilterRow

  • Horizontal filter controls for article/briefing listings

7. Content Lenses (Taxonomy)

Every article or briefing belongs to exactly one lens:

| Lens | Text Color Class | Badge Style | Description | |--------------|--------------------|----------------------------------|------------------------------------------| | health | .lens-health | Red bg / White text | Physical/mental wellness, martial arts | | philosophy | .lens-philosophy | Amber bg / Black text | Purpose, identity, masculinity, mindset | | politics | .lens-politics | Brown bg / White text + border | Power, policy, systems, community |

8. Interaction & Motion

  • Links: Red color, no underline, opacity 0.75 on hover, 0.2s ease transition
  • Cards: hover:-translate-y-1 lift, hover:border-bmj-red/40 border highlight
  • Buttons: Opacity 0.9 on hover
  • Navbar scroll: Background opacity transition with backdrop blur
  • Page transitions: Framer Motion — subtle only
  • Border radius: Maximum 4px (essentially square). rounded-sm only.

9. Iconography

  • Icon library: lucide-react
  • Icon sizing: 20px (social), 24px (nav hamburger), 12px (lock badges), 10px (inline)
  • Icon colors: Follow surrounding text color, typically bmj-tan or bmj-cream

10. Access Tiers

| Tier | Content Access | |-----------|-------------------------------------------------------------------| | free | Public articles, briefing previews, video gallery, academy | | basic | Full briefing archive, select handbooks, member forum | | premium | Everything — all handbooks, downloads, private content, early access |

11. Responsive Breakpoints

Uses Tailwind defaults:

  • sm: 640px — Join button appears
  • md: 768px — Footer grid goes to 3 columns
  • lg: 1024px — Desktop navigation appears, mobile hamburger hidden
  • Design targets: 375px (mobile) and 1440px (desktop)

12. Tech Stack

| Layer | Technology | |--------------|--------------------------------------| | Framework | Next.js 14 (App Router) | | Language | TypeScript (strict mode) | | Styling | Tailwind CSS + CSS custom properties | | Database | Supabase | | Payments | Stripe | | Deployment | Vercel | | Animations | Framer Motion (subtle only) | | Validation | Zod | | Icons | lucide-react | | Content | MDX files |