Hostinger

Overview

Hostinger is an AI-first platform designed to democratize online business creation for entrepreneurs, creators, and small teams. The brand embodies a "Progressive Minimalism" aesthetic—a sophisticated blend of deep, immersive purples (#673de6 primary, #0a0e27 surface) with vibrant accent colors (cyan #3ab0ff, magenta #e536db) that punctuate the interface. The visual language conveys clarity, speed, and technological confidence: the dark canvas creates focus and reduces cognitive load, while the luminous accents guide users toward key actions. The UI evokes a sense of possibility—that building online is no longer complex or intimidating, but elegant and within reach.

The brand voice is direct, optimistic, and action-oriented. Hostinger speaks to users as capable creators, never condescending. Vocabulary emphasizes agency ("build," "launch," "grow"), simplicity ("made easy," "all in one place"), and empowerment ("your idea, online"). The tone is warm but professional, avoiding hype-speak. Example sentence: "Launch your site in minutes, not months—AI handles the heavy lifting."

Colors

The color system is anchored in a deep, immersive dark mode (surface #0a0e27, on-surface #f2f5fb) that creates visual depth and reduces eye strain during extended work sessions. Primary (#673de6) is Hostinger's signature purple—used exclusively for CTAs, focus states, and brand-critical interactions. It commands attention without aggression: at 100% opacity on dark surfaces, it reads as premium and trustworthy. Secondary (#3ab0ff, a bright cyan) and Tertiary (#e536db, a vivid magenta) are supporting accents deployed for status indicators, highlights, and secondary actions. The surface stack uses precise opacity layers: surface-container-low (rgba(0,0,0,0.2)) for cards and inputs, surface-container (rgba(0,0,0,0.3)) for elevated surfaces, creating visual hierarchy through depth rather than

Typography

The type system uses DM Sans exclusively, a geometric sans-serif that balances technical precision with approachability. Display (72px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; Headline-lg (48px, 600 weight) structures major sections; Body-md (16px, 400 weight, 24px line-height) ensures readability at standard viewing distances. The weight hierarchy is restrained: body copy uses 400, labels use 600, creating clear distinction without excessive contrast. Letter-spacing is negative on large sizes (-0.04em on display, -0.02em on headlines) to tighten the visual mass and convey sophistication; body and label text use neutral or slightly positive tracking (0.01em on labels) for legibility. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on white text over gr

Layout

The layout uses a fluid 12-column grid with a max-width of 1600px, allowing content to breathe on ultra-wide displays while maintaining focus on standard screens. The gutter is 24px (md spacing), applied consistently between columns and sections. Hero sections occupy full viewport height with centered content, using lg spacing (40px) for vertical rhythm between headline, subheading, and CTA. Cards and containers use md spacing (24px) for internal padding; inputs and buttons use sm spacing (12px) for tighter, more tactile grouping. The spacing scale follows a 1:1.5 ratio (4px → 12px → 24px → 40px → 64px), allowing predictable, harmonious relationships. Section separators use xl spacing (64px) vertically to create breathing room between major content blocks. On mobile (< 768px), gutter reduc

Elevation & Depth

Depth is conveyed through a layered shadow and backdrop-filter system rather than flat color shifts. Level 1 (Base): the background gradient (dark purple to deep blue) with subtle grain texture provides the foundation. Level 2 (Standard Cards): backdrop-filter: blur(20px), background: rgba(0, 0, 0, 0.2), border: 1px solid rgba(255, 255, 255, 0.1), box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1). Level 3 (Elevated/Modals): backdrop-filter: blur(40px), background: rgba(0, 0, 0, 0.3), border: 1px solid rgba(255, 255, 255, 0.15), box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15). The blur effect creates a fro

Shapes

The shape philosophy is "Technical Softness"—rounded corners that feel modern and approachable without sacrificing clarity or precision. Buttons use lg radius (16px), creating a pill-like silhouette that invites interaction. Cards and containers use lg radius (16px) for primary surfaces, md radius (12px) for secondary containers, and DEFAULT radius (8px) for inputs and smaller UI elements. The full radius (9999px) is reserved for badges and circular avatars. This graduated scale ensures visual consistency while differentiating component hierarchy: larger, more prominent elements (cards, modals

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#673de6) background, {colors.on-primary} (white) text, 12px 32px padding, 48px height, and {rounded.lg} (16px). On hover, shift to #5028b8 (darker purple) with a 0.2s transition. Button-secondary inverts the logic: white background (#ffffff), dark text (#222225), same padding and height, with hover state shifting to #f0f0f0. Button-ghost uses transparent background with 1px border at rgba(255, 255, 255, 0.2) and white text; on hover, background becomes rgba(255, 255, 255, 0.15). All buttons use {typography.label-md} (14px, 600 weight) and apply a 0.15s ease-out transition on backgroundColor and borderColor. Focus state: add box-shadow: 0 0 0 3px rgba(103, 61, 230, 0.1) to all button var

Do's and Don'ts

**Do**

• Do use {colors.primary} (#673de6) exclusively for primary CTAs and focus states—it is the brand's signature accent and must never be diluted or overused.
• Do apply backdrop-filter: blur(20px) or blur(40px) to all card and modal surfaces to maintain the frosted-glass aesthetic and visual depth.
• Do maintain a 1px border at rgba(255, 255, 255, 0.1) on all interactive surfaces (cards, inputs, buttons) to define edges without harsh contrast.
• Do use DM Sans at 400 weight for body copy and 600 weight for labels and buttons—avoid intermediate weights (500) to maintain clarity.
• Do apply negative letter-spacing (-0.04em to -0.02em) on display and headline sizes to tighten visual mass and convey sophistication.
• Do use the spacing scale (4px, 12px, 24px, 40px, 64px) consistently for all margins, padding, and gaps—never introduce arbitrary spacing values.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) as primary surfaces—always use the defined surface tokens (surface #0a0e27, surface-container #1a1f3a) to maintain the immersive dark aesthetic.
• Don't apply hard shadows (box-shadow: 0 10px 30px rgba(0,0,0,0.5))—use the defined elevation tokens (sm/md/lg) with soft, spread shadows that complement the blur effect.
• Don't mix typefaces—DM Sans is the sole font family. Avoid system fonts, serif fonts, or monospace fonts in body copy or UI labels.
• Don't use {colors.secondary} (#3ab0ff) or {colors.tertiary} (#e536db) for primary CTAs—these are supporting accents for status indicators and secondary actions only.
• Don't round corners to 0px (sharp edges) on any component—minimum radius is 4px (sm) for dividers; buttons and cards use lg (16px).
• Don't apply opacity changes to primary color for hover states—shift to a darker shade (#5028b8) instead to maintain color integrity and accessibility.