Reg Brand Design System Deep-Dive

1. Brand Overview

Reg (reg.ru) is a Russian domain registrar and hosting provider. The brand’s design language is unapologetically functional. It’s not chasing “playful” or “artsy” — it’s built for people managing domains, servers, and infrastructure. The UI says: this is a tool, not a toy.

The vibe: clean, corporate-tech, slightly utilitarian. They lean on blues for trust and authority, plenty of neutral grays for interface chrome, and white for breathing room. The design is responsive and fairly modular — you can tell they’ve built and iterated on a component library for years.

The site doesn’t try to wow with animation or exotic layouts. Instead, it aims for predictability. Buttons have consistent padding and radii. Typography is rational — Aeonik Pro for hero headings, Inter for almost everything else.

This is aimed squarely at a professional audience: developers, sysadmins, SMB owners, IT managers. People who need clarity. That’s why the primary blue (#3755fa) is reserved for high-value actions like login, signup, and CTAs, while secondary and neutral colors handle the less critical stuff.

Philosophy: consistent, grid-aligned, WCAG-friendly enough, no visual risks. A safe system that knows its priorities — functionality over flair.

2. Color System

2.1 Primary Colors

Main brand color: #3755fa (rgb(55,85,250)) — a saturated blue.
It’s used for CTAs, auth buttons, links, and sometimes focus states. Blue here is a trust signal, common in tech and finance. Compared to competitors (like Namecheap, GoDaddy), Reg’s blue is sharper and cooler, less teal, more “corporate IT.”

Secondary semantic color: #f2f4f7 (rgb(242,244,247)) — a very light gray, almost white. Used for backgrounds, secondary buttons, subtle surfaces.

They also have a translucent primary: rgba(55,85,250,0.2) for ghost buttons and overlays.

2.2 Complete Palette

Here’s the full extracted palette:

The CSS variables list is huge — they’ve got a full 9-step scale for many hues (purple, green, yellow, cyan, dark-blue, pistachio). This tells me they’re using a tokenized color system internally, probably for a design tool or component library.

2.3 Color Relationships

Contrast:

• Primary blue (#3755fa) on white passes WCAG AA for normal text.
• White text on primary blue also passes.
• Medium gray (#707a8a) on white is borderline for small text — fine for captions, but not body copy.

Dark mode? Not here — but the palette has dark blues and blacks that could be used for a dark theme.

2.4 Usage Guide

What works:

• Blue + white = clean, strong CTA.
• Blue + light gray = subtle but still on-brand.
• Dark gray text on white = readable, safe.

Avoid:

• Putting medium gray on light gray — low contrast.
• Overusing primary blue for non-interactive elements — it breaks hierarchy.
• Mixing saturated sale pink (#ff3366) with primary blue unless it’s a deliberate promo.

3. Typography

3.1 Font Families

Two core families:

• Aeonik Pro — custom/paid font, used for big headings. Fallbacks: Inter, Arial, Helvetica Neue, Helvetica, FreeSans.
• Inter — open-source variable font. Used everywhere else: body, captions, buttons, links.

No Google Fonts or Adobe Fonts loading — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Aeonik Pro at 60/44/36px is commanding — perfect for hero headings. Inter at 28–20px bridges to subheads. Body sizes (16px, 14px) are readable and safe. They keep weights mostly at 400/500 — no extremes. This creates a calm rhythm.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px.
Common values: 8, 16, 24, 36, 48, 60, 144px — all multiples of 8 except some odd ones (5px, 9px, 11px, 17px, 35px, 62px, 68px). These odd values are likely legacy or for specific icon/button alignment.

4.2 Layout

Breakpoints:
359, 360, 375, 380, 390, 419, 420, 624, 719, 720, 767, 812, 844, 884, 1023, 1024, 1279, 1280, 1599, 1600px.
Clearly a mix of device-specific and general breakpoints — they’re targeting specific popular resolutions.

5. Visual Elements

Border Radius

Values: 1px, 3px, 8px, 12px, 24px, 50%.
Mapping:

• 8px — buttons, inputs.
• 12px — larger inputs, some buttons.
• 24px — pill buttons.
• 50% — circles (avatars/icons).

Shadows

Primary shadow: rgba(0,51,153,0.04) 0px 4px 16px, rgba(0,51,153,0.08) 0px 2px 2px — subtle, cool-toned.
Usage: Card hover, active buttons.

6. Components

6.1 Buttons

Let’s map a few:

Auth Button (.u-auth-button)

• Default: bg #3755fa, white text, 8px radius, padding 9px 16px 9px 12px.
• Hover: white bg, border 1px solid #dfe3e8, text #233cc8, translateY(-2px).
• Active: bg #f2f2f2, text #233cc8, shadow applied.
• Focus: blue outline, bg #233cc8 (same as hover text), no outline.

Promo Ghost (.ds-promo-button_theme_ghost)

• Default: transparent bg, dark text, 8px radius, padding 16px 28px.
• Hover: white bg, text #cbccd6, shadow.
• Active: bg #f2f2f2.

Secondary (.ds-promo-button_theme_secondary)

• Default: bg #f2f4f7, dark text.
• Hover: white bg, lighter text.
• Active: bg #f2f2f2.

6.2 Links

Variants:

• Dark text + underline, hover removes underline.
• White text, no underline.
• Blue text (#3755fa), hover darkens to #233cc8.
• Gray text (#707a8a), hover turns blue.

6.3 Forms

Inputs:

• Search: borderless, white bg, focus adds blue border/shadow.
• Email: white bg, 8px radius, 1px gray outline, focus same as search.

Checkbox: transparent bg, no border, focus adds blue glow.

7. Design Tokens (CSS Variables)

:root {
  /* Colors - semantic */
  --color-primary: rgba(55,85,250,0.2);
  --color-secondary: #f2f4f7;
  --color-dark-gray: #2b2f33;
  --color-medium-gray: #707a8a;
  --color-white: #ffffff;
  --color-primary-blue: #3755fa;
  --color-black: #000000;
  --color-almost-black: #191b1e;
  --color-light-gray: #f2f4f7;
  --color-hover-blue: #2c47de;
  /* Full palette from cssVariables... */
  --color-palette-grayscale-300: #b3b3b3;
  --color-palette-pistachio-50: #e8ffbf;
  /* ... truncated for brevity but include all extracted vars */
  
  /* Typography */
  --font-heading: "Aeonik Pro", Inter, Arial, Helvetica Neue, Helvetica, FreeSans;
  --font-body: "Inter", Arial, Helvetica Neue, Helvetica, FreeSans;
  
  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-24: 24px;
  --space-35: 35px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-62: 62px;
  --space-68: 68px;
  --space-144: 144px;
  --space-498: 498px;
  
  /* Border Radius */
  --radius-1: 1px;
  --radius-3: 3px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-24: 24px;
  --radius-full: 50%;
  
  /* Shadows */
  --shadow-primary: rgba(0,51,153,0.04) 0px 4px 16px, rgba(0,51,153,0.08) 0px 2px 2px;
}

8. AI Coding Assistant Prompt

# Reg Design System Specification

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

## Brand Context
Reg's design is functional and professional. It uses a trust-heavy blue, neutral grays, and clean whitespace. Typography is rational, with Aeonik Pro for big headings and Inter for everything else.

## Color Palette
- Primary Blue: #3755fa — CTAs, primary buttons, links
- Primary Blue Translucent: rgba(55,85,250,0.2) — ghost buttons, overlays
- Secondary Background: #f2f4f7 — secondary surfaces, panels
- Dark Gray: #2b2f33 — headings, nav
- Medium Gray: #707a8a — captions, secondary text
- White: #ffffff — backgrounds, text
- Black: #000000 — icons, body text
- Almost Black: #191b1e — black theme buttons
- Hover Blue: #2c47de — hover accents
- Light Blue Tint: #ebf3ff — hover/focus backgrounds
- Success: #47bf67 — success states
- Danger: #ff2d50 — error states
- Sale: #ff3366 — promo highlights

## Typography
- Headings: "Aeonik Pro", Inter, Arial, Helvetica Neue, Helvetica, FreeSans
- Body/UI: "Inter", Arial, Helvetica Neue, Helvetica, FreeSans

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 60px | 500 | 1.07 | Hero titles |
| H1 | 44px | 500 | 1.09 | Large headings |
| H1 | 36px | 500 | 1.11 | Section headings |
| H1 | 28px | 500 | 1.14 | Subheads |
| Body | 16px | 400 | 1.63 | Paragraphs |
| Caption | 14px | 400 | 1.71 | Labels |

## Spacing & Grid
Base: 8px. Scale: 1, 5, 8, 9, 10, 11, 12, 16, 17, 18, 24, 35, 36, 40, 48, 60, 62, 68, 144px. Use multiples of 8px wherever possible.

## Border Radius
- sm: 8px — buttons, inputs
- md: 12px — larger inputs
- lg: 24px — pill buttons
- full: 50% — avatars

## Shadows & Depth
- Primary: rgba(0,51,153,0.04) 0px 4px 16px, rgba(0,51,153,0.08) 0px 2px 2px — cards, active buttons

## Component Specifications
### Primary Button
Default: bg #3755fa, color #fff, radius 8px, padding 9px 16px 9px 12px.  
Hover: bg #fff, border 1px solid #dfe3e8, color #233cc8, translateY(-2px).  
Active: bg #f2f2f2, color #233cc8, shadow.  
Focus: outline 1px solid #3755fa.

### Secondary Button
Default: bg #f2f4f7, color #2b2f33, radius 8px, padding 11px 24px.  
Hover: bg #fff, color #cbccd6, shadow.  
Active: bg #f2f2f2.

### Input Fields
Default: bg #fff, color #2b2f33, radius 8px, outline 1px solid #cbccd6.  
Focus: border-color #4f7eff, shadow #d9e7ff 0 0 0 2px.

## Layout & Responsive Rules
Breakpoints: 360, 375, 420, 624, 720, 1024, 1280, 1600px.  
Mobile padding: 16px. Desktop: 24–48px.

## Interaction Rules
Transitions: 150ms ease for hover/active.  
Focus: visible outline or shadow in primary blue.

## DO List
- Use only palette colors.
- Maintain 8px grid.
- Reserve primary blue for CTAs.
- Keep button radii consistent.
- Use Aeonik Pro only for headings.

## DON'T List
- No custom colors.
- Don't mix sharp and rounded corners.
- Don't use medium gray for body text.
- Avoid shadows outside defined values.

## Code Examples
```css
.btn-primary {
  background: #3755fa;
  color: #fff;
  padding: 9px 16px 9px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #fff;
  border: 1px solid #dfe3e8;
  color: #233cc8;
  transform: translateY(-2px);
}
.btn-primary:focus {
  outline: 1px solid #3755fa;
}

.input {
  background: #fff;
  border: 1px solid #cbccd6;
  border-radius: 8px;
  padding: 11px 16px;
}
.input:focus {
  border-color: #4f7eff;
  box-shadow: #d9e7ff 0 0 0 2px;
  outline: none;
}

---

## 9. Summary

**TL;DR** — Reg’s design system is clean, functional, and tokenized. Blue is king, gray is the workhorse, Aeonik Pro headlines keep hierarchy tight, and an 8px grid ties it all together.

**Brand Keywords**:
- corporate-functional
- trust-blue
- grid-disciplined
- utilitarian-clean