Bangkok Bank

Overview

Bangkok Bank's design system embodies **Institutional Modernism**—a refined aesthetic that balances heritage trust with contemporary clarity. The brand serves Thailand's most discerning personal, business, and corporate banking clients, requiring a visual language that conveys stability, precision, and accessibility without sacrificing sophistication. The UI evokes a sense of calm professionalism: clean geometric layouts, a restrained color palette anchored by a vivid electric blue (#0064ff), and generous whitespace that prioritizes legibility and focus. The emotional response is one of confidence—users feel they are interacting with a competent, transparent institution.

Voice and personality: Bangkok Bank speaks with measured authority, never condescending. The tone is direct, informative, and occasionally warm when discussing customer benefits. Vocabulary favors clarity over jargon; when technical terms are necessary, they are explained. Example sentence in brand voice: "Your savings grow securely with us—competitive rates, zero hidden fees, 24/7 online access."

Colors

The color system is built on a foundation of institutional trust. **Primary (#0064ff)** is the signature electric blue used exclusively for call-to-action buttons ("Log on"), interactive links, focus states, and brand-critical UI elements. It commands attention without aggression, appearing frequently enough to anchor the interface but never overwhelming the content hierarchy. **Secondary (#003399)** provides a deeper, more conservative accent for secondary navigation, badges, and status indicators—reinforcing the bank's established heritage. **Tertiary (#cbad6f)** is a warm gold accent reserved for premium product highlights, wealth management sections, and luxury service callouts, evoking prestige and exclusivity.

The surface stack is anchored in pure white (#ffffff) for maximum legibil

Typography

The type system uses Bangkok Bank's proprietary font family (BangkokBank-Medium, BangkokBank-Regular, BangkokBank-Bold) paired with Tahoma and Helvetica as fallbacks, creating a distinctive, ownable voice. Display (89.6px, 400 weight) is reserved for hero headlines and major page titles, set in BangkokBank-Medium with -0.02em letter-spacing to tighten the generous default tracking. Headline-lg (40px, 400 weight) and headline-md (28px, 400 weight) are used for section titles and card headers, maintaining consistent weight to avoid visual hierarchy confusion. Body-lg (18px) and body-md (16px) form the core reading experience; body-md is the default for all paragraph text, ensuring 24px line-height (1.5x) for comfortable scanning. Labels (14px and 12px) use BangkokBank-Medium at 500 weight to

Layout

The layout system uses a 12-column grid with a fixed max-width of 1272px, centered on viewport. This container width accommodates desktop banking workflows (typically 1024px–1440px viewports) while maintaining comfortable line lengths for body text (60–80 characters). Spacing follows an 8px unit system: xs (4px) for micro-adjustments, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Gutters between grid columns are 24px (md spacing), providing breathing room without excessive fragmentation. White-space is treated as a first-class design element: never fill empty space with decorative elements or secondary content. The homepage hero uses full-width imagery with a semi-transparent ove

Elevation & Depth

Depth is conveyed through subtle shadows and surface color shifts, never through dramatic layering. The elevation system uses three levels: **Level 1 (Base)** has no shadow; content sits flush on the surface. **Level 2 (Standard Cards & Inputs)** uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests the element is 8px above the base. This shadow is applied to all card components, input fields, and dropdown panels. **Level 3 (Modals & Overlays)** uses box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33), a tighter, darker shadow indicating the element is modal and

Shapes

The shape philosophy is **Geometric Softness**—sharp enough to feel modern and precise, rounded enough to feel approachable and human. Buttons use 7px border-radius (rounded.md), a sweet spot between angular and organic that feels contemporary without appearing trendy. Cards and containers use 7px as well, creating visual consistency across interactive and passive surfaces. Input fields use 4px (rounded.DEFAULT), slightly tighter than buttons to signal they are receptive, not assertive. Dropdowns and select panels use 4px to match inputs, reinforcing the form-family relationship. Badges and pi

Components

Action Elements

**Buttons** are the primary interaction pattern. Primary buttons (button-primary) use {colors.primary} (#0064ff) background with white text, 44px height, 12px vertical / 20px horizontal padding, and 7px border-radius. On hover (button-primary-hover), the background shifts to #0048b7 (a 20% darker blue) over 200ms, signaling state change without requiring an outline or shadow shift. Secondary buttons (button-secondary) have a transparent background with a 1px {colors.primary} border, white text, and 32px height; on hover, they fill with {colors.primary-container} (#e3f2fd) and text becomes {colors.on-primary-container} (#0048b7). Both button variants use {typography.label-md} (14px, 500 weight) for text, ensuring readability at small scales. Disabled buttons (not shown

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0064ff) for all primary CTAs and interactive focus states—it is the brand's signature and must remain consistent across all touchpoints.
• Do maintain 24px (md spacing) between major sections and 12px (sm spacing) between related elements; white-space is a design tool, not wasted real estate.
• Do apply 7px border-radius to all buttons and cards; this is the geometric signature of the system and must not vary.
• Do use BangkokBank-Medium for headlines and labels; it is the ownable typeface and differentiates the brand from generic sans-serifs.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to any label or small text overlaid on imagery or dark backgrounds to ensure WCAG AAA contrast.
• Do use {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) for hover states on cards and interactive surfaces; it signals depth and interactivity without overwhelming.
• Do test all color combinations for WCAG AAA contrast (7:1 for normal text, 4.5:1 for large text); Bangkok Bank serves all ages and abilities.

**Don't**

• Don't use border-radius values other than 3px, 4px, 7px, 8px, 10px, or 9999px; arbitrary radii break the geometric system.
• Don't apply shadows to text or use text-shadow for decorative purposes; it reduces legibility and feels dated.
• Don't mix BangkokBank font with system fonts (e.g., -apple-system, system-ui) in the same component; it creates visual fragmentation.
• Don't use {colors.secondary} (#003399) or {colors.tertiary} (#cbad6f) for primary CTAs; they dilute the primary brand signal and confuse users about interaction priority.
• Don't reduce padding below 12px (sm) on buttons or cards; cramped spacing feels cheap and reduces touch-target accessibility.
• Don't use opacity or rgba() to create disabled states; always use a dedicated color (e.g., surface-container-high with reduced contrast text) or set cursor: not-allowed.
• Don't apply multiple shadows to a single element; it creates visual noise and breaks the elevation hierarchy.
• Don't use gradients or background images on interactive elements (buttons, inputs); they distract from content and reduce accessibility.