Plesk Design System Deep Dive

1. Brand Overview

Plesk isn’t trying to be flashy. This is server management software, not a fashion brand — but they still care about design. The vibe is professional, trustworthy, and slightly tech‑polished. You feel it the first time you land: clean white space, strong blue accents, crisp typography. It’s aimed at developers, sysadmins, and digital agencies who need clarity over decoration.

The philosophy? Minimal color noise, tight grids, functional typography. They’re not chasing trends. This is a UI that’s meant to survive multiple product versions without feeling dated. Every color has a job. Every type size has a role. The site uses Montserrat and Raleway — both geometric sans‑serifs with enough personality to be friendly but still corporate enough for enterprise software. Montserrat handles the heavier, bolder statements. Raleway steps in for lighter headings, captions, and body copy.

Blue is the hero here: #0276d4 (rgb(2, 118, 212)) is everywhere — CTAs, borders, link text. It’s not a “soft” SaaS pastel; it’s a confident, saturated tech blue. Against white (#ffffff) and dark gray (#222222), it pops hard. They sprinkle in a lighter blue (#53bce6) for secondary actions and hover states, and a deeper blue (#005fcc) for focus/hover.

The layout is tight. An 8px spacing scale runs through everything. The breakpoints cover all standard device widths, with plenty of micro‑breakpoints for fine‑tuned adjustments (e.g., 782px, 783px — they’re clearly tweaking specific layout quirks).

Overall impression: This is a brand that values clarity over flair, but still polishes its edges. The design system feels like it could live inside a developer’s control panel UI without breaking context. And that’s exactly what Plesk needs.

2. Color System

2.1 Primary Colors

Primary brand color:
#0276d4 — rgb(2, 118, 212)
Psychology: Blue conveys trust, stability, professionalism. This shade is saturated enough to feel modern but dark enough to maintain accessibility. Compared to competitors like cPanel (which uses orange) or Webmin (which is more muted), Plesk’s blue feels more corporate and less playful. It’s the backbone of the brand — you see it in buttons, borders, and link text.

2.2 Complete Palette

2.3 Color Relationships

The primary blue #0276d4 against white (#ffffff) easily passes WCAG AA and AAA for large text. Against dark gray (#222222), it’s less common but still legible. They use lighter blues like #53bce6 for hover states — these keep the interaction visible without creating jarring jumps.

