Display
Kanit Black 900
Brave Life · Designer Handoff · v2
Be strong
and courageous.
Editorial / cultural visual system for Brave Life ministries — built around persimmon, petrol teal, aubergine, oxblood, aged brass, and warm bone on tinted charcoal. Five hues with strict roles, every component documented with every interaction state.
01 · Foundations
Voice & Tone
Declarative, confident, scriptural. We speak as believers to believers. "Partner," not "donate." No emoji. Title Case CTAs. Scripture quoted in full with attribution.
✓ Good copy
"Destroy the works of hell; take cities for the King."
Partner With Us · Start Monthly Partnership · Plant the seeds of faith.
✗ Off voice
"Help us reach more people 🙏 — donate today!"
Vague verbs ("help"), emoji, "donate," sentence-case CTA — pulls toward generic non-profit, away from ministry conviction.
Principles
- Declarative over invitational. "Be strong and courageous" — not "We hope you'll consider being courageous."
- "Partner" over "donate." Money is partnership in mission, not charity.
- Title Case all CTAs. "Start Monthly Partnership," not "Start monthly partnership."
- Scripture in full. Always cite the reference (Joshua 1:9). Never paraphrase verses.
- No emoji. No exclamation pile-ups. Conviction reads as conviction without theatrics.
02 · Identity
Logo & Marks
Wordmark is set in Kanit Black 900 with a single accent dot — the period anchors the brand as a statement, not a name. Marks come in three forms: full lockup, BRV/LF iso (slash), and BRV·LF circle monogram.
Primary Lockups
Iso Marks
Size Scale
Clear Space & Restrictions
Clear space: minimum ½ the cap-height of the "B" on all sides.
Allowed colors: bone, charcoal, persimmon. No tints, no gradients, no drop shadows on the wordmark.
Don't: stretch, rotate, outline, or place over busy imagery without a scrim.
Allowed colors: bone, charcoal, persimmon. No tints, no gradients, no drop shadows on the wordmark.
Don't: stretch, rotate, outline, or place over busy imagery without a scrim.
03 · Visual System
Color Palette
Five disciplined hues, every value pushed off the SaaS-default toward editorial / cultural / earthy. Click any swatch to copy its hex.
FIRE
Persimmon
Brand soul. Logo, hero, podcast, "Live Now," sermon thumbnails. The fire — used as voice, not chrome.PrimaryPersimmon#D45A2CCopied
HoverLight#E27A4ECopied
ActiveBurnt#A8431FCopied
α 30Borderorange/30Copied
α 20Softorange/20Copied
α 06Tintorange/06Copied
UI PRIMARY
Petrol Teal
All CTAs, links, focus rings, primary surfaces. Petrol on surface, Teal-300 for text + buttons (AA-safe on warm charcoal).AA TextTeal-300#3DD0C5Copied
SurfacePetrol#1B6B6BCopied
HoverDeep#0F4844Copied
α 30Borderteal/30Copied
α 20Softteal/20Copied
DEPTH
Aubergine
Theology, worship, scripture, prayer surfaces, communion, deep callouts.AA TextPurple-300#A084DCCopied
SurfaceAubergine#4A2C5CCopied
DeepDark#321F40Copied
GroundPlum#1F1428Copied
α 30Borderpurple/30Copied
ALTAR · RARE
Oxblood
Pulled away from orange toward "blood." Reserved for altar calls, communion, salvation, "Live Now." Maximum 7 surfaces sitewide. If it's everywhere, it's nowhere.AA TextRed-300#D85A4ACopied
SurfaceOxblood#8B1E14Copied
DeepDark#5A140DCopied
GroundEmber#3D0E08Copied
GLORY · RARE
Aged Brass
Sour gold, never highlighter. Healing testimonies, ordination, "be strong and courageous" treatments. A grace note, not a workhorse — max 3 surfaces.HoverLight#DDB94ACopied
PrimaryBrass#C9A227Copied
DeepDark#8F7218Copied
Surfaces & Neutrals
Persimmon-tinted neutrals — never pure black, never pure white. Body bg #1B1814 reads "dark" but quietly belongs to the orange family, so accents feel of-a-piece.
Warm Tinted Charcoal — Surfaces
DeepestInk#100D0ACopied
AltBG-Alt#14110ECopied
BodyBG (default)#1B1814Copied
CardSurface#26211CCopied
HoverSurface 2#2F2923Copied
Warm Bone — Light Surfaces & Type
Body type sits on warm bone #F0E8DC — slightly yellowed, never pure white. Pulls from the persimmon family for unified warm temperature.
Gray 700#322D27Copied
Gray Dark#443E35Copied
Gray#7A7164Copied
Gray 300#9A9082Copied
Gray Light#DBD3C5Copied
Bone#F0E8DCCopied
White#FFFFFFCopied
Full Spectrum Sweep
Alpha Scale
Warm-bone alpha on warm tinted charcoal is the entire depth system. Body text = /70, borders = /10, card fill = /05. Never pure white.
bone/80subheadCopied
bone/70body primaryCopied
bone/60body secondaryCopied
bone/50subhead mutedCopied
bone/40whisperCopied
bone/30mutedCopied
bone/20strong borderCopied
bone/10std borderCopied
bone/05card fillCopied
Side-lit & Glow Effects
Hover over any of the cards or rings below to see motion. The system has three distinct elevation languages: side-lit glass (cards), breathing rings (alerts & live), and edge gradients (testimony rails).
Side-lit Glass Cards · Default UI ↔ Depth
Ministry
Healing Rooms
Open Thursdays, 7–9pm. A quiet place to be prayed over.
Prayer
Pray With Us
Unite in faith. Partner with us in prayer for hope, healing, unity.
Event
Ignite Gala
One night, one vision — a fire that carries nations.
Now
Live Service
Broadcast just started. Tap in — bring a friend.
Breathing Rings · Live Alerts & Featured Surfaces
UI · Focus / CTA
Fire · Brand Soul
Altar · Live · Rare
Live Pill
Live Now
Streaming
04 · Typography
Typography
Kanit (Cadson Demak · Google Fonts · OFL) for display + headings — loud condensed-leaning sans with strong vertical stress, built for hero scripture. Manrope for body, eyebrow, caption, quote.
Display
Display · Kanit Black 900 · 56–92px · -0.025em
Be strong and courageous
Headings
H1 · Kanit ExtraBold 800 · 36px
What We Do
H2 · Kanit ExtraBold 800 · 28px
Meet The Pastors
H3 · Kanit Bold 700 · 20px
Soul Winning & Crusades
H4 alt · Manrope Bold 700 · 18px
Doors open at 6:30pm
Body
Lead · Manrope Regular 400 · 18px · bone/92
Troy and Sarah Brave are ordained ministers through Revival Ministries International.
Body · Manrope Regular 400 · 16px · bone/88
Empowering believers to evangelize with the power of the Word and the Holy Spirit both locally and globally.
Body emphasis · Manrope SemiBold 600 · 16px · bone
Partner with us — every gift fuels another crusade.
Body SM · Manrope Regular 400 · 14px · bone/78
Common questions about BraveLife and our ministry.
Accents
Eyebrow · Manrope ExtraBold 800 · 12px · tracking .15em · uppercase · persimmon
PROGRAM
Quote · Manrope SemiBold 600 · 24px
"A partnership with Brave Life will be one of the smartest, highest-yielding investments you'll ever make."
Caption · Manrope Medium 500 · 12px · bone/40
© 2026 BraveLife. All rights reserved.
Spacing & Radii
Tailwind 4-step scale. Section rhythm = py-24 (96px). Card padding = p-8 (32px). Grid gap = 8 (32px). Cards = rounded-2xl. Inputs = rounded-xl. Every button + chip = rounded-full.
Spacing Scale
1 · 4px
2 · 8px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px
20 · 80px
24 · 96px
Radii
sm · 8
md · 12 (input)
lg / card · 16
xl · 20
full · pill (btn)
Borders
Iconography
Heroicons (outline) at 24×24. Chips are 48×48 with 10px radius. Variants: square, round, ring, solid, neutral, outline, sm, lg.
Ministry & Worship
Giving & Partnership
Variants — same glyph, every treatment
05 · Components
Buttons
Every button is a pill (border-radius: 9999px) at 12 × 28px padding. Try hovering, tabbing through with keyboard for focus rings, and clicking for active state.
Primary · Petrol Teal
Default
Hover
Focus
Disabled
Fire · Persimmon
Default
Hover
Disabled
Ghost & Outline
Ghost
Ghost · hover
Outline · fire
Outline · hover
Glass · Side-lit Pill ("Give Now" header)
Inputs & Forms
Click into any input below to see focus state — teal-300 border + 3px halo. Pill input for email/search; rounded for money/data. Error state turns oxblood.
Default · Hover · Focus · Error
Default
Money
$
Pre-focused
Error
Cards
Default card system uses side-lit glass. Override --cL/--cR for palette and --yL/--yR/--hL/--hR to position the tube. Hover brightens both rails.
Palette Variants
Default · pal-to
Teal ↔ Persimmon
Ministry-default. UI primary on left, fire on right.
pal-op
Persimmon ↔ Aubergine
Worship + fire. Prayer + testimony cards.
pal-rt · rare
Oxblood ↔ Teal
Altar / live moments. Maximum 7 surfaces sitewide.
pal-pt
Aubergine ↔ Teal
Theology + scripture surfaces. Jethro Initiative.
Header & Navigation
Fixed-height bar at 60px on desktop. Logo left, nav center-right, "Give Now" pill far-right. Backdrop blur over scrolling content.
Accordion
Click to expand. Persimmon chevron rotates 180° when open.
What is the Jethro Initiative?
A comprehensive program designed to strengthen churches through strategic planning, accountability, and resource management.
How is success measured?
By transformed lives — souls won, leaders multiplied, communities reached. We track both metrics and testimonies.
Can my church join?
Yes. Applications open quarterly. Contact us to schedule a discovery call.
Giving Controls
Custom amount input is primary. Preset chips secondary. Segmented toggle switches between Monthly Partnership and One-time Seed.
$
06 · Reference
Token Table
All semantic role tokens used by components. Click any token name to copy. Components reference these — never raw hex values.
| Token | Value | Purpose |
|---|---|---|
--accent | #3DD0C5 | UI primary — links, CTAs, focus |
--accent-surface | #1B6B6B | UI primary surface — buttons, fills |
--accent-hover | #0F4844 | Hover on petrol surfaces |
--fire | #D45A2C | Brand soul — logo, hero, podcast |
--fire-hover | #A8431F | Burnt-edge hover on persimmon |
--depth | #A084DC | Worship / scripture text |
--depth-surface | #4A2C5C | Aubergine surface |
--altar | #D85A4A | Altar / blood text · rare |
--altar-surface | #8B1E14 | Oxblood surface · rare |
--glory | #C9A227 | Anointing · rare grace note |
--bg | #1B1814 | Page background — warm charcoal |
--bg-alt | #14110E | Alternating sections |
--bg-elev | bone/05 | Card surface fill |
--fg | #F0E8DC | Primary text — warm bone |
--fg-muted | bone/78 | Body copy |
--fg-faint | bone/54 | Subheads |
--border | bone/10 | Standard border |
--border-strong | bone/20 | Strong border |
--font-display | "Kanit", system-ui | Display + headings |
--font-body | "Manrope", system-ui | Body, eyebrow, caption, quote |
--radius-md | 12px | Inputs |
--radius-2xl | 16px | Cards |
--radius-full | 9999px | Buttons, chips, pills |
Do & Don't
A short rulebook to keep the system honest.
✓ Do
- Use petrol teal for every CTA, link, and focus ring.
- Reserve persimmon for brand-soul moments — logo, podcast, hero.
- Use oxblood & brass rarely (≤7 and ≤3 surfaces sitewide).
- Sit type on warm bone, never pure white.
- Use side-lit glass cards as the default elevated surface.
- Hover/focus must always change color or border, never just opacity.
- Title Case all CTAs.
✗ Don't
- Don't paint the UI persimmon — it's voice, not chrome.
- Don't put oxblood on standard buttons. It's altar-only.
- Don't use pure white (#FFF) for body type — always warm bone.
- Don't add drop shadows to cards. Depth = alpha-on-alpha.
- Don't mix social glyph variants in the same row.
- Don't introduce new fonts — Kanit + Manrope only.
- Don't tint or recolor the wordmark.
Social Glyphs
Use Mono · Persimmon as the default footer treatment. Glass · Side-lit for refined / about pages. Native colors only on share cards / outbound previews.
Mono · Persimmon (default footer)
Filled · Persimmon (CTA rows)
Outline (utility / dense toolbars)