Revivalife Church
A visual-first brand guide for a warm, sacred, cinematic, bilingual church experience. The system uses the correct palette, the agreed display/body fonts, and the Style Script font shown in your reference.
Sunday worship, community, prayer, and the Word with clarity for English and Bahasa Indonesia visitors.
Brand Foundation
Revivalife is a spiritual home: warm, reverent, modern, and deeply human. The design should feel like light entering a sacred room, not like a generic church template.
Human faces, generous spacing, welcoming language, natural rhythm.
Deep navy, editorial serif, restrained yellow light, quiet authority.
Practical paths: service time, language, location, visit CTA.
The tone is cinematic but not theatrical, premium but not cold, spiritual but not old-fashioned.
Large Cinzel titles, calm layouts, deep blue structure.
Style Script appears as a human, handwritten welcome.
Inter keeps navigation, forms, language selector, and CTAs readable.
The brand should sit between a contemporary church, a refined editorial magazine, a cinematic worship platform, and a warm community house.
Worship, prayer, community.
Scale, spacing, typographic discipline.
Light, depth, atmosphere, motion.
People-first content and simple next steps.
Light Within the House. Every page should feel like a sacred interior warmed by light: ivory surfaces, deep blue structure, yellow accents, real photography, and gentle motion.
Design everything as if light is moving through a living spiritual community.
References should come from worship photography, parchment tones, editorial magazine pacing, architectural light, soft film grain, evening blue, and gold illumination.
Cinematic depthQuiet warmthSpiritual accentHuman softnessUse the full logo in the header, footer, hero, giving, and downloadable materials. Use the mark for favicon, mobile header, social avatar, and loader.
Primary logo preview zone
Mark / icon preview zone
Paste the actual URLs from your original code into these CSS variables or directly into the img tags. I cannot see those original links in the current message thread.
Minimum clear space equals the height of the mark or the capital height of the wordmark. The logo should never touch navigation, buttons, page edges, or image noise.
Minimum 32px breathing room around the full logo.
Minimum 18px breathing room; use the mark when space is tight.
Do not stretch, recolor randomly, add heavy shadows, rotate, outline, or place the logo over busy images without a dark overlay.
Color
The correct system is ivory, cloud, warm white, Revival Blue, Deep Navy, Revival Yellow, and warm earth neutrals. Red is not a brand color. It is only for error, urgent, or live states.
Ivory / Cloud / Warm White
Revival Blue / Deep Navy
Revival Yellow used sparingly.
These are the core colors. Keep this disciplined.
#123C69#071B33#F2C94C#F8F3E8#F5F7FA#FFFDF8These support photography, page rhythm, hover states, and quiet transitions.
#E7D8C4#C9C2B8#8B8378#DCE8F3#EEF5FA#1F252BUse the palette like an editorial system, not decoration.
60% neutrals · 25% blues · 10% photo atmosphere · 5% yellow · less than 1% red for alerts only.
Use ivory and warm white as the page base. Use deep navy for worship, livestream, sermons, footer, and emotional emphasis.
For welcome, service times, ministries, and forms.
For worship, sermon feature, video, footer, and prayer.
Typography
The script font is now explicitly the Google Font shown in your reference: Style Script. The full system is Style Script, Cinzel, and Inter.
Used for emotional welcome lines and sacred warmth.
Use dramatic contrast in scale, but keep line-height and spacing controlled.
A church family where worship, the Word, and community come alive.
Style Script is a warm accent, not the main voice. It should feel like a personal invitation.
Welcome Home
You Belong Here
Navigation, paragraphs, forms, schedules, legal text, buttons, or long bilingual content.
Cinzel gives structure, dignity, and sacred visual authority. Use uppercase carefully and add tracking when needed.
Inter carries the practical experience. It should be clean, calm, and never over-designed.
Medium to bold. Compact. Clear labels.
16–18px with generous line-height.
Labels, helper text, placeholders, validation.
Style Script = spirit and warmth. Cinzel = sacred authority. Inter = clarity and function.
One section should never need more than these three voices.
Layout
Use a 12-column desktop grid, 6-column tablet grid, and 4-column mobile grid.
Desktop: 1200–1320px max width with 24–32px gutters.
Use an 8px rhythm with generous section padding. The page should breathe.
Component interior
Small section gap
Major rhythm
Hero / chapter space
Avoid stacked generic Elementor blocks. Use quiet intro, cinematic expansion, community warmth, practical information, and final invitation.
Editorial welcome and mission.
Worship/video/sermon moments.
Times, location, language, contact.
Use real worship, families, prayer, youth, community, pastors, and auditorium atmosphere. No fake stock imagery.
Use soft contrast, warm highlights, deep navy overlays, subtle grain, and controlled radius.
Video should be cinematic, slow, compressed, muted by default, and supported by a fallback image.
Use for hero, worship atmosphere, sermon preview, livestream, and ministry highlights.
Motion
Motion should feel like breath, light, and presence: slow fades, soft parallax, image reveals, and staggered text.
Subtle, 16–32px movement.
Clip-path or mask reveal.
5–12% movement only.
Use GSAP for premium storytelling, not gimmicks. Animate hierarchy, not everything.
WebGL should create subtle light fields, dust, glow, or blue/yellow atmosphere. It must never fight readability.
Web + UI
The header must be premium, calm, and useful: logo, nav, language selector, and primary CTA.
Use clear labels. No overloaded menu. No clever wording.
The language selector is a real UI component, not an afterthought. It must remain visible on desktop and mobile.
Buttons should be confident but not loud. Primary on light = blue. Primary on dark = yellow.
One primary path per page. Do not make every CTA the same weight.
Plan Your Visit
Watch Sermons
Contact / Prayer
Cards should feel editorial, image-led, and calm. Use them for ministries, sermons, events, service times, and leaders.
A space for young people to grow in faith.
Care, support, and spiritual covering.
Gathering around presence and praise.
Use minimal line icons with 1.5–2px stroke. No mixed icon packs.
Prayer
Home
Community
Next Step
The page should be built from a designed system: hero, welcome, service times, about, worship, ministries, sermons, events, leadership, next steps, giving, location, prayer, footer.
The hero should be cinematic and immediate: video/image, navy overlay, Style Script line, Cinzel headline, Inter copy, two CTAs, language-aware text.
A church family where worship, the Word, and community come alive.
This must be highly usable: when, where, language, children/youth, parking/access, and visit CTA.
10:00 AM · English / Bahasa support · Kids available
Address, map, parking details, first-time visitor instructions.
Ministries should feel alive, not like admin categories.
Safe, joyful, faith-building environment.
Belonging, discipleship, and leadership.
Life together beyond Sunday.
Sermons should feel like a media library, not a random YouTube embed dump.
Speaker · Date · Category · Watch / Listen CTA.
Events need date, title, time, location, short description, and CTA.
7:00 PM · Main Auditorium
6:30 PM · Youth Room
Giving should feel trustworthy and spiritual, not transactional.
Use a calm explanation, secure CTA, and optional scripture-led support.
Give SecurelyThe footer should be deep, calm, complete, and useful.
Forms should be spacious, trustworthy, and accessible.
Support English and Bahasa Indonesia cleanly. Do not randomly mix languages in the same hierarchy unless intentional.
Plan your visit this Sunday.
Rencanakan kunjungan Anda hari Minggu ini.
Strong contrast, readable text, keyboard navigation, alt text, video fallback images, and reduced-motion support are mandatory.
No yellow body text on white.
Respect prefers-reduced-motion.
Selector must have labels.
Desktop can be immersive. Tablet should simplify. Mobile must prioritize logo, menu, language, service time, CTA, location, contact.
Stacked, clear, fast.
Set global colors, global fonts, buttons, section padding, container widths, card styles, forms, header, and footer before building pages.
Keep components reusable and easy to maintain.
Use a limited motion kit so the page feels designed, not chaotic.
Opacity 0→1, Y 24px, .9s.
Clip-path, 1.2s, expo.out.
0.08s between items.
Texture should be felt, not seen loudly: film grain, paper tone, blue haze, yellow light leak at 3–8% opacity.
Use soft borders and atmospheric shadows. Avoid heavy black shadows.
1px solid rgba(18,60,105,.10)
Only in dark worship sections.
Use these tokens inside Elementor custom CSS or the theme stylesheet.
:root {
--revival-blue:#123C69;
--deep-navy:#071B33;
--revival-yellow:#F2C94C;
--ivory:#F8F3E8;
--cloud:#F5F7FA;
--warm-white:#FFFDF8;
--sand:#E7D8C4;
--stone:#C9C2B8;
--warm-gray:#8B8378;
--soft-blue:#DCE8F3;
--mist-blue:#EEF5FA;
--charcoal:#1F252B;
--danger-red:#C83A32;
--font-script:"Style Script", cursive;
--font-display:"Cinzel", serif;
--font-body:"Inter", sans-serif;
}The system must stay disciplined. Warm, sacred, cinematic, useful.