Consultant Design System Deep Dive

1. Brand Overview

Consultant.ru is one of Russia’s most recognized legal and regulatory reference platforms, known for its exhaustive database of laws, regulations, and commentary. The website’s design reflects that function: authoritative, clear, and focused on usability over flash. If you’re expecting playful gradients or whimsical UI, you won’t find them here. This is a professional tool for professionals — lawyers, accountants, corporate compliance teams.

The vibe: corporate solidity. The palette leans on deep, serious blues and sharp blacks, with orange accents for functional emphasis. Typography is utilitarian, with PT Sans and PT Sans Caption doing the heavy lifting. There’s no attempt to soften the experience with rounded, friendly shapes — corners are modestly softened at 2–6px radii, but never exaggerated. Shadows are minimal, used sparingly to separate elements without drawing attention.

The design philosophy seems to be: strip away decoration, highlight structure, and ensure every interactive element is easy to identify. Buttons and links are unambiguous, hover states are clear, and focus states use bright orange outlines to meet accessibility needs. Layout spacing is locked to an 8px scale, which keeps the rhythm tight and consistent.

Who’s this for? People who value the content more than the container. Government officials, corporate lawyers, compliance officers. They want speed, clarity, and zero ambiguity. The design supports that by being almost invisible — the brand colors and typography are there to communicate trust and authority, but they never overpower the function.

There’s a quiet confidence here. No overuse of animations, no trendy typography experiments. Everything reads as “this is stable, this is trustworthy.” Even the breakpoints — 481px, 520px, 1025px, 1221px — feel tuned for very specific device classes, suggesting that the audience uses a mix of desktop workstations and mid-range laptops, with mobile as a secondary access method.

2. Color System

2.1 Primary Colors

The primary brand color is a deep saturated blue: #1200d4 (rgb(18, 0, 212)). It’s used in the logo and some link styles. This is not a casual blue — it’s intense, leaning toward a royal/purple-blue. Psychologically, it signals authority and trust, but the saturation gives it an assertive, almost academic presence. Compared to corporate blues from competitors (often lighter or muted), this stands out more aggressively on white backgrounds.

The key accent is orange: #ffa200 (rgb(255, 162, 0)). This is warm, energetic, and used sparingly — mostly for CTAs like search buttons and focus highlights. It complements the blue without clashing, providing a clear interactive signal.

