Hostinger Horizons
Design System · Generated 15/04/2026 · 28 colors · 33 type tokens · 23 spacing steps · 23 breakpoints · 4 motion tokens
April 2026
Color Palette
Background Colors
Black
#000000
Black 2
#0C0D0D
Dark Gray 6
#101011
Dark Gray 2
#18181A
Dark Gray
#222225
Dark Gray 3
#36363B
Dark Gray 4
#58585E
Blue (Primary)
#673DE6
Background (continued)
Light Orange
#FF9875
Purple
#B452FF
White 3
#E6E8FF
Blue 4 (25%)
rgba(123,102,255,.25)
Blue 5 (10%)
rgba(123,102,255,.1)
Cyan 2 (10%)
rgba(0,158,91,.1)
Text Colors
White 2
#F8F9FA
White
#FFFFFF
Dark Cyan
#009E5B
Mid Gray
#9D9EA4
Light Gray
#DEDEE2
Blue 2
#7B66FF
Light Blue
#9D99FF
Red
#BE1025
Text (continued)
Mid Gray 2
#797980
Blue 3
#6D7081
Dark Gray 5
#161718
Dark Gray 7
#1D1E20
AI Gradient
AI Gradient
#e536db → #673DE6 → #3ab0ff
Blue 5 (Dark)
#5025D1
Shadow Color
rgba(29,30,32,.16)
Typography
Primary Font · DM Sans
DM Sans
From idea to app — build, launch and grow your AI-powered web applications with Horizons.
w399 Regular · 400 Medium · 500 w599 Semibold · 600 w699 Bold · 700
Secondary Font · Times
Times
Craft beautiful, functional web applications powered by artificial intelligence.
Regular · 400
Horizons.
Display Hero · 80px · w399 · line-height: 88px · letter-spacing: −0.4px · (title-special)
Build apps with AI
Heading Large · 48px · w599 · line-height: 56px · letter-spacing: −0.24px · (title-1-bold)
From idea to production
Heading 2 · 36px · w399 · line-height: 44px · letter-spacing: −0.18px · (title-2)
No-code, all magic
Heading 3 · 32px · w399 · line-height: 40px · letter-spacing: −0.16px · (title-3)
Describe your app, watch it come alive in seconds.
Heading 2 (body) · 20px · w599 · line-height: 28px · (heading-2)
Build powerful web applications without writing a single line of code. Our AI handles everything from design to deployment.
Body 1 · 16px · w399 · line-height: 24px · letter-spacing: 0
Last updated 2 minutes ago · Build #4821 · Production
Body 2 · 14px · w399 · line-height: 20px · letter-spacing: 0
HOSTING · DOMAINS · AI BUILDER
Overline · 12px · w699 · line-height: 16px · uppercase · letter-spacing: 0
Line Heights
Tight
16px
Snug
20px
Normal
24px
Relaxed
26px
Loose
28px
Spacious
40px
Open
44px
Title
56px
Hero
88px ↕
Letter Spacing
Horizons
Tight
−0.4px · hero display
Build faster
Normal
−0.24px · large headings
Ship today
Wide
−0.18px · mid headings
Your AI app
LS-6
−0.09px · subheadings
Spacing
Spacing Scale
23 tokens — 2px → 128px
2
4
6
7
8
10
11
12
15
16
20
32
40
44
47
48
56
64
68.5
79.7
80
96
128
Borders
Border Radii
sm (bottom)
0 0 16 16px
md
6px
lg
8px
xl
12px
2xl
16px
full (top)
16 16 0 0px
r7
24px
r8 (top)
24 24 0 0px
r9
30px
r10
50%
r11 / Pill
99px
r13
999px
Border Widths
Hairline
1px · ×318
Thin
2px · ×12
Base
3px · ×100
Hostinger uses 3 distinct border widths — hairline for standard UI boundaries, thin for emphasis, and the unusually heavy 3px base frequently used for interactive elements and decorative lines.
Shadow / Elevation
Shadow Tokens
4 tokens
Inset Ring
×8
rgba(0,0,0,.1) 1px inset · inner border effect
Outline
×2
rgba(0,0,0,.1) 1px · outer 1px ring border
Ambient
×2
rgba(29,30,32,.16) 12px blur · panels, cards
Focus Ring
×1
rgb(123,102,255) 1px inset · brand focus state
Z-Index
LayerValueUsage
z-1 (Base)1Base elevated elements above static content
z-2 (Elevated)2Slightly elevated cards or floating elements
z-3 (Dropdown)1000Dropdown menus, select popups, context menus
z-4 (Overlay)1001Overlays layered above dropdowns
z-5 (Sticky+)1008Sticky elements above standard dropdowns
z-6 (Modal)2000Modal dialogs, full-page overlays
z-7 (Pre-max)9996High-priority overlays below toast layer
z-8 (Toast)9999Toast notifications, critical alerts
z-9 (Maximum)999999Absolute top-layer elements (chat widgets, etc.)
Breakpoints
XS
340px
SM
450px
MD
460px
LG
500px
XL
575px
2XL
576px
3XL
600px
BP-8
610px
BP-9
728px
BP-10
767px
BP-11
768px
BP-12
930px
BP-13
992px
BP-14
1000px
BP-15
1024px
BP-16
1025px
BP-17
1056px
BP-18
1140px
BP-19
1310px
BP-20
1360px
BP-21
1384px
BP-22
1525px
BP-23
1712px
23 breakpoints spanning 340px through 1712px. Notably dense in the 575–768px range (7 breakpoints) suggesting fine-grained mobile-to-tablet transition control. The system also defines --h-breakpoint-mobile: 992px as the primary mobile threshold in the Hostinger component system.
Opacity
Opacity Scale
1 token — 0.60 (60%)
Muted
60% · ×3
Hostinger defines a single extracted opacity token --opacity-60: 0.6. Additional transparency is implemented via rgba color tokens (e.g. --color-light-blue-2: rgba(123,102,255,0.25)).
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
White 2 (#F8F9FA)White (#FFFFFF)1.05:1Fail
White 2 (#F8F9FA)Dark Gray (#222225)15.05:1AAA
White 2 (#F8F9FA)Black (#000000)19.92:1AAA
White 2 (#F8F9FA)Blue (#673DE6)5.88:1AA
White 2 (#F8F9FA)Dark Gray 2 (#18181A)16.82:1AAA
Dark Cyan (#009E5B)White (#FFFFFF)3.48:1AA Large
Dark Cyan (#009E5B)Dark Gray (#222225)4.56:1AA
Dark Cyan (#009E5B)Black (#000000)6.04:1AA
Dark Cyan (#009E5B)Blue (#673DE6)1.78:1Fail
Dark Cyan (#009E5B)Dark Gray 2 (#18181A)5.1:1AA
Mid Gray (#9D9EA4)White (#FFFFFF)2.67:1Fail
Mid Gray (#9D9EA4)Dark Gray (#222225)5.94:1AA
Mid Gray (#9D9EA4)Black (#000000)7.86:1AAA
Mid Gray (#9D9EA4)Blue (#673DE6)2.32:1Fail
Mid Gray (#9D9EA4)Dark Gray 2 (#18181A)6.64:1AA
Light Gray (#DEDEE2)Dark Gray (#222225)11.83:1AAA
Light Gray (#DEDEE2)Black (#000000)15.65:1AAA
Light Gray (#DEDEE2)Blue (#673DE6)4.62:1AA
Blue 2 (#7B66FF)White (#FFFFFF)4.05:1AA Large
Blue 2 (#7B66FF)Black (#000000)5.19:1AA
Blue 2 (#7B66FF)Blue (#673DE6)1.53:1Fail
Blue 2 (#7B66FF)Dark Gray 2 (#18181A)4.38:1AA Large
CSS Variables Reference
Background Colors14 tokens
Black--color-black#000000
Black 2--color-black-2#0C0D0D
Dark Gray 6--color-dark-gray-6#101011
Dark Gray 2--color-dark-gray-2#18181A
Dark Gray (Card)--color-dark-gray#222225
Dark Gray 3--color-dark-gray-3#36363B
Dark Gray 4--color-dark-gray-4#58585E
Blue (Brand)--color-blue#673DE6
Light Orange--color-light-orange#FF9875
Purple--color-purple#B452FF
White 3--color-white-3#E6E8FF
Light Blue 2--color-light-blue-2rgba(123,102,255,.25)
Blue 4--color-blue-4rgba(123,102,255,.1)
Dark Cyan 2--color-dark-cyan-2rgba(0,158,91,.1)
Text & Fill Colors14 tokens
White--color-white#FFFFFF
White 2--color-white-2#F8F9FA
Dark Cyan--color-dark-cyan#009E5B
Mid Gray--color-mid-gray#9D9EA4
Light Gray--color-light-gray#DEDEE2
Blue 2--color-blue-2#7B66FF
Light Blue--color-light-blue#9D99FF
Mid Gray 2--color-mid-gray-2#797980
Blue 3--color-blue-3#6D7081
Dark Gray 5--color-dark-gray-5#161718
Dark Gray 7--color-dark-gray-7#1D1E20
Red--color-red#BE1025
Blue 5 (Gradient)--color-blue-5#5025D1
Shadow Color--color-dark-gray-8rgba(29,30,32,.16)
Typography33 tokens
DM Sans--font-family-baseDM Sans
Times (Serif)--font-family-2Times
w399 (near-Regular)--font-weight-w399399
Regular--font-weight-regular400
Medium--font-weight-medium500
w599 (near-Semibold)--font-weight-w599599
Semibold--font-weight-semibold600
w699 (near-Bold)--font-weight-w699699
Bold--font-weight-bold700
2xs--font-size-2xs12px
xs--font-size-xs14px
sm--font-size-sm16px
base--font-size-base18px
lg--font-size-lg20px
xl--font-size-xl32px
2xl--font-size-2xl36px
3xl--font-size-3xl48px
4xl (Hero)--font-size-4xl80px
Tight--letter-spacing-tight−0.4px
Normal--letter-spacing-normal−0.24px
Wide--letter-spacing-wide−0.18px
Wider--letter-spacing-wider−0.16px
Widest--letter-spacing-widest−0.1px
LS-6--letter-spacing-ls-6−0.09px
Spacing23 tokens
Space 1--space-12px
Space 2--space-24px
Space 3--space-36px
Space 4--space-47px
Space 5 (SM)--space-58px
Space 6--space-610px
Space 8--space-811px
Space 10--space-1012px
Space 12--space-1215px
Space 16 (MD)--space-1616px
Space 20--space-2020px
Space 32 (LG)--space-3232px
Space 40 (XL)--space-4040px
Space 48--space-4844px
Space 80--space-8048px
Space 96--space-9656px
Space 128--space-12864px
Space 160--space-16068.5px
Space 192--space-19279.7px
Space 256--space-25680px
Space 23--space-2396px
Space 24 (Max)--space-24128px
Borders & Radius17 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base (Heavy)--border-width-base3px
sm (bottom-only)--radius-sm0 0 16 16px
md--radius-md6px
lg--radius-lg8px
xl--radius-xl12px
2xl--radius-2xl16px
full (top-only)--radius-full16 16 0 0px
r7--radius-r724px
r9--radius-r930px
r10 (Circle)--radius-r1050%
r11 / Pill--radius-r1199px
r12--radius-r12100px
r13--radius-r13999px
r14 (Max)--radius-r141200px
Motion, Opacity & Layers14 tokens
Instant--duration-instant0.1s · ×60
Fast--duration-fast0.2s · ×57
Normal--duration-normal0.3s · ×231
Ease In/Out--easing-ease-in-outease-in-out · ×216
Muted 60%--opacity-600.6
Base--z-11
Elevated--z-22
Dropdown--z-31000
Overlay--z-41001
Sticky+--z-51008
Modal--z-62000
Pre-max--z-79996
Toast--z-89999
Maximum--z-9999999
Hostinger Horizons Design System · Generated 15/04/2026 · 28 color tokens · 33 type tokens · 23 spacing steps · 14 border radii · 3 border widths · 4 shadows · 3 durations · 1 easing · 9 z-index layers · 23 breakpoints · 1 opacity token