Dushanbe City Bank

Overview

Dushanbe City Bank is a modern financial services provider serving Central Asia's retail and business customers through digital-first channels and physical branches. The design system embodies 'Vibrant Pragmatism'—a visual language that pairs bold, energetic accents (vivid orange #FF7528) with clean, accessible typography and rational spacing to communicate speed, reliability, and customer empowerment. The brand personality is direct and confident: approachable yet professional, never patronizing. The UI celebrates functionality over decoration, using color strategically to guide attention to key actions (CTAs, status indicators, product highlights) while maintaining a calm, organized visual hierarchy. Example sentence in brand voice: 'Visa Gold за 5 минут—откройте счет и начните пользоваться преимуществами сегодня.'

Colors

The color palette is anchored by a vibrant orange primary (#FF7528), deployed exclusively on call-to-action buttons, active states, and brand-critical interactive elements. This warm, energetic accent stands in sharp contrast to the cool, neutral surface stack (light grays #f4f4f4 to #e9ecef, pure white #ffffff for cards and modals), creating visual separation and drawing the eye to conversion moments. Secondary blue (#0d6efd) supports informational hierarchy and secondary actions, while tertiary cyan (#0dcaf0) highlights status and supplementary content. The neutral on-surface text color is a deep charcoal (#212529), ensuring 7:1+ contrast on light backgrounds. Surface variants (#dee2e6, #ced4da) define container boundaries and subtle depth layers. Error red (#dc3545) is reserved for vali

Typography

Open Sans is the sole typeface, deployed across 8 levels to create a clear information hierarchy. Display (48px, 700 weight, -0.02em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700) frames product category pages; Headline-md (28px, 700) introduces section blocks; Title-lg (20px, 700) labels cards and subsections. Body-lg (18px, 500, 27px line-height) carries feature descriptions and longer copy; Body-md (16px, 400, 24px line-height) is the default paragraph text, optimized for readability at arm's length on mobile and desktop. Label-md (14px, 700) marks buttons, form labels, and micro-interactions; Label-sm (12px, 500) is reserved for helper text, timestamps, and dense tabular data. All headlines use -0.01em to -0.02em negative letter-spacing to tighten visu

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered on viewport. Container padding is 24px (md spacing) on desktop, reducing to 16px on mobile (< 576px). The page rhythm is built on a semantic spacing scale: 8px unit (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px). Section separation uses lg spacing (40px) vertically; card-to-card gaps within a row use md spacing (24px). The hero section spans full-width with a light gray background (#f4f4f4), providing visual containment; product cards and feature blocks sit on white (#ffffff) with 1px borders (#dee2e6) and md shadows (0 3px 8px rgba(0, 0, 0, 0.15)). Gutters between grid columns are fixed at 24px. On tablets (768px–991px), the grid collapses to 8 columns; on mobile (< 576px), it becomes single-column with 16px s

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts, avoiding harsh drop-shadows. Level 1 (Base/Surface): no shadow, background #f4f4f4 or #ffffff depending on context. Level 2 (Standard Cards/Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background #ffffff, 1px border #dee2e6. Level 3 (Elevated Modals/Overlays): box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06), background #ffffff, 1px border #dee2e6. Hover states on interactive elements transition to Level 3 shadows over 0.3s ease-in-out, signaling interactivity without jarring motion. Input fields a

Shapes

The shape language is 'Soft-Technical'—rounded corners are applied strategically to soften the geometric precision of a financial interface without sacrificing clarity. Buttons use 12px (md radius, 0.75rem), creating a friendly, approachable CTA that avoids both sharp rectangles and overly rounded pill shapes. Cards and modals use 20px (xl radius, 1.5rem), providing generous rounding that feels modern and premium. Input fields use 12px (md radius) to align with buttons, creating visual cohesion in form layouts. Dropdown panels and small UI elements (badges, chips) use 4px (sm radius, 0.25rem)

Components

Action Elements Buttons are the primary conversion driver. **Button-primary** uses #FF7528 background, white text, 13.5px 32px padding, 44px height, 12px border-radius, Open Sans 700 at 14px. On hover, the background darkens to #ff6b0a with a 0.2s transition; on active/press, it shifts to #e85a00. No border, no shadow—the color alone signals interactivity. **Button-secondary** is transparent with a 1px #FF7528 border, matching primary text color, same padding and height. On hover, the background fills with #ffe4d1 (primary-container) and text becomes #663300 (on-primary-container). This inversion creates a clear visual feedback loop.

Containers & Surfaces **Card-surface** is the foundational container: white background (#ffffff), 1px border #dee2e6, 24px padding, 20px border-radiu

Do's and Don'ts

**Do**

• Do use #FF7528 exclusively on CTAs, active states, and brand-critical moments—never on passive text or backgrounds.
• Do maintain 24px minimum padding inside cards and 40px vertical spacing between major sections to preserve breathing room.
• Do apply Open Sans 700 weight to all headlines and button labels; reserve 400–500 weights for body copy and helper text.
• Do transition all interactive hover states over 0.2s–0.3s ease-in-out; avoid instant color changes.
• Do use the three-tier shadow system (none, 0 3px 8px, 0 10px 28px) to signal depth; never mix shadow styles within a single component.
• Do set input focus states with a 3px rgba(255, 117, 40, 0.1) blur shadow and #FF7528 border to guide user attention.

**Don't**

• Don't use orange (#FF7528) on non-interactive elements, backgrounds, or decorative text—it must always signal action.
• Don't apply hard corners (0px border-radius) to any component; minimum is 4px (sm radius) for micro-interactions.
• Don't mix typefaces; Open Sans is the sole font family across all text levels and weights.
• Don't use opacity or transparency to indicate disabled states; instead, use #6c757d text on #e9ecef background for clear, accessible contrast.
• Don't apply shadows to input fields or form elements; use border color and background color shifts instead.
• Don't exceed 1200px container max-width; content wider than this becomes difficult to scan and reduces visual hierarchy clarity.