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.
Your Quick Start Path
- Read the Prayer (Page 1) - Start with spiritual foundation
- Review Quick Reference (Page 1) - Your daily checklist
- Study Button Examples (Part 2) - See which button for which content
- Check Writing Examples (Part 2) - Compare weak vs strong
- Use Final Checklist (Part 3) - Before publishing anything
Your Main Tools: Quick Reference Card + Button Library + Writing Examples
Your Technical Path
- Foundation Principles (Part 1) - Understand the why
- Visual System (Part 1) - Colours, typography, spacing
- Component Library (Part 2) - All UI elements
- Implementation Code (Part 2-3) - Copy-paste CSS
- Webflow Setup (Part 3) - Step-by-step integration
Your Main Tools: CSS Variables + Component Code + Webflow Instructions
Your Strategic Overview
- Foundation & Prayer (Part 1) - Spiritual alignment
- Communication Principles (Part 2) - Our voice and approach
- Email Framework (Part 2) - Donor communication strategy
- Brand Governance (Below) - Approval processes
- 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 colour, wrong font, lowercase text, vague message
Correct colour, Anton SC font, uppercase, clear action
Email Subject Lines
Generic, no urgency, no personal connection
Personal, specific impact, creates connection
Logo Placement
Busy background, rotated, no clear space
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
- STOP - No immediate response. Gather facts.
- PRAY - Seek wisdom from the Holy Spirit.
- CONVENE - Crisis team meets within 1 hour.
- CRAFT - Write response using brand voice.
- APPROVE - CEO and Board Chair must sign off.
- COMMUNICATE - Single spokesperson delivers message.
Crisis Team Contacts: Keep updated list in secure location
FREQUENTLY ASKED QUESTIONS
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!
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.
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
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.
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.
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 hoursUrgent Design Help
Response within 4 hoursTechnical Support
Include screenshot of issueBrand 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.
COMMUNICATION LANGUAGE
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
"Help us make a difference in missions"
"750 Leaders. 30 Days. Eternal Impact."
BODY COPY
"Many people in South East Asia need to hear about Jesus. Your donation will help our organisation train evangelists."
"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."
- 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
Primary Actions
Use for main campaign CTAs, volunteer recruitment, and primary donation appeals
WCAG AAA (8.2:1)
#9E0C1B on white
WCAG AA (4.5:1)
#E0001B / #FDF5A3
Mission Programs
Use for evangelism training, field missions, and outreach initiatives
WCAG AA (5.8:1)
#BD2126 on #D6D1CC
Information & Reports
Use for impact reports, campaign updates, and data presentations
WCAG AAA (12.3:1)
#232B5F on white
WCAG AAA (9.1:1)
#232B5F on #D7D7D9
Educational Content
Use for course enrolment, training programs, and educational resources
WCAG AA (4.8:1)
#AA6628 on white
WCAG AA (5.2:1)
#96511B on #F4B27B
EMAIL FRAMEWORK
Post-Donation Email Structure
Personal Opening
Thank them as one human to another. Use the campaign director's actual name. Make it feel like a personal note, not a system email.
Specific Impact Statement
Paint a clear picture: "Your $200 will train evangelist Kumar in Chennai. He'll begin his training on March 15th."
Real Story
Share how someone like Kumar transformed their community. Use names, places, and numbers. Make it tangible.
Multiplication Vision
Show the ripple effect: Kumar reaches 100 people → 10 become leaders → they reach 1,000 more. Exponential impact.
Future Pathway
Natural next steps: "Follow Kumar's journey" or "Join our prayer team" or "See the training in action."
- 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
Continue to Part 3: Implementation & Resources
WEBFLOW IMPLEMENTATION
Setup Process
Add Font Links
Project Settings → Custom Code → Head Code
Add CSS Variables
Project Settings → Custom Code → CSS
Create Global Classes
Designer → Style Panel → Create Classes
Webflow Classes
Button Classes
.btn-primary
.btn-impact
.btn-school
.btn-donate
.btn-sow
.btn-urgent
.btn-report
Typography Classes
.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
DOWNLOADS & RESOURCES
Complete Brand Guide
Full 50-page manual with specifications, examples, and guidelines
PDF • 5.2MB
DownloadEmail Templates
Pre-written templates for campaigns, updates, and donor communication
PDF • 2.1MB
DownloadSocial Media Kit
Templates for Facebook, Instagram, Twitter, and LinkedIn
ZIP • 8.4MB
DownloadPrayer & Devotional Guide
31-day prayer guide for communicators and designers
PDF • 1.5MB
DownloadMASTER PUBLISHING CHECKLIST
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
Logo Specifications
PRIMARY LOGO
- Minimum size: 32px height (digital)
- Clear space: Equal to cross height
- Use on light backgrounds
- Never stretch or distort
REVERSED 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
Fire Camps 2024 — Japan, Singapore, Indonesia
decisions for Christ
in Indonesia
Data derived from the Annual Report 2024
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.
