Brand Guidelines 2025

The Hub Design System

A sophisticated evolution from simple brand guidelines to a premium design system featuring glassmorphism, gradients, and interactive excellence.

Explore the System →
Icons

Transparent PNG Icon Standard

When SVG is not feasible, use transparent-background PNG icons that preserve style, dimensions, and simplicity.

Specifications
  • Format: PNG (24-bit + alpha). Background must be fully transparent (alpha = 0).
  • Style: Match brand icon simplicity and geometry. No emojis.
  • Dimensions: Preserve original natural size; common UI render sizes: 24px, 40px, 64px, 80px.
  • Aspect Ratio: Preserve original icon aspect ratio.
  • Naming: snake_case (e.g., vision.png, connected-systems.png).
  • Location: /assets/images/icons/
States & Accessibility
  • Hover: Subtle lift or tint using CSS (no background fill on icon image).
  • Active: Slight scale or outline; avoid adding opaque backgrounds.
  • Disabled: grayscale + opacity ≤ 0.5 for visual clarity.
  • Alt Text: Meaningful alt describing the icon’s concept (e.g., “Vision”).
Implementation
<img src="/assets/images/icons/vision.png" alt="Vision" class="icon-img" width="64" height="64">

.icon-img { display: inline-block; width: 64px; height: 64px; }
.icon-img:hover { transform: translateY(-1px); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.08)); }
.icon-img.active { transform: scale(0.98); outline: 2px solid rgba(255,127,80,0.5); border-radius: 8px; }
.icon-img.disabled { filter: grayscale(100%) opacity(0.45); }

QA: Open /tests/icon-visual-regression.html to verify corner alpha transparency, natural dimensions, and state rendering.

Evolution

From Simple to Sophisticated

Your brand has naturally matured from basic coral/teal guidelines into a rich, premium design system that maintains consistency while expressing elevated sophistication.

Enhanced Color System

Expanded from flat colors to rich gradients, glass effects, and sophisticated lighting treatments.

Glassmorphism Integration

Premium visual treatment with backdrop blur, transparency, and layered depth effects.

Backdrop Blur Active ✨
Interactive Excellence

Sophisticated hover states, animations, and user flow enhancements.

Typography Evolution

Enhanced hierarchy with gradient text effects and refined eyebrow treatments.

Before: Simple Text
After: Strategic Excellence
Color System

Core Palette

The Hub color roles: Coral for strategy, Teal for creative, Gradient for collaboration.

Coral

#F96F6E

Strategy, leadership, primary actions.

Teal

#2ED3C6

Creative execution, innovation, delivery.

Gradient

Use sparingly for collaboration moments.

Typography

Type Stack

Hero
Strategic Partnerships

Playfair Display for hero and headings. One accent word only.

H1
Guidelines Overview
Body

Inter for body and UI. 65ch line length for readability. Use space as primary hierarchy.

Components

UI Library

Buttons, cards, badges, and animation utilities.

Buttons
Primary Action Secondary Action Ghost Action
Cards
Glass Card
Premium look with glass, border, and subtle lift on hover.
Badges
Coral Teal Gradient Glass
Icon System

Visual Language

Custom SVG icons in brand colors only. Clean geometry, consistent strokes, zero emojis.

Icon Philosophy

Clean geometric SVG designs aligned with our sophisticated visual language. Emojis introduce unwanted colors and inconsistent styling.

Technical Specs
Format: SVG only
Colors: #F96F6E, #2ED3C6
Stroke: 2px, rounded caps
ViewBox: 0 0 24 24
Sizes: 48px / 64px / 80px
Color Logic
Coral: Strategy
Teal: Creative
Gradient: Partnership
Core Icons
Star Burst
Glass Layers
Implementation Example
<!-- Coral Strategy Icon -->
<svg width="64" height="64" viewBox="0 0 24 24" 
     fill="none" stroke="#F96F6E" stroke-width="2" 
     stroke-linecap="round">
    <circle cx="12" cy="12" r="10"/>
    <path d="M12 6v6l4 2"/>
</svg>

.icon {
    width: 64px;
    height: 64px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon:hover {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 12px rgba(249, 111, 110, 0.4));
}

Critical Rule: No Emojis

Emojis introduce inconsistent colors, platform-dependent rendering, and break brand cohesion. Always use custom SVG icons in our brand colors following these guidelines.

Implementation

CSS Tokens

:root {
  --coral: #F96F6E; /* Strategy */
  --teal: #2ED3C6;  /* Creative */
  --ink: #FFFFFF;   /* Body */
  --ink-dim: rgba(255,255,255,.85); /* Subtext */
}

.text-coral { color: var(--coral); }
.text-teal { color: var(--teal); }
.text-gradient {
  background: linear-gradient(90deg, var(--coral), var(--teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Back to The Hub