Hub Visual Identity Guide

A condensed brand guide for creating Hub web artifacts, presentations, and digital assets. This guide focuses on look and feel: colors, typography, layout principles, and visual treatments that embody the Hub’s identity.

Brand Essence

Peregian Digital Hub is:

• World-class yet approachable
• Tech-forward but human-centered
• Ambitious with warmth
• Locally rooted, globally connected

Visual translation: Bold typography contrasts with organic elements. Navy depths meet beach-sunrise colors. Clean layouts with surprising moments.

Color System

Core Palette

Color Application Principles

Standard Pairings:

• Navy background � Sand or White text
• White background � Navy or Black text
• Turquoise section � White elements only

Creative Combinations:

• Navy-to-Black gradients with Gold highlights
• Electric Blue glows on Navy (tech noir)
• Sand-to-White gradient text on dark
• Mesh gradients using multiple brand colors at low opacity

Critical Contrast Rules (Non-Negotiable):

 ALWAYS USE:

• Navy/Black backgrounds: Sand or White text
• White/Sand backgrounds: Navy or Black text
• Turquoise backgrounds: White text only
• Use inline styles for critical colors: style="background-color: #000E2B; color: #F4E2D4;"

L NEVER USE:

• Navy text on Navy background
• White text on White/Sand background
• Sand text on White background
• Low opacity white text on dark backgrounds (use full opacity or Sand)
• Tailwind classes without verifying theme support

Gradient Recipes

