BMI IP Africa

Overview

BMI IP Africa is a professional intellectual property services platform designed for Sub-Saharan African markets, embodying a design philosophy rooted in 'Institutional Warmth'—a fusion of corporate authority with accessible, human-centered aesthetics. The brand serves legal professionals, corporations, and entrepreneurs seeking expert IP guidance across the continent, evoking confidence through a carefully calibrated palette of warm earth tones (ochre #8e6206, cream #e8d8b6) paired with deep navy anchors (#1d2e38, #112954) that reference both African soil and professional gravitas. The UI communicates precision, heritage, and forward momentum through restrained elegance: generous whitespace (surface #ffffff with container-low at #f1f3f5), measured typography in DM Sans at 78px headlines and 16px body text, and deliberate use of rounded corners (1rem on cards, 9999px on CTAs) that soften institutional formality without sacrificing credibility.

The brand voice is authoritative yet approachable, speaking to both seasoned legal practitioners and first-time IP seekers. Tone markers include precise, jargon-aware language paired with plain-English explanations; confidence without condescension; and a commitment to clarity over cleverness. Example sentence in brand voice: 'Your trademark is protected across 18 African nations—here's exactly how, and what happens next.'

Colors

The color system is anchored by a warm, earthy primary (#8e6206—a muted ochre derived from African mineral pigments) used exclusively on CTAs, key links, and brand moments. This primary is never used for body text or backgrounds; it functions as a visual magnet, drawing users toward action. The secondary accent (#3859d0—a professional cobalt) supports data visualization, toggles, and secondary interactions, providing visual contrast without competing for attention. The tertiary color (#1d2e38—a deep navy-black) grounds the system and appears on primary buttons, headers, and high-authority text elements.

Surface colors follow a strict hierarchy: the base surface is pure white (#ffffff), with container layers stepping down through #f9faff (surface-dim), #f1f3f5 (surface-container), and #dee

Typography

The type system uses DM Sans exclusively, a geometric sans-serif that balances warmth with precision—critical for a brand serving both creative and legal audiences. Display text (78px, 500 weight, -0.03em tracking) anchors hero sections and conveys confidence; headline-lg (48px, 600 weight) structures major sections; headline-md (36px, 600 weight) introduces subsections; and title-lg (24px, 600 weight) labels cards and feature blocks. Body text runs at 16px with 400 weight and 24px line-height (1.5 unitless), providing comfortable reading rhythm across long-form content. Labels use 14px at 600 weight with 0.02em positive tracking to add visual hierarchy to buttons and form fields. All headlines use -0.01em to -0.03em negative letter-spacing to tighten their visual mass; body text uses +0.0

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, maintaining a fluid layout on mobile (100vw with 24px gutter) that snaps to fixed width at 1200px breakpoints. Page rhythm is established through a semantic spacing scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section uses 100px vertical padding (custom, exceeding lg) to establish visual dominance; subsequent sections use lg (40px) top/bottom margins. Cards maintain md (24px) internal padding with 12px gaps between stacked elements. The container-max of 1280px ensures text lines don't exceed 75–80 characters at body-md (16px), supporting co

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy drop-shadows common in corporate design. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle borders and focus states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated overlays and hero imagery. Cards use md elevation by default; on hover, they transition to lg over 200ms (ease-in-out) to signal interactivity. Input fields use a 1px solid border at outline-variant (#dee2e6) rather than shadows, maintaining a clean,

Shapes

The shape philosophy is 'Institutional Softness'—sharp corners are avoided entirely, but extreme roundness is reserved for CTAs, creating a visual hierarchy of formality. Buttons use full (9999px) border-radius to signal primary actions and draw the eye; secondary buttons and tertiary buttons use lg (1rem / 16px) for a more restrained appearance. Cards and containers use lg (1rem) to soften their edges without appearing playful. Input fields use DEFAULT (0.5rem / 8px) for a compact, form-like appearance. Badges use full (9999px) to emphasize their role as discrete, scannable labels. The ration

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#8e6206) background with {colors.on-primary} (#f9faff) text, {typography.label-md} (14px, 600 weight), full border-radius (9999px), and 13px vertical / 28px horizontal padding for a 44px total height. On hover, the background shifts to #6b5104 (primary-fixed-dim) over 200ms ease-in-out, maintaining text color. The button-secondary variant uses a transparent background with a 2px solid border at {colors.primary}, same text color, and identical padding; on hover, it fills with {colors.primary-container} (#e8d8b6) and shifts text to {colors.on-primary-container} (#112954). The button-tertiary uses {colors.tertiary} (#1d2e38) background with full-white text, lg border-radius (1r

Do's and Don'ts

**Do**

• Do use primary (#8e6206) exclusively on CTAs, links, and brand moments—never on body text or backgrounds.
• Do maintain the 24px gutter and 8px spacing unit across all layouts to preserve visual rhythm and cognitive load.
• Do apply full border-radius (9999px) only to primary buttons; use lg (1rem) for cards and DEFAULT (0.5rem) for inputs.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-in-out timing to feel responsive.
• Do use DM Sans exclusively at the specified weights (400 for body, 600 for labels/headlines) to maintain brand consistency.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and upgrade to lg on hover for subtle depth.
• Do keep on-surface text at #010101 (near-black) for maximum legibility at 16px body size.
• Do use on-surface-variant (#6c757d) for secondary labels, metadata, and disabled states only.

**Don't**

• Don't use sharp corners (0px border-radius) on interactive elements; even input fields use DEFAULT (0.5rem).
• Don't apply primary color (#8e6206) to body text, backgrounds, or non-interactive elements—it dilutes its signal.
• Don't exceed the container-max width of 1280px; maintain 24px gutters on mobile and scale proportionally.
• Don't use shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12)) or apply multiple layered shadows—keep the system clean.
• Don't mix typefaces; DM Sans is the only approved font family across all text elements.
• Don't apply transitions shorter than 150ms or longer than 300ms; the system uses 150ms for inputs and 200ms for buttons.
• Don't use pure white (#ffffff) text on primary (#8e6206) backgrounds; always use on-primary (#f9faff).
• Don't introduce new colors outside the defined palette; if a new accent is needed, derive it from the secondary or tertiary system.