Vikki Digital Bank

Overview

Vikki Digital Bank embodies a "Vibrant Maximalism" aesthetic—a bold departure from austere fintech conventions. The design celebrates financial empowerment through saturated, energetic gradients (electric blue #0000ff to magenta #d2008c to vivid orange #ff8a00), playful photography, and dynamic typography. The brand serves Vietnamese consumers and small businesses seeking fast, accessible financial services without bureaucratic friction. The emotional response is one of optimism and momentum: users feel enabled, not intimidated. The UI voice is conversational, direct, and celebratory—never corporate-stiff. Example: "Tiết kiệm Vikki: Nhận lãi linh hoạt tối ưu sinh lời" (Save with Vikki: Get flexible interest that maximizes your gains).

Colors

The color system is built on a vibrant primary blue (#0000ff) paired with secondary orange (#ff8a00) and tertiary magenta (#d2008c), creating a high-energy tri-chromatic palette. Primary (#0000ff) dominates CTAs, navigation highlights, and active states—it is the signature accent that signals interactivity and brand presence. Secondary (#ff8a00) supports calls-to-action and decorative elements, often appearing in gradient overlays. Tertiary (#d2008c) adds accent depth in badges, highlights, and promotional zones. The surface stack is anchored in clean whites (#ffffff) and light grays (#f5f5f5 to #dddddd) to ensure legibility over the vibrant accents. On-surface text is dark charcoal (#222222) for 16px+ body copy, with lighter variants (#555555) for secondary information. The gradient butto

Typography

The type system uses Be Vietnam Pro as the primary typeface—a geometric, friendly sans-serif that balances approachability with modern sophistication. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 700 weight) and headline-md (28px, 600 weight) structure content hierarchy with tight letter-spacing (-0.02em to -0.01em) to reinforce energy and confidence. Body text (16px–18px, 400 weight, 0.01em–0.02em tracking) maintains readability at smaller sizes while preserving the brand's geometric character. Labels (12px–14px, 500–600 weight) are used for form fields, badges, and micro-interactions. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12px) when placed over busy gradient backgrounds to ensure contrast and le

Layout

The layout follows a 12-column grid with a max-width of 1280px, supporting both desktop and mobile-first responsive design. The hero section uses full-width imagery with a left-aligned gradient overlay (25deg angle, 60% opacity) to frame the headline and CTA. Section spacing follows the semantic scale: lg (40px) separates major content blocks, md (24px) divides subsections, and sm (12px) creates breathing room within components. The gutter is consistently 24px on desktop, collapsing to 12px on tablet and 8px on mobile. Container padding uses md (24px) for standard sections, with lg (40px) reserved for hero and feature zones. White-space is generous—never less than 12px between interactive elements—to reduce cognitive load and emphasize the vibrant color palette.

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): flat surfaces with no shadow, used for cards on white backgrounds. Level 2 (Raised): box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), applied to standard cards, input fields, and secondary containers. Level 3 (Elevated): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), used for modals, popovers, and hover states. Level 4 (Premium): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for hero overlays and top-level modals. Hover interactions add a 2px upward transform (translateY(-2px)) paired with th

Shapes

The shape philosophy is "Soft-Technical Pragmatism"—rounded corners are used strategically to soften the geometric rigidity of the grid while maintaining clarity. Buttons and CTAs use xl (25px) border-radius, creating pill-shaped forms that feel friendly and clickable. Cards and containers use DEFAULT (3px) or md (4px) for subtle definition without softness. Input fields use DEFAULT (3px) to align with form conventions. Badges use full (9999px) for maximum roundness, emphasizing their role as discrete, self-contained labels. The rationale: larger radii (xl, full) are reserved for interactive,

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses the signature blue (#0000ff) with white text, 10px 25px padding, 44px height, and 25px border-radius. On hover, the background shifts to #0000cc and adds a 0 4px 12px rgba(0, 0, 0, 0.15) shadow with a -2px translateY transform. The button-gradient variant applies the full multi-color gradient (25deg, #00F to #FFB800) and receives an enhanced glow on hover: 0 8px 24px rgba(0, 0, 255, 0.25). All button text uses label-md typography (14px, 600 weight) with 0.01em letter-spacing. Transition timing is 200ms ease-out for all state changes.

Containers & Surfaces Cards use a white background (#ffffff) with 3px border-radius, 24px padding, and a subtle shadow (0 2px 5px rgba(0, 0, 0, 0.2)). On

Do's and Don'ts

**Do**

• Do use the primary blue (#0000ff) for all primary CTAs, active navigation states, and focus indicators—it is the brand's signature accent and must remain visually dominant.
• Do apply the gradient button treatment (25deg, #00F to #FFB800) exclusively to hero-section CTAs and high-priority actions to maintain visual hierarchy and prevent gradient fatigue.
• Do maintain at least 12px of white-space between interactive elements (buttons, links, inputs) to reduce cognitive load and improve touch-target accessibility.
• Do use Be Vietnam Pro at 600–700 weight for headlines and 400 weight for body text to preserve the brand's geometric, approachable character across all sizes.
• Do pair the vibrant color palette with generous white-space and light gray backgrounds (#f5f5f5) to prevent visual overwhelm and ensure legibility.

**Don't**

• Don't use the gradient button treatment on secondary or tertiary actions—reserve it for primary CTAs only to avoid diluting its premium signal.
• Don't reduce border-radius below 3px on cards or containers; the brand's soft-technical aesthetic requires at least minimal rounding to feel contemporary.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.12) on any element; excessive depth contradicts the flat, energetic visual language.
• Don't use system fonts (Arial, Helvetica) as primary typefaces in hero or headline zones—Be Vietnam Pro must be loaded and applied to maintain brand consistency.
• Don't place small text (12px–14px) over gradient backgrounds without a text-shadow (0 2px 4px rgba(0, 0, 0, 0.15)) or semi-transparent backdrop; legibility must be guaranteed.