Black (#000000) and dark greys (#2e2e2e, #5e5e5e) handle most text and structural elements. White (#ffffff) is the primary background and text color for buttons.

2.2 Complete Palette

2.3 Color Relationships

The deep blue (#1200d4) against white is high-contrast (contrast ratio ~8.6:1). Black text on white is maximum contrast. Orange (#ffa200) on white is also strong (~2.1:1 for WCAG AA normal text — borderline for small text, but fine for large UI elements and focus rings). The grey tones (#5e5e5e, #2e2e2e) provide readable secondary text while keeping contrast within accessibility ranges.

There’s no dark mode in evidence. The palette is tuned for light backgrounds, with dark text and saturated accents for interaction.

2.4 Usage Guide

• Blue + White: Use for branding and high-importance links.
• Orange + White: Reserved for CTAs and focus outlines. Don’t use orange for body text — readability suffers.
• Black/Grey + White: Default readable combinations. Primary body copy is black or dark grey.
• Avoid: Blue text on orange backgrounds — poor readability; grey on orange also fails contrast.

3. Typography

3.1 Font Families

Two families: PT Sans and PT Sans Caption. Both are utilitarian sans-serifs designed for clarity in Cyrillic and Latin scripts. No fallbacks are listed, but system defaults would likely be sans-serif. There are no Google Fonts or Adobe Fonts — these are likely locally hosted.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle — the largest size is 26px, used sparingly for top-level headings and certain links. The step down to 20–22px creates secondary headings and important links. Body text sits at 16px, with captions at 14px. Bold weights are used to signal interactivity or emphasis, not to create big visual jumps. This keeps the interface calm and avoids visual noise.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Values are multiples or near-multiples.

4.2 Layout

Breakpoints: 481px, 520px, 1025px, 1221px. This suggests:

• <481px: mobile
• 481–520px: small tablets
• 1025px: standard desktop
• 1221px: large desktop

5. Visual Elements

Border Radius

Corners are functional — just enough rounding to soften edges without losing crispness.

Shadows

Minimal use:

• rgba(0, 0, 0, 0.04) 0px 1px 0px 0px, rgba(0, 0, 0, 0.04) 0px 2px 8px 0px – subtle depth for cards/headers.
• rgba(0, 0, 0, 0.12) 0px 0px 0px 2px inset – used inside elements, rare.

Borders

Used for separation:

• Bottom border on headings: 1px solid #ffffff
• Left border on buttons: 1px solid #ffffff
• Navigation border: 1px solid #f0f0f0

6. Components

6.1 Buttons

Login Button (button_login):

• Default: bg rgb(71, 51, 123), white text, padding 4px 21px 6px, radius 2px.
• Hover: bg rgb(57, 30, 112).
• Active: bg rgb(57, 30, 112) + inset shadow rgb(24, 8, 55) 0px 3px.
• Focus: orange glow rgba(255, 162, 0, 0.31) 0px 0px 0px 4px, bg rgb(242, 140, 0).

Search Button:

• Default: bg #ffa200, white text, padding 0px 14px, radius 3px.
• Hover: bg #f28c00.
• Active: bg rgb(214, 124, 0).
• Focus: orange glow, bg #f28c00.

Cookies Button:

• Default: bg rgb(75, 50, 127), white text, padding 0px 12px, radius 4px.
• Hover: bg rgb(57, 30, 112).
• Active: same + inset shadow.
• Focus: bg #f28c00.

6.2 Links

Multiple styles:

• White bold (#ffffff, weight 700)
• Deep blue normal (#1200d4, weight 400)
• Black normal (#000000)
• Dark grey (#2e2e2e)
• Medium grey (#5e5e5e)

Hover: color inherit, no underline.

6.3 Forms

Search input:

• Default: bg white, text black, radius 3px, padding 0px 40px 0px 8px.
• Focus: orange glow.

No visible checkbox/radio/select styles in data.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-deep-blue: #1200d4;
  --color-medium-grey: #5e5e5e;
  --color-white: #ffffff;
  --color-dark-grey: #2e2e2e;
  --color-orange: #ffa200;
  --color-purple-grey: #69549d;
  --color-burnt-orange: #e06618;
  --color-orange-variant: #f28c00;

  /* Typography */
  --font-primary: "PT Sans", sans-serif;
  --font-caption: "PT Sans Caption", sans-serif;

  /* Font Sizes */
  --font-size-26: 26px;
  --font-size-22: 22px;
  --font-size-20: 20px;
  --font-size-18: 18px;
  --font-size-16: 16px;
  --font-size-14: 14px;

  /* Line Heights */
  --line-height-131: 1.31;
  --line-height-136: 1.36;
  --line-height-130: 1.30;
  --line-height-133: 1.33;
  --line-height-115: 1.15;
  --line-height-113: 1.13;
  --line-height-125: 1.25;
  --line-height-129: 1.29;
  --line-height-143: 1.43;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.04) 0px 1px 0px 0px, rgba(0, 0, 0, 0.04) 0px 2px 8px 0px;
  --shadow-inset: rgba(0, 0, 0, 0.12) 0px 0px 0px 2px inset;
}

8. AI Coding Assistant Prompt

# Consultant Design System Specification

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

## Brand Context
Consultant.ru values authority, clarity, and functional UI. The design uses deep blue for brand presence, orange for interactive emphasis, and a strict 8px spacing grid. Typography is PT Sans, optimized for Cyrillic/Latin readability.

## Color Palette
- Black: #000000 — Primary text, headers, structural UI
- Deep Blue: #1200d4 — Logo, prominent links
- Medium Grey: #5e5e5e — Secondary text
- White: #ffffff — Backgrounds, button text
- Dark Grey: #2e2e2e — Secondary headings, body copy
- Orange: #ffa200 — Search button, focus outlines
- Purple-Grey: #69549d — Hover/focus accent
- Burnt Orange: #e06618 — Hover/focus accent
- Orange Variant: #f28c00 — Hover states

## Typography
- Font Families: "PT Sans", sans-serif; "PT Sans Caption", sans-serif
- Sizes:
  - 26px / 1.63rem — H1, large links — weight 400 — line-height 1.31
  - 22px / 1.38rem — Links — weight 400 — line-height 1.36
  - 20px / 1.25rem — Headings, links — weight 400/700 — line-height 1.30
  - 18px / 1.13rem — Links — weight 400 — line-height 1.33
  - 16px / 1rem — Body, headings — weight 400/700 — line-height 1.15/1.25
  - 14px / 0.88rem — Captions, buttons — weight 400/700 — line-height 1.29/1.43

## Spacing & Grid
Base: 8px
Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 13px, 14px, 16px, 17px, 18px, 20px, 28px, 30px, 32px

## Border Radius
- 1px — Links
- 2px — Buttons (login)
- 3px — Inputs, small buttons
- 4px — Divs, medium buttons
- 6px — Sections, images
- 8px — Large divs
- 50% — Circular elements

## Shadows & Depth
- Soft: rgba(0,0,0,0.04) 0px 1px, rgba(0,0,0,0.04) 0px 2px 8px
- Inset: rgba(0,0,0,0.12) 0px 0px 0px 2px inset

## Component Specifications

### Primary Button (Login)
Default:
```css
background: rgb(71, 51, 123);
color: #ffffff;
padding: 4px 21px 6px;
border-radius: 2px;
font-weight: 700;
font-size: 14px;
border: none;
```
Hover: `background: rgb(57, 30, 112)`
Active: `background: rgb(57, 30, 112); box-shadow: rgb(24, 8, 55) 0px 3px inset`
Focus: `box-shadow: rgba(255,162,0,0.31) 0px 0px 0px 4px; background: #f28c00`

### Search Button
Default: `background: #ffa200; color: #ffffff; padding: 0 14px; border-radius: 3px; font-weight: 700; font-size: 16px`
Hover: `background: #f28c00`
Active: `background: rgb(214, 124, 0)`
Focus: `box-shadow: rgba(255,162,0,0.31) 0 0 0 4px; background: #f28c00`

### Input Field (Search)
Default: `background: #ffffff; color: #000000; border-radius: 3px; padding: 0 40px 0 8px`
Focus: `box-shadow: rgba(255,162,0,0.31) 0 0 0 4px; outline: none`

## Layout & Responsive Rules
Breakpoints:
- 481px — mobile
- 520px — small tablet
- 1025px — desktop
- 1221px — large desktop

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Focus indicators: Orange glow with 4px spread

## DO List
- Use only colors from palette
- Maintain 8px grid
- Bold weights for interactive elements
- Keep focus states visible
- Use PT Sans for all text

## DON'T List
- Don’t invent new colors
- Don’t remove focus outlines
- Don’t mix border radius styles
- Don’t overuse shadows
- Don’t use undersized orange text (contrast issue)

## Code Examples

Primary Button:
```css
.btn-primary {
  background: rgb(71, 51, 123);
  color: #ffffff;
  padding: 4px 21px 6px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgb(57, 30, 112); }
.btn-primary:focus { box-shadow: rgba(255,162,0,0.31) 0 0 0 4px; }
```

Search Input:
```css
.input-search {
  background: #ffffff;
  color: #000000;
  border-radius: 3px;
  padding: 0 40px 0 8px;
}
.input-search:focus {
  box-shadow: rgba(255,162,0,0.31) 0 0 0 4px;
  outline: none;
}
```

9. Summary

TL;DR — Consultant.ru’s design system is clean, authoritative, and strictly functional. Deep blue for brand, orange for action, PT Sans for everything. Minimal shadows, modest corner rounding, and a rigid 8px spacing grid keep things consistent.

Brand Keywords:

• authority-driven
• functional-minimalist
• high-contrast
• corporate-classic
• grid-disciplined