Skip to main content
Universal Mobile Breadcrumb CSS - Clean Implementation
Fire & Rain International Navigation - Optimized
Brand Guide - User Instructions & Clarity Addendum

Fire and Rain Design System Guide - HOW TO USE THIS GUIDE

START HERE - FIND YOUR ROLE

Welcome to our design system! This guide is created for everyone on our team - from volunteers who need quick button references to full-stack developers implementing complex layouts.This living document contains all the visual standards, components, and guidelines you need to create consistent, accessible, and impactful digital experiences across our platforms. How to use this guide: Navigate to the section you need using the clear headings below. Each section includes visual examples, implementation code, and helpful notes for different skill levels.

Volunteers & Content Creators

Your Quick Start Path

  1. Read the Prayer (Page 1) - Start with spiritual foundation
  2. Review Quick Reference (Page 1) - Your daily checklist
  3. Study Button Examples (Part 2) - See which button for which content
  4. Check Writing Examples (Part 2) - Compare weak vs strong
  5. Use Final Checklist (Part 3) - Before publishing anything

Your Main Tools: Quick Reference Card + Button Library + Writing Examples

Designers & Developers

Your Technical Path

  1. Foundation Principles (Part 1) - Understand the why
  2. Visual System (Part 1) - Colours, typography, spacing
  3. Component Library (Part 2) - All UI elements
  4. Implementation Code (Part 2-3) - Copy-paste CSS
  5. Webflow Setup (Part 3) - Step-by-step integration

Your Main Tools: CSS Variables + Component Code + Webflow Instructions

Ministry Leaders

Your Strategic Overview

  1. Foundation & Prayer (Part 1) - Spiritual alignment
  2. Communication Principles (Part 2) - Our voice and approach
  3. Email Framework (Part 2) - Donor communication strategy
  4. Brand Governance (Below) - Approval processes
  5. Crisis Guidelines (Below) - Emergency protocols

Your Main Tools: Foundation Principles + Communication Strategy + Governance

GLOSSARY FOR NON-TECH USERS

Don't know what a term means? Find simple explanations here. No shame in learning!

WCAG (Web Content Accessibility Guidelines)

What it means: Rules that ensure people with disabilities can use our website. Like making sure text is readable for those with poor eyesight.

Why it matters: Everyone deserves access to the Gospel message.

