Switch between the rendered Visual preview and the Raw DESIGN.md.
Hostinger's design system embodies a modern, tech-forward aesthetic with bold confidence balanced by accessibility and clarity. The visual language combines vibrant gradient purples with crisp neutrals, creating an energetic yet professional environment that conveys reliability and innovation. The system emphasizes simplicity and directness—large, legible typography paired with ample whitespace and purposeful use of color to guide user attention. This is a design language built for conversion, where every element serves a clear function while maintaining a polished, contemporary feel that appeals to both technical and non-technical users.
Key Characteristics
#673DE6) used sparingly for maximum impact#673DE6): Main call-to-action buttons, key interactive elements, and primary brand accent. Dominant throughout the interface for high-importance actions.#110C29): Deepest neutral for text on light backgrounds and foundational brand color.#7B66FF): Secondary accent for hover states and alternative highlights.#4C78FF): Tertiary accent for variant buttons and supporting UI elements.#3AB0FF): Light accent for information states and decorative elements.#E536DB): Highlight accent for special promotions or featured content.#005CB2): Darker blue for links and subdued interactive states.#1976D2): Alternative blue for specific component states.#673DE6): Main action buttons with white text on dark or light backgrounds.#FFFFFF): Secondary buttons on dark backgrounds or neutral containers.#222225): Text-only buttons on light backgrounds.#18181A): Default link color, underlined or plain depending on context.#222225): Primary text color on light backgrounds; most common text use.#18181A): Slightly darker variant for emphasis and headers.#797980): Secondary text, hints, and helper text.#9D9EA4): Tertiary text and borders.#F8F9FA): Light background for card sections and subtle emphasis.#F5F5F6): Alternative light background for variety.#000000): Absolute contrast for rare, critical emphasis.#FFFFFF): Primary background for all main content areas and cards.#F8F9FA): Secondary background for grouped or alternative sections.#F5F5F6): Tertiary background for nested or sub-components.#009E5B): Positive actions, confirmations, and success states.#E69800): Warning alerts and cautionary messages.#CCFF00): Bright alert highlights for urgent warnings.#E73A47): Error messages, destructive actions, and failure states.Primary Font: DM Sans (sans-serif), fallback stack: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Secondary Font: Times New Roman (serif for body text in specific contexts), fallback stack: "Times New Roman", "Times", serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | DM Sans | 56px | 399 | 64px | 0px | Hero headline, page title; maximum prominence |
| Heading 3 | DM Sans | 48px | 399 | 56px | 0px | Large section heading |
| Heading 2 | DM Sans | 32px | 399 | 40px | 0px | Section title, sub-hero |
| Heading 5 | DM Sans | 24px | 399 | 32px | 0px | Card title, prominent label |
| Body Text | DM Sans | 16px | 399 | 24px | 0px | Standard paragraph and default text |
| Body Bold | DM Sans | 16px | 600 | 24px | 0px | Emphasized body text, button text, labels |
| Caption | DM Sans | 14px | 400 | 20px | 0px | Helper text, metadata, small labels |
| Code / Mono | DM Sans | 16px | 400 | 24px | 0px | Input fields, code snippets |
| Small Text | DM Sans | 14px | 599 | 20px | 0px | Tags, badges, secondary actions |
399 (normal) for modern, clean appearance400; only emphasize with weight 600 when semantic meaning requires it0px to maintain tight, professional appearance#673DE6#FFFFFF16px6008px 16px999px0px none40px24pxbackground: #7B66FFbackground: #5A2FBFbackground: #D9D9D9; color: #797980; cursor: not-allowedtransparent#22222516px6008px 16px999px1px solid #22222540px24pxbackground: #F8F9FA; border-color: #18181Abackground: #F5F5F6transparent#22222516px6000px 0px0px0px noneauto24pxtext-decoration: underlinecolor: #673DE6#FFFFFF#22222532px 32px16px0px nonenone (or rgba(0, 0, 0, 0.08) 0px 2px 8px 0px on hover)16px39924px#673DE6#F8F9FA32px 32px16px0px nonenone16px60024px#FFFFFF#F8F9FA#22222524px 24px16px1px solid #F5F5F6none16px39924px#FFFFFF#22222516px40012px 16px12px1px solid #E0E0E044px24px#797980border: 1px solid #673DE6; box-shadow: 0 0 0 3px rgba(103, 61, 230, 0.1)border: 1px solid #E73A47; background: rgba(231, 58, 71, 0.05)background: #F5F5F6; color: #9D9EA4; cursor: not-allowed#FFFFFF#22222516px40012px 16px 12px 48px (with icon)12px1px solid #E0E0E044px24px#797980border: 1px solid #673DE614px600#18181A8px12px400#7979804px#FFFFFF#22222572px0px 24pxrgba(0, 0, 0, 0.1) 0px 4px 10px 0px16px39924px#18181A16px600nonecolor: #673DE6color: #673DE6; border-bottom: 2px solid #673DE6#FFFFFF1px solid #F5F5F68pxrgba(0, 0, 0, 0.12) 0px 8px 24px 0px8px 0px200px12px 16px14px400#222225background: #F8F9FA; color: #673DE6#673DE6#FFFFFF12px6004px 12px50px16px#F8F9FA#22222512px6004px 12px6px1px solid #E0E0E016pxrgba(0, 158, 91, 0.1)#009E5B12px6004px 12px50px16pxrgba(230, 152, 0, 0.1)#E6980012px6004px 12px50px16pxrgba(231, 58, 71, 0.1)#E73A4712px6004px 12px50px16px#18181A16px600nonecolor: #673DE6; text-decoration: underlinecolor: #005CB2#79798014px400nonecolor: #673DE6; text-decoration: underline#18181A16px600inline-flex; align-items: center; gap: 8px20px#673DE6The spacing system is built on an 8px base unit with a modular scale:
Usage Context:
16px, 24px, 32px8px, 12px24px, 40px, 64px40px, 80px, 96px1440px for primary content container24px on desktop, 16px on tablet, 12px on mobile80px horizontal padding for full-width sections on desktopHostinger's design prioritizes breathing room and visual clarity through generous whitespace. Rather than cramped layouts, sections are separated by substantial vertical gaps (64px–96px), allowing user attention to reset between concepts. Horizontal padding is equally generous—interior content is indented with 80px padding on full-width sections, creating a natural frame around the message. Cards and components maintain internal padding (32px), ensuring text and images have space to breathe. This philosophy signals quality, reduces cognitive load, and supports conversion by preventing overwhelm.
0px: Sharp corners for navigation bars and full-width hero sections6px: Subtle rounding for badges and compact UI elements8px: Standard rounding for dropdown menus and modals12px: Input fields and search bars16px: Primary rounding for cards, promoted content cards, and most component surfaces50px: Fully rounded pill-style buttons and rounded badges999px: Max-radius for button corners (effective full rounding regardless of height)50%: Circular avatars and icon buttons| Level | Treatment | Use |
|---|---|---|
| Flat / Base | box-shadow: none | Default cards, buttons, text-heavy sections |
| Raised | box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px 0px | Hover states on cards, secondary elevation |
| Elevated | box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px 0px | Navigation bar, modals, popovers |
| High | box-shadow: rgba(0, 0, 0, 0.15) 0px 12px 24px 0px | Sticky headers, floating action buttons, dropdowns on focus |
| Maximum | box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 40px 0px | Full-page overlays, critical modals |
Shadow Philosophy:
Hostinger uses subtle, restrained shadows that suggest layering without heavy visual weight. Shadows serve a functional purpose: indicating elevation, focus state, or interactive readiness. Most components default to box-shadow: none for a flat, modern appearance. Shadows are introduced sparingly on hover or focus to signal interactivity. The navigation bar carries the most persistent shadow (rgba(0, 0, 0, 0.1) 0px 4px 10px 0px) to establish it as a persistent top layer. This conservative shadow approach maintains the clean, contemporary aesthetic while preserving clarity and legibility.
#673DE6) strategically for main call-to-action buttons and the highest-priority interactive element per page or section12px gap; separate field groups with 24px gap#F8F9FA) to create visual hierarchy8px (modern, less rounded) or 999px (pill-style, maximum roundness)0px 4px 10px) for primary components; reserve subtle shadows for hover states only#E73A47) for non-error messaging; it signals danger and failure| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–599px | Single column, 12px gutters, 32px padding, 20px gaps, heading sizes reduced by ~15% |
| Tablet | 600px–1023px | Two columns, 16px gutters, 40px padding, 24px gaps, heading sizes reduced by ~10% |
| Desktop | 1024px–1439px | Three columns, 24px gutters, 64px padding, 32px gaps, full heading sizes |
| Large Desktop | 1440px+ | Max-width container (1440px), centered, 80px padding, full spacing scale |
44px height × 44px width (iOS guideline)44px height, flexible width8px on all sides to reach target size40px × 40px minimum44px height minimum8px between adjacent interactive elements20px × 20px with 12px margin for label spacing24px80px horizontal on desktop → 40px on tablet → 16px on mobile64px gaps on desktop → 40px on tablet → 24px on mobile#673DE6) with white text#222225 text, 1px solid #222225 border)#FFFFFF) for content, Off-White (#F8F9FA) for subtle sections#18181A)#222225)#797980)#7B66FF), Vivid Blue (#4C78FF), or Electric Magenta (#E536DB)#009E5B)#E73A47)#E69800)#9D9EA4) or 1px solid rgba(0, 0, 0, 0.1)16px DM Sans, weight 600 unless specifically a small tag button (14px, weight 599)#673DE6 background, white text, 999px radius, 40px height, 8px 16px padding399 (not bold), with sizes: H1 56px, H2 32px, H3 48px, H5 24px32px; section padding is 80px on desktop, 40px on tablet, 16px on mobile8px, 12px, 16px, 24px, 32px; vertical section spacing is 40px, 64px, 96px999px or 8px, cards 16px, badges 50px, inputs 12px, navigation 0px44px height minimum, 16px font size, 12px padding, 12px border-radius, 1px solid light border#18181A, hover is #673DE6 with underlinergba(0, 0, 0, 0.1) 0px 4px 10px 0px; hover states get rgba(0, 0, 0, 0.08) 0px 2px 8px 0px16px