Rt Brand Design System Deep Dive

1. Brand Overview

Rt (Rostelecom) is Russia’s largest digital services provider, and their website at rt.ru reflects that scale — but in a surprisingly restrained visual language. The vibe is corporate, functional, and no-nonsense. No flashy gradients, no over-designed gimmicks. It’s the kind of design system that says: "We handle infrastructure. We’re solid. We don’t need to shout."

This is a brand for a massive audience: residential internet users, businesses, government clients. The design needs to be accessible to people who aren’t tech-savvy, but still inspire trust in high-value enterprise contracts. That explains the choice of conservative typography and muted colors.

From the extracted data, it’s clear Rt’s philosophy leans toward minimalism and clarity. The palette is dominated by black (#000000), with supporting greys like #575d68 and #343b48. No primary accent color is exposed in our snapshot — interesting, because most consumer-facing brands anchor their identity around one. Here, the absence of a bright accent forces navigation and structure to do more work.

Typography is purely utilitarian: Arial with Helvetica fallbacks. This is a safe system font choice — it works everywhere, loads instantly, and carries a neutral tone. There’s no bespoke typeface to inject personality; the personality has to come from how type is sized, spaced, and colored.

Spacing reveals an 8px grid logic. It’s consistent with modern responsive design, but the scale jumps to larger values for layout breathing: 20px, 48px, 60px, 80px. This matches the brand’s preference for generous separation between content blocks, which is important in a text-heavy corporate site.

Breakpoints at 360px and 767px show a mobile-first approach, tuned for small Android devices (360px) and tablets/small laptops (767px). This is practical: Russia’s market has a mix of device types and screen sizes, and the site clearly aims to be usable across all.

In short: Rt’s design system is a disciplined, utilitarian framework built for maximum compatibility and clarity. It’s not about brand flair — it’s about delivering information in a predictable, stable way.

2. Color System

2.1 Primary Colors

The dominant color is black (#000000). This isn’t just text — it anchors elements like the logo and some headers. Black is assertive, authoritative, and timeless. In a telecom context, it signals reliability and seriousness.

Supporting colors are muted greys:

• #575d68 — a medium grey used likely for secondary text or icons. This is softer than pure black, reducing eye strain.
• #343b48 — a dark bluish-grey, possibly used for headers or navigation backgrounds. This adds a hint of cool tone without becoming blue.

Compared to competitors, Rt ignores the "friendly tech" trend (bright blues, greens). This aligns with their brand as a national infrastructure provider rather than a startup.

2.2 Complete Palette

2.3 Color Relationships

Black on white is maximum contrast (WCAG AAA). Black on medium grey would fail for small text — so the greys are likely background or secondary text against white.

#343b48 has enough contrast with white for headings (ratio >7:1). On black, it would be unreadable, so it’s probably used with lighter backgrounds.

No evidence of a dark mode. The palette is naturally dark, but without inversion logic.

2.4 Usage Guide

• Combinations that work: Black text on white, dark bluish-grey headers on light backgrounds, medium grey for metadata.
• Avoid: Grey text on grey backgrounds — will fail accessibility. Never use black for large background areas; it will overpower the page.
• Tip: Use #343b48 for structural elements (header bars) and #575d68 for secondary text, never interchange — keeps hierarchy clear.

3. Typography

3.1 Font Families

Everything runs on Arial, with fallbacks: "Arial", "Helvetica Neue", "Helvetica". This is a classic sans-serif stack. No Google Fonts, no Adobe kit. This is about speed and compatibility — perfect for a site serving millions.

3.2 Type Scale

Odd detail: All three entries are labeled "heading-1". This suggests a flexible heading style that adapts to context — maybe responsive scaling or multiple heading classes reusing the "h1" role.

3.3 Hierarchy

The scale is tight. 28px for large headings is modest — many brands push H1 to 32–48px. This keeps the page feeling compact and avoids overwhelming users with big titles.

Line heights are well chosen: tighter for big type (1.29) to keep headings dense, looser for smaller type (1.75) to improve readability.

This is a functional hierarchy: slight size differences, consistent weight (400), and no decorative flourishes. It works because the palette and spacing do the heavy lifting.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid.

Values:

They’re not using every 8px multiple in the snapshot — just selected ones. This suggests spacing tokens for specific layout tiers: small gaps (20px), large section gaps (48–80px).

4.2 Layout

Breakpoints:

• 360px — small mobile
• 767px — tablet/small desktop

Mobile-first: containers likely scale fluidly between these, with content reflow at each breakpoint.

5. Visual Elements

• Border Radius: None defined in data. Likely flat edges throughout — reinforces a corporate tone.
• Shadows: None. This is flat design — depth is handled through spacing and color contrast.
• Borders: No documented combinations — probably minimal use.

This means the visual look is clean, boxy, and free of skeuomorphic depth.

6. Components

From the extracted data, there are no explicit button, input, or link styles documented — which fits a minimalist, native-UI approach. Likely these are styled just enough to match the palette and type.

Buttons: Not defined here. Given the palette, a primary button might be black text on a white border, or inverse (black background, white text).
Links: No data, but likely underlined in brand color (black or grey).
Forms: No custom input styles detected — probably default browser styles with minimal overrides.
Cards: No shadows, so cards probably use background color shifts and spacing.

This is a rare case where the design system avoids heavy component theming.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-black: #000000;
  --color-grey-medium: #575d68;
  --color-grey-darkblue: #343b48;

  /* Typography */
  --font-family-base: "Arial", "Helvetica Neue", "Helvetica";
  --font-size-h1-large: 1.75rem; /* 28px */
  --font-size-h1-medium: 1.13rem; /* 18px */
  --font-size-h1-small: 1rem;     /* 16px */
  --font-weight-normal: 400;
  --line-height-h1-large: 1.29;
  --line-height-h1-medium: 1.56;
  --line-height-h1-small: 1.75;

  /* Spacing */
  --space-20: 1.25rem; /* 20px */
  --space-48: 3rem;    /* 48px */
  --space-60: 3.75rem; /* 60px */
  --space-80: 5rem;    /* 80px */

  /* Border Radius */
  /* none defined */

  /* Shadows */
  /* none defined */

  /* Breakpoints */
  --breakpoint-mobile: 360px;
  --breakpoint-tablet: 767px;
}

8. AI Coding Assistant Prompt

# Rt Design System Specification

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

## Brand Context
Rt's design language is corporate, minimal, and functional. It uses a restrained palette of blacks and greys, system fonts, and an 8px spacing grid. No shadows, no rounded corners — depth and hierarchy come from spacing and typography.

## Color Palette
- Black: #000000 — Primary text, logo, brand mark
- Medium Grey: #575d68 — Secondary text, metadata
- Dark Bluish Grey: #343b48 — Header backgrounds, navigation bars

## Typography
Font Family: "Arial", "Helvetica Neue", "Helvetica"

| Level     | Size     | Weight | Line Height | Use For          |
|-----------|----------|--------|-------------|------------------|
| H1 Large  | 28px     | 400    | 1.29        | Page titles      |
| H1 Medium | 18px     | 400    | 1.56        | Section headings |
| H1 Small  | 16px     | 400    | 1.75        | Subheadings      |

No custom fonts — use system stack.

## Spacing & Grid
Base: 8px grid. Available tokens:
- 20px (sm gaps)
- 48px (section gaps)
- 60px (large gaps)
- 80px (extra-large gaps)

## Border Radius
None — all corners are square.

## Shadows & Depth
Flat design — no shadows. Use spacing and color for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #000000;
  color: #ffffff;
  padding: var(--space-20);
  border-radius: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-h1-small);
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #343b48; }
.btn-primary:focus { outline: 2px solid #575d68; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Links
```css
.nav-link {
  color: #000000;
  text-decoration: underline;
}
.nav-link:hover { color: #343b48; }
```

### Input Fields
```css
.input {
  border: 1px solid #575d68;
  border-radius: 0;
  padding: var(--space-20);
  font-family: var(--font-family-base);
  font-size: var(--font-size-h1-small);
}
.input:focus { border-color: #343b48; outline: none; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 0;
  padding: var(--space-48);
  border: 1px solid #575d68;
}
```

## Layout & Responsive Rules
- Mobile breakpoint: 360px
- Tablet breakpoint: 767px
- Mobile padding: 20px
- Desktop padding: 48px
- Grid gap: 20px

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Focus indicators: 2px solid medium grey or dark bluish-grey
- Disabled states: 50% opacity

## DO List
- Use ONLY the defined palette
- Maintain 8px grid in spacing
- Keep corners square
- Use Arial stack consistently
- Keep UI flat — no shadows
- Use spacing for visual hierarchy

## DON'T List
- Introduce new colors
- Add rounded corners
- Use shadows for depth
- Overuse medium grey for body text (hurts readability)
- Increase heading sizes beyond defined scale

## Code Examples

### Button Example
```css
<button class="btn-primary">Submit</button>
```

### Card Example
```css
<div class="card">
  <h1>Plan Details</h1>
  <p>Unlimited data, nationwide coverage.</p>
</div>
```

### Form Input Example
```css
<input type="text" class="input" placeholder="Your name">
```

9. Summary

TL;DR: Rt’s design system is a stripped-down, corporate framework: black and grey palette, Arial system fonts, square corners, no shadows, and an 8px spacing grid. It’s built for stability and clarity, not visual flair.

Brand Keywords:

• corporate-minimalist
• flat-functional
• infrastructure-trust
• utilitarian-accessible