Gosuslugi Design System Deep Dive

1. Brand Overview

Gosuslugi is Russia’s official public services portal. It’s a national utility, not a lifestyle brand, so the design language is functional first. Everything here is about clarity, trust, and reducing friction for millions of users navigating government services. The vibe is utilitarian with a touch of modern polish — no frills, no decorative excess. The color palette is built around a strong institutional blue, paired with crisp whites and neutral grays. It’s not trying to charm you; it’s trying to make sure you can find the “Apply” button without thinking twice.

Typography choices (Lato with Arial fallback) modernize the interface without alienating users who expect something system-default-like. Spacing and layout stick to an 8px grid — the safest way to ensure predictable alignment across hundreds of components. Rounded corners are used sparingly, and when they appear (12px, 8px, etc.), they’re consistent to avoid visual noise. Shadows exist but are subtle — mostly soft, layered blurs for panels and modals instead of dramatic depth.

This is a design system for a high-frequency, high-volume service. It has to work equally well for a pensioner on an old desktop and a 20-year-old on a smartphone. That’s why the breakpoints cover everything from tiny mobile (359px) to wide desktop (1216px). The interaction states are clear: hover = slight scale and color change, focus = strong outline. They’ve nailed the “functional clarity” brief.

The philosophy here: Consistency beats creativity. Every button follows the same state progression. Links never surprise you with underlines appearing/disappearing — they keep it predictable. Color usage is strict: blue for action, gray for secondary text, black for body. Even the hover backgrounds use semi-transparent tints of the primary. For a government brand, trust comes from predictability, and Gosuslugi’s system is exactly that.

2. Color System

2.1 Primary Colors

The main brand color is #0d4cd3 (RGB 13, 76, 211). It’s a saturated, authoritative blue. This hue says “official” without being dull navy. Compared to competitors (e.g., UK’s GOV.UK which uses black/yellow, or France’s Service-Public which leans on red/blue), Gosuslugi’s blue feels more digital-native. It’s friendly enough for web buttons, but serious enough for government forms.

Psychologically, this blue signals trust, stability, and professionalism. It stands out against white backgrounds and meets accessibility contrast requirements for text on white. It’s used for primary links, button text, and key action indicators.

2.2 Complete Palette

2.3 Color Relationships

