Capmad

Overview

Capmad is a data-driven economic intelligence platform serving African investors, policymakers, and business leaders. The design system embodies 'Journalistic Clarity'—a philosophy that prioritizes information hierarchy, scannable layouts, and warm, trustworthy accents over decorative flourishes. The brand personality is authoritative yet approachable: precise in data presentation, conversational in voice, and optimistic about African economic potential. The UI uses a clean white canvas (rgb(255, 255, 255)) with strategic pops of burnt orange (#f97316) on CTAs and key metrics, creating visual momentum without visual noise. Every interaction—from tag filtering to live market feeds—is designed to feel responsive and purposeful, never gratuitous.

The tone is confident, data-literate, and forward-looking. Capmad speaks to readers who value specificity: 'Nigeria's critical minerals roadmap unlocks $2.3B in downstream processing potential' rather than 'big opportunity in Nigeria.' The brand avoids hype, embraces nuance, and treats economic complexity as an asset, not a liability. Example sentence in brand voice: 'Senegal's bond yield compression signals renewed investor confidence in West African stability—here's what it means for your portfolio.'

Colors

The color system is rooted in editorial trust and market energy. Primary (#f97316, a warm burnt orange) is deployed exclusively on call-to-action buttons, active tags, and live market indicators—it signals 'actionable insight' and draws the eye without overwhelming. Secondary (#db6a3e, a deeper rust) provides tonal variation for hover states and secondary UI elements, creating visual depth. The surface stack is anchored in pure white (#ffffff) for maximum content legibility; surface-container shades (#e6e6e6 to #d4d4d4) are used sparingly for subtle section dividers and disabled states. On-surface text is near-black (#1c1c1c) at 18px body size for 16:1 WCAG AAA contrast. Tertiary green (#059669) is reserved for positive market signals (gains, growth indicators) and appears in badges and ac

Typography

The type system uses Inter exclusively—a humanist sans-serif with excellent readability at small sizes and a neutral, professional character that suits financial content. Display (56px, 700 weight, -0.02em tracking) anchors hero headlines and major section titles; headline-lg (40px, 600 weight) is used for article titles and key statistics; headline-md (28px, 600 weight) breaks up content sections. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for article text and ensures comfortable scanning at arm's length. Body-md (16px, 400 weight, 24px line-height) is used for UI labels, metadata, and secondary content. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, tags, and form labels—the slight letter-spacing (0.01em) adds formality and improves legi

Layout

The layout uses a 12-column grid with a max-width of 1400px and 24px horizontal gutters on desktop, scaling to 16px gutters on tablet and 12px on mobile. The page rhythm follows a 'content-first' model: hero article (full-width image with overlay text, 60% image / 40% text split) is followed by a tag filter bar (12px vertical padding, 24px horizontal), then a 2-column feed (main content 8 columns, live sidebar 4 columns). Section separation uses 40px (lg spacing) between major blocks; card-to-card spacing within a feed is 24px (md spacing). The container max-width of 1400px ensures that at ultra-wide viewports, content doesn't stretch beyond comfortable reading width (around 70–80 characters per line for body text). White-space is generous but purposeful: 24px padding inside cards, 12px pa

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layered glass or dark overlays. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for baseline cards and inputs—barely perceptible, used to separate UI from the white background; md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards, modals, and hover states—noticeable but not dramatic, signaling interactivity; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for dropdowns, popovers, and top-level modals. All shadows use a 3:1 blur-to-spread ratio and include both a soft outer shadow and a tighter mid-tone sh

Shapes

The shape philosophy is 'Soft Precision'—rounded corners are used to soften the formality of financial data without introducing playfulness. Buttons use 0.75rem (12px) border-radius, creating a subtle roundness that feels modern and approachable; inputs and form fields use 0.5rem (8px) for a tighter, more utilitarian feel; cards and containers use 0.5rem as the default, with 1rem (16px) reserved for larger modals and hero sections. Tags and badges use full (9999px) border-radius to create pill shapes, which are visually distinct from rectangular UI and signal 'filterable' or 'removable' semant

Components

Action Elements Buttons are the primary interaction mechanism and use a strict 44px height (padding: 12px 24px, label-md typography) to ensure touch-friendly targets on mobile. Primary buttons (#f97316 background, white text) are used for 'Subscribe,' 'Read More,' and other high-intent CTAs; they transition to #e85c0a on hover over 200ms. Secondary buttons use the secondary-container background (#f9f4f1, rust text) with a 1px outline-variant border, signaling lower priority; they're used for 'Filter,' 'Sort,' and exploratory actions. Ghost buttons (transparent background, on-surface text) are used for navigation and tertiary actions; they reveal a surface-container-low background on hover. All buttons include a focus ring (0 0 0 3px rgba(249, 115, 22, 0.1)) when keyboard-focused, meeti

Do's and Don'ts

**Do**

• Do use primary (#f97316) exclusively on CTAs, active states, and live market indicators—never on backgrounds or body text.
• Do maintain 24px (md spacing) as the default margin between major sections and 12px (sm spacing) for internal card padding.
• Do apply label-sm (12px, 500 weight, 0.02em tracking) with text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) when overlaying text on images.
• Do use 200ms ease transitions on all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do pair Inter 600-weight headlines with 400-weight body text at a 1.5x–2x size ratio to create clear visual hierarchy.

**Don't**

• Don't use secondary (#db6a3e) or tertiary (#059669) as primary button colors—they're supporting accents only.
• Don't apply border-radius greater than 1rem on standard UI elements; excessive rounding undermines the professional tone.
• Don't use shadows greater than lg (0 8px 24px) on standard components; reserve lg for modals and top-level overlays.
• Don't mix font families; Inter is the only typeface—avoid Poppins, Playfair, or system fonts in the UI.
• Don't use opacity or transparency for interactive elements; use solid background-color changes and focus rings instead.