/* Beach Sunset */
background: linear-gradient(135deg, #FDB664 0%, #F4E2D4 50%, #5BC0EB 100%);

/* Tech Depth */
background: linear-gradient(180deg, #000E2B 0%, #000E2B80 50%, transparent 100%);

/* Ocean Fade */
background: linear-gradient(90deg, #66BDE6 0%, #5BC0EB 50%, #000E2B 100%);

/* Mesh Gradient (Organic) */
background:
  radial-gradient(ellipse at 20% 80%, rgba(91, 192, 235, 0.4) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 20%, rgba(253, 182, 100, 0.35) 0%, transparent 50%),
  radial-gradient(ellipse at 60% 60%, rgba(102, 189, 230, 0.3) 0%, transparent 45%),
  #000E2B;

Typography System

Fonts

• Primary: Geist (all weights: 100-900)
• Logo Only: Plotter Liner Std (never in body text)
• Accent: Caveat 16px (annotations only, sparingly)

Weight Philosophy

Don’t: Predictable hierarchy (Bold � Medium � Regular)

Do: Dynamic contrast using weight extremes

• Hero: Black 900 at 72px+
• Tagline: Thin 100 at 24px
• Body: Regular 400 at 18-21px
• Labels: Bold 700 at 12px uppercase with tracking

Typography Scale

Typography Techniques

Scale Dramatically:

<h1 class="text-[120px] leading-[0.8] font-black">BIG</h1>
<p class="text-xs tracking-[0.4em] uppercase">small contrast</p>

Letter Spacing as Design:

• Labels: tracking-[0.4em] (spacious)
• Dense headlines: tracking-tighter (tight)

Line Height for Impact:

• Headlines: leading-none or leading-tight
• Body: leading-relaxed
• Quotes: leading-loose

Logo Usage

Available Logos

• Dark Backgrounds: /img/hub_logo_white.png
• Light Backgrounds: /img/hub_logo_dark.png

Logo Applications

Strategic Placement:

• Floating with clear space = x-height
• Corner positions (top-left, bottom-right)
• Can scale dramatically (hero watermark at 10% opacity, or tiny nav marker)

Creative Treatments:

• Watermark at 10% opacity behind hero text
• Animated reveal on load
• Color-shifting on scroll
• Pattern made from repeated icons

Never:

• Crowd with other elements
• Stretch or distort
• Use multiple competing instances
• Place in low contrast positions

Layout & Spacing

Container Patterns

<!-- Standard Section -->
<section class="py-12 md:py-24 px-4" style="background-color: #000E2B;">
  <div class="max-w-6xl mx-auto">
    <!-- Content -->
  </div>
</section>

<!-- Centered Prose -->
<div class="max-w-3xl mx-auto px-4">
  <!-- Text content -->
</div>

<!-- Full Bleed -->
<section class="w-full min-h-screen">
  <!-- Hero or showcase -->
</section>

Grid Systems

<!-- Responsive Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  <!-- Cards or items -->
</div>

<!-- Two Column Split -->
<div class="grid md:grid-cols-2 gap-12 items-center">
  <div><!-- Content --></div>
  <div><!-- Content --></div>
</div>

Spacing Rhythm

• Section vertical: py-12 md:py-24
• Grid gaps: gap-8 or gap-12
• Card padding: p-6 or p-8
• Content margins: space-y-4 or space-y-6

Visual Treatments

Cards & Containers

<!-- Elevated Card -->
<div class="bg-white rounded-lg p-8 shadow-lg hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
  <!-- Card content -->
</div>

<!-- Glass Effect -->
<div class="bg-white/10 backdrop-blur-md rounded-lg p-6 border border-white/20">
  <!-- Content -->
</div>

<!-- Gradient Border -->
<div class="p-[2px] rounded-lg bg-gradient-to-r from-[#5BC0EB] to-[#FDB664]">
  <div class="bg-[#000E2B] rounded-lg p-6" style="color: #F4E2D4;">
    <!-- Content -->
  </div>
</div>

Shadows & Glows

/* Soft Glow (Electric Blue) */
box-shadow: 0 0 40px rgba(91, 192, 235, 0.3);

/* Soft Glow (Gold) */
box-shadow: 0 0 40px rgba(253, 182, 100, 0.3);

/* Layered Depth */
box-shadow:
  0 2px 4px rgba(0,0,0,0.1),
  0 8px 16px rgba(0,14,43,0.2),
  0 16px 32px rgba(0,14,43,0.3);

/* Hard Edge Accent */
box-shadow: 8px 8px 0 #5BC0EB;

Background Treatments

Textured Navy:

background: #000E2B;
position: relative;

/* Add via ::before pseudo-element */
&::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml,...'); /* noise pattern */
  opacity: 0.05;
  mix-blend-mode: overlay;
}

Vignette Effect:

<div class="relative" style="background-color: #000E2B;">
  <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60"></div>
  <div class="relative z-10">
    <!-- Content -->
  </div>
</div>

Motion & Interaction

Micro-Interactions

<!-- Hover Lift -->
<div class="transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">

<!-- Scale on Hover -->
<div class="transition-transform duration-300 hover:scale-105">

<!-- Color Shift -->
<button class="transition-colors duration-300 hover:bg-[#5BC0EB]">

<!-- Smooth All -->
<div class="transition-all duration-300 ease-in-out">

Timing Guidelines

• Instant feedback: 100-200ms
• Micro-interactions: 200-300ms
• Element reveals: 400-600ms
• Hero animations: 800-1500ms

Animation Principles

Always:

• Use ease-in-out or ease-out for natural feel
• Respect prefers-reduced-motion
• Keep performance in mind (prefer transform over position)

Avoid:

• Everything animating at once
• Overly fast or slow transitions
• Competing animations

Programmatic Backgrounds

When photography isn’t needed, use code-generated backgrounds for visual depth.

Layering Strategy

Always combine multiple layers:

1. Background: Static or slow gradient
2. Mid-layer: Subtle pattern or texture
3. Foreground: Particles or accents (more active)
4. Focus: Vignette or fade

Building Blocks

Floating Particles:

.particle {
  position: absolute;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background: #5BC0EB;
  box-shadow: 0 0 8px #5BC0EB;
  animation: float 20s linear infinite;
}

@keyframes float {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

Glowing Orbs:

.orb {
  position: absolute;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #FDB664 0%, rgba(253, 182, 100, 0.4) 40%, transparent 70%);
  filter: blur(60px);
  animation: glow 4s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

Grid Overlay:

.grid-overlay {
  background-image:
    linear-gradient(rgba(91, 192, 235, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 192, 235, 0.1) 1px, transparent 1px);
  background-size: 60px 60px;
}

Motion Hierarchy for Backgrounds

• Slowest: Gradients (15-30s cycles)
• Medium: Patterns, shapes (8-15s)
• Fastest: Particles, accents (2-8s)

Tone of Voice

When writing copy for Hub artifacts:

Voice characteristics:

• Inspiring and aspirational
• Community-oriented and inclusive
• Direct, clear, and friendly
• Supportive and educational
• Locally proud with global perspective

Language patterns:

• Use active verbs (Build, Connect, Learn, Meet)
• Keep sentences short and declarative
• Balance aspiration with approachability
• Highlight benefits and purpose
• Avoid jargon and hype

Example phrases:

• “Build, connect, and learn with world-class technologists”
• “A powerhouse of talent in world-class facilities”
• “Collaborate with the best and brightest minds”
• “Find your digital network”

Quick Reference Checklist

Before finalizing any Hub artifact, verify:

Visual Requirements

• Uses only Hub brand colors (#000E2B, #F4E2D4, #5BC0EB, #FDB664, #66BDE6)
• All contrast rules followed (dark bg � light text, light bg � dark text)
• Typography has dynamic weight contrast (not all medium)
• Logo used appropriately (correct version for background)
• Inline styles used for critical colors
• Spacing rhythm is consistent

Brand Alignment

• Feels world-class yet approachable
• Has at least one surprising or distinctive element
• Motion serves purpose, not decoration
• Tone is inspiring but not hypey
• Locally rooted, globally connected feeling

Technical

• Responsive breakpoints considered (mobile, tablet, desktop)
• Hover states work and are readable
• Animations respect prefers-reduced-motion
• Performance is acceptable (no layout shifts)

Common Tailwind Patterns

Text on Dark Navy Background

<section class="py-24" style="background-color: #000E2B;">
  <div class="max-w-6xl mx-auto px-4">
    <h1 class="text-5xl md:text-7xl font-black leading-tight" style="color: #F4E2D4;">
      Heading
    </h1>
    <p class="text-xl leading-relaxed mt-6" style="color: #F4E2D4;">
      Body text
    </p>
  </div>
</section>

Text on White Background

<section class="py-24 bg-white">
  <div class="max-w-6xl mx-auto px-4">
    <h2 class="text-4xl md:text-5xl font-bold" style="color: #000E2B;">
      Heading
    </h2>
    <p class="text-lg leading-relaxed mt-4" style="color: #000E2B;">
      Body text
    </p>
  </div>
</section>

Cards Grid

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <div class="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
    <h3 class="text-2xl font-bold mb-3" style="color: #000E2B;">Title</h3>
    <p class="text-base leading-relaxed" style="color: #000E2B;">Description</p>
  </div>
</div>

Button Styles

<!-- Primary CTA -->
<button class="px-8 py-3 rounded-full font-bold text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
        style="background-color: #5BC0EB;">
  Click Here
</button>

<!-- Secondary Outline -->
<button class="px-8 py-3 rounded-full font-bold border-2 transition-all duration-300 hover:shadow-lg"
        style="color: #F4E2D4; border-color: #F4E2D4;">
  Learn More
</button>

Red Flags to Avoid

L Visual mistakes:

• White text on white backgrounds
• Navy text on navy backgrounds
• Low contrast pairings
• Stretching or distorting the logo
• Using emoji as icons (use SVG instead)
• Every heading the same weight
• Flat white backgrounds throughout
• Timid color application

L Brand mistakes:

• Generic tech feel (could be any company)
• Ignoring local/coastal identity
• Too corporate or too casual
• Playing it safe with no distinctive elements
• Missing the warmth in the world-class positioning

L Technical mistakes:

• Using Tailwind classes without testing theme
• Forgetting responsive breakpoints
• Animations that ignore prefers-reduced-motion
• Not testing hover states for readability

This guide provides the foundation for Hub-branded artifacts. Use these elements to create something unmistakably Hub, but unexpectedly fresh. The best work combines these principles with creative invention.