HubSur Design System
Logo & Wordmark
Light Mode
hubsur
Dark Mode
hubsur
Colors
Primary Colors
Dodger Blue
#1e90ff
Rich Black
#2d2d35
White
#ffffff
Secondary Colors
Light Blue
#e9f4ff
Dark Blue
#125699
Light Gray
#F5F5F5
Accented Colors
Light Green
#1fffc7
Purple
#571fff
Orange
#ff8f1f
Typography
Montserrat Bold - H1
Montserrat Bold - H2
Inter Regular - Body Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Inter Light - Secondary Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Design Rationale
- Montserrat Bold for headings to provide strong visual hierarchy and authority
- Inter for body text and UI elements, offering excellent readability at all sizes
- Inter Light for secondary text to create subtle visual contrast
- Combination balances professional appearance with modern, friendly feel
Photography Style
Modern Home Environment
Natural light, clean spaces
Authentic Family Moments
Candid, not posed
Realistic Life Situations
Focus on protection & innovation
Image Guidelines
Light
- Bright, natural lighting
- Soft shadows
- Avoid harsh contrasts and artificial lighting
Color Treatment
- Slightly desaturated
- Natural tones
- Warm undertones to balance brand blue
Subject Matter
- Focus on home, family, and protection
- Authentic family moments, not posed
- Diverse representation of modern life
Design Elements
Call to Action
Light
Dark
Design Rationale
- Bold font weight for emphasis
- Rounded corners for friendly appearance
- Subtle shadow effect to create depth and elevate the button
- Gradient animation on hover using primary color
- Scale down effect on click for tactile feedback