RBC Design System Deep-Dive

1. Brand Overview

RBC (https://www.rbc.ru/) is Russia’s premier business news platform — think Bloomberg or Reuters, but with a distinctly local edge. The design system is built for constant motion: headlines update in real time, stock tickers scroll, alerts pop. That shapes everything about how the UI feels.

The vibe? Crisp, no-nonsense, functional. They don’t want to feel slick for its own sake — they want authority and clarity. The palette is restrained to greys, white, and a single anchoring green. Typography is lean and modern, built on GraphikCy styles with Helvetica CY and Arial safe fallbacks for reliability across systems.

The audience here is working professionals: traders, managers, policy analysts. This isn’t leisure reading. They need data surfaced fast, with minimal visual friction. You see that in the 8px spacing scale (tight, efficient layouts), flat components with nearly no elevation, and hover interactions that are subtle or nonexistent.

RBC’s philosophy is “keep it moving, but keep it clean.” No gradients. Shadows only where structural hierarchy absolutely needs it. Buttons are functional blocks — text clarity over flourish. The green (#11bb88) is reserved for primary actions and accents; everything else recedes into neutral whites (#ffffff) and greys (#999999, #dddddd).

If you’re designing inside this system, the key is restraint. You can’t add whimsy widgets or playful Microcopy here — it’ll break the tone. RBC’s UI is an editorial workspace: typography carries the hierarchy, spacing carries the rhythm, and color points to action.

2. Color System

2.1 Primary Colors

RBC’s hero color is #11bb88 (rgb(17, 187, 136)) — a bright, confident teal-green. It’s used in CTAs, active states, and certain data highlights. Why does this work? It’s distinct from typical tech blues, so it sets RBC apart from many western finance brands. Green also signals “growth” (market up) in finance contexts, so there’s a subtle reinforcement of domain semantics.

The supporting palette is monochromatic: white (#ffffff) for backgrounds, neutral greys for text and dividers, black tones (#000000, #171717) for strongest text, and light grey (#dddddd) for lines.

2.2 Complete Palette

CSS variables in use:

• --text-01-dark-variable: #fff — white for text when in dark contexts.
• --bg-04-dark-fixed: #252525 — a dark background surface.

2.3 Color Relationships

Contrast is generally high. #11bb88 on #ffffff passes WCAG AA for large text, and AAA for normal text. White text on #11bb88 passes easily.

Dark mode tokens (#252525 backgrounds with #fff text) have AAA contrast.

Greys (#999999) against white are borderline for small text — okay for metadata, not for core content. That’s intentional to keep secondary info in the background.

2.4 Usage Guide

Use green (#11bb88) only for interactive elements and very rare highlights (e.g., positive market data). Don't use it for pure decoration — it’ll dilute its punch.

White is your canvas. Layer dark grey or black for readable text.

Avoid pairing light grey (#dddddd) against white for text — it’s a border color, not a type color.

Dark mode uses #252525 with white text — keep all functional colors swapped for accessibility.

3. Typography

3.1 Font Families

Primary: GraphikCy (multiple weights: Regular, Medium, Semibold).
Fallbacks: Helvetica CY, Arial — safe fallbacks for Cyrillic and Latin scripts.
Source: Not from Google Fonts. No Adobe Fonts. Custom embedded.

Some captions use Kazimir for occasional style variety — likely in branded modules.

3.2 Type Scale

All extracted sizes, weights, and line-heights:

3.3 Hierarchy

They use size for hierarchy, not weight alone. Largest link context (34px) is likely for big headlines or section labels. Body and metadata drop quickly to 14px–12px for density.

Weights shift between 400, 600, 700 depending on emphasis. The combination of light line-height and tight letter-spacing in headings creates a compact, urgent look — suitable for breaking news.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Every common value is a multiple of 1px or small increments — RBC breaks the “perfect power-of-two” rule often to accommodate typographic rhythm.

4.2 Layout

Breakpoints aren't extracted — but the Vuetify framework detected means responsive is handled via Vuetify’s flex/grid system. Expect typical breakpoints at ~600px, 960px, 1280px.

5. Visual Elements

Border Radius

They have mixed radii — from sharp (0px) to 12px for cards.

Shadows

Minimal. Mostly borders.

• rgb(221, 221, 221) 0px 1px 0px 0px — hairline top borders
• rgba(0,0,0,0.08) 0px 4px 16px — occasional depth (dropdowns?)
• Rare heavier shadows for modals/popup

Borders

Dividers dominate: thin solid greys, 1px.

6. Components

6.1 Buttons

Primary Action — .topline__disable-adv__button
Default:

• bg: #11bb88
• text: #ffffff
• padding: 10px 15px 8px
• radius: 3px
• border: none
• font: 12px, weight 400

Secondary variants use neutral grey backgrounds or outlined styles.

Example: .push-allow__button_no

• bg: #eeeeee
• text: #222222
• border: 1px solid #eeeeee
• radius: 3px
• font: 14px

Arrow nav button (prev) — big text, 24px font, outlined border #dddddd, radius on one side.

6.2 Links

Range from white-colored links in dark contexts to bold black text (#171717) in headlines. Underlines only when the link appears in “read more” contexts — otherwise no decoration.

6.3 Forms

Data shows no extracted inputs — likely custom Vuetify fields with thin grey borders.

6.4 Cards

Cards generally have 8px or 12px radius, flat background, possibly a light shadow or 1px divider from adjacent cards.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-grey-medium: #999999;
  --color-teal-green: #11bb88;
  --color-grey-light: #dddddd;
  --color-dark-grey: #171717;
  --color-black: #000000;
  --color-dark-bg: #252525;

  /* Typography - fonts */
  --font-primary: 'GraphikCy', 'Helvetica CY', Arial, sans-serif;
  --font-medium: 'GraphikCy-Medium', 'Helvetica CY', Arial, sans-serif;
  --font-semibold: 'GraphikCy-Semibold', 'Helvetica CY', Arial, sans-serif;
  --font-kazimir: 'Kazimir', 'Helvetica CY', Arial, sans-serif;

  /* Spacing scale */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-19: 19px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-25: 25px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-divider-top: rgb(221, 221, 221) 0px 1px 0px 0px;
  --shadow-depth-light: rgba(0, 0, 0, 0.08) 0px 4px 16px 0px;
}

8. AI Coding Assistant Prompt

# RBC Design System Specification

This design system is inspired by RBC's official website. All values, colors, typography, and component styles are extracted from their production site. Use this specification to build UIs that match RBC's visual language.

## System Prompt
You are an RBC design expert. Build UIs matching their visual language exactly.

## Brand Context
RBC is a serious business news platform. Designs must be clean, high-contrast, and typographically tight. The primary green accent is reserved for key actions; most elements lean on a neutral monochrome scheme.

## Color Palette
- Primary Green: #11bb88 — CTAs, primary buttons, active states
- White: #ffffff — page background, dark mode text inverse
- Grey Medium: #999999 — secondary text
- Grey Light: #dddddd — borders and dividers
- Dark Grey: #171717 — primary body text
- Black: #000000 — high contrast navigation, text
- Dark Background: #252525 — dark mode surfaces

## Typography
Fonts:
- Heading: 'GraphikCy', 'Helvetica CY', Arial
- Body: 'GraphikCy', 'Helvetica CY', Arial
- Medium weight: GraphikCy-Medium
- Semibold weight: GraphikCy-Semibold
- Occasional: Kazimir

Sizes:
| Level    | Size | Weight | Line Height | Use |
|----------|------|--------|-------------|-----|
| XL Link  | 34px | 400    | 1.00        | Special headlines |
| Heading1 | 24px | 600    | 1.17        | Main headlines |
| Heading2 | 20px | 700    | 1.20        | Section titles |
| Body     | 14px | 400    | 1.71        | Article text |
| Caption  | 12px | 400    | 1.33        | Metadata |
| Label    | 13px | 400    | 1.00        | Buttons, tags |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 11px, 12px, 13px, 15px, 16px, 17px, 18px, 19px, 20px, 22px, 24px, 25px

## Border Radius
- none: 0px — sharp edges
- sm: 3px — small buttons, inputs
- md: 4px — medium buttons
- lg: 8px — badges, cards
- xl: 12px — large cards
- full: 50% — avatars

## Shadows & Depth
- Divider top shadow: rgb(221, 221, 221) 0px 1px 0px
- Light depth: rgba(0,0,0,0.08) 0px 4px 16px

## Component Specifications

### Primary Button
Default:
- background: #11bb88
- text: #ffffff
- padding: 10px 15px 8px
- radius: 3px
- font-size: 12px
- font-weight: 400
Border: none.

Hover / Active / Focus: Same colors; add slight opacity change if needed.

### Secondary Button
Default:
- background: #eeeeee
- text: #222222
- border: 1px solid #eeeeee
- radius: 3px
- font-size: 14px

### Navigation Link
Default:
- color: #171717
- text-decoration: none
Hover: underline optional.

### Input Fields
Border: 1px solid #dddddd
Radius: 3px
Padding: 8px
Font: 14px

### Card
Padding: 12px
Radius: 8px or 12px
Background: #ffffff
Shadow or border as needed.

## Layout & Responsive Rules
- Max content width: based on Vuetify grid (~1280px)
- Mobile padding: multiples of 8px
- Grid gap: 8px

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus: outline with brand green
- Loading: maintain button size, replace text with spinner

## DO List
- Use ONLY colors from the palette
- Maintain 8px spacing grid
- Use GraphikCy for headings and body
- Reserve green for interactive or positive accent
- Keep hover effects subtle

## DON'T List
- Don't add drop shadows outside the specified ones
- Don't mix rounded and sharp corners within same component
- Don't use colors outside the palette
- Don't bold everything — follow weight hierarchy
- Don't reduce text sizes below 12px

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #11bb88;
  color: #ffffff;
  padding: 10px 15px 8px;
  border-radius: 3px;
  font-weight: 400;
  font-size: 12px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:focus {
  outline: 2px solid #11bb88;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #eeeeee;
  color: #222222;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  font-size: 14px;
  padding: 8px 15px;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: rgba(0,0,0,0.08) 0px 4px 16px;
}
```

9. Summary

TL;DR: RBC’s design system is built for speed and clarity — green accents for actions, everything else in greys and white. Typography is GraphikCy; spacing runs on an 8px-informed scale. Flat design, minimal shadows.

Brand Keywords:

• analytics-focused
• high-contrast-minimal
• editorial-authoritative
• cyrillic-optimized