Logo Usage
Primary Logo
Use the primary logo on light backgrounds. Maintain clear space equal to the height of the "H" in HamdukDrive around all sides.
Logo for Dark Backgrounds
Use the white version of our logo on dark backgrounds. Ensure sufficient contrast for optimal visibility and brand recognition.
Logo Do's and Don'ts
Do
- • Use the provided logo files without modification
- • Maintain minimum clear space around the logo
- • Use appropriate logo version for background color
- • Scale proportionally to maintain aspect ratio
- • Use high-resolution files for print materials
Don't
- • Alter, distort, or recreate the logo
- • Change logo colors or add effects
- • Place logo on busy or low-contrast backgrounds
- • Rotate or skew the logo
- • Use outdated or unofficial logo versions
Color Palette
Primary Teal
Accent Orange
Light Gray
Pure White
Color Usage Guidelines
Primary Applications
- • Use Primary Teal for main brand elements and CTAs
- • Accent Orange for highlights and secondary actions
- • Light Gray for backgrounds and subtle elements
- • White for text on dark backgrounds and clean spaces
Accessibility
- • Ensure WCAG AA contrast ratios (4.5:1 minimum)
- • Test color combinations for accessibility
- • Provide alternative indicators beyond color alone
- • Consider color blindness in design decisions
Typography
Primary Typeface
Poppins
Used for headings, titles, and emphasis text. Available in Regular, Medium, SemiBold, and Bold weights.
Secondary Typeface
Inter
Used for body text, captions, and interface elements. Optimized for readability at all sizes.
Typography Scale
Heading 1 - 36px/Bold
Main page titles and hero headings
Heading 2 - 30px/Bold
Section headings and major divisions
Heading 3 - 24px/SemiBold
Subsection headings
Heading 4 - 20px/SemiBold
Card titles and component headings
Body Large - 18px/Regular
Lead paragraphs and important text
Body Regular - 16px/Regular
Standard body text and paragraphs
Body Small - 14px/Regular
Captions, labels, and secondary text
Layout & Spacing
Grid System
- • 12-column grid system for desktop layouts
- • 16px base unit for consistent spacing
- • Maximum content width: 1200px
- • Responsive breakpoints: 768px, 1024px, 1200px
- • 24px gutters between columns
Spacing Scale
Download Resources
Access our complete brand asset library including logos, fonts, templates, and detailed guidelines.