Sustainable Energy Fund for Africa

Overview

Sustainable Energy Fund for Africa (SEFA) operates at the intersection of institutional finance and environmental stewardship. The design system reflects this dual mandate through a clean, professional foundation (pure white surfaces, deep charcoal text at #0e0e0e) paired with a vibrant, nature-inspired accent palette. The primary accent—a rich violet (#6c36ff)—signals innovation and forward momentum, while secondary accents in cyan (#00b2ff) and coral (#f0523d) evoke the energy of solar and wind resources. The aesthetic is 'Institutional Optimism': authoritative enough for boardrooms and development finance stakeholders, yet warm and aspirational enough to inspire confidence in Africa's energy future.

The brand voice is measured, data-driven, and solution-oriented. SEFA speaks with the precision of a fund manager and the conviction of a climate advocate. Vocabulary favors concrete outcomes over abstractions: 'mobilizing $X billion in renewable energy investment' rather than 'enabling sustainable futures.' Tone is never breathless or hyperbolic—every claim is grounded in mission and measurable impact. Example sentence: 'SEFA's blended finance instruments have catalyzed 2.3 GW of clean energy capacity across 12 African nations, unlocking $4.7 billion in private capital.'

Colors

The color system is built on a foundation of institutional neutrality—white (#ffffff) surfaces and near-black text (#0e0e0e, #3e3e3e for secondary)—establishing trust and legibility across financial documents, dashboards, and reports. This neutral base is energized by three strategic accent colors, each with a distinct role in the system.

Primary (#6c36ff) is the signature accent used on all call-to-action buttons, active navigation states, and key interactive elements. Its high contrast against white (WCAG AAA compliant) ensures accessibility in dense layouts. The primary container (#eae0ff) provides a softer context for secondary actions and informational badges. Secondary (#00b2ff) supports data visualization, progress indicators, and renewable energy-specific messaging—its cool tone e

Typography

Poppins is the sole typeface across all scales, chosen for its geometric clarity and professional warmth—qualities essential for communicating complex financial instruments to a global audience. The type hierarchy is built on a 4px baseline grid with six distinct scales: Display (60px, 700 weight, -0.04em tracking) for hero headlines and major section breaks; Headline-lg (40px, 600 weight, -0.02em tracking) for page titles and primary content sections; Headline-md (28px, 600 weight, -0.01em tracking) for subsection headers; Title-lg (20px, 600 weight) for card titles and form labels; Body-lg (18px, 400 weight, 0.02em tracking) for introductory paragraphs and callout text; Body-md (16px, 400 weight, 0.01em tracking) for body copy and descriptions; Label-md (14px, 500 weight, 0.01em tracking

Layout

The layout system uses a 12-column grid with a maximum container width of 1200px, centered on the viewport with symmetric gutters of 24px (3vw on mobile, 4vw on tablet). This constraint ensures that dense content—such as fund performance tables or investment pipeline dashboards—remains scannable and doesn't overwhelm the eye. Section spacing follows the semantic scale: use lg spacing (40px) to separate major sections (e.g., between hero and 'Our Instruments'), md spacing (24px) for subsection breaks, and sm spacing (12px) for grouped content within a card. The gutter value (24px) is applied consistently to all horizontal padding within containers, creating a unified rhythm. White space is treated as a design material, not wasted real estate: generous margins around headlines (40px below a

Elevation & Depth

Depth in this system is achieved through a restrained shadow vocabulary and subtle surface color shifts, avoiding the visual noise of heavy drop shadows. The elevation scale defines three levels: Level 1 (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to subtle UI elements like form inputs and small badges—barely perceptible, used to separate interactive elements from the background. Level 2 (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) is the workhorse shadow for cards, modals, and primary containers—it creates clear separation without drama, appropriate for content that should feel

Shapes

The shape system follows 'Institutional Softness'—a philosophy that rejects both hard corners (which feel austere) and excessive rounding (which undermines authority). Border-radius values are applied contextually: buttons and small interactive elements use DEFAULT (0.5rem / 8px) for a subtle, approachable feel; cards and larger containers use lg (1rem / 16px) to create visual breathing room; modals and overlays use xl (1.5rem / 24px) for a premium, considered appearance; badges and pill-shaped elements use full (9999px) for maximum softness. Form inputs use DEFAULT (8px) to match button styli

Components

Action Elements Buttons are the primary interface for user intent. The button-primary component uses a solid background of {colors.primary} (#6c36ff) with white text, 48px height, 19.2px vertical padding, 32.064px horizontal padding, and DEFAULT (8px) border-radius. On hover, the background shifts to #5a2dd9 (a 10% darkening) over 200ms, providing clear feedback without animation jank. On active/pressed, the background darkens further to #4a1fb5. Button-secondary is a transparent variant with a 2px solid border in {colors.primary}, allowing it to sit alongside primary buttons without visual dominance. Both variants use label-md typography (14.464px, 500 weight) to ensure text is crisp and scannable. Avoid using more than one primary button per section; use secondary or tertiary variant

Do's and Don'ts

**Do**

• Do use {colors.primary} (#6c36ff) exclusively for primary CTAs and active states—it's the brand's signature accent and should feel rare and intentional.
• Do maintain a 2:1 ratio of white space to content in hero sections; generous margins signal confidence and institutional authority.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards by default; upgrade to lg elevation only on hover or when the card is the primary focus.
• Do use Poppins 600 weight for all headlines (Headline-lg through Title-lg); 700 weight is reserved for Display-scale text only.
• Do test all interactive elements (buttons, inputs, links) at 14px minimum font size to ensure accessibility for users with low vision.

**Don't**

• Don't use {colors.tertiary} (#f0523d) for non-critical UI; it's a high-alert color and should appear sparingly to maintain impact.
• Don't apply border-radius: 0px to any interactive element; even 2px softens the appearance and improves perceived friendliness.
• Don't stack more than two levels of card elevation (e.g., card inside card inside card); flatten the hierarchy or use alternative visual separation (dividers, spacing).
• Don't use body text smaller than 16px (body-md) on screens; label-sm (12px) is reserved for metadata, timestamps, and UI chrome only.
• Don't apply multiple shadows to a single element; use a single shadow value from the elevation scale (sm, md, or lg) to maintain visual clarity.