Kalupur Bank

Overview

Kalupur Bank's design system embodies 'Institutional Modernism'—a visual language that marries cooperative banking tradition with contemporary fintech accessibility. The brand serves retail and corporate customers across India, requiring a UI that conveys trustworthiness (via structured typography and authoritative blues) while remaining approachable and digitally native. The emotional response is one of competence and clarity: users should feel confident that their financial data is secure, yet empowered to navigate complex banking products without friction.

The voice is professional yet conversational—never patronizing, never jargon-heavy. Kalupur speaks in clear, direct sentences: 'Your deposits are protected. Your growth is our priority.' The vocabulary favors action words (Connect, Access, Secure, Grow) and avoids corporate clichés. Brand personality: reliable, progressive, locally rooted (Gujarati heritage visible in multilingual UI), and genuinely customer-centric.

Colors

The color palette is anchored in a deep institutional blue—Primary (#305fad)—used exclusively for CTAs, navigation highlights, and trust-critical elements like security badges. This blue appears on the primary button (rgb(48, 95, 173), 14px Montserrat 700), the chatbot agent bubbles (background-color: #305fad), and the header navigation. Secondary accent (#ef3a3f, a vivid red) signals alerts, errors, and high-priority warnings; it appears sparingly to maintain urgency without overwhelming. Tertiary green (#00d084) is reserved for success states and positive confirmations (e.g., transaction approved). The surface stack is clean and minimal: pure white (#ffffff) as the primary canvas, with subtle grays (#f5f5f5 for surface-dim, #d7dbdd for surface-container-highest) used for section dividers

Typography

The type system pairs Montserrat (geometric, modern, weights 600–700) for all headings and labels with Open Sans (humanist, warm, weight 400) for body copy and long-form content. This pairing creates visual hierarchy while maintaining legibility at small sizes. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements; Headline-lg (40px, 600 weight) anchors major sections like 'Products' and 'Services'; Headline-md (28px, 600 weight) introduces subsections; Title-lg (20px, 600 weight, Montserrat) labels cards and modals. Body-lg (18px, Open Sans, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions; Body-md (16px, Open Sans, 400 weight, 24px line-height) is the default paragraph size. Label-md (14px, Montserrat 700, 0.01em tracking)

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The gutter is 24px (md spacing), applied consistently between grid columns and section blocks. White-space philosophy: sections are separated by lg spacing (40px) vertically, creating breathing room between 'Products', 'Services', and 'Rates' sections. Cards within sections use md spacing (24px) for internal padding and sm spacing (12px) for gaps between card elements. The hero section occupies full viewport width with a 64px (xl spacing) top margin; the header is fixed at the top with 0px vertical padding and 15px horizontal padding (from computed styles). Container max-width is enforced at 1280px for desktop; on mobile, the layout shifts to a single column with gutter reduced to 16px. The spacing s

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background shifts, avoiding the heavy drop-shadows of older banking UIs. Level 1 (Base): flat white surface (#ffffff) with no shadow; used for body background and card interiors. Level 2 (Raised Cards): 1px 1px 3px 0px rgba(2, 2, 2, 0.23)—a tight, close shadow that lifts cards 2–4px above the surface; applied to all .card and .pum-container elements. Level 3 (Modals & Overlays): 0px 10px 25px 4px rgba(2, 2, 2, 0.50) for modal containers (.pum-theme-2635 .pum-container), creating a pronounced depth separation. Hover states on cards

Shapes

The shape philosophy is 'Pragmatic Minimalism'—sharp corners where they reinforce authority (cards, buttons), rounded corners where they soften interaction (inputs, badges, modals). Buttons use 3px border-radius (sm rounded), a subtle softness that feels modern without being playful; the primary CTA button is 40px tall with 7px 15px padding, rendered in Montserrat 700 at 14px. Cards use 0px border-radius (DEFAULT rounded, effectively square) to align with the institutional grid aesthetic, but modals and popovers use 3–5px (md rounded) to distinguish them as temporary overlays. Input fields use

Components

Action Elements Primary buttons (button-primary) use the institutional blue (#305fad) background with white text, Montserrat 700 at 14px, 3px border-radius, and 7px 15px padding (40px total height). On hover, the background shifts to #1f8ceb (primary-container) with a 200ms ease-in-out transition; no shadow is added, maintaining flatness. Secondary buttons (button-secondary) have a white background with black text, 50% border-radius (pill shape), and a 1px outline in #d7dbdd; on hover, the background becomes #e8e8e8 and text color shifts to primary blue. All buttons use the label-md typography (Montserrat 700, 14px, 0.01em tracking) and are 40–44px tall to meet touch targets (minimum 44px per accessibility guidelines).

Containers & Surfaces Cards (card) are rendered with a white b

Do's and Don'ts

**Do**

• Do use Primary blue (#305fad) exclusively for CTAs, primary navigation, and trust-critical elements like security badges and focus states.
• Do apply Montserrat 600–700 for all headings and labels; reserve Open Sans 400 for body copy and long-form content to maintain clear hierarchy.
• Do enforce 24px (md spacing) as the default padding inside cards and 40px (lg spacing) between major sections to create visual breathing room.
• Do use the sm shadow (1px 1px 3px 0px rgba(2, 2, 2, 0.23)) on cards and the md shadow on hover to signal depth without overwhelming the institutional aesthetic.
• Do keep border-radius at 0px (square) for cards and inputs to reinforce the structured grid; use 3px for buttons and 50% for badges to differentiate interaction types.
• Do apply 200ms ease-in-out transitions on all hover and focus states to create a responsive, polished feel without feeling sluggish.

**Don't**

• Don't use secondary red (#ef3a3f) or tertiary green (#00d084) on primary CTAs; reserve these for error states and success confirmations only.
• Don't apply shadows heavier than the lg shadow (0px 10px 25px 4px rgba(2, 2, 2, 0.50)) on any element; the institutional aesthetic requires restraint.
• Don't mix Montserrat and Open Sans weights arbitrarily; use Montserrat 600–700 for headings/labels and Open Sans 400 for body to maintain typographic clarity.
• Don't use border-radius greater than 3px on buttons or inputs; the institutional tone requires sharp, grid-aligned corners on primary interactive elements.
• Don't apply gradients, glassmorphism, or blur effects to the main content area; these belong only to modal overlays and are used sparingly.
• Don't reduce spacing below sm (12px) between form fields or list items; the design requires generous white-space to avoid a cramped, cluttered appearance.