Primary blue (#0d4cd3) on white meets WCAG AA for normal text and AAA for large text. Black on white is perfect contrast. Neutral gray (#66727f) is borderline for small text, so it’s wisely used for non-critical info. The focus purple (#9b3be5) is bold — ensuring keyboard navigation users see exactly where they are. Hover tints use semi-transparent overlays, keeping the color relationships consistent without introducing new hues.

Dark mode isn’t natively present in the extracted data — everything assumes a light background. If they ever add dark mode, the blue will need slight lightening for contrast against dark surfaces.

2.4 Usage Guide

• Works: Primary blue + white = clean CTA. Black text + white = maximum readability. Gray + white = unobtrusive secondary info.
• Avoid: Blue text on light blue (#99b1e6) backgrounds — low contrast. Purple focus outlines on blue buttons — could clash.
• Pattern: Use hover states with semi-transparent blue overlays, not solid fills. Keep focus outlines in purple for visibility.

3. Typography

3.1 Font Families

The system uses Lato with fallbacks to Arial and system fonts (Arial, -apple-system). No Google Fonts import detected — likely self-hosted or pre-installed. Lato’s clean geometry keeps things modern, while Arial fallback ensures nothing breaks on restricted systems.

3.2 Type Scale

3.3 Hierarchy

Large headings (24px bold) are rare — most titles drop to 18px or even 16px, suggesting a compact UI with information density. The smallest text (13.33px) is reserved for button labels in secondary contexts. Captions at 14px keep accessibility in mind. This scale avoids extremes — no giant display sizes, no unreadably small microcopy.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Values are consistent increments or slight deviations for fit.

4.2 Layout

Breakpoints: 359px, 767px, 768px, 1140px, 1215px, 1216px. This covers:

• Mobile portrait (359px)
• Small tablet (767px)
• Tablet landscape (768px)
• Large desktop containers around 1140–1216px.

5. Visual Elements

Border Radius

The consistent 12px radius is the “default rounded” for most buttons and links. The asymmetrical 4px 20px 20px is unusual — maybe for pill-like buttons with one sharper corner.

Shadows

Two patterns:

• Soft panel shadow: rgb(227, 235, 252) 0px 1px 4px 0px, rgba(230, 235, 245, 0.4) 0px 24px 48px 0px — layered, subtle.
• Micro shadow: rgba(157, 172, 207, 0.08) 0px 2px 2px 0px — barely there, for small elements.

Borders

Minimal use: 0px 1px 0px 0px solid #ffffff — white dividers.

6. Components

6.1 Buttons

Primary (login-button)

• Default: bg #edf2fe, text #0d4cd3, padding 8px 16px, radius 12px
• Hover: bg rgba(29, 93, 235, 0.18), scale 1.1
• Focus: outline #9b3be5 solid 2px

Digest Button

• Default: bg rgba(255, 255, 255, 0.17), text #000, padding 8px 12px, radius 8px 8px 8px 4px
• Hover: same semi-transparent blue tint
• Focus: purple outline

Send Button

• Default: bg #99b1e6, text rgba(16, 16, 16, 0.3), padding 14px, radius 0px
• Hover: semi-transparent blue tint
• Focus: purple outline

Arrow Button

• Default: bg #e4ecfd, text #000, padding 0px, radius 50% (circle)
• Hover: semi-transparent blue tint
• Focus: purple outline

6.2 Links

Primary link: blue, no underline. Secondary link: gray, hover to deep navy.

6.3 Forms

Textareas: transparent bg, text #0b1f33, no border, radius 0px.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-blue: #0d4cd3;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-neutral-gray: #66727f;
  --color-light-blue-accent: #99b1e6;
  --color-hover-blue-tint: #1d5deb;
  --color-focus-purple: #9b3be5;
  --color-deep-navy-text: #0b1f33;
  --color-soft-blue-bg: #c2d2f6;
  --color-accent-input-green: #16a086;

  /* Typography */
  --font-family-primary: "Lato", Arial, -apple-system;
  --font-size-h1-lg: 24px;
  --font-size-h1-md: 18px;
  --font-size-link-lg: 18px;
  --font-size-link-sm: 16px;
  --font-size-caption: 14px;
  --font-size-button-sm: 13.3333px;
  --line-height-tight: 1.00;
  --line-height-normal: 1.33;
  --line-height-loose: 1.50;
  --line-height-caption: 1.43;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-26: 26px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 12px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-panel: rgb(227, 235, 252) 0px 1px 4px 0px, rgba(230, 235, 245, 0.4) 0px 24px 48px 0px;
  --shadow-micro: rgba(157, 172, 207, 0.08) 0px 2px 2px 0px;
}

8. AI Coding Assistant Prompt

# Gosuslugi Design System Specification

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

## Brand Context
Gosuslugi is Russia’s official government services portal. Design is functional, predictable, and trust-focused. Color palette is strict, typography is modern but system-friendly, and spacing follows an 8px grid.

## Color Palette
- Primary Blue: #0d4cd3 — Links, primary button text, CTAs
- Black: #000000 — Body text, icons
- White: #ffffff — Backgrounds, button surfaces
- Neutral Gray: #66727f — Secondary text, captions
- Light Blue Accent: #99b1e6 — Send buttons, accents
- Hover Blue Tint: #1d5deb — Hover backgrounds
- Focus Purple: #9b3be5 — Focus outlines
- Deep Navy Text: #0b1f33 — Input text
- Soft Blue Bg: #c2d2f6 — Hover/focus backgrounds
- Accent Input Green: #16a086 — Input backgrounds

## Typography
Font family: "Lato", Arial, -apple-system

| Level       | Size   | Weight | Line Height | Use For           |
|-------------|--------|--------|-------------|-------------------|
| H1 large    | 24px   | 700    | 1.33        | Page titles       |
| H1 medium   | 18px   | 400    | 1.33        | Section titles    |
| Link large  | 18px   | 400    | 1.33        | Navigation links  |
| Link small  | 16px   | 400    | 1.00        | Inline links      |
| Caption     | 14px   | 400    | 1.43        | Secondary info    |
| Button sm   | 13.33px| 400    | —           | Small buttons     |

## Spacing & Grid
Base: 8px grid  
Scale: 1px, 2px, 4px, 8px, 12px, 14px, 16px, 20px, 24px, 26px, 32px, 40px, 64px

## Border Radius
- sm: 2px — Dividers
- md: 4px — Small containers
- lg: 12px — Buttons, links
- full: 50% — Circular buttons

## Shadows & Depth
- Panel: rgb(227, 235, 252) 0px 1px 4px, rgba(230, 235, 245, 0.4) 0px 24px 48px
- Micro: rgba(157, 172, 207, 0.08) 0px 2px 2px

## Component Specifications

### Primary Button
Default: bg #edf2fe, text #0d4cd3, padding 8px 16px, radius 12px, no border  
Hover: bg rgba(29, 93, 235, 0.18), transform scale(1.1)  
Focus: outline #9b3be5 solid 2px  
Disabled: opacity 0.5

### Secondary Button (digest)
Default: bg rgba(255, 255, 255, 0.17), text #000, padding 8px 12px, radius 8px 8px 8px 4px  
Hover: bg rgba(29, 93, 235, 0.18)  
Focus: outline #9b3be5 solid 2px

### Send Button
Default: bg #99b1e6, text rgba(16, 16, 16, 0.3), padding 14px, radius 0px

### Arrow Button
Default: bg #e4ecfd, text #000, padding 0px, radius 50% (circle)

### Links
Primary: color #0d4cd3, no underline  
Secondary: color #66727f, hover color #0b1f33

### Input Fields
Textarea: bg transparent, text #0b1f33, no border, radius 0px

## Layout & Responsive Rules
Breakpoints: 359px, 767px, 768px, 1140px, 1215px, 1216px  
Container widths match breakpoints; spacing multiples of 8px

## Interaction Rules
- Hover scale: 1.1
- Focus outline: #9b3be5 solid 2px
- Transition timing: 150ms ease

## DO List
- Use ONLY colors from palette
- Maintain 8px spacing grid
- Use Lato for headings, Arial fallback
- Keep button states consistent
- Use purple for focus outlines

## DON'T List
- Introduce new colors
- Mix sharp and rounded corners randomly
- Remove focus outlines
- Use heavy shadows

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #edf2fe;
  color: #0d4cd3;
  padding: 8px 16px;
  border-radius: 12px;
  font-weight: 400;
  font-size: 16px;
  border: none;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover { background: rgba(29, 93, 235, 0.18); transform: scale(1.1); }
.btn-primary:focus { outline: 2px solid #9b3be5; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-panel);
}
```

### Input
```css
.textarea {
  background: transparent;
  color: #0b1f33;
  border: none;
  border-radius: 0px;
  padding: 0px;
}
```

9. Summary

TL;DR — Gosuslugi’s design system is strict, functional, and trust-first. Blue drives actions, purple marks focus, and everything sits on an 8px grid. Buttons scale slightly on hover, but otherwise, it’s all about predictability.

Brand Keywords:

• trust-functional
• strict-consistent
• blue-authoritative
• accessible-predictable