Selectel Design System Deep Dive

1. Brand Overview

Selectel’s visual language hits that sweet spot between enterprise seriousness and tech-forward clarity. This is not a playful startup aesthetic — it’s infrastructure-grade UI meant for people who care about uptime, security, and precision. The palette, typography, and component choices scream “we’re stable, we’re exact, and we don’t waste your time.”

The first impression: dark navy roots (#092433), quiet grays (#e5e7eb), and clean white space. This combination immediately communicates trust and authority. The typography is clean and modern (Manrope with Roboto fallback), with weights dialed in to give hierarchy without unnecessary ornamentation. Button styles and component edges are consistently rounded — there’s no mix of sharp and soft corners — which makes the interface feel cohesive.

The design philosophy here seems to be: minimize noise, maximize clarity. The spacing grid is predictable (8px base), the breakpoints cover all major device widths from 600px up to 1920px, and the UI elements are built for functional efficiency. Tailwind CSS and Vuetify power the implementation — you can see it in the utility classes and v- components. That means this system is grounded in a component-first approach, with strong constraints baked into the code.

If you’re building for Selectel’s audience, think of engineers, sysadmins, and CTOs who need quick comprehension, not visual gimmicks. Every design decision reinforces that — the muted palette, the balanced contrast, the precise radii, and the no-nonsense shadows (only used sparingly). It’s a system that supports scalability and consistency across products.

2. Color System

2.1 Primary Colors

The brand’s anchor is #092433 — a deep, desaturated navy. This is the heavy hitter in headers, buttons, and text. Psychologically, it conveys stability, reliability, and authority. It’s darker than many tech brands’ blues, which often lean toward mid-tone vibrancy (#007aff for Apple’s UI blue, for example). Selectel’s choice is deliberate: darker tones reduce glare and keep focus on content.

The secondary functional color is #e5e7eb — a very light gray used for dividers and backgrounds. It’s calming and neutral, making sure the dark primary stands out. White (#ffffff) is the third anchor, used for text on dark backgrounds and surface fills.

There are also hints of accent colors in CSS variables — --swiper-theme-color: #007aff (bright blue), --tw-ring-color: #3b82f680 (semi-transparent blue), and signals like var(--signal-red) in button hover states, though the actual hex isn’t exposed in the data.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong between #092433 and #ffffff — easily surpassing WCAG AA for text. The light gray #e5e7eb against dark navy also has acceptable contrast for non-critical UI elements like dividers. The semi-transparent navy overlays are subtle, which can be a risk for accessibility if used on low-contrast backgrounds, but for focus rings they’re fine.

Dark mode isn’t explicitly separate here — the palette already leans toward dark surfaces with light text.

2.4 Usage Guide

• Works well: Dark navy text on light gray backgrounds — clean, readable, authoritative.
• Avoid: White text on light gray — low contrast.
• Accent restraint: Use bright blues (#007aff) only for interactive highlights like carousel dots, not for main CTAs.
• Hover states: Slight opacity changes or soft color shifts keep the brand feeling calm — don’t introduce loud hover colors unless they’re tokenized.

3. Typography

3.1 Font Families

Primary font: Manrope. Fallback: Roboto. No Google Fonts import visible — likely self-hosted. No variable fonts in use.

Manrope is geometric but friendly, with good readability across sizes. Roboto fallback keeps metrics consistent if Manrope fails.

3.2 Type Scale

3.3 Hierarchy

The large H1 sizes (64px, 54px) are for hero sections — they’re bold enough to anchor a page visually. The smaller heading sizes (32px, 24px) handle sub-sections. Body text sits around 16–18px, maintaining readability. Captions and microcopy drop to 14px or 12px, but line heights keep them airy.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

4.2 Layout

Breakpoints:

• 600px
• 640px
• 667px
• 768px
• 991px
• 1280px
• 1440px
• 1920px

This covers small phones to large desktops. The grid is likely fluid between breakpoints, with fixed max widths for large screens.

5. Visual Elements

Border Radius System

Consistent rounding — no hard edges except in specific utility buttons.

Shadows

Used sparingly:

• rgba(0, 0, 0, 0.16) 0px 8px 24px 0px
• rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.08) 0px 4px 16px 0px
• rgba(0, 0, 0, 0.16) 0px 5px 40px 0px

Mostly for modals, floating buttons, or chat bubbles.

Borders

Commonly 1px solid rgba(9, 36, 51, 0.1) or #e5e7eb for dividers. Borders substitute for shadows in many cases.

6. Components

6.1 Buttons

Outlined Dark Small

• Default: transparent bg, #092433 text, 7px 20px padding, 8px radius, 1px solid rgba(9, 36, 51, 0.3)
• Hover: var(--data-blue) bg, var(--signal-red) text
• Focus: 4px ring (var(--data-blue-alpha-20)), var(--signal-red) text

Search Button

• Default: white bg, #092433 text, 4px padding, no radius/border
• Focus: subtle shadow (rgba(0,0,0,0.1) and rgba(0,0,0,0.2) outline)

Colored Dark Small

• Default: #092433 bg, white text, 7px 20px padding, 8px radius
• Hover/Focus: same as outlined

Icon Light Small

• Default: rgba(9,36,51,0.05) bg, #092433 text, 7px padding, 4px radius

Chat Bubble

• Default: #eb4247 bg, #092433 text, 100px radius, shadow
• Hover: #1f93ff bg, heavier shadow

6.2 Links

• Dark link: #092433 text, underline from-font rgba(9,36,51,0.1)
• White link: #ffffff text, underline rgba(255,255,255,0.2)

6.3 Forms

Search Input

• Default: transparent bg, #092433 text, 1px solid rgba(9, 36, 51, 0.2) border, 8px radius, padding 12px 50px 12px 16px
• Focus: var(--input-border-focus) border

Checkbox

• Transparent bg, rgba(9,36,51,0.8) text, no border radius, no border in default

7. Design Tokens

:root {
  /* Colors */
  --color-light-gray: #e5e7eb;
  --color-dark-navy: #092433;
  --color-white: #ffffff;
  --color-dark-navy-alpha-3: rgba(9, 36, 51, 0.03);
  --color-muted-plum: #462c38;
  --color-dark-navy-alpha-68: rgba(9, 36, 51, 0.682);
  --color-ring-blue-alpha-50: #3b82f680;
  --color-swiper-blue: #007aff;
  --color-ring-offset-white: #ffffff;

  /* Typography */
  --font-primary: "Manrope", Roboto;
  --font-size-h1-lg: 64px;
  --font-size-h1-md: 54px;
  --font-size-h1-sm: 44px;
  --font-size-h1-xs: 32px;
  --font-size-h1-xxs: 24px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 18px;
  --font-size-body-sm: 16px;
  --font-size-caption-md: 14px;
  --font-size-caption-sm: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-36: 36px;
  --space-40: 40px;
  --space-41-9375: 41.9375px;
  --space-80: 80px;
  --space-110: 110px;
  --space-140: 140px;

  /* Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-100: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.16) 0px 8px 24px 0px;
  --shadow-md: rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.08) 0px 4px 16px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.16) 0px 5px 40px 0px;
}

8. AI Coding Assistant Prompt

# Selectel Design System Specification

System Prompt:
You are a Selectel design expert. Build UIs matching their visual language exactly.

Brand Context:
Selectel’s design is precise, functional, and authoritative. It uses a muted dark navy and light gray palette, rounded corners, and predictable spacing to create trust and clarity. Typography is modern and readable, with Manrope as the primary font and Roboto fallback. Shadows are minimal; borders define structure.

Color Palette:
- Light Gray: #e5e7eb — Neutral backgrounds, dividers
- Dark Navy: #092433 — Primary brand color for headers, buttons, text
- White: #ffffff — Surfaces, text on dark
- Dark Navy 3%: rgba(9,36,51,0.03) — Hover/focus backgrounds
- Muted Plum: #462c38 — Rare hover states
- Dark Navy 68%: rgba(9,36,51,0.682) — Focus outlines, overlays
- Ring Blue Alpha 50%: #3b82f680 — Input/button focus rings
- Swiper Theme Blue: #007aff — Accent for carousel indicators
- Ring Offset White: #ffffff — Focus ring offsets

Typography:
Font Families:
- Primary: "Manrope", Roboto

Type Sizes:
| Level      | Size   | Weight | Line Height | Use |
|------------|--------|--------|-------------|-----|
| H1 Hero    | 64px   | 500    | 1.05        | Main page titles |
| H1 Large   | 54px   | 500    | 1.00        | Section titles   |
| H1 Medium  | 44px   | 600    | 1.10        | Subsection titles|
| H1 Small   | 32px   | 600    | 1.10        | Card headings    |
| Body Large | 20px   | 600    | 1.20        | Buttons, key text|
| Body       | 18px   | 400    | 1.60        | Paragraphs       |
| Body Bold  | 18px   | 600    | 1.40        | Links, highlights|
| Caption    | 14px   | 400-600| 1.40        | Small labels     |
| Microcopy  | 12px   | 400-600| 1.00-1.20   | Legal, footnotes |

Spacing & Grid:
Base: 8px. Scale: 1, 2, 4, 7, 8, 10, 12, 13, 14, 15, 16, 18, 20, 24, 36, 40, 41.9375, 80, 110, 140px.
Use multiples of 8px wherever possible. Button padding: 7px vertical, 20px horizontal.

Border Radius:
- 2px — Small spans
- 4px — Icons, small cards
- 8px — Inputs, buttons
- 10px — Decorative spans
- 12px — Rare container
- 16px — Larger cards, modals
- 100px — Pill buttons
- Full (50%) — Circles, avatars

Shadows & Depth:
- Large: rgba(0,0,0,0.16) 0px 8px 24px
- Medium: rgba(0,0,0,0.12) 0px 0px 2px, rgba(0,0,0,0.08) 0px 4px 16px
- Extra Large: rgba(0,0,0,0.16) 0px 5px 40px

Component Specifications:

Primary Button:
Default: bg #092433, color #ffffff, padding 7px 20px, radius 8px, border none, font-weight 600, font-size 16px.
Hover: bg var(--data-blue), color var(--signal-red).
Focus: box-shadow 0 0 0 4px var(--data-blue-alpha-20), color var(--signal-red).

Secondary Button (Outlined Dark):
Default: transparent bg, color #092433, padding 7px 20px, radius 8px, border 1px solid rgba(9,36,51,0.3).
Hover: bg var(--data-blue), color var(--signal-red).
Focus: same as primary.

Navigation Links:
Dark: color #092433, underline rgba(9,36,51,0.1).
White: color #ffffff, underline rgba(255,255,255,0.2).

Input Fields:
Search: transparent bg, color #092433, border 1px solid rgba(9,36,51,0.2), radius 8px, padding 12px 50px 12px 16px.
Focus: border var(--input-border-focus).

Cards:
bg #ffffff, radius 16px, padding 24px, border 1px solid #e5e7eb or subtle shadow.

Layout & Responsive Rules:
Max content width: 1440px.
Page padding: 16px mobile / 40px desktop.
Breakpoints: 600, 640, 667, 768, 991, 1280, 1440, 1920px.

Interaction Rules:
Transitions: 150ms ease for hover/focus.
Focus: visible ring per token.
Loading: subtle opacity changes.

DO List:
- Use only colors from palette.
- Maintain 8px grid.
- Use Manrope for all text.
- Keep corners consistent per radius mapping.
- Use shadows sparingly.

DON'T List:
- Don’t invent new colors.
- Don’t mix sharp and rounded corners.
- Don’t overload hover states with bright colors.
- Don’t remove focus indicators.

Code Examples:

Primary Button:
```css
.btn-primary {
  background: #092433;
  color: #ffffff;
  padding: 7px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: var(--data-blue);
  color: var(--signal-red);
}
.btn-primary:focus {
  box-shadow: 0 0 0 4px var(--data-blue-alpha-20);
  outline: none;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e5e7eb;
}
```

Input:
```css
.input-search {
  background: transparent;
  color: #092433;
  border: 1px solid rgba(9,36,51,0.2);
  border-radius: 8px;
  padding: 12px 50px 12px 16px;
}
.input-search:focus {
  border: var(--input-border-focus);
  outline: none;
}
```

9. Summary

TL;DR — Selectel’s design system is built for precision: dark navy, light gray, Manrope typography, 8px grid spacing, rounded corners, minimal shadows. It’s a serious, trustworthy aesthetic aimed at enterprise tech users.

Brand Keywords:

• infrastructure-serious
• tech-minimalist
• precision-grid
• muted-authoritative