HeavenDash

See the Light

Brand Guidelines • August 2025

Color System

A dark-first palette optimized for data visualization and extended viewing sessions.

Primary Palette

Aa
Heaven Gold
#FFD700
Aa
Gold Dark
#FFC107
Aa
Gold Darker
#FFB300

Deep Space Backgrounds

Aa
BG Primary
#0A0A0B
Aa
BG Secondary
#0F0F11
Aa
BG Tertiary
#141416
Aa
BG Elevated
#1A1A1D

Status Colors

Aa
Success
#10B981
Aa
Danger
#EF4444
Aa
Warning
#F59E0B
Aa
Info
#3B82F6

Text Colors

Primary Text
Text Primary
#FFFFFF (100%)
Secondary Text
Text Secondary
rgba(255,255,255,0.7)
Tertiary Text
Text Tertiary
rgba(255,255,255,0.5)
Muted Text
Text Muted
rgba(255,255,255,0.3)

Typography

A dual-font system optimized for clarity and data presentation.

Primary Font
Inter - For Everything
Weights: 400 Regular, 500 Medium, 600 Semibold, 700 Bold, 800 Black

We use Inter throughout for consistency and clarity. The font's wide weight range (400-800) provides sufficient variation for headlines, body text, and UI elements without needing a separate display font. This creates a cohesive, professional feel perfect for a data dashboard.

Monospace Font
JetBrains Mono - For Data & Code
Weights: 400 Regular, 500 Medium, 600 Semibold, 700 Bold

Reserved exclusively for numerical data, addresses, code snippets, and any content requiring precise alignment. The monospace nature ensures numbers align perfectly in tables and makes large figures easier to scan.

Type Scale

Display
Revenue Intelligence Platform
56px / 800 / 110% line-height
Headline 1
See the Light in Your Data
36px / 700 / 120% line-height
Headline 2
Track Every Flywheel Activation
24px / 600 / 130% line-height
Body Large
HeavenDash provides real-time analytics for Heaven's revenue-oriented token ecosystem. Monitor flywheel performance, track fee distributions, and analyze ideas.
18px / 500 / 160% line-height
Body Regular
Track creator fees, protocol fees, and community distributions in real-time. Every metric updated as transactions happen on-chain.
14px / 400 / 160% line-height
Data Display
$12,485,294.67 MC
JetBrains Mono / 20px / 600 / Tabular nums
Caption
Last updated 5 seconds ago · 127 active flywheels
12px / 500 / 150% line-height

Component Library

Glass morphism components with golden accents for premium data visualization.

Glass Cards

Standard Glass Card

Base glass effect with subtle backdrop blur and glass edges. Perfect for data cards and content sections.

Golden Glass Card

Premium variant for important metrics, CTAs, and flywheel activations. The golden tint draws attention.

Buttons

Pool Card Component

LIGHT
Heaven Token
92
Price $0.142
Market Cap $8.4M
24h Change +12.4%
Flywheel Active

Data Display

Pool Heaven Score Revenue 24h Status
LIGHT
92 $1,240 ● Active

Social Media Templates

Ready-to-use templates for consistent brand presence across social platforms.

Announcement Banner (1200x630)

Data Highlight (1200x630)

Quote Template (1080x1080)

List Template (1200x630)

Chart Template (1200x630)

Grid Template (1200x630)

Social Media Guidelines

  • • Always include the HeavenDash logo or wordmark
  • • Use the official color palette - golden accents on dark backgrounds
  • • Maintain consistent typography - Inter for headings, JetBrains Mono for data
  • • Include "See the Light" tagline when space permits
  • • Add website URL (heavendash.xyz) for call-to-action
  • • Ensure text has sufficient contrast for readability
  • • Use glass morphism effects sparingly to maintain clarity
  • • Keep important content within safe zones for different platforms

Illustration System

Supporting graphics and visualization patterns.

Flywheel Growth

Revenue Growth

Network Effect

Applications

Real-world usage examples across different platforms.

Web Application

HeavenDash See the Light

Navigation bar implementation with logo and tagline

Social Media

Twitter/X Profile

Open Graph

HeavenDash
See the Light - Revenue Intelligence for Heaven

Implementation Code

Copy-paste ready code for development.

// Glass Card Component (Tailwind CSS)
.glass-card {
  @apply relative overflow-hidden rounded-xl border border-white/10;
  background: rgba(20, 20, 22, 0.4);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 
             inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

// Liquid Glass Gold Component
.liquid-glass-gold {
  @apply relative overflow-hidden rounded-2xl;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.05) 0%, 
    rgba(255, 215, 0, 0.02) 100%);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 
              inset 0 1px 0 rgba(255, 215, 0, 0.06),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.liquid-glass-gold:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 
              0 0 40px rgba(255, 215, 0, 0.1),
              inset 0 1px 0 rgba(255, 215, 0, 0.1);
}
// Vision Portal Logo Component (React/Next.js)
export const VisionPortalLogo = ({ size = 40, className = "" }) => {
  const scale = size / 40;
  return (
    <svg 
      width={size} 
      height={size} 
      viewBox="0 0 40 40" 
      className={className}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id="visionGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FFD700" stopOpacity="0.3" />
          <stop offset="50%" stopColor="#FFD700" stopOpacity="1" />
          <stop offset="100%" stopColor="#FFC107" stopOpacity="0.3" />
        </linearGradient>
      </defs>
      
      <circle cx="20" cy="20" r="12" fill="none" stroke="url(#visionGrad)" 
              strokeWidth="0.8" opacity="0.3"/>
      <circle cx="20" cy="20" r="9.5" fill="none" stroke="url(#visionGrad)" 
              strokeWidth="1" opacity="0.5"/>
      <circle cx="20" cy="20" r="7" fill="none" stroke="url(#visionGrad)" 
              strokeWidth="1.2" opacity="0.7"/>
      <circle cx="20" cy="20" r="4.5" fill="none" stroke="url(#visionGrad)" 
              strokeWidth="1.5" opacity="0.9"/>
      <circle cx="20" cy="20" r="2.5" fill="#FFD700"/>
      
      <path d="M 8 20 Q 14 18, 20 20 Q 26 22, 32 20" 
            fill="none" stroke="url(#visionGrad)" 
            strokeWidth="1.2" opacity="0.6"/>
    </svg>
  );
};
/* Tailwind Config Extensions */
module.exports = {
  theme: {
    extend: {
      colors: {
        "heaven-gold": "#FFD700",
        "heaven-gold-dark": "#FFC107",
        "heaven-gold-darker": "#FFB300",
        "bg-primary": "#0A0A0B",
        "bg-secondary": "#0F0F11",
        "bg-tertiary": "#141416",
        "bg-elevated": "#1A1A1D",
        "text-primary": "#FFFFFF",
        "text-secondary": "rgba(255, 255, 255, 0.7)",
        "text-muted": "rgba(255, 255, 255, 0.5)",
      },
      backgroundImage: {
        "heaven-gradient": "linear-gradient(135deg, #FFD700 0%, #FFC107 50%, #FFB300 100%)",
      },
      animation: {
        "pulse-golden": "pulse-golden 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
        "float": "float 6s ease-in-out infinite",
      },
    },
  },
};

HeavenDash Brand Guidelines
Last updated: August 2025
See the Light