HEX COLOUR CODE (like #9E0C1B)

What it means: A code that tells computers exactly which colour to display. Like a recipe for mixing paint.

Why it matters: Ensures our red is the exact same red everywhere.

RESPONSIVE DESIGN

What it means: Websites that automatically adjust to look good on phones, tablets, and computers.

Why it matters: 70% of our audience views content on mobile phones.

CTA (Call-to-Action)

What it means: The button or link that tells people what to do next. Like "DONATE NOW" or "SEND ME".

Why it matters: Clear CTAs increase response rates by 300%.

WEBP IMAGE FORMAT

What it means: A modern image format that makes photos smaller without losing quality.

Why it matters: Faster loading = more people stay on the page.

VISUAL DO'S AND DON'TS

Sometimes it's easier to see what's right and wrong. Here are common mistakes and how to fix them.

Button Usage

WRONG

Wrong colour, wrong font, lowercase text, vague message

RIGHT

Correct colour, Anton SC font, uppercase, clear action

Email Subject Lines

WRONG
Subject: Newsletter Update #47

Generic, no urgency, no personal connection

RIGHT
Subject: John, your gift just equipped Pastor Kumar!

Personal, specific impact, creates connection

Logo Placement

WRONG
'); padding: 40px;">
LOGO

Busy background, rotated, no clear space

RIGHT
LOGO

Clean background, proper orientation, adequate space

STEP-BY-STEP WORKFLOWS

Follow these exact steps for common tasks. Each step builds on the previous one.

Creating a Campaign Landing Page

Pray and Plan

What to do: Gather your team, pray for wisdom, identify your ONE main goal

Time needed: 15 minutes

Success looks like: Clear agreement on single primary action (e.g., "Get 750 people to click SEND ME")

Write Your Headline

What to do: Use the formula: [Specific Number] + [Time Frame] + [Impact]

Example: "750 Leaders. 30 Days. Eternal Impact."

Check: Can someone understand the opportunity in 3 seconds?

Choose Your Button

What to do: Match button colour to content type (see Part 2)

Primary action: Red button with "SEND ME" or "DONATE NOW"

Placement: Above the fold (visible without scrolling)

Add Supporting Content

What to do: Write 3 short paragraphs: Problem, Solution, Impact

Length: 50-75 words each

Include: Specific numbers, real names (with permission), multiplication effect

Test and Launch

What to do: Use Final Checklist (Part 3), test on phone, get approval

Critical tests: Links work, loads in 3 seconds, button is thumb-friendly

Final step: Pray over the content before publishing

BRAND GOVERNANCE

For Ministry Leaders: Clear approval processes ensure brand consistency while enabling quick action.

Approval Matrix

Content Type Approval Needed Timeline
Social Media Posts Team Leader Same day
Email Campaigns Communications Director 24 hours
New Campaign Pages Ministry Director 48 hours
Logo Modifications Executive Team 1 week
Crisis Communications Leaders + Board Chair Within 2 hours

Crisis Communication Protocol

  1. STOP - No immediate response. Gather facts.
  2. PRAY - Seek wisdom from the Holy Spirit.
  3. CONVENE - Crisis team meets within 1 hour.
  4. CRAFT - Write response using brand voice.
  5. APPROVE - CEO and Board Chair must sign off.
  6. COMMUNICATE - Single spokesperson delivers message.

Crisis Team Contacts: Keep updated list in secure location

FREQUENTLY ASKED QUESTIONS

Q: I'm not good with technology. Where do I start?

A: Follow the Quick Reference card in this guide, It has just 4 simple rules to remember. Focus on getting button colours right first - that's 80% of visual consistency right there!

Q: How do I know which button colour to use?

A: Ask yourself: "What do I want people to DO?" If it's donate or volunteer = RED. If it's read a report = BLUE. If it's education = BROWN. When in doubt, use RED or BLUE - These are hero colours.

Q: What if I need to create something not covered in this guide?

A: Use the Foundation Principles as your north star. If it honours God, serves people, and multiplies impact, you're on the right track. And then contact our teams

Q: How long should emails be?

A: Follow the 2-minute rule: If someone can't read and respond in 2 minutes, it's too long. Aim for 150-200 words maximum. Remember: one email, one action.

Q: Can I use different fonts on the website?

A: No. Anton SC for headlines, Lexend for everything else. No exceptions. This isn't limiting creativity - it's ensuring every communication looks professional and trustworthy.

Q: What's the most important thing to remember?

A: Pray first, design second. Every piece of communication should point people to Jesus, not to us. If it doesn't advance the Kingdom, don't publish it.

HOW TO MEASURE SUCCESS

Track these metrics to ensure brand standards create kingdom impact.

IMMEDIATE METRICS (Weekly)

  • Click-through rate on CTAs (Goal: >5%)
  • Email open rates (Goal: >25%)
  • Page load time (Goal: <3 seconds)
  • Mobile usage (Expect: >60%)

KINGDOM METRICS (Quarterly)

  • Leaders trained and deployed
  • Communities reached
  • Churches planted
  • Multiplication stories

GET HELP WHEN YOU NEED IT

Brand Support Team Roles

We're here to help you succeed. No question is too simple.

General Questions

Response within 24 hours

Urgent Design Help

Response within 4 hours

Technical Support

Include screenshot of issue

Brand Training

Schedule monthly

YOU CAN DO THIS

Pray before you communicate: Ask the Holy Trinity to guide you in all wisdom, insight, and strategy—in the name of the Father, Son, and Holy Spirit. From age to age, generation to generation, may I hear the cry of His people and weep as the Father weeps. May I have the emotions of the Holy Spirit and the restorative mandate of Jesus Christ!

Whether you're a volunteer creating your first social media post or a director launching a major campaign, these standards exist to serve you, not constrain you. When in doubt, pray, refer to this guide, and remember: excellence honours God and inspires people.

Brand Guide - Communication & Components

COMMUNICATION LANGUAGE

SECTION SUMMARY: Our voice is mission-focused, culturally intelligent, and multiplication-minded. We lead with impact, use specific numbers, and honour local leaders in every communication.

Writing Principles

Words We Use

Impact: Transform, equip, multiply, catalyse, mobilise, launch

Partnership: Together, join, collaborate, unite, participate

Urgency: Now, today, opportunity, moment, ready

Results: Specific, proven, demonstrated, measurable

Words We Avoid

Saviour Complex: Save, rescue, fix, helpless

Transactional: Buy, purchase, customer

Manipulation: Last chance, desperate (unless true)

Vague: Many, lots, numerous, some

Writing Examples

HEADLINES

Weak Example

"Help us make a difference in missions"

Strong Example

"750 Leaders. 30 Days. Eternal Impact."

BODY COPY

Weak Example

"Many people in South East Asia need to hear about Jesus. Your donation will help our organisation train evangelists."

Strong Example

"Right now, 750 local evangelists are ready to transform their communities. Your $200 equips one leader who reaches an average of 100 people in their first year alone."

Communication Checklist
  • Impact leads the message (not the organisation)
  • Specific numbers replace vague claims
  • Local leaders are honoured as partners
  • Clear, single action step included
  • Multiplication effect is demonstrated
  • Voice sounds authentically urgent, not manipulative

BUTTON COMPONENTS

SECTION SUMMARY: Buttons are our primary call-to-action tool. Each colour and style has specific use cases. All buttons use Anton SC in uppercase, meet WCAG standards, and inspire immediate action.

Primary Actions

Use for main campaign CTAs, volunteer recruitment, and primary donation appeals

Primary CTA
WCAG AAA (8.2:1)
#9E0C1B on white
Urgent Appeal
WCAG AA (4.5:1)
#E0001B / #FDF5A3

Mission Programs

Use for evangelism training, field missions, and outreach initiatives

Mission Programs
WCAG AA (5.8:1)
#BD2126 on #D6D1CC

Information & Reports

Use for impact reports, campaign updates, and data presentations

Impact Reports
WCAG AAA (12.3:1)
#232B5F on white
Yearly Reports
WCAG AAA (9.1:1)
#232B5F on #D7D7D9

Educational Content

Use for course enrolment, training programs, and educational resources

Course Registration
WCAG AA (4.8:1)
#AA6628 on white
Course Information
WCAG AA (5.2:1)
#96511B on #F4B27B

EMAIL FRAMEWORK

SECTION SUMMARY: Every email follows a proven structure: personal connection, specific impact, real story, multiplication vision, and clear next steps. Response time matters—send within 10 minutes.

Post-Donation Email Structure

Email Quality Checklist
  • Would I feel genuinely thanked?
  • Can I visualise the specific impact?
  • Does this make me want to give again?
  • Is the multiplication effect clear?
  • Do I understand what happens next?
  • Would I forward this to a friend?

CSS IMPLEMENTATION

SECTION SUMMARY: Copy these CSS variables and classes directly into your project. All values are tested for consistency and accessibility across platforms.
/* CSS Variables - Add to :root */ :root { /* Primary Colours */ --color-primary: #9e0c1b; --color-impact: #232b5f; --color-school: #aa6628; --color-donate: #c24e27; /* Secondary Colours */ --color-bright: #e0001b; --color-sow-bg: #d6d1cc; --color-sow-text: #bd2126; --color-neutral: #e8e8ea; /* Typography */ --font-display: 'Anton SC', sans-serif; --font-body: 'Lexend', sans-serif; /* Spacing (8pt grid) */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; /* Button Specs */ --button-height: 48px; --button-padding: 16px 48px; --button-font-size: 32px; } /* Button Base Class */ .btn { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 2px; font-size: var(--button-font-size); padding: var(--button-padding); min-height: var(--button-height); border: none; cursor: pointer; transition: all 0.3s ease; } /* Button Variants */ .btn-primary { background: var(--color-primary); color: white; border-radius: 12px; } .btn-impact { background: var(--color-impact); color: white; border-radius: 12px; } .btn-school { background: var(--color-school); color: white; border-radius: 30px; }

Continue to Part 3: Implementation & Resources

Brand Guide - Implementation & Resources

WEBFLOW IMPLEMENTATION

SECTION SUMMARY: Step-by-step Webflow setup with exact code snippets, upload protocols, and optimization guidelines. Follow in order for seamless implementation.

Setup Process

1

Add Font Links

Project Settings → Custom Code → Head Code

Head Code <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Anton+SC&family=Lexend:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
2

Add CSS Variables

Project Settings → Custom Code → CSS

CSS Variables :root { /* Primary Colours */ --primary-red: #9e0c1b; --bright-red: #e0001b; --impact-navy: #232b5f; --school-brown: #aa6628; --donate-orange: #c24e27; /* Secondary Colours */ --sow-bg: #d6d1cc; --sow-text: #bd2126; --athens-gray: #e8e8ea; /* Typography */ --font-display: 'Anton SC', sans-serif; --font-body: 'Lexend', sans-serif; /* Button Standards */ --button-height: 48px; --button-padding-x: 48px; --button-padding-y: 16px; --button-font-size: 32px; --button-letter-spacing: 2px; }
3

Create Global Classes

Designer → Style Panel → Create Classes

Webflow Classes

Button Classes

.btn
.btn-primary
.btn-impact
.btn-school
.btn-donate
.btn-sow
.btn-urgent
.btn-report

Typography Classes

.heading-hero
.heading-section
.heading-subsection
.text-body
.text-lead
.text-caption
.text-uppercase

Asset Upload Protocol

CRITICAL: Asset Optimisation Required

All assets must be optimised before upload to ensure fast load times and proper display.

IMAGES

  • Format: WebP with JPEG fallback
  • Max size: 200KB per image
  • Naming: lowercase-kebab-case.webp
  • Dimensions: 2x for retina displays
  • Compression: 80-85% quality

DOCUMENTS

  • Format: PDF/A for archival
  • Max size: 5MB per document
  • Naming: document-name-v1.pdf
  • Compression: Use PDF optimiser
  • Fonts: Embed all fonts

LOGOS

  • Format: SVG for all uses
  • Fallback: PNG at 2x resolution
  • Colour: Include reversed versions
  • Clear space: Equal to 'x' height
  • Min size: 32px height digital
Webflow Asset URL Structure /* Use relative paths for all assets */ /assets/logos/logo-primary.svg /assets/images/hero-image.webp /assets/documents/brand-guide.pdf /* Image optimization settings */ Images: Enable responsive images Format: Auto (WebP with fallback) Lazy load: Enable for below-fold

DOWNLOADS & RESOURCES

SECTION SUMMARY: All brand assets, templates, and guidelines in one place. Download what you need, when you need it. Updated quarterly.
PDF

Complete Brand Guide

Full 50-page manual with specifications, examples, and guidelines

PDF • 5.2MB

Download
LOGO

Logo Package

Primary, secondary, and program logos in all formats

ZIP • 3.8MB

Download
EMAIL

Email Templates

Pre-written templates for campaigns, updates, and donor communication

PDF • 2.1MB

Download
SOCIAL

Social Media Kit

Templates for Facebook, Instagram, Twitter, and LinkedIn

ZIP • 8.4MB

Download
CODE

Developer Assets

CSS files, React components, and implementation code

ZIP • 1.2MB

Download
PRAY

Prayer & Devotional Guide

31-day prayer guide for communicators and designers

PDF • 1.5MB

Download

MASTER PUBLISHING CHECKLIST

SECTION SUMMARY: Before any content goes live, verify every item on this checklist. Quality control ensures kingdom impact. Excellence honours God.

VISUAL DESIGN

  • Correct button colour for content type
  • All button text in UPPERCASE
  • Fonts loading correctly (Anton SC + Lexend)
  • Images optimised (WebP, <200KB)
  • Mobile responsive (320px minimum)
  • 8-point spacing grid applied
  • Clear visual hierarchy

COMMUNICATION

  • Impact leads the message
  • Specific numbers used (not "many")
  • Local leaders honoured as partners
  • Clear, single action step
  • Multiplication effect shown
  • Voice authentic, not manipulative
  • Prayed over content

TECHNICAL

  • All links tested and working
  • Forms submit correctly
  • Analytics tracking active
  • WCAG AA compliance verified
  • Page speed under 3 seconds
  • SEO meta tags complete
  • 404 page configured

SPIRITUAL

  • Honours the Holy Trinity
  • Kingdom-focused, not org-focused
  • Promotes unity in the body
  • Stewarding resources wisely
  • Truth spoken in love
  • Glorifies God, not man
  • Team prayed together

LOGO USAGE STANDARDS

SECTION SUMMARY: Our logos represent the kingdom work we do. Use them consistently, respectfully, and always with adequate clear space. The cross remains central.

Logo Specifications

PRIMARY LOGO

LOGO
  • Minimum size: 32px height (digital)
  • Clear space: Equal to cross height
  • Use on light backgrounds
  • Never stretch or distort

REVERSED LOGO

LOGO
  • Use on dark backgrounds
  • Ensure adequate contrast
  • Same size requirements
  • White version only

LOGO DON'TS

  • Don't change logo colours
  • Don't add effects or shadows
  • Don't place on busy backgrounds
  • Don't recreate or redraw
  • Don't remove any elements

CLOSING PRAYER

"Holy Trinity—Father, Son, and Holy Spirit—we commit this work to Your glory. May every design point to Your beauty, every word reflect Your truth, and every interaction demonstrate Your love. Use these standards to advance Your kingdom, unite Your people, and draw the lost to salvation. We decrease so You may increase. In the mighty name of Jesus Christ, our Lord and Saviour, Amen."

Brand Standards Version 5.0 | Living in His Purpose

Questions? Contact the brand team today | Updated: July 2025

OUR IMPACT

140 Evangelists trained. Resulting in 821 decisions for Christ.

Fire Camps 2024 — Japan, Singapore, Indonesia

14,000

decisions for Christ
in Indonesia

Data derived from the Annual Report 2024

Read our annual reports

Support A Student or worker today

Your generous monthly support can power the people behind the mission. Provide essential support to their families and ensure they receive education. Ultimately we want to see a world filled with Jesus Christ. Together we can.

Donate