Timeweb Design System Deep Dive

1. Brand Overview

Timeweb’s design is confident and utility‑driven. This is a brand that’s clearly targeting people who are here to get things done — developers, small businesses, tech teams — but without feeling cold or corporate. The palette leans warm (the primary is a muted coral, #dc6655), and typography sticks to the dependable Roboto family. No decorative serifs. No playful display faces. This is a “clarity first” system.

The site’s visual tone is a mix of tech and hospitality. Coral for action, deep browns and charcoal for text, soft beige accents (#f2c19d) to keep it approachable. The layouts feel modular — lots of cards, rounded corners, and a consistent 8px grid underneath. Breakpoints span from tiny mobile (360px) to large desktop (1366px), which tells you they care about every viewport.

There’s a noticeable bias toward contained components. Buttons, inputs, cards — all live in their own rounded rectangles, often with 6px, 8px, or 12px radii. Shadows are rare and subtle (low-opacity drop shadows, often rgba(77, 59, 59, 0.08)), giving just enough depth without breaking the flat feel.

Interaction feels snappy. Buttons scale up on hover (transform: scale(1.1)), link colors shift to a bright red (rgb(244, 18, 36)), and focus states strip outlines entirely — they’re relying on color changes for focus indication. That’s a choice. Accessibility purists might push back.

This is a design system for a product that wants to look modern, warm, and functional — not flashy. If you’re building inside it, you need to respect its balance between tech cleanliness and approachable warmth.

2. Color System

2.1 Primary Colors

The hero color is #dc6655 (RGB 220,102,85). It’s a muted coral — warm enough to feel friendly, saturated enough to stand out as a call‑to‑action. This is not a “startup neon.” Compared to competitors in hosting/cloud (think DigitalOcean’s deep blue or AWS’s orange), Timeweb’s coral is distinct and more human.

It’s used in:

• Primary buttons
• Link text
• Icon accents
• Some borders

Psychologically, coral sits in the “approachable urgency” zone — you notice it, but it doesn’t scream. It works well for a brand that wants you to trust them with infrastructure but still feel like they’re people.

2.2 Complete Palette

2.3 Color Relationships

Coral (#dc6655) on white hits high contrast — WCAG AA passes easily for normal text and UI. Coral on beige (#f2c19d) fails — too low contrast. They avoid that combination in text but might use it in iconography.

Dark brown (#372a2a) on white is safe and high contrast. Beige (#f2c19d) on white is borderline for small text — better for decorative elements.

No explicit dark mode palette found. If they ever add one, coral will need a darker variant to stand out against deep backgrounds.

2.4 Usage Guide

• Works well: Coral (#dc6655) + white (#ffffff) — primary buttons, links.
• Safe neutrals: Deep brown (#372a2a) + beige (#f2c19d) — warm, readable headings.
• Avoid: Coral (#dc6655) on beige (#f2c19d) for body text — poor legibility.
• Hover states: They darken coral or switch to blue for hover — keep hover colors distinct from disabled or inactive states.
• Functional colors: Blue (#2d7bd5, #488cda) used sparingly — don't introduce new blues.

3. Typography

3.1 Font Families

Everything is Roboto, with system-ui, -apple-system fallbacks. No Google Fonts import in the data — likely self‑hosted or system‑default Roboto. No variable fonts.

Roboto is the safe choice: geometric sans, clean, predictable metrics. Perfect for UI.

3.2 Type Scale

3.3 Hierarchy

They’re not shy about mixing weights at the same size — 24px headings exist at 400, 600, and 700. This lets them fine‑tune emphasis without changing layout.

Large headings (36–48px) are tight line height (1.0–1.2), giving strong blocks of text. Smaller labels and captions open up line height for legibility.

Buttons often stick to 14–16px text, bold or semi‑bold, which keeps them readable at any breakpoint.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px. There are some oddball values (2px, 5px), but the grid is clearly multiples of 8 for primary spacing.

4.2 Layout

Breakpoints:

• 360px, 370px — tiny mobile
• 450px, 500px — small devices
• 640px — Tailwind sm
• 768px — Tailwind md
• 960px, 1000px
• 1024px — Tailwind lg
• 1200px, 1280px — wide desktop
• 1360px, 1366px — max desktop

They’re using Tailwind CSS with arbitrary values (top-[117px]), so layout is utility‑driven. Expect flex/grid combos with consistent gaps from the spacing scale.

5. Visual Elements

Border Radius

They have a wide range:

• 0px — some divs, modals
• 2px — badges
• 4px — badges, small divs
• 6px — buttons, inputs, modals
• 8px — buttons, inputs, divs
• 10px — rare
• 12px — cards, buttons
• 15px — rare
• 16px — nav, modals
• 24px — rare
• 30px — rare modal
• 9999px — pills, fully rounded
• 50% — avatars, round buttons

Rounded corners are consistent at component level — you don’t see mixed radii in one component.

Shadows

Low use. Main shadow: rgba(77, 59, 59, 0.08) 0px 8px 40px 0px — subtle depth. Some heavier: rgba(0, 0, 0, 0.5) 2px 2px 5px 0px for overlays.

No material‑style elevation stacking — shadows are for modals and cards only.

Borders

Mostly 1px solids in muted grays/browns. Some bottom borders (0px 0px 1px) for inputs. Borders are a bigger depth cue than shadows here.

6. Components

6.1 Buttons

Primary Coral Button

• Default: background: #dc6655, color: #ffffff, padding: 0 16px, border-radius: 6px, no border, font: Roboto 14px/600.
• Hover: background: rgb(73,81,137), transform: scale(1.1).
• Focus: outline: none.

Secondary Coral Outline

• Default: background: rgba(220,102,85,0.1), color: #dc6655, padding: 0 32px, border-radius: 6px, font 16px/600.
• Hover: same dark blue bg, scale up.

Brown Solid

• Default: background: #4d3b3b, color: #ffffff, padding: 0 32px, radius 6px, font 16px/600.
• Hover: dark blue, scale.

Coral Text on White

• Default: background: #ffffff, color: #dc6655, padding: 0 16px, radius 8px, font 16px/400.

Neutral Outline

• Default: transparent bg, color: #4d3b3b, border: 1px solid rgba(77,59,59,0.15), padding 4px 6px, radius 6px, font 14px/400.

6.2 Links

Four styles:

• Coral (#dc6655) default, red (#f41224) hover underline.
• White default, red hover underline.
• Dark brown default, red hover underline.
• Beige (#f2c19d) default, red hover underline.

No link underlines by default — they only appear on hover.

6.3 Forms

Text inputs:

• Default: transparent bg, dark brown text, radius 8px, padding 0 20px.
• Focus: inset white box shadow, borderless, border-color: rgb(64,214,189) — interesting teal focus.

No checkbox/radio styles in extracted data.

7. Design Tokens (CSS)

:root {
  /* Colors */
  --color-primary: #dc6655;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-beige: #f2c19d;
  --color-brown-dark: #372a2a;
  --color-brown-muted: #807271;
  --color-rust-dark: #6d4541;
  --color-coral-dark: #d15b4a;
  --color-blue-bright: #2d7bd5;
  --color-cream-light: #fdf4ee;
  --color-gray-soft: #f8f4f4;
  --color-coral-alt: #d35d4c;
  --color-blue-light: #488cda;
  --color-peach-cream: #fcf1e9;
  --tw-ring-color: #3b82f680;
  --swiper-theme-color: #007aff;
  --tw-ring-offset-color: #ffffff;

  /* Typography */
  --font-family-primary: "Roboto", system-ui, -apple-system;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-120: 120px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-xxl: 10px;
  --radius-card: 12px;
  --radius-nav: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-soft: rgba(77, 59, 59, 0.08) 0px 8px 40px 0px;
  --shadow-strong: rgba(0, 0, 0, 0.5) 2px 2px 5px 0px;
}

8. AI Coding Assistant Prompt

# Timeweb Design System Specification

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

## Brand Context
Timeweb’s design is warm, functional, and modular. It uses coral as its primary voice, paired with deep browns and soft beige. Typography is clean, UI-focused, and built entirely on Roboto. Components are rounded, shadows are subtle, and spacing follows an 8px grid.

## Color Palette
- Primary Coral: #dc6655 — Primary buttons, links, key actions
- Black: #000000 — Text in widgets
- White: #ffffff — Backgrounds, button text
- Accent Beige: #f2c19d — Decorative links, highlights
- Deep Brown: #372a2a — Headers, body text
- Muted Brown Gray: #807271 — Secondary text
- Dark Rust: #6d4541 — Hover states
- Darker Coral: #d15b4a — Hover variants
- Bright Blue: #2d7bd5 — Hover/focus accents
- Light Cream: #fdf4ee — Background tints
- Soft Gray Tint: #f8f4f4 — Hover backgrounds
- Slight Coral Shift: #d35d4c — Hover variant
- Light Blue: #488cda — Hover link
- Peach Cream: #fcf1e9 — Hover bg

## Typography
Font Family: "Roboto", system-ui, -apple-system

| Level | Size px | Weight | Line Height | Use For |
|-------|---------|--------|-------------|---------|
| H1-lg | 48 | 700 | 1.00 | Page titles |
| H1-md | 40 | 700 | 1.10 | Section headers |
| H1-md-light | 40 | 400 | 1.10 | Secondary headings |
| H2 | 36 | 700 | 1.20 | Subsections |
| Button-sm | 14 | 600 | 1.14 | Labels |

## Spacing & Grid
Base: 8px. Scale: 1, 2, 4, 8, 10, 12, 16, 20, 24, 32, 48, 120px
Use multiples of 8px for layout gaps, section padding, card spacing.

## Border Radius
- none: 0px — tables
- sm: 2px — badges
- md: 4px — small UI
- lg: 6px — buttons, inputs
- xl: 8px — larger buttons, cards
- card: 12px — cards, modals
- nav: 16px — nav containers
- full: 9999px — pills, avatars

## Shadows & Depth
- Soft: rgba(77, 59, 59, 0.08) 0px 8px 40px — cards
- Strong: rgba(0, 0, 0, 0.5) 2px 2px 5px — overlays

## Component Specifications

### Primary Button
Default:
```css
background: #dc6655;
color: #ffffff;
padding: 0 16px;
border-radius: 6px;
font: 600 14px Roboto;
border: none;
transition: transform 200ms ease;
```
Hover:
```css
background: rgb(73,81,137);
transform: scale(1.1);
```
Focus: outline: none

### Secondary Button
Background: rgba(220,102,85,0.1), color: #dc6655, padding: 0 32px, radius: 6px, font: 600 16px Roboto.

### Navigation Links
Default: color from palette, no underline. Hover: color #f41224, underline.

### Input Fields
Transparent bg, dark brown text, radius 8px, padding 0 20px. Focus: inset white shadow, border-color: rgb(64,214,189).

## Layout & Responsive Rules
Breakpoints: 360, 370, 450, 500, 640, 768, 960, 1000, 1024, 1200, 1280, 1360, 1366px.

## Interaction Rules
- Hover scaling: 1.1
- Transition: 200ms ease
- No outline — use color change for focus

## DO List
- Use exact hex values from palette
- Keep spacing multiples of 8px
- Use Roboto for all text
- Maintain consistent border radius per component type
- Use hover scale only on interactive elements

## DON'T List
- Invent new colors
- Mix sharp and rounded corners
- Add heavy shadows
- Use underlines except on link hover
- Remove hover scaling on buttons

## Code Examples

Primary Button (Tailwind):
```html
<button class="bg-[#dc6655] text-white px-4 rounded-md font-semibold text-sm transition-transform hover:scale-110 hover:bg-[#495189]">Click Me</button>
```

Card:
```html
<div class="bg-white rounded-lg p-8 shadow-[rgba(77,59,59,0.08)_0px_8px_40px]">
  Card content
</div>
```

Input:
```html
<input type="text" class="bg-transparent text-[#4d3b3b] rounded-lg px-5 focus:shadow-[inset_0_0_0_100px_#fff] focus:border-none focus:outline-none focus:border-[rgb(64,214,189)]">
```

9. Summary

TL;DR — Timeweb’s design system is warm coral + deep brown + clean Roboto. Rounded corners everywhere, subtle shadows, 8px grid. Buttons scale up on hover, links underline only on hover. Build with precision — color and spacing are tightly controlled.

Brand Keywords:

• warm-functional
• coral-forward
• rounded-modular
• UI-clean
• developer-friendly