Т-Банк

Overview

Т-Банк is a Russian digital-first financial services platform designed for speed, accessibility, and modern digital banking. The brand embodies "Fintech Directness"—a design philosophy that prioritizes clarity and immediate action over ornamentation. The UI combines a vibrant, high-contrast yellow primary (#ffdd2d) with deep navy secondary accents (#428bf9) and crisp black tertiary elements, creating a visual language that feels energetic yet trustworthy. The emotional response is one of confidence and ease: users feel empowered to manage finances without friction. The brand serves both individual consumers and business clients, spanning debit cards, credit products, investments, and insurance—all unified under a single, cohesive visual system.

The voice is direct, confident, and slightly irreverent. Т-Банк speaks in active imperatives and benefit-driven language, avoiding jargon and corporate formality. Vocabulary patterns emphasize speed ("быстро", "мгновенно"), benefit ("выгода", "кэшбэк"), and accessibility ("просто", "легко"). Example sentence in brand voice: "Кэшбэк рублями до 30%, переводы клиентам Т-Банка без комиссии—всё работает сейчас, не завтра." The brand personality is modern, slightly playful, and unapologetically digital.

Colors

The color system is built on a triadic foundation: a commanding primary yellow (#ffdd2d) for all call-to-action elements and brand moments, a secondary blue (#428bf9) for secondary actions and data visualization, and a tertiary black (#000000) for text hierarchy and structural elements. Primary yellow is the signature accent—used on all primary buttons, hero CTAs, and interactive highlights. It shifts to #ffcd33 on hover and #fab619 when pressed, maintaining visual feedback across all interaction states. Secondary blue (#428bf9) supports primary actions in contexts where yellow would be too dominant; it hovers to #126df7 and presses to #156ed4. The error state uses a distinct red (#f52222 in light mode, #cd2324 in hover), ensuring critical warnings are unmistakable. Surface colors follow a

Typography

The type system employs two distinct font families to create clear hierarchy: dsHeading (TinkoffSans) for all display and headline levels, and dsText (Neue Haas Unica) for body and label text. This pairing creates visual separation between structural hierarchy (headings) and content flow (body), while maintaining a cohesive, modern aesthetic. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and major page titles; Headline-lg (44px, 700 weight) anchors section introductions; Headline-md (32px, 600 weight) breaks up content zones; Title-lg (20px, 600 weight) labels subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent copy; Body-md (16px, 400 weight, 24px line-height) is the default for standard content; Label-

Layout

The layout system uses a 12-column fluid grid with a maximum container width of 1280px, ensuring responsive scaling from mobile (320px) to desktop and beyond. The page rhythm is built on a semantic spacing scale: unit (8px) as the base increment, with sm (12px), md (24px), lg (40px), and xl (64px) for major section separation. Gutter spacing between columns is consistently 24px. Hero sections use lg spacing (40px) for vertical rhythm between headline, subheading, and CTA. Product cards and feature blocks are separated by lg spacing (40px) vertically and md spacing (24px) horizontally. The container max-width of 1280px is applied to all major content sections, with full-width backgrounds extending edge-to-edge. Padding within containers follows the gutter rule: 24px on desktop, scaling down

Elevation & Depth

Depth in Т-Банк is achieved through a restrained shadow system and subtle color shifts rather than dramatic layering. The elevation scale consists of three levels: sm (0px 5px 20px 0px rgba(0, 0, 0, 0.1a)) for standard cards and floating elements, md (0px 14px 42px 0px rgba(0, 0, 0, 0.1f)) for elevated modals and hover states, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for the highest-priority overlays. Shadows are soft and diffuse, never sharp or dramatic. Cards at rest use sm elevation; on hover, they transition to md elevation over 300ms, signaling interactivity. Modals and dropdowns use md e

Shapes

The shape philosophy is "Geometric Clarity"—rounded corners are used strategically to soften the interface without sacrificing precision or modernity. Buttons use md radius (12px), creating a friendly, approachable feel while maintaining clear clickable boundaries. Cards and containers use xl radius (24px) for a more generous, premium appearance. Input fields and smaller UI elements use DEFAULT radius (8px) as a middle ground. Full-radius (50%) is reserved for avatar circles, badges, and icon-only buttons. The rationale is functional: larger radius values (xl, full) are applied to high-promine

Components

Action Elements Buttons are the primary interaction mechanism and use a 300ms transition-duration for all state changes (background-color, color, box-shadow). Primary buttons (#ffdd2d on #333333 text) are 48px tall with 16px vertical and 24px horizontal padding, using md radius (12px). On hover, the background shifts to #ffcd33 (primary-container) with no text color change. On active/pressed, the background becomes #fab619 (inverse-primary). Secondary buttons (#428bf9 background, white text) follow the same height and padding, with hover state #126df7 and pressed state #156ed4. Tertiary (outline) buttons have transparent backgrounds with a 1px solid border at outline color (#0010241f), shifting to surface-container-low on hover. All buttons use label-md typography (15px, 400 weight) an

Do's and Don'ts

**Do**

• Do use primary yellow (#ffdd2d) exclusively for primary CTAs and brand moments—it is the signature accent and must never be diluted or overused on secondary elements.
• Do maintain 40px of vertical white space above and below hero CTAs to ensure they command attention and feel intentional rather than cramped.
• Do apply the 300ms ease-in-out transition timing consistently across all interactive elements (buttons, cards, inputs) to create a predictable, polished interaction model.
• Do use the full-radius (50%) shape exclusively for avatars, badges, and icon-only buttons—never apply it to rectangular containers or text buttons.
• Do layer elevation through shadow + border + color shift rather than relying on shadow alone; this creates depth without visual heaviness.

**Don't**

• Don't use secondary blue (#428bf9) as a primary CTA color—it is a supporting accent and will dilute the brand's visual impact if overused.
• Don't apply shadows heavier than md elevation (0px 14px 42px 0px rgba(0, 0, 0, 0.1f)) on standard UI elements; the system is intentionally restrained.
• Don't mix font families within a single heading or body paragraph—dsHeading is for hierarchy, dsText is for content; never blend them.
• Don't use pure black (#000000) for body text; always use on-surface (#333333) at 0.8 opacity to maintain a softer, more refined appearance.
• Don't apply rounded corners smaller than sm (4px) to interactive elements; the system uses 8px as the minimum for buttons and inputs to ensure clarity and touch-friendliness.