Central Bank of Yemen Import Financing Platform

Overview

This design system serves the Central Bank of Yemen's import financing platform—a mission-critical regulatory interface for government banking officials managing complex multi-stage approval workflows. The aesthetic is 'Institutional Clarity': clean, hierarchical, and trust-forward, with a vibrant primary blue (#0066cc) that signals authority and confidence without coldness. The interface prioritizes legibility and process transparency, treating each approval stage as a distinct, scannable milestone. The brand voice is formal yet accessible, precise without jargon: 'Your import financing request has entered internal review—expected completion in 3 business days.' Every interaction reinforces institutional competence and regulatory rigor.

Colors

The color system is anchored in a deep institutional blue (primary: #0066cc) used exclusively for primary CTAs, focus states, and active navigation elements—this is the signature accent that signals actionable moments. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f0f0f0, #e9ecef, #d0d0d0) to create visual depth without introducing secondary hues; this monochromatic foundation ensures regulatory documents and data tables remain the focal point. Status colors are semantic and distinct: success (#1b5e20 text on #f1f8f4 background with #c8e6c9 border) for approved stages, error (#c62828 text on #ffebee background) for rejections or warnings, and info (#0d47a1 text on #e3f2fd background) for neutral notifications. The outline color (#505050) is use

Typography

The type system employs a three-tier hierarchy: Cairo (Arabic display typeface) for headlines and official titles, Tajawal (geometric Arabic sans-serif) for section headers and role labels, and IBM Plex Sans Arabic (neutral, highly legible) for body copy and form labels. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and major section titles; headline-lg (40px, 700 weight) anchors page sections; headline-md (28px, 600 weight) introduces subsections; title-lg (20px, 700 weight, Tajawal) marks form sections and user roles. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and hero descriptions; body-md (16px, 400 weight, 24px line-height) is the default for form labels and list content. Label-md (14px, 600 weight, 20px line-height) marks

Layout

The layout follows a 12-column grid with a fixed max-width of 1600px, centered on the viewport. The left panel (login/form area) occupies 6 columns on desktop, stacking to full-width on tablets and mobile; the right panel (hero/messaging) occupies the remaining 6 columns and is hidden below 1024px. Horizontal gutter spacing is 24px (md spacing token) between major sections; vertical rhythm uses lg spacing (40px) to separate form sections, and md spacing (24px) for internal card padding. Container padding is consistently 24px on desktop, reducing to 16px on tablets and 12px on mobile. The form column uses a single-column layout with 24px vertical gaps between input groups; dropdown menus and select fields are full-width within their containers. The hero panel on the right uses centered text

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual clutter while maintaining clear layer hierarchy. Base cards and containers use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) (md elevation), creating a subtle lift from the surface. On hover, cards transition to box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) (lg elevation) with a 200ms ease transition, signaling interactivity. Focus states on interactive elements (buttons, inputs, list items) apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2)—the outer ring (2px) uses a darker, more opaque shadow to cre

Shapes

The shape philosophy is 'Institutional Softness'—rounded corners are present but restrained, avoiding the playfulness of consumer apps while rejecting austere sharpness. Buttons use lg radius (1rem / 16px), creating a friendly but professional appearance; form inputs use md radius (0.75rem / 12px) to feel slightly softer than buttons while maintaining clear visual distinction. Cards and modals use xl radius (1.5rem / 24px) for a more generous, approachable feel. Badges and status pills use full radius (9999px) to signal their compact, self-contained nature. List items and smaller interactive e

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary blue (#0066cc) background with white text, 48px height, 8px vertical and 24px horizontal padding, lg radius (16px), and md elevation shadow. On hover, the background darkens to #0052a3 and elevation increases to lg (0 16px 40px rgba(0, 0, 0, 0.12)). On focus, the button retains primary blue but adds a focus ring: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2). The button-secondary variant uses a transparent background with a 1px primary blue border and primary blue text; on hover, it fills with primary-container (#e3f2fd). All button text uses label-md typography (14px, 600 weight). Transitions between states use 150ms ease timing.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use primary blue (#0066cc) exclusively for primary CTAs, focus states, and active navigation—never for decorative elements or secondary actions.
• Do maintain 7:1 contrast ratio between text and background colors; test all text combinations against WCAG AA standards.
• Do apply md elevation (0 4px 12px rgba(0, 0, 0, 0.1)) to cards and containers; reserve lg elevation for hover states and modals.
• Do use Cairo for Arabic headlines and official titles; use IBM Plex Sans Arabic for body copy and form labels to maximize legibility.
• Do apply 24px (md spacing) as the baseline gutter between major sections; use 40px (lg spacing) for vertical separation between form sections.
• Do include a 2px focus ring (box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2)) on all interactive elements for keyboard navigation accessibility.
• Do use semantic status colors (success: #1b5e20, error: #c62828, info: #0d47a1) consistently across badges, alerts, and notifications.
• Do apply 150ms ease transitions to all state changes (hover, focus, active) to signal interactivity without feeling sluggish.

**Don't**

• Don't use secondary or tertiary colors as primary CTAs; the primary blue is the only accent color for actionable elements.
• Don't apply shadows to disabled elements; use reduced opacity (0.6) and surface-container background (#e9ecef) instead.
• Don't mix Arabic typefaces; use Cairo for headlines, Tajawal for section headers, and IBM Plex Sans Arabic for body—never combine them within a single text block.
• Don't use border-radius values smaller than 0.5rem (8px) on interactive elements; this creates a harsh, uninviting appearance.
• Don't apply more than one level of elevation shadow to a single element; use md for base state, lg for hover, never both simultaneously.
• Don't place small labels (label-sm) over colored backgrounds without text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) for legibility.
• Don't use outline-variant (#cccccc) for primary borders on interactive elements; reserve it for dividers and secondary separators.
• Don't exceed 1600px container max-width; this maintains optimal line-length and prevents form fields from becoming unwieldy on ultra-wide displays.