Color Scheme Reference
Complete color palette for the Alpine Peak Roofing website. Click any color to copy its hex value.
Brand Colors
Five core brand colors defining the Alpine Peak identity
Brand Navy
Very dark blue for deep backgrounds and strong contrast
Brand Primary
Primary brand blue for main elements and active states
Brand Blue
Medium brand blue for secondary elements and variations
Brand Sky
Sky blue for highlights and secondary CTAs
Brand Gold
Golden yellow accent for special highlights and XP
Interactive Colors
Colors for buttons, links, and interactive components with proper state variations
Interactive Default
Default state for buttons, links, and interactive elements
Interactive Hover
Hover state for interactive elements
Interactive Active
Active/pressed state for interactive elements
Text Colors
Typography color hierarchy for optimal readability
Text Primary
Headers, titles, and primary text on dark backgrounds
Text Off-White
Premium off-white text for enhanced readability on navy backgrounds
Text Body
Main body text on dark backgrounds
Text Secondary
Secondary text, labels, and captions
Text Muted
Muted text, descriptions, and less important content
Status Colors
Green color system for success states and positive feedback
Success Light
Light success state and hover effects
Success Default
Default success color for confirmations and BLOX tokens
Success Dark
Active success state and pressed buttons
Accent Colors
Specialized colors for metrics, rewards, and special elements
Accent Gold (XP & Rewards)
Accent Gold Light
Light gold for hover states on XP elements
Accent Gold Default
Default gold for XP displays and achievements
Accent Gold Dark
Dark gold for active states and pressed elements
Accent Orange (Streaks & Energy)
Accent Orange Light
Light orange for hover states on streak elements
Accent Orange Default
Default orange for day streaks and energy displays
Accent Orange Dark
Dark orange for active states and emphasis
Gradients
Background gradients for headers, hero sections, and CTAs
Brand Header Gradient
Horizontal header gradient - brand blue to brand navy
Brand Navy to Sky Gradient
Brand gradient from Brand Navy to Brand Sky
Brand Vertical Gradient
Vertical gradient from Brand Blue to Brand Navy
Brand Vertical Invert Gradient
Inverted vertical gradient - darker navy to brighter blue
Brand Header Invert Gradient
Horizontal header gradient - brand navy to brand blue
AI Tools Gradient
Specialized gradient for AI tools and tech-focused sections
Usage Guidelines
Design Hierarchy
- • Brand Navy (#003399): Primary background color
- • Brand Blue (#0066CC): Cards and elements on navy background
- • Brand Sky (#33CCFF): Accents within cards and elements
- • Brand Gold (#FFCC00): Highlights and jump-out effects
- • Text Off-White (#C7E1FC): Premium text on navy backgrounds
Interactive States
- • Default: Normal button and link state
- • Hover: Mouse hover interactions
- • Active: Clicked/pressed state
- • Always maintain consistent state progression
Text Hierarchy
- • Primary: Main headings and titles
- • Body: Regular paragraph text
- • Secondary: Labels and captions
- • Muted: Less important content
Status & Feedback
- • Success: Confirmations and achievements
- • Use consistent success colors for positive feedback
- • Apply state variations for interactive success elements
Accent Usage
- • Gold: XP, achievements, premium features
- • Orange: Streaks, energy, urgency
- • Use sparingly to maintain visual hierarchy
Gradients
- • Header: Standard page headers
- • Hero Dark: Landing page heroes
- • CTA: Important action buttons
- • Background Dark: Content containers