Accessibility seems baked in: text colors stay in high‑contrast territory. Even the secondary text (#7b7b7b) against white is above the 4.5:1 ratio for body copy, so it’s safe.

Dark mode isn’t a big focus here — most of the site is white‑background. The rgba overlay (rgba(36,59,86,0.9)) is the closest thing to a dark surface, used for modals.

2.4 Usage Guide

• Primary Blue (#0276d4) — Only for interactive elements: buttons, links, borders. Don’t use it for large background fills; it’s too strong.
• White (#ffffff) — Default background. Works with all text colors in the palette.
• Dark Gray (#222222) — Use for headings or dark section text. Avoid pairing with primary blue for text — poor contrast on dark backgrounds.
• Light Blue (#53bce6) — Secondary actions, hover states. Avoid overuse; it’s an accent.
• Deep Blue (#005fcc) — Hover/focus states. Use sparingly for emphasis.
• Secondary Text Gray (#7b7b7b) — Placeholder text, captions. Don’t use for critical information — it’s intentionally lower contrast.
• Surface Gray (#f2f5f7) — Soft background for cards, input fields.
• Accent Blues (#1559ed, #03ade4, #2872fa) — Context‑specific: sliders, hover states, form interaction.

3. Typography

3.1 Font Families

• Montserrat — Used for headings, buttons, and some links. No fallbacks listed, but it’s a geometric sans with strong vertical stems. Perfect for bold, high‑impact titles.
• Raleway — Used for body, captions, some headings. Slightly more elegant, thinner strokes.

No Google Fonts or Adobe Fonts are loaded directly according to the extracted data, which is odd — these may be self‑hosted.

3.2 Type Scale

3.3 Hierarchy

Montserrat’s bold weights (700, 600) set clear hierarchy for headings and buttons. Raleway’s lighter weights give breathing room in body copy. The line heights are tight for headings (1.0–1.3), looser for body and links (1.6), which keeps headings feeling compact while maintaining readability.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px — but they also use odd values like 5px, 7px, 13px.

4.2 Layout

Breakpoints:
1px, 98px, 400px, 479px, 480px, 576px, 600px, 601px, 640px, 690px, 767px, 768px, 782px, 783px, 1000px, 1024px, 1025px, 1440px, 99999px — This is granular. They’re clearly tuning layout at very specific screen widths.

5. Visual Elements

Border Radius

Rounded corners are subtle — 3px for most buttons, small inputs. Some components (like tabs) have top‑only rounding.

Shadows

• rgba(0, 0, 0, 0.16) 0px 3px 4px 0px — Light drop shadow, used sparingly.
• rgba(47, 47, 47, 0.4) 0px 0px 5px 0px — Stronger shadow, possibly modal overlays.

Borders

Heavy use of colored left borders (16px or 8px solid #0276d4) — they act as visual anchors. Buttons use 2px solid #0276d4 or 2px solid #53bce6 depending on style.

6. Components

6.1 Buttons

Variant 1 — White background, blue border

Default:

• Background: #ffffff
• Color: #0276d4
• Padding: 12px 16px
• Border radius: 3px
• Border: 2px solid #0276d4
• Font: Montserrat, 700, 16px

Hover:

• Transform: scale(1.1)
• Border: 2px solid #7b7b7b
• Background: transparent white overlay

Active:

• Background: rgba(0,0,0,0.2)
• Transform: scale(1.1)

Focus:

• Background: #53bce6
• Border: none
• Transform: scale(1.1)

Variant 2 — Solid blue

Default:

• Background: #0276d4
• Color: #ffffff
• Padding: 14px 20px
• Border radius: 3px
• Border: none
• Font: Montserrat, 700, 16px

States mirror Variant 1.

Variant 3 — Tab control button

Default:

• Background: #eaf6fb
• Color: #7b7b7b
• Border radius: 6px 6px 0px 0px
• Font: Raleway, 400, 16px

Variant 4 — Raven button (transparent)

Default:

• Background: transparent
• Color: #0276d4
• Padding: 15px 30px
• Border radius: 4px
• Border: 2px solid #0276d4
• Font: Raleway, 600, 16px

States mirror Variant 1.

6.2 Links

Three types:

• Blue (#0276d4) — Primary links
• Dark gray (#222222) — Text links in dark sections
• White (#ffffff) — Links on dark backgrounds

Hover changes color to #fff (var(--has-link-decoration, #fff)) — no underline.

6.3 Forms

Inputs use 1px solid #69727d border, 3px radius. Focus states change border color (#2872fa for active selection fields).

6.4 Cards

No explicit card component data, but surface colors (#f2f5f7) and shadows suggest:

• Padding: 15px–30px
• Border radius: 4px–6px
• Shadow: rgba(0,0,0,0.16) 0px 3px 4px

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #0276d4;
  --color-white: #ffffff;
  --color-dark-gray: #222222;
  --color-black: #000000;
  --color-light-blue: #53bce6;
  --color-deep-blue: #005fcc;
  --color-blocksy-palette-3: rgba(36,59,86,0.9);
  --color-blocksy-palette-2: #1559ed;
  --color-text-secondary: #7b7b7b;
  --color-surface-gray: #f2f5f7;
  --color-button-hover: #03ade4;
  --color-selection-bg: #b4d5fe;
  --color-swiper-theme: #007aff;
  --color-form-selection-active: #2872fa;

  /* Typography */
  --font-montserrat: "Montserrat", sans-serif;
  --font-raleway: "Raleway", sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-5: 5px;
  --space-5-5: 5.5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17-8: 17.8px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-33: 33px;
  --space-40: 40px;
  --space-50: 50px;
  --space-100: 100px;

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

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.16) 0px 3px 4px 0px;
  --shadow-dark: rgba(47, 47, 47, 0.4) 0px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# Plesk Design System Specification

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

## Brand Context
Plesk’s design is clean, minimal, and professional. It uses strong blues for interactive elements, crisp geometric sans-serif typography, and an 8px-based spacing scale. The system is built for developers and sysadmins — clarity and functionality over decoration.

## Color Palette
- Primary Blue: #0276d4 — CTAs, primary buttons, links, borders
- White: #ffffff — Page background, button text
- Dark Gray: #222222 — Primary text in dark sections
- Black: #000000 — High-contrast text, icons
- Light Blue: #53bce6 — Secondary buttons, hover states
- Deep Blue: #005fcc — Hover/focus states
- Overlay Blue: rgba(36,59,86,0.9) — Modals, overlays
- Accent Blue: #1559ed — Alternate accent
- Secondary Text Gray: #7b7b7b — Captions, placeholders
- Surface Gray: #f2f5f7 — Card backgrounds
- Button Hover: #03ade4 — Hover backgrounds
- Selection Background: #b4d5fe — Text selection
- Swiper Theme: #007aff — Carousel controls
- Form Active Blue: #2872fa — Active form fields

## Typography
- Headings: Montserrat, sans-serif
- Body: Raleway, sans-serif

| Level      | Font       | Size(px) | Weight | Line Height | Use For             |
|------------|------------|----------|--------|-------------|---------------------|
| H1         | Montserrat | 40       | 700    | 1.00        | Main page titles    |
| H1         | Montserrat | 32       | 700    | 1.30        | Section headings    |
| H1         | Raleway    | 30       | 400    | 1.40        | Secondary headings  |
| H2         | Montserrat | 26       | 600    | 1.20        | Subheadings         |
| Body       | Raleway    | 16       | 400    | 1.60        | Paragraph text      |
| Button     | Montserrat | 16       | 700    | 1.00        | Button labels       |
| Caption    | Raleway    | 13       | 400    | 1.00        | Small labels        |

## Spacing & Grid
Base: 8px scale  
Tokens: 1px, 2px, 5px, 6px, 7px, 10px, 12px, 13px, 14px, 15px, 16px, 17.8px, 20px, 25px, 30px, 33px, 40px, 50px, 100px  
Use multiples of 8px for layout gaps and padding.

## Border Radius
- none: 0 — tables
- sm: 3px — buttons, inputs
- md: 4px — cards
- lg: 6px — tabs, larger boxes
- xl: 10px — specific divs
- full: 50% — circular links

## Shadows & Depth
- Light: rgba(0,0,0,0.16) 0px 3px 4px
- Dark: rgba(47,47,47,0.4) 0px 0px 5px  
Use shadows sparingly; depth is often created with borders.

## Component Specifications

### Primary Button
Default:  
background: #0276d4; color: #ffffff; padding: 14px 20px; border-radius: 3px; border: none; font-weight: 700; font-size: 16px.  
Hover: scale(1.1), border: 2px solid #7b7b7b, background transparent overlay.  
Active: background rgba(0,0,0,0.2), scale(1.1).  
Focus: background #53bce6, no border, scale(1.1).

### Secondary Button
Default:  
background: #ffffff; color: #0276d4; padding: 12px 16px; border-radius: 3px; border: 2px solid #0276d4; font-weight: 700; font-size: 16px.  
States mirror primary.

### Navigation Links
Default: color #0276d4, no underline.  
Hover: color #ffffff.  
Dark section links: #222222 default.

### Input Fields
Default: border 1px solid #69727d; border-radius 3px; background #ffffff.  
Focus: border-color #2872fa; outline none.

### Cards
Background: #f2f5f7; border-radius 4px; padding 15px–30px; shadow rgba(0,0,0,0.16).

## Layout & Responsive Rules
Max content width: 1440px breakpoint.  
Page padding: 20px mobile / 30px desktop.  
Grid gap: 10px–30px depending on section.  
Breakpoints: 400px, 480px, 576px, 768px, 1024px, 1440px.

## Interaction Rules
- State transitions: 150ms ease
- Focus indicators: color change + scale
- Hover states: subtle scale + color shift

## DO
- Use only palette colors
- Maintain 8px grid multiples
- Use Montserrat for headings, Raleway for body
- Keep button radius at 3px
- Use shadows sparingly
- Keep hover scale consistent at 1.1

## DON'T
- Use unapproved colors
- Mix sharp and rounded corners in same component
- Overuse light blue — it's for secondary states
- Add heavy shadows to flat surfaces
- Break spacing scale

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0276d4;
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  transform: scale(1.1);
  border: 2px solid #7b7b7b;
}
.btn-primary:focus {
  background: #53bce6;
  transform: scale(1.1);
}
```

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: #0276d4;
  padding: 12px 16px;
  border-radius: 3px;
  border: 2px solid #0276d4;
  font-weight: 700;
  font-size: 16px;
  transition: all 150ms ease;
}
```

### Input
```css
.input {
  border: 1px solid #69727d;
  border-radius: 3px;
  padding: 10px;
  font-size: 16px;
}
.input:focus {
  border-color: #2872fa;
  outline: none;
}
```

### Card
```css
.card {
  background: #f2f5f7;
  border-radius: 4px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.16) 0px 3px 4px;
}
```

9. Summary

TL;DR — Plesk’s design system is clear, blue‑driven, and grid‑tight. Montserrat for impact, Raleway for readability. 8px scale everywhere. Buttons scale on hover; shadows are rare. It’s built to be functional and timeless.

Brand Keywords

• tech‑trustworthy
• grid‑disciplined
• blue‑centric
• functional‑minimal
• developer‑friendly