GlobFam Brand System
v2.0.0 · Single Source of Truth
A comprehensive design system for building consistent, beautiful experiences across all GlobFam products. Updated for 2025.
Brand Identity
Logo
GlobFamHorizontal · Primary
Icon Only · Favicons
GlobFamOn Brand Colors
Usage: Minimum clear space around logo equals the height of the "G" mark. Never distort, recolor outside brand palette, or place on busy backgrounds.
Brand Values
Family First
Warm, approachable design for families worldwide
Trust & Security
Bank-grade security with transparent communication
Global by Design
Multi-currency, multi-language, borderless
Delightful Simplicity
Complex finance made beautiful and intuitive
Voice & Tone
Warm & Caring
Like a trusted family member
✓ "Your family's journey"
✗ "User account settings"
Clear & Trustworthy
No jargon, no hidden meanings
✓ "No hidden fees"
✗ "Competitive pricing"
Delightfully Simple
Finance made beautiful
✓ "Save together"
✗ "Collaborative savings"
Color System
Brand Colors
Primary
Secondary
Semantic Colors
Backgrounds
Text Colors
Neutral Scale
Brand Gradients
Primary Gradient
from-[#168AAD] to-[#1A759F]Secondary Gradient
from-[#52B69A] to-[#34A0A4]Accessibility (WCAG AA)
✓ Passes
- Primary (#168AAD) on white: 4.52:1
- Navy (#184E77) on white: 9.21:1
⚠️ Caution
- Lime (#B5E48C) requires dark text
- Light backgrounds need Navy text
Typography
Font Families
Headings
Sora
Weights: 400, 500, 600, 700, 800
Headings, display text, logo
Body
Manrope
Weights: 400, 500, 600, 700
Body text, UI elements, buttons
Type Scale
Display
Size: clamp(3rem, 6vw, 6rem)
Weight: 700 · Line: 1
H1
Size: clamp(2.5rem, 5vw + 1rem, 5rem)
Weight: 700 · Line: 1.1
H2
Size: clamp(2rem, 3vw + 1rem, 3rem)
Weight: 700 · Line: 1.2
H3
Size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem)
Weight: 700 · Line: 1.3
H4
Size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem)
Weight: 500 · Line: 1.4
Body Large
Size: 1.125rem (18px)
Weight: 400 · Line: 1.7
Body
Size: 1rem (16px)
Weight: 400 · Line: 1.7
Small
Size: 0.875rem (14px)
Weight: 500 · Line: 1.5
Micro
Size: 0.75rem (12px)
Weight: 500 · Line: 1.5
Design Tokens
Spacing Scale (8pt Grid)
--space-10.5rem (8px)--space-21rem (16px)--space-31.5rem (24px)--space-42rem (32px)--space-63rem (48px)--space-84rem (64px)--space-126rem (96px)--space-168rem (128px)Border Radius
12px
Small elements, chips
16px
Buttons, inputs
20px
Cards
24px
Large cards, modals
9999px
Pills, avatars
Shadows
--shadow-xsSubtle depth
--shadow-smCards, buttons
--shadow-mdDropdowns, popovers
--shadow-lgModals, dialogs
--shadow-xlElevated elements
Components
Buttons
Variants
Sizes
Icon Buttons
Form Inputs
Badges & Status
Status Badges
Alerts
Success
Your changes have been saved successfully.
Warning
Please review your information before continuing.
Error
There was a problem processing your request.
Info
You have 3 pending invitations to review.
UI Patterns
Glassmorphism
Our signature glass effect combines transparency, blur, and depth for a premium, modern feel.
Subtle Glass
glass-subtleLight touch for backgrounds
Medium Glass
glass-strongStandard cards and panels
Strong Glass
premium-glassNavigation, modals, focus
Card Patterns
Interactive Card
Hover to see lift effect
Premium glass card with hover animation. Use for clickable content.
Gradient Card
For featured content
Use for CTAs and high-emphasis content blocks.
Motion & Animation
Motion Guidelines
Duration
--duration-fast150ms--duration-base250ms--duration-slow350ms--duration-slower500msEasing
--ease-smoothcubic-bezier(0.4, 0, 0.2, 1)
--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)
--ease-easeOutcubic-bezier(0.22, 1, 0.36, 1)
Interactive Effects
Hover Scale
scale: 1.05Hover Lift
y: -8pxPress Scale
scale: 0.95Motion Best Practices
- • Use 150-200ms for micro-interactions (buttons, toggles)
- • Use 250-300ms for UI transitions (modals, drawers)
- • Use 350-500ms for page transitions
- • Respect
prefers-reduced-motionfor accessibility - • Prefer
transformandopacityfor 60fps animations