Onlinepbx Design System Deep Dive

1. Brand Overview

Onlinepbx is a Russian cloud telephony provider. Their site at onlinepbx.ru has a utilitarian tech feel with hints of friendliness. This is not a “luxury” SaaS brand—it’s closer to the kind of straightforward, trustworthy interface you’d expect from a B2B tool that needs to feel reliable for everyday use.

The design language is modern, but not bleeding-edge experimental. Montserrat gives it a clean, geometric baseline. There’s a clear 8px spacing rhythm, bold greens for CTAs, and a restrained dark palette for structure. The vibe: “We’re solid, approachable, and slightly playful in accents.” You can tell they value clarity over decoration. No overcomplicated gradients. No whimsical illustrations. Just functional blocks, rounded corners, and occasional warm tones.

This is aimed at small to medium businesses who want quick setup and reliable tools. The site’s colors and typography help communicate “you can trust us with your calls.” The green primary (#00bb20) is pure “go” energy—think call buttons on a phone. The typography scale is large and readable, even for dense information. Buttons are chunky, with generous radii (16px and upward), making them finger-friendly on touchscreens.

They’ve leaned on Montserrat for almost everything, with Arial as a fallback. This is a safe choice: easy licensing, consistent rendering, and a familiar feel for non-designers. The spacing and breakpoints show they’ve planned for mobile-first responsiveness, but the desktop grid still feels central.

Overall: Onlinepbx’s design system is a workhorse. It’s consistent, approachable, and skewed towards clarity and speed rather than elaborate branding. That makes sense for a telephony platform—you don’t want the UI to compete with the job at hand.

2. Color System

2.1 Primary Colors

The primary brand color is #00bb20 (rgb(0, 187, 32)). It’s used for CTAs—specifically the main submit buttons (t-submit) and certain link accents. This green is saturated and confident. Psychologically, it signals “success” and “go” around the world. In the telephony context, it mirrors the “answer call” button color scheme.

Compared to competitors, many VoIP/telephony brands lean on blue (trust, technology). Onlinepbx goes green, which is less common, making them stand out. It’s also friendlier—blue can feel corporate; green feels open and action-oriented.

2.2 Complete Palette

Here’s every extracted color, with my classification:

2.3 Color Relationships

The palette has high-contrast pairs:

• #00bb20 on #ffffff easily passes WCAG AAA for large text.
• #ffffff on #2a2637 is strong contrast—good for reversed text in dark sections.
• #545567 on #ffffff is borderline for small text—fine for placeholders, but avoid for body copy.

Dark mode? They’re halfway there—the deep charcoal and slate gray backgrounds could serve as dark mode base, but bright accents like #ff8562 pop differently. The design would need careful contrast checks to avoid eye strain.

2.4 Usage Guide

Works well:

• Primary green (#00bb20) on white—high energy, clear call-to-action.
• Warm coral (#ff8562) on deep charcoal—soft warning that still catches attention.
• Bright blue (#0d71d7) as link color in a sea of dark neutrals.

Avoid:

• Coral on green—poor contrast and clashing warmth/coolness.
• Slate gray (#545567) on deep charcoal (#2a2637) for important text—it’s too low contrast.
• Bright blue (#0d71d7) on coral (#ff8562)—color vibration, hard to read.

3. Typography

3.1 Font Families

Primary: Montserrat, fallback Arial.
Secondary: Arial (in some captions/buttons), occasional Times (likely accidental or legacy).
Sources: Google Fonts (Montserrat, Ubuntu). Variable fonts enabled—good for performance.

Montserrat is a geometric sans serif. It’s modern, readable at large sizes, and feels neutral enough for B2B, but with a friendly roundness in curves.

3.2 Type Scale

3.3 Hierarchy

Lots of variation in heading sizes—36, 34, 32px for top-level. That gives flexibility but risks inconsistency if not documented. Montserrat at 20px is common for buttons/links—big enough to feel touch-friendly. Smaller body/caption sizes (12–14px) keep dense info compact.

Readability is solid—line heights are generous (1.4+). Uppercase for key UI elements (links, buttons) adds emphasis and uniformity. I’d recommend locking down heading sizes more strictly to avoid visual drift.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Confirmed by frequent multiples: 8px, 16px, 24px, etc.

4.2 Layout

Breakpoints:

• Mobile: 479px, 480px, 639px, 640px, 641px
• Tablet: 959px, 960px, 980px, 981px
• Desktop: 1199px+

They’re using fine-grained breakpoint steps—likely Tilda’s defaults. This ensures precise control between mobile/tablet/desktop layouts.

5. Visual Elements

Border Radius

Range from sharp (0px) to extreme pill (1000px).

Notable:

• 36px — very common for divs/img. Gives soft card corners.
• 16px — buttons, inputs—comfortable, not too rounded.
• 100px / 200px / 1000px — for pills, avatars, circular elements.

This mix allows them to differentiate components: larger radii for friendly CTAs, smaller for utility elements.

Shadows

They do use shadows—varied depths:

• rgba(0,0,0,0.3) 0px 0px 15px — cards/modals.
• rgba(39,39,39,0.3) 2px 2px 40px — large depth.
• rgba(0,0,0,0.2) 0px 0px 3px — subtle.

Not flat design—depth cues are part of the system.

Borders

Mostly 1px solid pale lavender gray (#a8a4b9) for dividers. Inputs use grays for outlines. Borders are clean and minimal.

6. Components

6.1 Buttons

Primary (t-submit):

• Default: bg #00bb20, text #ffffff, padding 0 15px, radius 16px, border none, font-weight 600, font-size 16px.
• No hover/active/focus states defined in extraction—likely same color or subtle opacity change.

This is chunky, accessible, and high contrast.

6.2 Links

Multiple link colors—black (#000), dark gray (#0e0e0e), muted gray (#7e7e7e), white (#ffffff), accent coral (#ff8562), primary green (#00bb20), bright blue (#0d71d7). All with no underline by default.

Hover states not extracted—likely color change or underline.

6.3 Forms

One tel input: transparent bg, slate gray text (#545567), no border, radius 0px. Minimalist—blends into background.

6.4 Cards

Shadows and border radii (36px) suggest friendly, elevated cards. Padding based on spacing scale (likely 20–25px).

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-charcoal: #2a2637;
  --color-slate: #545567;
  --color-white: #ffffff;
  --color-blackish: #222222;
  --color-green-primary: #00bb20;
  --color-coral: #ff8562;
  --color-gray-neutral: #666666;
  --color-blue-accent: #0d71d7;
  --color-dark-gray: #373737;
  --color-lavender-gray: #a8a4b9;

  /* Typography */
  --font-primary: 'Montserrat', Arial, sans-serif;
  --font-secondary: Arial, sans-serif;
  --font-tertiary: Times, serif;
  --font-monospace: monospace;

  /* Font Sizes */
  --fs-36: 36px;
  --fs-34: 34px;
  --fs-32: 32px;
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-16: 16px;
  --fs-15: 15px;
  --fs-14: 14px;
  --fs-13: 13px;
  --fs-12: 12px;

  /* Line Heights */
  --lh-1-39: 1.39;
  --lh-1-41: 1.41;
  --lh-1-56: 1.56;
  --lh-1-8: 1.80;
  --lh-1-4: 1.40;
  --lh-1-45: 1.45;
  --lh-1-35: 1.35;
  --lh-1-55: 1.55;
  --lh-1-33: 1.33;
  --lh-1-57: 1.57;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-17-8: 17.8px;
  --space-18: 18px;
  --space-20: 20px;
  --space-25: 25px;
  --space-28: 28px;
  --space-30: 30px;
  --space-38: 38px;
  --space-48: 48px;
  --space-135: 135px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-7: 7px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-24: 24px;
  --radius-36: 36px;
  --radius-50: 50px;
  --radius-100: 100px;
  --radius-200: 200px;
  --radius-1000: 1000px;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.3) 0px 0px 15px 0px;
  --shadow-lg: rgba(39,39,39,0.3) 2px 2px 40px 0px;
  --shadow-sm: rgba(0,0,0,0.2) 0px 0px 3px 1px;
}

8. AI Coding Assistant Prompt

# Onlinepbx Design System Specification

You are an Onlinepbx design expert. Build UIs matching their visual language exactly.

## Brand Context
Onlinepbx is a cloud telephony platform with a clean, approachable, B2B-friendly design. The system is built on Montserrat typography, bold primary green CTAs, and an 8px spacing grid. It values clarity, legibility, and friendly touch targets.

## Color Palette
- Deep Charcoal: #2a2637 — backgrounds, headers
- Slate Gray: #545567 — secondary text, placeholders
- Pure White: #ffffff — text on dark, button text
- Near Black: #222222 — primary text
- Primary Green: #00bb20 — CTAs, success states
- Warm Coral: #ff8562 — accents, warnings
- Neutral Gray: #666666 — metadata, disabled text
- Bright Blue: #0d71d7 — link accents
- Dark Gray: #373737 — borders, dividers
- Pale Lavender Gray: #a8a4b9 — borders, dividers

## Typography
Font Families:
- Primary: 'Montserrat', Arial, sans-serif
- Secondary: Arial, sans-serif
- Occasional: Times, serif
- Monospace: monospace

Type Scale:
| Level      | Font       | Size  | Weight | Line Height | Use For |
|------------|------------|-------|--------|-------------|---------|
| H1         | Montserrat | 36px  | 700    | 1.39        | Page titles |
| H1-alt     | Montserrat | 34px  | 700    | 1.41        | Section titles |
| H1-alt2    | Montserrat | 32px  | 700    | 1.56        | Sub-headlines |
| Button/Lnk | Montserrat | 20px  | 500    | —           | Uppercase CTAs |
| Body-lg    | Montserrat | 20px  | 600    | 1.80        | Emphasis body |
| Body       | Montserrat | 16px  | 400    | 1.35        | Main body text |
| Caption    | Montserrat | 14px  | 500    | 1.55        | UI labels |
| Small      | Montserrat | 12px  | 400    | 1.40        | Footnotes |

## Spacing & Grid
Base: 8px  
Scale: 1px, 2px, 5px, 8px, 10px, 12px, 15px, 17.8px, 18px, 20px, 25px, 28px, 30px, 38px, 48px, 135px  
Use: multiples for padding, margins, grid gaps.

## Border Radius
- none: 0px — data tables
- sm: 2px–8px — inputs, small buttons
- md: 10px–18px — cards, modals
- lg: 36px–50px — large cards, hero sections
- full: 100px–1000px — pill buttons, avatars

## Shadows & Depth
- md: rgba(0,0,0,0.3) 0px 0px 15px — cards
- lg: rgba(39,39,39,0.3) 2px 2px 40px — modals
- sm: rgba(0,0,0,0.2) 0px 0px 3px 1px — subtle UI depth

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background: #00bb20;
  color: #ffffff;
  padding: 0px 15px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:focus { outline: 2px solid #ffffff; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Link
```css
.link {
  color: #0d71d7;
  text-decoration: none;
  font-weight: 500;
}
.link:hover {
  text-decoration: underline;
}
```

### Input Field
```css
.input-tel {
  background-color: transparent;
  color: #545567;
  border: none;
  padding: 0;
  border-radius: 0;
}
.input-tel:focus { outline: none; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 36px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.3) 0px 0px 15px;
}
```

## Layout & Responsive Rules
Max content width: 1199px+ for desktop.  
Page padding: 20px mobile / 25px desktop.  
Breakpoints:  
- Mobile: < 480px  
- Tablet: 640px–980px  
- Desktop: > 981px

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Focus indicators: solid outline in white or brand green depending on bg
- Loading states: reduce opacity to 0.5 and show spinner

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use Montserrat for headings and body
- Keep button radii consistent (16px for primary CTAs)
- Respect breakpoints for responsive layout
- Use shadows from defined set

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners in same component
- Don't remove focus indicators
- Don't use coral for primary CTAs
- Don't apply heavy shadows outside defined values

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #00bb20;
  color: #ffffff;
  padding: 0px 15px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  border: none;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 36px;
  padding: 25px;
  box-shadow: rgba(0,0,0,0.3) 0px 0px 15px;
}
```

Form Input:
```css
.input {
  background: transparent;
  color: #545567;
  border: none;
  border-radius: 0;
  padding: 0;
}
```

9. Summary

TL;DR
Onlinepbx’s system is functional, friendly, and consistent. Montserrat + green CTAs + 8px grid = dependable UI for a B2B telephony tool. Shadows and rounded corners soften the utilitarian base.

Brand Keywords

• action-friendly
• clean-B2B
• green-driven
• grid-disciplined