Nigeria House Davos

Overview

Nigeria House Davos is the official diplomatic pavilion and investment platform for the Federal Republic of Nigeria at the World Economic Forum. The design system embodies 'Institutional Modernism'—a aesthetic that marries governmental formality with contemporary digital accessibility. The brand serves global investors, policymakers, and industry leaders seeking to engage with Nigeria's economic agenda and innovation ecosystem. The UI evokes trust, clarity, and forward momentum through a carefully calibrated palette of Nigeria's national green (#008751) paired with diplomatic gold (#d4af37), set against clean white surfaces and dark typography. The emotional response is one of professional confidence: this is a platform where serious economic conversations happen, yet the interface remains approachable and navigable for international audiences unfamiliar with Nigerian institutions.

The brand voice is measured, authoritative, and solution-oriented. Vocabulary favors concrete outcomes ('convening global investors', 'pavilion', 'World Economic Forum week') over aspirational abstractions. The tone never apologizes or hedges; it states facts and invites action. Example sentence in brand voice: 'Nigeria House Davos 2026 concluded in January, convening global investors, policymakers and industry leaders during World Economic Forum week—Nigeria returns to Davos in 2027.'

Colors

The color system is rooted in Nigeria's national identity and diplomatic protocol. Primary (#008751, a deep forest green) is the signature accent, deployed on all call-to-action buttons, navigation highlights, and interactive focus states. This green carries historical weight—it appears on Nigeria's flag and symbolizes growth and stability. Secondary (#d4af37, a warm diplomatic gold) provides a supporting accent for highlights, badges, and premium content callouts, evoking both African heritage and international prestige. Tertiary (#004d2e, a darker forest shade) anchors the system as a supporting neutral, used for secondary text and subtle backgrounds when primary green would be too dominant. The surface stack is anchored in white (#ffffff) for maximum legibility and institutional clarity

Typography

The type system uses Inter exclusively, a contemporary humanist sans-serif that balances institutional formality with digital warmth. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section titles, commanding attention without aggression. Headline-lg (40px, 600 weight) anchors page sections and key announcements. Headline-md (28px, 600 weight) structures subsections and card titles. Title-lg (20px, 600 weight) labels feature blocks and navigation items. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and introductory paragraphs, ensuring readability at a glance. Body-md (16px, 400 weight, 24px line-height) is the default for body text, form labels, and card descriptions. Label-md (14px, 600 weight) is applied to button text, fo

Layout

The layout uses a 12-column grid system with a fixed max-width of 1280px, centered on the viewport. This provides a professional, contained canvas that respects the institutional nature of the brand while remaining responsive on mobile (grid collapses to 4 columns at tablet, 2 columns at mobile). Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter between columns is consistently 24px. Container padding is 24px on desktop, 16px on tablet, 12px on mobile. White-space is generous but not excessive—sections are separated by lg (40px) spacing to create visual breathing room without feeling sparse. Hero sections use

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering, avoiding the dramatic depth of consumer apps. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and the page background. Level 2 (Standard Card): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), applied to cards, modals, and floating elements at rest. This shadow is barely perceptible, maintaining a clean, institutional aesthetic. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied on card hover and modal focus states. The shadow expands slightly (4px blur, 12px spread) to s

Shapes

The shape philosophy is 'Diplomatic Precision'—sharp enough to feel contemporary and professional, rounded enough to feel approachable and human. Buttons use full border-radius (9999px) to create pill-shaped affordances that feel modern and inviting, softening the institutional tone. Cards and containers use lg (1rem / 16px) border-radius, a moderate curve that suggests refinement without appearing playful. Form inputs use md (0.75rem / 12px) border-radius, slightly tighter than cards to signal their functional, utilitarian purpose. Modals and overlays use xl (1.5rem / 24px) border-radius, the

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons (button-primary) use the full primary green (#008751) background with white text, 16px vertical padding, 32px horizontal padding, and full border-radius (9999px). On hover, the background darkens to #006b42 and a subtle shadow (0 4px 12px rgba(0, 135, 81, 0.25)) appears, signaling interactivity. On active/pressed state, the background becomes #004d2e (the tertiary shade) to provide clear feedback. All button state transitions use 200ms cubic-bezier(0.4, 0, 0.2, 1) for smooth, professional motion. Secondary buttons (button-secondary) use a transparent background with a 2px solid border in primary green, white text, and the same padding and radius. On hover, the background

Do's and Don'ts

**Do**

• Do use primary green (#008751) exclusively for CTAs, links, and interactive focus states—it is the brand's signature and must remain distinctive.
• Do maintain generous white-space (lg spacing, 40px) between major sections to create a sense of order and institutional confidence.
• Do apply the full button pill shape (9999px border-radius) to all primary CTAs to signal modern approachability within a formal context.
• Do use Inter 600 weight for all labels, buttons, and headlines to maintain visual hierarchy and readability.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text over photographic backgrounds to ensure accessibility.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, professional motion.

**Don't**

• Don't use secondary gold (#d4af37) as a primary CTA color—it is a supporting accent only, reserved for badges and premium highlights.
• Don't apply sharp corners (0px border-radius) to any interactive element; even the most formal components receive at least sm (0.25rem) rounding.
• Don't use glassmorphism, backdrop-filter blur, or atmospheric effects—the design prioritizes institutional clarity over visual drama.
• Don't exceed lg elevation shadow (0 16px 40px rgba(0, 0, 0, 0.12)) on any element; deeper shadows undermine the clean, professional aesthetic.
• Don't use color alone to convey meaning (e.g., red for error) without accompanying text or icons—ensure accessibility for color-blind users.
• Don't apply negative letter-spacing to body text; use it only on headlines (display, headline-lg, headline-md) to tighten their visual mass.