LITHA Communications

Brand StyleGuide

The complete visual identity reference for LITHA Communications. Colors, typography, banner guidelines, and implementation code — all in one place.

Explore the guide

01 — Color Palette

Our Colors

Three core colors define the LITHA brand. Tangerine conveys energy and optimism. Purple signals strategic depth. White ensures clarity and professionalism.

Tangerine Orange

Primary background, CTAs, brand identity

#F97316
OKLCH: oklch(0.65 0.18 35)

Royal Purple

Accent bars, emphasis, strategic highlights

#6B21A8
OKLCH: oklch(0.45 0.12 285)

Pure White

Text on color, backgrounds, clarity

#FFFFFF
OKLCH: oklch(1 0 0)

Extended Palette

Deep Purple

#2c0977

Orange Dark

#EA580C

Orange Light

#FDBA74

Navy

#0F172A

Warm Gray

#FFF7ED

02 — Typography

Type System

Display Font

Montserrat

Used for headlines, section titles, and bold statements.

AMPLIFYING IMPACTBlack (900)
Clean Energy LeadersExtraBold (800)
Strategic CommunicationsBold (700)
Results-Driven ApproachSemiBold (600)

Body Font

Work Sans

Used for body copy, descriptions, and supporting text.

Renewable Energy MarketingSemiBold (600)
Integrated campaigns that deliver measurable impactMedium (500)
Our approach combines strategic PR, stakeholder engagement, and digital marketing to amplify your brand's presence in the clean energy sector.Regular (400)
Inspired. Freethinking. Results-driven.Light (300)

Recommended Type Scale

ElementFontWeightSizeLine Height
Hero HeadlineMontserrat90064–80px1.0
Section TitleMontserrat80040–48px1.1
SubsectionMontserrat70024–32px1.2
Body LargeWork Sans40018px1.6
BodyWork Sans40016px1.7
CaptionWork Sans50014px1.5
CodeFira Code40014px1.6

04 — Responsive Design

Every Screen

Guidelines for adapting the banner across desktop, tablet, and mobile breakpoints.

Desktop

1920px+
Desktop preview
  • Full banner at 1920 × 600px
  • Headline clearly visible
  • CTA button prominent
  • Full imagery on right side

Tablet

768px – 1919px
Tablet preview
  • Scale proportionally
  • Maintain aspect ratio
  • Consider 1400 × 437px
  • Reduce image complexity

Mobile

< 768px
Mobile preview
  • Centered text layout
  • Reduced height (400–500px)
  • Larger CTA for touch
  • Portrait orientation crop

05 — Usage Guidelines

Do's & Don'ts

Correct usage example
✓

Do's

  • ✓Use as the primary hero banner on homepage
  • ✓Maintain tangerine, white, and purple color scheme
  • ✓Ensure text remains readable on all devices
  • ✓Link CTA button to contact form or services page
  • ✓Use high-quality version for retina displays
  • ✓Optimize file size for web (compress to 200–400KB)
Incorrect usage example
✗

Don'ts

  • ✗Don't crop the logo or key messaging
  • ✗Don't overlay additional text that reduces readability
  • ✗Don't change the color scheme
  • ✗Don't use low-resolution versions that appear pixelated
  • ✗Don't place competing CTAs in the banner area
  • ✗Don't use on dark backgrounds without proper contrast

06 — Implementation

Code Snippets

Ready-to-use HTML and CSS for implementing the banner on your website.

HTML Structure

html
<section class="hero-banner">
  <div class="hero-content">
    <img src="images/litha-logo-white.png"
         alt="LITHA Communications"
         class="hero-logo">
    <h1>
      AMPLIFYING IMPACT IN<br>
      <span class="accent">RENEWABLE ENERGY</span>
    </h1>
    <p class="subheading">
      Strategic PR & Communications
      for Clean Energy Leaders
    </p>
    <a href="#contact" class="cta-button">
      Get Started
    </a>
    <p class="tagline">
      Inspired. Freethinking. Results-driven.
    </p>
  </div>
</section>

CSS Styles

css
.hero-banner {
  background: url('litha_website_banner.png')
    center center / cover no-repeat;
  min-height: 600px;
  position: relative;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
}

.accent {
  background: #6B21A8;
  padding: 4px 12px;
  display: inline-block;
}

.cta-button {
  background: white;
  color: #F97316;
  padding: 15px 40px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s ease;
}

.cta-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

File Optimization

bash
# Resize for standard web use
convert litha_website_banner.png \
  -resize 1920x600 \
  litha_website_banner_web.png

# Compress for faster loading
pngquant --quality=80-90 \
  litha_website_banner_web.png

07 — Brand Consistency

One Brand,
Every Touchpoint

Social Media

  • Instagram graphics
  • LinkedIn posts
  • Twitter/X content
  • Facebook updates

Presentations

  • Slide decks
  • Speaker notes
  • Client proposals
  • Case studies

Marketing

  • Email campaigns
  • Website banners
  • Infographics
  • Video thumbnails

Collateral

  • Business cards
  • Letterheads
  • Email signatures
  • Print materials

Key Brand Elements

Tagline

"Inspired. Freethinking. Results-driven."

08 — Accessibility

Inclusive Design

Ensuring our brand is accessible to everyone, meeting WCAG AA standards.

Alt Text

alt="LITHA Communications — Amplifying Impact in Renewable Energy — Strategic PR for Clean Energy Leaders"

Always include descriptive alt text for all banner images.

Color Contrast

Aa

White on Tangerine

WCAG AA Pass ✓

Aa

White on Purple

WCAG AAA Pass ✓

Text Size

Minimum 16px for body text on mobile devices. Headlines should scale responsively using clamp() or media queries.

Focus States

Add visible focus indicators for keyboard navigation on all interactive elements, especially the CTA button. Use outline: 3px solid #6B21A8 for focus rings.