Logo & Branding Guidelines
How to properly use Hardal's logos, colors, and visual identity elements
Our logo is refer to a hotdog. Cool, right?
Logo Variations
Hardal has several official logo variations for different contexts:
Primary Logo
Our primary logo combines the Hardal wordmark with our mustard icon. This is the preferred logo for most applications.
Usage: Marketing materials, website headers, presentations, and anywhere the full brand identity should be displayed.
Icon Only
Our icon can be used independently when space is limited or when the Hardal name is already established in context.
Usage: App icons, favicons, social media profile pictures, and small-format applications.
Clear Space
Always maintain adequate clear space around our logo to ensure visibility and impact. The minimum clear space should be equal to the height of the "H" in the Hardal wordmark.
Minimum Size
To ensure legibility, do not use the primary logo at sizes smaller than:
- 100px wide for digital applications
- 1 inch wide for print applications
For smaller applications, use the icon-only version.
Logo Misuse
To protect our brand integrity, please avoid:
- Altering the logo colors
- Stretching or distorting the logo
- Adding effects like shadows or gradients
- Rotating the logo
- Placing the logo on busy backgrounds without sufficient contrast
- Combining the logo with other graphic elements
- Recreating the logo with different fonts
Brand Colors
Primary Palette
| Color | Hex | RGB | Usage |
|---|---|---|---|
| Mustard Yellow | #FFCC00 | rgb(255, 204, 0) | Primary brand color |
| Charcoal | #333333 | rgb(51, 51, 51) | Primary text color |
| White | #FFFFFF | rgb(255, 255, 255) | Backgrounds, contrast elements |
Secondary Palette
| Color | Hex | RGB | Usage |
|---|---|---|---|
| Light Yellow | #FFF5CC | rgb(255, 245, 204) | Backgrounds, highlights |
| Dark Yellow | #E6B800 | rgb(230, 184, 0) | Accents, hover states |
| Light Gray | #F5F5F5 | rgb(245, 245, 245) | Secondary backgrounds |
| Medium Gray | #CCCCCC | rgb(204, 204, 204) | Borders, dividers |
Accent Colors
| Color | Hex | RGB | Usage |
|---|---|---|---|
| Teal | #008080 | rgb(0, 128, 128) | Accents, call-to-actions |
| Red | #FF3B30 | rgb(255, 59, 48) | Errors, warnings |
| Green | #34C759 | rgb(52, 199, 89) | Success states |
| Blue | #007AFF | rgb(0, 122, 255) | Links, information |
Typography
Our brand typography uses two complementary typefaces:
Inter (Primary)
Used for headlines, UI elements, and body text.
Poppins (Secondary)
Used for headlines, UI elements, and body text.
Lora (Accent for nerdy titles)
Used for specific accent text, pull quotes, and where a more distinctive character is needed.
Imagery Style
When selecting or creating images for Hardal:
-
Photography: Use bright, clean photography with natural lighting. Images should feel authentic rather than overly staged.
-
Illustrations: Use simple, modern illustrations with clean lines. Our illustration style is minimalist but friendly.
-
Icons: Use consistent icon sets with a uniform style. Icons should be simple, recognizable, and align with our overall design aesthetic.
-
Backgrounds: Prefer clean, uncluttered backgrounds that don't compete with foreground content.
Co-branding Guidelines
When displaying our logo alongside partner logos:
- Maintain equal visual weight between logos
- Ensure adequate spacing between logos
- Align logos consistently (typically centered vertically)
- Use a neutral separator when appropriate
Download Resources
For access to official logo files and brand assets, please contact the marketing team at support@usehardal.com