Т-Банк (Tinkoff Bank)

Overview

Т-Банк is Russia's leading digital financial services platform, serving 55+ million customers with a design language rooted in **Energetic Minimalism**—a movement that pairs vibrant, high-saturation accent colors (yellow #ffdd2d, blue #428bf9) against a pristine white canvas to convey both approachability and financial authority. The aesthetic rejects corporate coldness; instead, it channels optimism and clarity, making complex financial products feel intuitive and accessible. The UI evokes a sense of forward momentum: the yellow primary accent (reminiscent of a lightning bolt or beacon) signals action and opportunity, while the structured typography and generous whitespace ensure users never feel overwhelmed.

The brand voice is direct, confident, and conversational—never patronizing, never jargon-heavy. Tone examples: 'Cashback up to 30%, transfers commission-free' (concrete, benefit-driven) and 'Recommended by your friends' (social proof, warmth). The vocabulary favors short, punchy sentences and active verbs. Personality: a trusted friend who happens to be a financial expert, not a stern banker. The design system reinforces this by using rounded corners (12px–24px) instead of sharp angles, soft shadows (0px 5px 20px rgba(0,0,0,0.1a)) instead of harsh depth, and a single, unmissable yellow CTA button that invites rather than commands.

Colors

The color system is built on a **Dual-Accent** philosophy: primary yellow (#ffdd2d) and secondary blue (#428bf9) serve as the brand's signature pair, each with a full state stack (hover, pressed, fixed variants). Yellow is reserved exclusively for primary CTAs, badges, and brand moments—it appears sparingly but memorably, ensuring every yellow element feels intentional and clickable. Blue supports secondary actions, informational elements, and premium tier indicators. The neutral foundation (white #ffffff, grays #f6f7f8 to #333333) provides breathing room and ensures text legibility at 16px body size with a contrast ratio exceeding 7:1 against #333333 on-surface text.

Usage rules: (1) Primary (#ffdd2d) on-primary (#333333) is used exclusively for main CTAs, hero buttons, and high-priority

Typography

The type system employs a **Geometric-Humanist** pairing: dsHeading (TinkoffSans, a geometric sans-serif with high x-height and tight spacing) anchors headlines and display text, while dsText (NeueHaasUnica, a humanist sans with warm proportions) handles body and UI labels. This combination conveys both precision (geometry) and approachability (humanist curves). Display (60px, 700 weight, -0.02em tracking) is used sparingly for hero sections; Headline-lg (44px, 700, -0.01em) for major section titles; Headline-md (32px, 600) for subsections; Title-lg (20px, 600) for card headers; Body-lg (18px, 400) for long-form content; Body-md (16px, 400) for standard UI copy; Label-md (15px, 500, 0.01em) for buttons and form labels; Label-sm (13px, 400) for secondary UI text and captions. All type is re

Layout

The layout grid is a **12-column fluid system** with a max-width of 1280px, centered on the viewport. Gutter width is 24px (md spacing token), applied symmetrically left and right. Container padding is 24px on desktop, reducing to 16px on tablets and 12px on mobile to maximize content area. Sections are separated by 40px (lg spacing) vertically, creating a rhythm that feels neither cramped nor sparse. Hero sections occupy 100% viewport height with centered content; product cards are arranged in a 3-column grid on desktop (4 columns for smaller cards), collapsing to 2 columns on tablet and 1 on mobile. Whitespace is treated as a first-class design element: every card has 24px internal padding, every button has 16px vertical and 32px horizontal padding, and every input field has 12px padding

Elevation & Depth

Depth is conveyed through a **Soft-Shadow Hierarchy** rather than color shifts or borders. Level 1 (Base/Surface): no shadow, 1px outline at #0010241f for inputs and cards. Level 2 (Standard Card/Hover): box-shadow 0px 5px 20px 0px rgba(0,0,0,0.1a), used on cards in default state and buttons on hover. Level 3 (Elevated/Modal): box-shadow 0px 14px 42px 0px rgba(0,0,0,0.1f), used on modals, dropdowns, and floating panels. Level 4 (Focus/Interaction): 3px outline at {colors.primary} (#ffdd2d) with 0 offset, applied to focused inputs and buttons. Shadows use a 30° angle (typical for 2–3pm light) a

Shapes

The shape language is **Soft-Technical**: corners are rounded, but not organic or overly playful. Border-radius follows a strict scale: 4px (sm, for small UI elements like badges and tight inputs), 8px (DEFAULT, for standard buttons and form fields), 12px (md, for cards and medium containers), 16px (lg, for larger cards and modals), 24px (xl, for hero sections and full-width containers), and 9999px (full, for pills and circular avatars). Buttons use 12px (md) radius, creating a subtle softness that invites interaction without feeling childish. Cards use 16px (lg) radius to feel premium and spa

Components

Action Elements Buttons are the primary interaction mechanism and must be instantly recognizable. **Button-Primary** uses {colors.primary} (#ffdd2d) background with {colors.on-primary} (#333333) text, 12px border-radius, 16px vertical and 32px horizontal padding, and a 48px minimum height. On hover (desktop only), transition background to {colors.primary-container} (#ffcd33) over 300ms ease-in-out; on active/pressed, transition to {colors.inverse-primary} (#fab619). Apply a 2px focus outline at {colors.primary} when keyboard-focused. **Button-Secondary** uses {colors.secondary} (#428bf9) background with white text, same padding and radius, transitioning to #126df7 on hover and #156ed4 on pressed. **Button-Ghost** uses a transparent background with a 1px border at {colors.outline} (#001

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ffdd2d) exclusively for primary CTAs and high-priority actions—every yellow button should feel like a clear next step.
• Do maintain 24px gutter spacing and 48px minimum button heights to ensure comfortable interaction on all devices.
• Do apply 300ms ease-in-out transitions to all interactive state changes (hover, focus, active) to provide visual feedback without feeling sluggish.
• Do use the full typography scale (Display down to Label-sm) to create clear visual hierarchy; never skip levels or mix weights arbitrarily.
• Do apply 1px outline borders at {colors.outline} (#0010241f) to all input fields and cards to define boundaries without harsh contrast.
• Do use box-shadow 0px 5px 20px 0px rgba(0,0,0,0.1a) as the default card shadow; reserve the heavier shadow (0px 14px 42px) for elevated states only.

**Don't**

• Don't use {colors.primary} (#ffdd2d) for body text, backgrounds, or secondary UI elements—it must remain a rare, high-impact accent.
• Don't mix border-radius values within a single component type; buttons are always 12px, cards are always 16px, inputs are always 8px.
• Don't apply shadows to text smaller than 16px without a 0 1px 2px rgba(0,0,0,0.05) text-shadow; larger text should remain shadow-free for crispness.
• Don't use color alone to convey status or meaning; always pair color with an icon, text label, or pattern to ensure accessibility for color-blind users.
• Don't exceed 75 characters per line in body text; use the 1280px max-width and 24px gutter to maintain optimal readability.
• Don't create custom button styles outside the defined primary/secondary/ghost variants; consistency across the product is non-negotiable.