SmartHub247 Brand Kit& Media Kit
Download official vector logos, brand guidelines, color palettes, and certified partner badges to represent SmartHub247 seamlessly in press and affiliate campaigns.
Official Color Palette
Use these precise hex and OKLCH color codes for consistent co-branding across all web and print materials.
Primary buttons, key metrics, highlighted text & badges
Main page backgrounds, dark hero container card base
Hover & pressed states on gold CTAs, gradient anchor, & tonal accent steps adjacent to Brand Gold
Card elements, elevated containers, input backgrounds
Ambient gold glow, blurred light halos, focus rings, & soft highlight bloom behind hero & modal elements
Subheadings, borders, deactivated icons, descriptions
Secondary white & soft light fills for low-luminance text, disabled-state copy, & subtle dividers over Night Sky
Main body text, primary card headlines, high-contrast text
AI Elements Sub-Palette
Visual identity tokens mapped directly to the functional AI tiers from the pricing matrix: Core Platform AI, Co-Pilots, AI Agents, Agentic AI, and Agentic Studio.
Funnel AI, Workflow AI, Email AI, Media Storage & core platform capabilities
Ask AI, AI Studio, and guided conversational workspace co-pilots
Voice AI, Conversation AI, Reviews AI, and Content AI
Conversation AI Prompt Optimizer, Voice AI Prompt Optimizer
Agent Studio, Managed Agents, Flow Agents, and custom pipelines
Contrast Testing Preview
Each AI element color tested as text against your Night Sky surfaces.
Typography
The SmartHub247 type system pairs Raleway for display headings with Rubik for body and UI text. Both fonts are self-hosted (woff2) for performance and privacy.
Raleway
Display / HeadingsA geometric sans-serif with a friendly, modern character. Used for all headlines, hero copy, section titles, buttons, and bold display text across the SmartHub247 platform.
"Raleway", sans-serifRubik
Body / UI TextA rounded, highly legible sans-serif optimized for screens. Used for all body copy, paragraphs, captions, form labels, and interface text throughout the SmartHub247 platform.
"Rubik", sans-serifBrand Emojiicon
The ⚡ lightning bolt is the SmartHub247 emojiicon — a compact, instantly recognizable mark for digital channels, social media, and informal brand mentions.
- • Social media posts, bios & captions
- • Email subject lines & signatures
- • SMS & chat notifications
- • Informal partner mentions & tags
- • Push notifications & app badges
- • Legal documents & contracts
- • Press releases & formal media
- • Official letterheads & invoices
- • Print collateral (use vector logo instead)
- • Anywhere the full vector logo fits
Tip: The ⚡ emojiicon pairs naturally with the brand name in digital-first contexts. Always lead with the bolt — ⚡️SmartHub247 or ⚡️SH247 — so the mark reads as a visual anchor before the wordmark.
Logo Treatments
Four treatments — Color, Transparent, Black & White, and Monochrome — each available in horizontal, icon, and square layouts across SVG, PNG, and WebP. Color & Transparent share a Light / Dark toggle; BW & Monochrome share a Main / Inverse toggle.
Color
Dark
Full-color brand lockup for light and dark backgrounds.
The Color treatment carries the full SmartHub247 palette — gold bolt, Night Sky wordmark — onto light and dark substrates. Toggle between Light and Dark to preview the lockup on each surface; reach for the one that maximizes contrast against your background.
Transparent
Dark
Transparent-background logos for compositing over imagery & video.
The Transparent treatment ships the SmartHub247 lockup with a fully transparent background — drop it over photography, video, colored panels, and gradient surfaces without a visible bounding box. Ideal for overlays, lower-thirds, and layered marketing creative.
Black & White
Inverse
High-contrast pure black & white for print and single-pass reproduction.
The Black & White treatment strips the brand to its purest form — a high-contrast monochrome lockup built for newsprint, fax, single-pass screen printing, stamps, and any context where color reproduction is unreliable or unavailable.
Monochrome
Inverse
Single-ink tonal lockup for embossing, foil, and single-color reproduction.
The Monochrome treatment reduces the brand to a single ink — ideal for foil stamping, embossing, engraving, debossing, and any single-color reproduction where the full palette can't be applied. Cleaner than B&W for tonal substrates.
Downloads
Grab a complete ZIP of every format for each treatment — SVG, PNG, and WebP across horizontal, square, and icon layouts.
Partner Badges, Banners & Press
Co-branded promotional assets for affiliate campaigns and media outreach.
Copyable partner badge script & PNG emblem for affiliate websites.
High-resolution promotional banner for partner marketing & campaign pages.
Executive summary, executive bio, brand facts & product launch kit.
Press Release & Company Boilerplate
Official company summary for press releases, media features, and partner announcements.
SmartHub247 — AI That Answers, Books, and Grows 24/7.
SmartHub247 is the leading AI infrastructure layer for local services, healthcare, legal, and growth-focused businesses. By pairing autonomous Voice, Conversational, Sales, and Reputation AI agents with seamless CRM workflows, SmartHub247 helps companies eliminate missed leads and capture 24/7 revenue.
Brand Usage Guidelines
Essential rules to ensure clean, high-impact representation of our brand mark across external media.
Maintain Clear Space
Always allow at least 24px of clear padding around the SmartHub247 logo.
Use Official Gold Accent
Use #FACC15 / oklch(0.85 0.18 90) for all primary CTA highlights and badges.
Do Not Alter Logo Proportions
Never stretch, tilt, skew, or re-color the lightning icon independently of the logotype.
Do Not Place on Low Contrast
Avoid placing the gold logo on light grey or white backgrounds without dark backing.
CSS Variables & Tailwind Tokens
One-click export of the complete SmartHub247 design token system — CSS custom properties, Tailwind theme config, and structured JSON — generated live from the brand kit so every value stays in sync.
smarthub247-tokens.css/* ============================================================
* SmartHub247 — Design Token Export (CSS Custom Properties)
* Generated from the official Brand Kit. Drop into :root.
* ============================================================ */
:root {
--radius: 0.75rem; /* Base border radius */
--background: oklch(0.282 0.042 303.8); /* #252c32 Night Sky body */
--foreground: oklch(1 0 0); /* crisp white text */
--card: oklch(0.318 0.021 254.1); /* #2b333d card background */
--card-foreground: oklch(1 0 0);
--popover: oklch(0.318 0.021 254.1);
--popover-foreground: oklch(1 0 0);
--primary: oklch(0.85 0.18 90); /* #FACC15 Brand Gold */
--primary-foreground: oklch(0.18 0.02 235);
--secondary: oklch(0.3 0.02 235);
// … 54 more lines — download for the full file--radius0.75rem--backgroundoklch(0.282 0.042 303.8)--foregroundoklch(1 0 0)--cardoklch(0.318 0.021 254.1)--card-foregroundoklch(1 0 0)--popoveroklch(0.318 0.021 254.1)--popover-foregroundoklch(1 0 0)--primaryoklch(0.85 0.18 90)--primary-foregroundoklch(0.18 0.02 235)--secondaryoklch(0.3 0.02 235)--secondary-foregroundoklch(1 0 0)--mutedoklch(0.3 0.02 235)--muted-foregroundoklch(0.437 0.031 253.8)--accentoklch(0.85 0.18 90)--accent-foregroundoklch(0.18 0.02 235)--destructiveoklch(0.7 0.2 28)--destructive-foregroundoklch(1 0 0)--borderoklch(0.32 0.02 235)--inputoklch(0.32 0.02 235)--ringoklch(0.85 0.18 90)--gradient-primarylinear-gradient(135deg, #facc15, #f59e0b)--gradient-hoverlinear-gradient(135deg, oklch(0.28 0.02 235), oklch(0.318 0.021 254.1))--gradient-subtlelinear-gradient(135deg, oklch(0.85 0.18 90 / 0.15), transparent)--font-display"Raleway", sans-serif--font-body"Rubik", sans-serif--ai-coreoklch(0.85 0.18 90)--ai-copilotoklch(0.78 0.14 152)--ai-agentoklch(0.72 0.17 14)--ai-agenticoklch(0.72 0.15 292)--ai-studiooklch(0.76 0.13 218)--radius-smcalc(var(--radius) - 4px)--radius-mdcalc(var(--radius) - 2px)--radius-lgvar(--radius)--radius-xlcalc(var(--radius) + 4px)--radius-2xlcalc(var(--radius) + 8px)--radius-3xlcalc(var(--radius) + 12px)--radius-4xlcalc(var(--radius) + 16px)