Engine-4 Foundation
Style Guide
A comprehensive guide to standardize all design elements across the Engine-4 Foundation website.
Brand Colors
Primary Brand Color
Magenta
#e30074
CTAs, highlights, brand accents
Supporting Colors
Primary Blue
#0ea5e9
Tech, trust elements
Secondary Green
#84cc16
Growth, sustainability
Accent Orange
#f97316
Energy, innovation
Neutral Palette
Neutral 900
#111827
Headings
Neutral 700
#374151
Body text
Neutral 600
#4b5563
Secondary
Neutral 400
#9ca3af
Disabled
Neutral 200
#e5e7eb
Borders
Neutral 50
#f9fafb
Backgrounds
Typography
Heading Hierarchy
text-4xl md:text-5xl lg:text-6xl font-bold text-3xl md:text-4xl font-semibold text-2xl md:text-3xl font-semibold text-xl md:text-2xl font-semibold text-lg text-neutral-700 leading-relaxed text-neutral-700 leading-relaxed text-sm text-neutral-600 Logo Usage
Current Implementation
Code Example:
<div class="relative p-3 rounded-xl transition-all duration-200 hover:scale-105 hover:shadow-lg"
style="background: linear-gradient(135deg, #1f2937 0%, #374151 100%); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);">
<img src="/e4f_logo_white.svg" alt="Engine-4 Foundation" class="h-12 lg:h-16 w-auto" />
</div>Cards & Containers
Standard Cards
Card Title
This is a standard card with hover effects and consistent styling.
Another Card
Cards maintain consistent spacing and typography throughout.
Third Card
All cards use the same border radius and shadow styles.
Feature Cards with Icons
Research
Cutting-edge agricultural research
Education
Training next-gen innovators
Community
Local impact initiatives
Technology
Advanced infrastructure
Stat Cards
Forms
Form Elements
Section Templates
Standard Section
Section Title
Section description that explains the content below and provides context for users.
Feature 1
Feature description
Feature 2
Feature description
Feature 3
Feature description
Hero Section Template
Growing Food Anywhere
Securing food supply through technological innovation, education, and cross-sector collaboration.
Style guide for Engine-4 Foundation website consistency