Sberbank Design System Deep Dive

1. Brand Overview

Sberbank’s digital presence feels like a bank that wants to be more than a bank. They’re not pushing the cold, corporate blue that dominates financial services. Instead, they lead with a saturated green (rgb(33, 160, 56)), which reads as growth, trust, and environmental awareness. This is intentional: green is a safe color in finance, but the specific hue here is fresher and more modern than the old “institutional green” they used years ago.

The general vibe: clean, confident, and a little playful in micro-interactions. The typography (SBSansDisplay and SBSansText) is proprietary, not the usual Google Fonts fare. That alone signals investment in brand identity. They’ve got a tight spacing system (8px base, with some oddball values) and a consistent approach to rounded corners that gives the UI a friendly, approachable feel.

This is for a broad customer base — retail banking, small business, and enterprise — but the design language leans consumer-friendly. Big type for headings (110px down to 28px for heading contexts), comfortable paddings, and generous border radii (up to 40px on some cards) make it less intimidating than the average banking site.

There’s a noticeable mix of corporate seriousness (deep greens, dark text) and lifestyle marketing (soft shadows, large imagery). They use shadows sparingly but effectively; green-tinted shadows (rgba(8, 92, 24, 0.05)) reinforce the brand hue even in depth effects. Motion is present — buttons scale on hover, links subtly change color — but it’s restrained.

If you’re building for this brand, you need to balance authority with friendliness: keep it clean, but don’t strip the warmth out. Stick to their green, their typefaces, and their rounded geometry, and you’ll be in the right lane.

2. Color System

2.1 Primary Colors

The primary brand color is rgb(33, 160, 56) → #21A038. It’s a medium-saturated green, leaning slightly towards yellow. This is the “action” color: primary CTAs, brand highlights, and any element that needs to scream “Sberbank.”

Psychologically, green here communicates growth, prosperity, and environmental/social responsibility. Compared to competitors like Barclays (blue) or Raiffeisen (yellow/black), Sberbank’s green is warmer and more humane.

