Superhosting Design System Deep-Dive

1. Brand Overview

Superhosting is a Bulgarian-hosting brand that’s been around long enough to feel sturdy. The site’s visual language is geared toward people who want reliability and speed over fancy flourishes. Nothing about their UI screams experimental. This is practical design with a wink of personality — and that personality comes from one place: their orange.
"Primary orange" here is unapologetic: rgb(255, 102, 0) (#ff6600). It's the brand's handshake. You land on the site and immediately know where to click because orange is consistently reserved for action.

What’s the vibe? Clean, structured, almost corporate, but not sterile. Big bold CTAs in orange over a sea of whites, greys, and deep blacks. The design vocabulary suggests a customer base that just wants things to work — small business owners, IT pros, startup founders. No gradients, no wild animations — the system focuses on clarity.

There's a default system font stack leaning on -apple-system plus Georgia and Verdana where needed. That choice keeps performance lean (no Google Fonts load) and avoids brand dilution. It's a utilitarian choice, but they sprinkle in bold weights where necessary to keep hierarchy clear.

The design philosophy:

• CTA-first: Primary orange is strictly action-oriented.
• Flat and modular: Minimal shadows, loaded breakpoints for responsiveness.
• Conservative type: No trendy display fonts, just trustworthy system stacks.
• 8px logic: Spacing and padding follow predictable increments.

If you’re designing for this brand, you don’t go off-script. You anchor every layout in their grid logic, you respect their color purpose, and you let the orange do the talking.

2. Color System

2.1 Primary Colors

The main brand color: Orange

• Value: rgb(255, 102, 0) / Hex: #ff6600
• Psychology: Orange sits between red and yellow, so it delivers urgency without hostility. For a hosting company, it signals "click here, act now" — the transactional warmth of sales and signup buttons.
• Competitor Comparison: GoDaddy also uses orange in some CTAs, but often blends it with greens/blues. Superhosting charges orange as a sole primary, making CTAs more obvious and quick to scan.

They nailed it because this orange lives in high contrast against their dense black (#000000) and white (#ffffff) backgrounds. Perfect for WCAG: orange (#ff6600) on white has a contrast ratio of about 3.03:1 — which doesn't pass AAA for text, but it’s fine for large button text. On black backgrounds, the ratio is huge (14.21:1), so it pops.

2.2 Complete Palette

No secondary brand color in the main scheme — it’s all neutrals and one accent (blue for accessibility cues).

2.3 Color Relationships

• Black on white (#000000 on #ffffff): 21:1 — perfect accessibility.
• Orange (#ff6600) on black (#000000): 14.21:1 — Excellent for text.
• Orange on white (#ffffff): borderline for small text — safe for large headings or buttons.

The palette works in light mode by default. There’s no sign of dark mode token values — the system is probably single-theme.

2.4 Usage Guide

Do:

• Use #ff6600 strictly for interactive elements.
• Pair #ff6600 with white text for CTAs.
• Use accent blue #70b3ff for focus outlines only — not for links or active states.

Avoid:

• Putting orange behind small black text — legibility dies.
• Using blue as general accent — it's reserved for state change cues.
• Mixing black (#000000) and dark grey (#333333) in the same paragraph — stick to one tonal level per section.

3. Typography

3.1 Font Families

The site leans into:

• UI/System stack: -apple-system (renders San Francisco on macOS/iOS, Segoe UI on Windows) — used for headings, links, buttons.
• Georgia with fallbacks Geneva, Times New Roman, Times — used in some captions.
• Verdana sans — small size captions.

There’s no external font load — no Google Fonts, no Adobe. This screams “speed first” and “consistency across environments.”

3.2 Type Scale

3.3 Hierarchy

They keep heading sizes small — H1 is only 20px. That’s relatively understated. This could be because the site uses other cues (color, spacing) to signal hierarchy. Bold captions in Georgia stand out in areas where secondary info matters. The 12px size dominates UI labels and CTAs, consistent with utility displays. Weight is used for emphasis more than size.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px logic — most values are multiples/submultiples.

They follow 8px multiples for most things, but 6px and 10px exist — likely for optical alignment quirks.

4.2 Layout

Breakpoints span from 300px to 2000px — clear evidence of granular responsiveness. There's a breakpoint at virtually every minor increment in small devices: 300, 320, 450, 460, ..., up to desktop widths of 2000px. This means implementation uses fine adjustments per device class instead of broad “mobile/tablet/desktop.”

5. Visual Elements

• Border Radius: Only two values: 4px (small rounding for divs, buttons) and 64px (fully pill-shaped buttons).
• Shadows: One shadow value: rgba(0, 0, 0, 0.15) 0px 8px 48px 0px. Rare — likely for hero elements or modals.
• Borders: Not much — buttons on active/focus states get 1px solid rgb(103,103,103).

Flat, pill-heavy design with minimal depth cues.

6. Components

6.1 Buttons

Secondary (grey) button – .iubenda-cs-customize-btn

• Default:
  • background-color: rgb(153, 153, 153)
  • color: rgb(255, 255, 255)
  • padding: 8px 32px
  • border-radius: 64px
  • Border: none
  • Font: -apple-system, weight 700, size 12px
• Hover:
  • background-color: rgba(0, 0, 0, 0.024)
  • color: rgba(232, 232, 232, 0.75)
  • box-shadow: rgba(0,0,0,0.1) 0px 0px 0px 999px inset
• Active:
  • Transparent background
  • border: 1px solid rgb(103,103,103)
• Focus:
  • Transparent background
  • border: 1px solid rgb(103,103,103)
  • box-shadow: rgba(0,0,0,0.1) 0px 0px 0px 999px inset
  • Outline: rgb(112,179,255) solid 2px

Primary (orange) button – .iubenda-cs-accept-btn

Same metrics as above, but default background-color is rgb(255, 102, 0).

6.2 Links

• Default:
  • color: #000000
  • text-decoration: underline
  • weight: 300
• Hover:
  • color: rgb(242, 238, 238)
  • text-decoration: none

This hover logic flips legibility entirely — light grey links on probably light backgrounds might be risky.

6.3 Forms

No recorded text inputs/radio/select styles — possibly styled minimally or native defaults with state-specific colors handled elsewhere.

6.4 Cards

No dedicated "card" component recorded, but potential card-like behavior could come from the single shadow token.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-orange: #ff6600;
  --color-black: #000000;
  --color-dark-grey: #333333;
  --color-white: #ffffff;
  --color-accent-blue: #70b3ff;

  /* Typography */
  --font-system: -apple-system;
  --font-serif: Georgia, Geneva, "Times New Roman", Times;
  --font-verdana: Verdana, sans;
  --font-size-h1: 20px;
  --font-size-caption-lg: 14px;
  --font-size-caption-sm: 12px;
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-bold: 700;
  --line-height-tight: 1.4;
  --line-height-none: 0;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-lg: 16px;
  --space-hero: 104px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-pill: 64px;

  /* Shadow */
  --shadow-lg: rgba(0, 0, 0, 0.15) 0px 8px 48px 0px;
}

8. AI Coding Assistant Prompt

# Superhosting Design System Specification

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

## Brand Context
Superhosting values clarity, reliability, and speed. Their design is minimal, functional, and strictly CTA-driven with a bold orange primary. Typography is lean, using system fonts for performance.

## Color Palette
- Primary Orange: #ff6600 — Primary buttons, key actions
- Black: #000000 — Body text, header
- Dark Grey: #333333 — Secondary text
- White: #ffffff — Backgrounds, text on dark surfaces
- Accent Blue: #70b3ff — Focus outlines

**Color Rules**
- Use #ff6600 exclusively for interactive call-to-action elements.
- Accent blue only for focus indicators.
- Keep text colors in black or dark grey, never on orange backgrounds unless reversed (white on orange).
- Maintain high contrast for accessibility.

## Typography
Fonts:
- System: -apple-system
- Serif: Georgia, Geneva, Times New Roman, Times
- Verdana, sans fallback

Type sizes:
| Element   | Size  | Weight | Line Height | Use For |
|-----------|-------|--------|-------------|---------|
| Heading-1 | 20px  | 100    | 0.00        | Page titles |
| Caption-lg| 14px  | 700    | 1.40        | Emphasized captions |
| Caption-sm| 12px  | 300    | 1.40        | Minor captions |
| Link      | 12px  | 300    | 1.40        | Navigation links |
| Button    | 12px  | 700    | 1.40        | CTA text |

## Spacing & Grid
Base: 8px grid
Scale: 4px, 6px, 8px, 10px, 16px, 104px
Use 8px and 16px for most UI gaps. 104px reserved for hero spacing.

## Border Radius
- sm: 4px — small containers, inputs
- full-pill: 64px — buttons

## Shadows & Depth
- Large: rgba(0, 0, 0, 0.15) 0px 8px 48px 0px — modals/hero

## Component Specifications

### Primary Button
Default:
```css
background-color: #ff6600;
color: #ffffff;
padding: 8px 32px;
border-radius: 64px;
border: none;
font-family: var(--font-system);
font-weight: 700;
font-size: 12px;
```
Hover:
```css
background-color: rgba(0, 0, 0, 0.024);
color: rgba(232, 232, 232, 0.75);
box-shadow: rgba(0,0,0,0.1) 0px 0px 0px 999px inset;
```
Active:
```css
background: transparent;
border: 1px solid rgb(103,103,103);
```
Focus:
```css
background: transparent;
border: 1px solid rgb(103,103,103);
box-shadow: rgba(0,0,0,0.1) 0px 0px 0px 999px inset;
outline: 2px solid #70b3ff;
```

### Secondary Button
Same as above but default background-color: rgb(153, 153, 153).

### Navigation Links
Default: black, underline  
Hover: light grey (#f2eeee), no underline

## Layout & Responsive Rules
- Responsive breakpoints: 300px → 2000px
- Adjust layout per fine breakpoint step, not just device classes.

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Clear focus indicator with accent blue

## DO List
- Use only provided hex values
- Stick to 8px multiples
- Maintain pill radius for all buttons
- Apply outline for focus states
- Reserve accent blue for accessibility

## DON'T List
- Invent new colors
- Mix corner styles
- Remove focus outlines
- Use primary orange for non-interactive elements

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ff6600;
  color: #ffffff;
  padding: 8px 32px;
  border-radius: 64px;
  border: none;
  font-size: 12px;
  font-weight: 700;
}
.btn-primary:hover {
  background: rgba(0, 0, 0, 0.024);
  color: rgba(232, 232, 232, 0.75);
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 48px 0px;
  padding: 16px;
}
```

Input:
```css
.input {
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 8px;
  font-size: 12px;
}
.input:focus {
  outline: 2px solid #70b3ff;
}
```

9. Summary

TL;DR: Superhosting’s design is a masterclass in restrained UI — one bold orange as CTA anchor, system fonts for performance, strict grid spacing, and minimal depth cues. The orange works because it’s consistently applied to actions, and everything else is neutral.

Brand Keywords:

• orange-driven
• utilitarian-system
• grid-disciplined
• flat-cta
• accessibly-focused