Al-Ameen Funds

Overview

Al-Ameen Funds is a professional Islamic financial services platform serving pension, savings, and mutual fund management across Pakistan. The design system embodies a "Corporate-Technical Clarity" aesthetic—combining institutional trust with modern accessibility. The visual language prioritizes legibility, data transparency, and confident action through a restrained palette anchored by a professional corporate blue (#0b74b9) paired with strategic accent reds (#d9534f) for alerts and warnings. The brand personality is authoritative yet approachable: precise, compliant, and respectful of users' financial decisions. Voice example: "Your pension fund balance updated to PKR 2,45,000 as of today's close."

Colors

The color system is built on a neutral white-to-gray foundation (surface: #ffffff, surface-container-highest: #dadada) that conveys stability and institutional credibility. Primary (#0b74b9) is the signature corporate blue used exclusively for interactive CTAs, links, and primary navigation—it appears on the 'Book an appointment' button and all primary actions. Secondary (#d9534f) is a warm red reserved for error states, validation failures, and critical alerts; it never appears on positive CTAs. Tertiary (#003388) provides a deeper navy for secondary navigation and supporting text hierarchies. The surface stack (surface-container-low: #f3f4f5, surface-container: #eeeff0, surface-container-high: #e6e6e6) creates subtle visual separation without introducing color noise, essential for data-d

Typography

The type system uses Poppins across all scales, selected for its geometric clarity and professional neutrality—essential for financial data presentation. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and fund names; Headline-lg (40px, 600 weight) titles major sections like 'Invest Anytime. Anywhere. Instantly.'; Headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) carry primary content and transaction details—the 24px line-height ensures comfortable reading of fund descriptions and terms. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, providing visual weight without bulk. Label-sm (12px, 500 weight, 0.05em tracking) is

Layout

The layout operates on a 12-column grid with a 1280px container max-width, providing flexibility across desktop (1280px), tablet (768px), and mobile (375px) breakpoints. The gutter spacing is consistently 24px, creating breathing room between sections while maintaining visual cohesion. Page rhythm follows a semantic spacing scale: xs (4px) for micro-interactions like badge padding, sm (12px) for form field padding and list item spacing, md (24px) for card padding and section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The price-container component exemplifies this: it uses sm padding (12px) internally with 1px borders at #dadada to create a compact, scannable display of fund prices. Fund tables and transaction lists employ the table-cell c

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle surface color shifts rather than dramatic layering. Level 1 (Base): white background (#ffffff) with no shadow, representing the primary content plane. Level 2 (Cards & Containers): elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) applied to card components, creating a barely-perceptible lift that distinguishes content from the background without introducing visual weight. Level 3 (Modals & Overlays): elevation.lg (0 4px 15px rgba(0, 0, 0, 0.2)) used on modal-container and elevated surfaces, creating clear separation for critical inter

Shapes

The shape philosophy is "Institutional Precision"—rounded corners are used strategically to soften technical interfaces without compromising professional authority. Buttons and primary CTAs use lg (1rem / 16px) border-radius, creating a modern, approachable form that feels contemporary without being playful. Cards and containers use lg (1rem) for consistency with buttons, establishing a visual family. Input fields and form controls use DEFAULT (0.5rem / 8px) for a tighter, more technical appearance that signals data entry. Badges and small UI elements use full (9999px) for pill-shaped containe

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses background-color: #0b74b9 with white text, 48px height, 12px 24px padding, and lg border-radius (16px). On hover, background shifts to #0a5fa0 (a 15% darkening) with a 200ms transition, providing clear feedback without animation lag. button-primary-active uses #084a7f for sustained press states. button-secondary inverts the logic: transparent background with a 1px primary-colored border, allowing secondary actions to coexist without visual dominance. button-danger (#d9534f) is reserved for destructive actions and error confirmations, with hover state #c23d38. All buttons use label-md typography (14px, 600 weight) for consistent text hierarchy.

Containers & Surfaces card components are the foundation

Do's and Don'ts

**Do**

• Do use primary (#0b74b9) exclusively for CTAs, links, and primary navigation—never use it for backgrounds or neutral elements.
• Do apply lg border-radius (16px) to all primary surfaces (buttons, cards, modals) to create a cohesive visual family.
• Do use the surface-container stack (surface-container-low through surface-container-highest) to create visual separation in data-dense layouts without introducing color noise.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to signal responsiveness.
• Do use label-sm (12px, 500 weight, 0.05em tracking) for secondary metadata and timestamps, applying text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) when placed over busy backgrounds.
• Do maintain 48px minimum height for all touch-interactive elements (buttons, input fields, list items) for accessibility.
• Do use error (#d9534f) exclusively for destructive actions, validation failures, and critical alerts—never use it for positive feedback.
• Do apply elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) to cards and elevation.lg (0 4px 15px rgba(0, 0, 0, 0.2)) to modals for consistent depth hierarchy.

**Don't**

• Don't use secondary (#d9534f) or tertiary (#003388) on primary CTAs—primary (#0b74b9) is the only color for main actions.
• Don't apply border-radius smaller than DEFAULT (8px) to primary interactive elements; use DEFAULT only for inputs and tight technical components.
• Don't mix shadow and border styling on the same component—use either elevation.sm/md/lg or a 1px border, not both.
• Don't use body-md (16px) for button text; always use label-md (14px, 600 weight) to maintain visual hierarchy and scanability.
• Don't apply more than 200ms transition duration to interactive state changes; faster feels snappy, slower feels sluggish.
• Don't use on-surface (#32373c) for interactive elements; reserve it for body text and non-interactive labels only.
• Don't place small text (label-sm, 12px) over high-contrast backgrounds without text-shadow; apply 0 1px 2px rgba(0, 0, 0, 0.1) for legibility.
• Don't use the surface-container stack for text backgrounds; use surface (#ffffff) or surface-container-low (#f3f4f5) only.