Everything you need to represent Hipnode.
Logos, colors, typography, and social assets—all in one place.
Download the Hipnode wordmark in various formats. Use the primary logo on light backgrounds and the inverse logo on dark backgrounds.
Our brand colors. Click any color to copy the hex value. Use these exact values across all brand materials.
Our brand uses two typefaces: Bricolage Grotesque for headlines and DM Sans for body text. Both are freely available from Google Fonts.
<!-- Add to <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
Ready-to-use assets optimized for LinkedIn and other social platforms. Download in the correct dimensions for each use case.
Copy these CSS custom properties into your stylesheet for consistent design implementation.
/* Colors */
--brand-black: #0A0A0B;
--bg-primary: #FFFFFF;
--bg-secondary: #FAFAFA;
--bg-tertiary: #F4F4F5;
--text-primary: #0A0A0B;
--text-secondary: #52525B;
--text-tertiary: #A1A1AA;
--text-inverse: #FFFFFF;
--border-primary: #E4E4E7;
--accent-indigo: #4F46E5;
/* Typography */
--font-display: 'Bricolage Grotesque', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 2rem; /* 32px */
--font-size-5xl: 3rem; /* 48px */
--font-size-7xl: 4.5rem; /* 72px */
Consistent spacing creates visual rhythm. Use these values for padding, margins, and gaps throughout all implementations.
SPACING TOKENS
BORDER RADIUS
PAGE LAYOUT