HiveCRM brand guidelines
How the HiveCRM mark, colours and type go together. Everything shown here ships as ready-to-use files in the brand kit: SVG and PNG logos, favicons, social covers, colour swatches for code and design tools.
One mark, three lockups
The bee-in-a-hexagon icon sits in a gradient circle. The wordmark sets Hive in Navy and CRM in Brand Orange. Use the horizontal lockup by default, the stacked lockup in square or narrow spaces, and the icon alone only where the name is already present (favicons, app badges, avatars).
hivecrm-logo-full
hivecrm-logo-full-white
hivecrm-logo-stacked
hivecrm-logo-stacked-white
hivecrm-icon
hivecrm-wordmarkOne-colour versions
For print in one ink, engraving, embossing, watermarks, or anywhere the gradient can't be reproduced. The glyph is knocked out of the circle so every file is a true single colour.
…-mono-black
…-mono-navy
…-mono-white
hivecrm-glyph-whiteGive it room
Keep a clear zone of ½ the icon's diameter (the radius, marked x) on every side of any lockup. Nothing else – text, other logos, page edges – enters that zone.
| Lockup | Minimum on screen | Minimum in print | Use when |
|---|---|---|---|
| Horizontal | 120 px wide | 30 mm wide | Default everywhere: website header, documents, slides, email |
| Stacked | 80 px wide | 20 mm wide | Square or portrait spaces, badges, app stores |
| Icon | 16 px | 6 mm | Favicon, avatars, WordPress admin menu, anywhere the name is already visible |
Do & don't
Pick the variant for your background: colour on white or light grey, white lockup on Navy, Ink or photos.
The gradient icon disappears on orange; the white glyph (no circle) is made for that case.
Capital H, capital CRM. The company is Hive Plugins (two words).
Scale proportionally only. Never trim the circle or the antennae.
No other hues, no gradients other than the brand gradient, no "Hive" in orange or "CRM" in navy.
No drop shadows, outlines, glows, bevels or outer containers. The circle is the container.
Don't retype the wordmark in a font, change the icon-to-text spacing, or place the icon on the right.
Use the white lockup over a dark overlay, or put the colour logo on a white panel.
Orange leads, navy grounds it
Brand Orange is for action: buttons, links, the key word in a headline. Navy and Ink carry text and dark surfaces. Neutrals do the quiet work. Semantic colours are reserved for status and never used decoratively. Click any hex to copy it.
Brand
Dark & neutral
Semantic
In code
The kit includes colors/colors.css (CSS custom properties), tailwind.colors.js, palette.json, hivecrm.ase (Illustrator, Photoshop, InDesign) and hivecrm.gpl (GIMP, Inkscape).
:root {
--hcrm-brand: #FF4800; --hcrm-brand-light: #FF8211; --hcrm-brand-deep: #FF321F;
--hcrm-navy: #092532; --hcrm-ink: #0C1620; --hcrm-surface-50: #F7F9FB;
--hcrm-gradient: linear-gradient(135deg, #FF8211 0%, #FF321F 100%);
}
Plus Jakarta Sans for headlines, Inter for everything else
Both are free on Google Fonts and ship with the plugin UI and the promo video, so marketing and product look like one thing. Headlines are heavy and tight; body copy is regular weight with generous line height.
| Role | Face | Weight | Size (web) | Tracking |
|---|---|---|---|---|
| Display | Plus Jakarta Sans | 800 | 56–96 px | −0.03em |
| H1 / H2 | Plus Jakarta Sans | 800 / 700 | 40 / 32 px | −0.02em |
| H3 | Plus Jakarta Sans | 700 | 22 px | −0.01em |
| Body | Inter | 400 / 500 | 16–18 px | 0 |
| UI & buttons | Inter | 600 / 700 | 14–16 px | 0 |
| Labels / eyebrows | Inter | 600–800 | 12 px, uppercase | +0.08 to +0.12em |
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap">
Email and documents where web fonts can't load: fall back to Segoe UI / Helvetica / Arial.
Plain, confident, on the customer's side
Short sentences. Say what the product does, not what it "empowers". Lead with the outcome (no missed follow-ups, paid faster) and name the mechanism second (automations, invoices). Never hype AI; show it doing something useful.
Lifetime updates · Client portal included · 14-day money-back guarantee · Your data in your own database
HiveCRM (product) · Hive Plugins (company) · hiveplugins.com/hivecrm (URL) · "the client portal", "the workflow builder", "the MCP server" (features, lowercase)
What's in the kit
| Folder | Contents | Use for |
|---|---|---|
logos/svg/ | 22 vector files: icon, glyph, horizontal, stacked and wordmark lockups in colour, white and mono black/navy/white | Print, design tools, websites (preferred format) |
logos/png/ | Transparent PNGs: icon 16–1024 px, horizontal 600/1200/2400 px, stacked and wordmark at 1200 px | Documents, slides, marketplaces, anywhere SVG isn't accepted |
favicon/ | favicon.ico (16/32/48), PNGs, apple-touch-icon, Android icons, maskable icon, site.webmanifest, head-snippet.html | hiveplugins.com and any HiveCRM web property |
social/ | Profile pictures (white, dark, orange), covers for Facebook, X, LinkedIn (personal and company), YouTube banner (safe-area aware), Open Graph image, email header | Social accounts, link previews, newsletters |
colors/ | palette.png, palette.json, colors.css, tailwind.colors.js, hivecrm.ase, hivecrm.gpl | Developers and designers |
typography/ | Font links and the type scale | Anyone setting text in the brand |