They back this up with a neutral palette — black, white, dark gray — and very sparing use of pure blue (rgb(0, 0, 238) → #0000EE) for legacy link styles.

2.2 Complete Palette

2.3 Color Relationships

• Contrast: Primary green (#21A038) on white passes WCAG AA easily for normal text. White on green also passes. Dark green overlay (#172419) on white is very high contrast.
• Accessibility: The semi-transparent dark green (rgba(23, 36, 25, 0.72)) requires care on light backgrounds — it’s readable at larger sizes, but small type could slip below AA.
• Dark Mode: No explicit dark mode palette extracted, but the semi-transparent overlay hints they may use blending modes to adapt.

2.4 Usage Guide

• Works well: Green + white for CTAs; dark green text on white; white text on green.
• Avoid: Green on blue — low contrast and brand clash. Also avoid mixing legacy link blue with green CTAs; it feels uncoordinated.
• Tip: Use shadows with green tint (rgba(8, 92, 24, 0.05)) for subtle brand reinforcement.

3. Typography

3.1 Font Families

Two main proprietary families:

• SBSansDisplay — for headings
• SBSansText — for body text, captions, and some headings

Fallback stack: OpenSans, Helvetica Neue, Helvetica, Arial — safe sans-serif fallbacks.

There’s also occasional Times and Arial usage for system elements or legacy content.

Source: No Google Fonts or Adobe Fonts; these are likely custom-hosted.

3.2 Type Scale

(Only representative rows shown; full list in data.)

3.3 Hierarchy

They use huge headings at the top of the scale (110px) for hero sections. The drop to 96px, 80px, then down into the 30s is steep — strong visual step-downs. SBSansDisplay is tight in letter-spacing (negative tracking), which makes big type feel dense and intentional.

Body sizes hover around 16–20px, which is comfortable. Captions bottom out at 12px, but with decent line heights (1.33–1.54) for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px system, but with odd values like 7px, 10.8px, 11px, 15px, 17px.

4.2 Layout

Breakpoints are plenty — over 30 defined, ranging from 370px mobile to 1920px desktop. This suggests a fluid responsive system with fine-grained adjustments.

5. Visual Elements

Border Radius

They embrace rounded corners heavily.

Values range from 7px (small UI elements) to 40px (large cards). Also pill shapes (50% for avatars).

Common radii: 8px, 16px, 20px, 24px, 32px, 40px.

Shadows

Shadows are soft and brand-tinted:

• rgba(8, 92, 24, 0.05) 0px 12px 64px 0px — large, light shadow for cards.
• rgba(0, 0, 0, 0.12) 0px 15px 39px 0px — deeper, neutral shadow.

They layer shadows for some elements — multiple rgba blacks with decreasing opacity.

Borders

Minimal. Often 0px borders, relying on shadows or background contrast.

6. Components

6.1 Buttons

Primary (.dk-sbol-button_type_primary):

• Default: bg #21A038, white text, padding 0 24px, radius 8px, border 2px solid transparent.
• Hover: bg #E5ECEC, text rgba(38,38,38,0.7), scale 1.1.
• Active: bg black, border semi-transparent white, text dark gray.
• Focus: bg #A2125E (surprise magenta), border black, scale 1.1.

Story Link Button (.stories__desk__card-link):

• Default: bg #EFEFEF, white text, radius 24px.
• Hover/Active/Focus similar scale and color changes.

6.2 Links

Variants:

• Dark green overlay text (rgba(23,36,25,0.72)), no underline, hover → semi-transparent white.
• Legacy blue (#0000EE).
• White links on dark bg.
• Green underlined (#0D8523).

No default browser underlines except for the green variant.

6.3 Forms

Text Input:

• Default: bg white, black text, radius 16px, padding ~24px, no border, subtle 1px box-shadow.
• Focus: no border, text color fades to 60% black.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #21A038;
  --color-black: #000000;
  --color-dark-green-overlay: #172419;
  --color-white: #FFFFFF;
  --color-dark-gray: #262626;
  --color-link-blue: #0000EE;
  --color-medium-gray: #333333;

  /* Typography */
  --font-sans-display: 'SBSansDisplay', OpenSans, 'Helvetica Neue', Helvetica, Arial;
  --font-sans-text: 'SBSansText', OpenSans, 'Helvetica Neue', Helvetica, Arial;
  --font-serif-times: Times, serif;
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-70: 70px;
  --space-80: 80px;

  /* Radius */
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-green-lg: rgba(8, 92, 24, 0.05) 0px 12px 64px 0px;
  --shadow-black-md: rgba(0, 0, 0, 0.12) 0px 15px 39px 0px;
}

8. AI Coding Assistant Prompt

# Sberbank Design System Specification

You are a Sberbank design expert. Build UIs matching their visual language exactly.

## Brand Context
Sberbank uses a friendly-yet-authoritative design language. Rounded corners, a fresh green primary, and proprietary sans-serif typography. Shadows are soft and often green-tinted.

## Color Palette
- Primary Green: #21A038 — Primary CTAs, key actions
- Black: #000000 — Body text, icons
- Dark Green Overlay: #172419 — Headings, text on light bg
- White: #FFFFFF — Backgrounds, text on dark bg
- Dark Gray: #262626 — Secondary text
- Link Blue: #0000EE — Legacy links
- Medium Gray: #333333 — Secondary UI

## Typography
- Headings: 'SBSansDisplay', OpenSans, 'Helvetica Neue', Helvetica, Arial
- Body: 'SBSansText', OpenSans, 'Helvetica Neue', Helvetica, Arial
- Serif: Times, serif
- Arial fallback

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 110px | 600 | 0.87 | Hero titles |
| H1-alt | 96px | 600 | 1.15 | Large headings |
| H1-small | 80px | 600 | 1.02 | Section hero |
| Body-lg | 20px | 600 | 1.20 | Lead text |
| Body | 16px | 400-600 | 1.13-1.50 | Paragraphs |
| Caption | 14px | 500-600 | 1.29 | Labels |
| Caption-sm | 12px | 400-600 | 1.33 | Small labels |

## Spacing & Grid
Base: 8px grid
Scale: 4px, 8px, 16px, 20px, 24px, 32px, 40px, 70px, 80px
- Buttons: padding 0 24px
- Cards: padding 24px
- Sections: 40px+

## Border Radius
- sm: 8px — small buttons, inputs
- md: 16px — inputs, menus
- lg: 24px — large buttons, modals
- xl: 32px — large cards
- xxl: 40px — hero cards
- full: 50% — avatars

## Shadows & Depth
- Large green-tinted: rgba(8, 92, 24, 0.05) 0 12px 64px
- Medium black: rgba(0, 0, 0, 0.12) 0 15px 39px

## Component Specifications

### Primary Button
Default:
```css
background: #21A038;
color: #FFFFFF;
padding: 0 24px;
border-radius: 8px;
border: 2px solid transparent;
font-weight: 500;
font-size: 13px;
```
Hover:
```css
background: #E5ECEC;
color: rgba(38,38,38,0.7);
transform: scale(1.1);
```
Active:
```css
background: #000000;
border: 2px solid rgba(255,255,255,0.24);
color: #262626;
```
Focus:
```css
background: #A2125E;
border: 2px solid #000000;
transform: scale(1.1);
```

### Input Field
Default:
```css
background: #FFFFFF;
color: #000000;
border-radius: 16px;
padding: 24.5px 24px;
border: none;
box-shadow: rgba(0, 0, 0, 0) 0 0 0 1px;
```
Focus:
```css
color: rgba(0,0,0,0.6);
outline: none;
```

## Layout & Responsive Rules
Breakpoints: 370px, 414px, 480px, 600px, 768px, 1024px, 1440px, 1920px
Max content width: use fluid up to 1920px
Page padding: 16-24px mobile, 40px+ desktop

## Interaction Rules
- Transition: 150ms ease for hover/focus/active
- Focus: visible border change + slight scale
- Hover: scale up to 1.1 for buttons

## DO List
- Use only palette colors
- Maintain 8px grid
- Use SBSansDisplay for headings
- Keep corner radii consistent per component size
- Use green-tinted shadows for depth

## DON'T List
- Mix sharp and rounded corners
- Invent new greens
- Overuse link blue
- Remove hover scale from buttons

## Code Examples

Primary Button:
```css
.btn-primary { background:#21A038; color:#fff; padding:0 24px; border-radius:8px; font-weight:500; font-size:13px; transition:all 150ms ease; }
.btn-primary:hover { background:#E5ECEC; color:rgba(38,38,38,0.7); transform:scale(1.1); }
```

Card:
```css
.card { background:#fff; border-radius:24px; padding:24px; box-shadow:rgba(8,92,24,0.05) 0 12px 64px; }
```

Input:
```css
.input { background:#fff; border-radius:16px; padding:24.5px 24px; font-size:16px; }
.input:focus { color:rgba(0,0,0,0.6); outline:none; }
```

9. Summary

TL;DR — Sberbank’s design system is green-forward, rounded, and confident. Proprietary sans-serif type, an 8px grid, and green-tinted shadows define the look. Keep it friendly but precise.

Brand Keywords:

• growth-oriented
• approachable-corporate
• green-centric
• rounded-geometry
• measured-motion