Bitrix24 Design System Deep Dive

1. Brand Overview

Bitrix24 isn’t shy about being a platform brand. The site’s design feels like the UI equivalent of a well-stocked toolbox — every tool in its place, ready for enterprise teams, but with a splash of friendliness to keep it from turning corporate-gray. This isn’t a minimalism-first brand like Slack; Bitrix24 is happy to be colorful, multi-layered, and a little playful.

The vibe is business-ready with personality. The primary blue (#19aef9) is bright enough to signal energy and optimism, but paired with greens (#00b23e) and purples (#b141f5) for CTA variety. They’re not afraid of multi-accent strategies, which is uncommon in enterprise SaaS — most competitors pick one primary accent and stick with it.

Typography is clean and modern — TT Commons Pro everywhere, which keeps headings, links, and captions consistent across UI elements. The fallback stack goes straight to Arial, so there’s no reliance on system serif fonts. Weight distribution is intentional: big, bold headings (700 weight) for impact, medium weights for body and link text, and a few uppercase captions for emphasis.

Layout-wise, the site uses an 8px grid for spacing, which is the industry standard for responsive scaling. Border radii range from tight (3px) for small elements to fully circular (50%/100%) for avatars and pill buttons. This mix keeps components feeling approachable without drifting into cartoonish.

It’s obvious they designed for scale: multiple breakpoints from 320px mobile up to 1600px widescreen. Buttons have consistent padding and radii across states, and hover/active states are defined for almost every variant. This is a sign of a mature brand system — nothing is left to “default browser” behavior.

If you’re designing for Bitrix24, you’re working in a multi-accent, modular, grid-based system with consistent typography and a friendly but professional tone. Nothing is “too flat” — shadows are used sparingly but effectively to add depth where needed.

2. Color System

2.1 Primary Colors

The main brand accent is bright blue #19aef9 — highly saturated, clear, and versatile. It’s used for CTAs, interactive highlights, and some iconography. Psychologically, this blue suggests trust and technology-forward thinking (classic SaaS cue), but because it leans towards cyan, it also feels fresh and energetic.

Where competitors like Asana lean into gradients or muted tones, Bitrix24 keeps the primary colors flat and punchy. This improves accessibility — solid colors hold contrast better across devices — and ensures brand cues survive in functional UI contexts.

Green (#00b23e) acts as a secondary CTA color — often for “Register” or “Confirm” actions. Purple (#b141f5) shows up in promotional buttons, adding a creative flair.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally well-handled. Bright blue (#19aef9) on white hits WCAG AA easily for large text. Black-ish text (#0b000a) on white is AAA compliant. The purple (#b141f5) on white is borderline for small text but fine for headings.

No dark mode here — all palettes are light-background oriented. Accent colors are high-saturation, so they stand out without gradients.

2.4 Usage Guide

• Primary CTA: #19aef9 on white text.
• Secondary CTA: #00b23e on white text.
• Promos/Highlight: #b141f5 or #f86233.
• Avoid mixing green and purple — feels off-brand.
• Keep blue and green in separate functional contexts (don’t use green for info messages — that’s blue’s job here).

3. Typography

3.1 Font Families

Everything is TT Commons Pro — a clean geometric sans, with Arial as fallback. No Google Fonts here. This is consistent across headings, links, body, and captions.

3.2 Type Scale

3.3 Hierarchy

Big H1s are really big — 90px and 72px sizes give hero sections strong visual identity. Medium headings (40px, 32px) are used in secondary sections, maintaining hierarchy without shrinking to body sizes.

Links often use 19px — slightly larger than 16px body — which makes them stand out without bolding.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px.

4.2 Layout

Breakpoints: 320px, 420px, 480px, 576px, 768px, 1024px, 1200px, 1360px, 1600px.

5. Visual Elements

Border Radius

They use a lot of rounded corners:

• Small: 3px, 8px, 10px (inputs/buttons)
• Medium: 12px, 14px, 15px, 16px, 24px
• Large: 32px, 48px, 100px
• Full: 50%, 100% for pills and avatars

Shadows

Two main shadows:

• rgba(0, 0, 0, 0.1) 0px 0px 24px 0px
• rgba(33, 33, 33, 0.2) 0px 8px 6px -6px

Shadows are light — no heavy drop shadows.

Borders and Dividers

Borders vary in color (#00b23e, #b141f5, #cad0de) and thickness (1px-2px). Often used in buttons rather than cards.

6. Components

6.1 Buttons

Each variant has defined states:

Example: Green CTA

• Default: background: #00b23e, white text, padding 16px 14px, radius 16px
• Hover: background #f8f9fa, text var(--b24-hex-color-black-2), shadow
• Active: transparent background
• Focus: transparent background

Purple CTA

• Default: #b141f5 background, white text, padding 19px 23px 18px, radius 24px, border 2px solid #b141f5

White button

• Default: white background, black-ish text, border 2px solid white

Cookie policy button

• Default: #19aef9 background, white text, padding 12px 24px, radius 14px
• Hover: #0091da background

6.2 Links

Three styles:

• Black-ish text, underline on hover
• White text, no underline
• Bright blue text, underline on hover

6.3 Forms

Single text input style: transparent background, navy text (#00143d), no border, minimal padding.

6.4 Cards

No explicit card data, but padding values suggest 28px–32px with light backgrounds and subtle shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-black-text: #0b000a;
  --color-white: #ffffff;
  --color-gray-neutral: #525c69;
  --color-blue-primary: #19aef9;
  --color-navy: #00143d;
  --color-gray-light: #cad0de;
  --color-green-primary: #00b23e;
  --b24-hex-color-purple-98: #f6f3ff;
  --b24-hex-color-purple-94: #eee2ff;
  --b24-hex-color-orange-59: #f86233;
  --b24-hex-color-blue-89: #c7d4fd;
  --b24-hex-color-blue-59: #3daaf2;
  --b24-hex-color-blue-57: #2cc5f6;
  --b24-hex-color-blue-97: #eef2ff;
  --b24-hex-color-green-24: #007a2a;
  --b24-hex-color-green-40: #a0cc00;
  --b24-hex-color-gray-49: #6c757d;
  --b24-hex-color-white-85: #d9d9d9;
  --b24-hex-color-purple-50: #8900ff;
  --b24-hex-color-blue-87: #ccd8f0;
  --b24-hex-color-gray-90: #e0e3ea;
  --b24-hex-color-orange-61: #ff9839;
  --b24-hex-color-blue-94: #e1ebff;
  --b24-hex-color-purple-61: #b141f5;
  --b24-hex-color-blue-43: #0091da;
  --b24-hex-color-blue-88: #c1f0ff;
  --b24-hex-color-purple-66: #ba5cf4;
  --b24-hex-color-blue-72: #7198ff;
  --b24-hex-color-black-49: #7d7d7d;

  /* Typography */
  --font-primary: 'TT Commons Pro', Arial;
  --font-secondary: 'Helvetica Neue', Helvetica, Arial;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-51: 51px;
  --space-80: 80px;

  /* Radius */
  --radius-3: 3px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-15: 15px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-25: 25px;
  --radius-32: 32px;
  --radius-48: 48px;
  --radius-100: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 0px 24px 0px;
  --shadow-md: rgba(33, 33, 33, 0.2) 0px 8px 6px -6px;
}

8. AI Coding Assistant Prompt

# Bitrix24 Design System Specification

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

## Brand Context
Bitrix24 is a business collaboration platform with a friendly but professional tone. Design is grid-based, multi-accent, and modular. Colors are bright and flat, typography is consistent sans-serif, and components have rounded corners with defined interaction states.

## Color Palette
- Primary Blue: #19aef9 — CTAs, primary buttons, widget highlights
- Secondary Green: #00b23e — Registration, confirm actions
- Promo Purple: #b141f5 — Promotional buttons, banners
- Text Black: #0b000a — Main text
- Text White: #ffffff — On dark backgrounds
- Neutral Gray: #525c69 — Secondary text
- Navy: #00143d — Emphasis headings
- Divider Gray: #cad0de — Borders
- Light Purple: #f6f3ff — Background panels
- Orange 59: #f86233 — Alerts
- ... [include all palette colors from tokens above]

## Typography
Font family: 'TT Commons Pro', Arial  
Secondary font: 'Helvetica Neue', Helvetica, Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 Large | 90px | 700 | 1.00 | Hero titles |
| H1 Medium | 72px | 700 | 1.00 | Section titles |
| H2 | 40px | 700 | 1.00 | Subtitles |
| H3 | 32px | 500 | 1.00 | Smaller headings |
| Body | 16px | 500 | 1.50 | Paragraphs |
| Link | 19px | 500/700 | 1.20 | Navigation |
| Caption | 14px | 500 | 1.00 | Labels |

## Spacing & Grid
Base unit: 8px  
Scale: 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 28px, 32px, 36px, 51px, 80px

## Border Radius
- sm: 3px — Small elements
- md: 10px-16px — Buttons, inputs
- lg: 24px-32px — Cards, modals
- xl: 48px-100px — Hero buttons
- full: 50%, 100% — Pills, avatars

## Shadows & Depth
- Light: rgba(0,0,0,0.1) 0 0 24px
- Medium: rgba(33,33,33,0.2) 0 8px 6px -6px

## Component Specifications

### Primary Button
Default: background #00b23e, color #ffffff, padding 16px 14px, radius 16px, font-weight 700, font-size 16px  
Hover: background #f8f9fa, text var(--b24-hex-color-black-2), shadow  
Active: transparent background, text var(--b24-hex-color-black-2)  
Focus: transparent background, text var(--b24-hex-color-black-2)

### Secondary Button (Purple)
Default: background #b141f5, color #ffffff, padding 19px 23px 18px, radius 24px, border 2px solid #b141f5  
Hover: background #f8f9fa, text var(--b24-hex-color-black-2), shadow

### Navigation Links
Black text default, underline on hover.  
White text default, color change on hover.  
Blue text default, underline on hover.

### Input Fields
Transparent background, text #00143d, no border, padding 1px 2px.

## Layout & Responsive Rules
Breakpoints: 320px, 420px, 480px, 576px, 768px, 1024px, 1200px, 1360px, 1600px

## Interaction Rules
- Transitions: 150ms ease for hover/focus changes
- Focus indicators: color change + shadow
- Disabled states: 50% opacity

## DO
- Use only palette colors
- Maintain 8px grid
- Use TT Commons Pro for all text
- Respect defined button states
- Keep radii consistent per component type

## DON'T
- Invent new accent colors
- Mix sharp and rounded corners
- Leave hover/focus states undefined
- Use gradients

## Code Examples

Button:
```css
.btn-primary {
  background: #00b23e;
  color: #fff;
  padding: 16px 14px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #f8f9fa;
  color: var(--b24-hex-color-black-2);
  box-shadow: rgba(0,0,0,0.16) 0px 0px 6px;
}
```

Card:
```css
.card {
  background: #f6f3ff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
```

Input:
```css
.input-text {
  background: transparent;
  color: #00143d;
  border: none;
  padding: 1px 2px;
  font-family: var(--font-primary);
}
```

9. Summary

TL;DR: Bitrix24’s design system is bright, modular, and multi-accent. It runs on an 8px grid, uses TT Commons Pro everywhere, and defines states for every interactive element. Colors are flat and punchy, typography is clean, and radii keep UI approachable.

Brand Keywords:

• business-friendly
• multi-accent
• grid-consistent
• rounded-professional
• tech-optimist