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
Rendered with the <Text /> component.
Heading 1
<Text variant="h1" /> Heading 2
<Text variant="h2" /> Heading 3
<Text variant="h3" /> Heading 4
<Text variant="h4" /> Large paragraph text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<Text variant="lead" /> Regular paragraph text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<Text variant="body" /> Small text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<Text variant="small" /> 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>Icons
Remix Icon
set (filled variant), rendered as inline SVG with <Icon name="ri:...-fill" /> (astro-icon). Only the icons you use are bundled.
ri:plant-fill ri:leaf-fill ri:flask-fill ri:cpu-fill ri:team-fill ri:global-fill Sizing & color
Icons inherit color via currentColor and scale with Tailwind width/height utilities.
Cards & Containers
Standard Cards
Rendered with the <Card /> component.
Card Title
This is a standard card with hover effects and consistent styling.
Elevated Card
Cards maintain consistent spacing and typography throughout.
Outlined Card
All cards use the same border radius and shadow styles.
Badges
Rendered with the <Badge /> component.
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
Rendered with the <Label />, <Input />, <Textarea />, <Select />, <Checkbox /> and <Radio /> components.
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