T-H-E Brand Style Guide

 

Icons

 

VERSION 1.0 // 20241120

Brand Colors

Brand Yellow #D5BE47 Primary Accent
Brand Green #1D352F Primary Text
Light Neutral #F5F2EB Background Base
Warm Neutral #EBE2BA hsl(50, 46%, 78%)
Spot Red #FB6344 Highlights

Color Usage Examples

Light Background

Primary background color

Warm Background

Secondary background color

Dark Background

Accent Button

Color Hierarchy

  • 1. #F5F2EB - Primary background, clean and light
  • 2. #EBE2BA - Secondary background, adds warmth and depth
  • 3. #1D352F - Primary text and dark backgrounds
  • 4. #D5BE47 - Primary accent color
  • 5. #FB6344 - Highlight accent for calls-to-action

Typography System

Display Large
Welcome Home
Display Medium
Craft Your Story
Heading Large
Section Header
Body Large
Main content using IBM Plex Sans. We create unified, professional websites that showcase brands effectively to customers while serving as powerful internal tools.
Technical Text
CODE_REFERENCE: 2024_STYLE_001

Button System

Primary Button
Secondary Button
Accent Button
Ghost Button
Button Interaction States
All buttons feature:
  • Subtle initial elevation
  • Smooth upward hover animation
  • Increased shadow on hover
  • Gentle press effect on click
  • 200ms transition timing