Church-Ops Africa Stewardship with Vision
Home Features Pricing Docs About
Login Create Account
arrow_back Back to documentation
Design and product teams schedule 7 min read Updated Jun 4, 2026
style

Brand System

Use the Church-Ops color, type, voice, and layout system consistently across public and product surfaces.

Church-Ops Africa Brand System

This guide defines the shared brand foundations for the full Church-Ops system:

  • public website
  • documentation hub
  • superadmin control tower
  • church admin workspace
  • member portal
  • campaign and communication surfaces

The goal is simple: Church-Ops should feel like one trusted ministry platform, not a collection of unrelated pages.

Brand Promise

Stewardship with Vision

Church-Ops Africa should feel:

  • trusted
  • grounded
  • modern
  • pastoral
  • capable
  • calm under pressure

The system is not flashy for its own sake. It should communicate:

  • clarity
  • order
  • accountability
  • ministry warmth
  • operational confidence

Core Personality

Church-Ops should feel like a ministry operations partner with:

  • the composure of a finance office
  • the warmth of a church foyer
  • the confidence of a trusted church administrator
  • the clarity of a well-run ministry dashboard

Avoid visual directions that feel:

  • trendy but unstable
  • overly corporate and cold
  • generic SaaS without ministry character
  • loud, chaotic, or attention-seeking

Signature Colors

These are the main brand anchors that should guide the whole platform.

1. Midnight Ink

  • Use for major headings, core text, footer backgrounds, and authority moments.
  • Typical reference: deep navy ink already used across the public site.

Meaning:

  • trust
  • stability
  • clarity

2. Stewardship Teal

  • Use for active accents, primary emphasis, icons, chips, badges, and key action states.
  • This is the platform's everyday action color.

Meaning:

  • care
  • calm movement
  • health
  • modern ministry energy

3. Vision Violet

  • Use as a supporting strategic accent, soft gradients, and premium surface energy.
  • It should complement, not overpower, the teal.

Meaning:

  • innovation
  • intelligence
  • future readiness

4. Warm Signal Gold

  • Use sparingly for highlights, proof points, and celebratory emphasis.
  • Never use as the dominant page color.

Meaning:

  • value
  • progress
  • momentum

5. Horizon Mist

  • Use for page backgrounds and breathing room.
  • This keeps the platform light, premium, and readable.

Meaning:

  • calm
  • openness
  • modern clarity

Color Usage Rules

Primary action color

Use Stewardship Teal for:

  • primary CTAs
  • active navigation states
  • confirmation accents
  • chips and filters
  • key icons

Support accent

Use Vision Violet for:

  • layered gradients
  • premium feature moments
  • secondary visual energy
  • selected editorial highlights

Text and structure

Use Midnight Ink for:

  • page titles
  • major section headings
  • footer shell
  • strong labels

Use muted slate/ink tones for:

  • paragraphs
  • secondary notes
  • metadata

Warning against overuse

Do not:

  • turn every surface into saturated teal
  • mix many unrelated accent colors
  • use gold as the main interface color
  • create new page-specific palettes without a strong reason

Typography System

Headlines

Use Fraunces for:

  • display headlines
  • major section titles
  • editorial hero moments

Why:

  • it adds gravity, distinction, and a ministry-appropriate sense of heritage

UI and body copy

Use Manrope for:

  • body text
  • labels
  • buttons
  • forms
  • tables
  • support copy

Why:

  • it is modern, readable, and clean on desktop and mobile

Data and code

Use the platform mono stack for:

  • references
  • codes
  • system identifiers
  • export-oriented data displays

Typography Policy

Church-Ops should use typography with discipline.

Premium does not mean dramatic everywhere. It means:

  • clear hierarchy
  • fewer font moods
  • stable reading rhythm
  • strong contrast between editorial and operational text
  • restraint

1. One serif role, one sans role

Use the serif family for:

  • hero statements
  • major section titles
  • selected page anchors

Use the sans family for:

  • everything operational
  • body text
  • forms
  • buttons
  • tables
  • dashboards
  • support notes
  • navigation

This keeps the system elegant without becoming visually noisy.

2. Serif should be rare and intentional

Do not use the display serif for:

  • body paragraphs
  • form labels
  • table headings
  • filters
  • chips
  • long docs paragraphs
  • admin dashboards

The serif is a highlight tool, not the default reading engine.

3. Product surfaces should favor calm readability

Inside the app, most interfaces should feel operational first.

That means:

  • body text should stay in the sans family
  • labels should stay compact and clean
  • headings should be strong without becoming oversized
  • long content should not feel literary

4. Public pages may be more editorial, but still restrained

On the marketing site and docs:

  • one strong display headline per section is enough
  • support copy should return to the sans family quickly
  • avoid stacking multiple decorative headline styles in one viewport

5. Default rhythm

Typography should favor:

  • generous line height for body copy
  • tighter line height for headlines
  • modest letter spacing
  • clear separation between label, title, and paragraph sizes

6. Mobile-first readability

On phones:

  • do not let display headlines become oversized for the viewport
  • keep body copy readable without zoom
  • avoid squeezing long headings into awkward narrow lines when a simpler size will do
  • protect against overflow and clipped text

7. Responsible tone

Church-Ops typography should feel:

  • trustworthy
  • composed
  • mature
  • not trendy for trend's sake

Avoid:

  • excessive font-size jumps
  • too many uppercase blocks
  • ornamental typography in workflows
  • tiny text used to appear sophisticated

8. Practical rule of thumb

If a screen helps people:

  • send a message
  • record finance
  • check in a child
  • update members
  • read a report

then readability matters more than typographic flourish.

If a screen helps tell the Church-Ops story publicly, it can carry more editorial personality, but it should still stay calm and responsible.

Layout Principles

Every major public-facing page should follow these principles:

1. Calm hero

The hero should feel premium and focused, not noisy.

Preferred ingredients:

  • strong headline
  • short trust-building support copy
  • one main CTA
  • one secondary CTA
  • soft gradient or soft image framing

2. Surface hierarchy

Use layered surfaces clearly:

  • page background
  • hero or section frame
  • card surfaces
  • accent chips and badges

3. Breathing room

Church-Ops should never feel cramped.

Use:

  • strong vertical spacing
  • consistent section rhythm
  • mobile-friendly padding

4. Mobile-first clarity

Assume many users are on phones.

That means:

  • stacked layouts first
  • larger touch targets
  • no tiny text
  • no horizontal overflow
  • chip rows that degrade cleanly

Component Style Rules

Buttons

Primary buttons should feel confident, not heavy.

Use:

  • teal background
  • strong contrast
  • rounded corners
  • clear label

Secondary buttons should feel lighter:

  • outlined or softly surfaced
  • still strong enough to notice

Cards

Cards should feel:

  • airy
  • softly elevated
  • well bordered
  • readable on mobile

Avoid:

  • overly dark cards for default use
  • excessive shadows
  • too many card variants on one page

Chips and pills

Use chips for:

  • filters
  • audiences
  • metadata
  • states

Keep them:

  • compact
  • readable
  • clearly active when selected

Icons

Use icons as support, not decoration overload.

Good uses:

  • section context
  • workflow emphasis
  • quick recognition

Voice and Copy Style

The brand voice should be:

  • clear
  • respectful
  • pastoral without being vague
  • confident without being boastful
  • helpful without jargon overload

Prefer wording like:

  • "Start with the guides, then move into your live setup."
  • "Built for real church work."
  • "Stewardship with Vision."

Avoid wording that feels:

  • hype-driven
  • overly technical
  • generic enterprise jargon
  • cold or impersonal

Imagery Direction

Public-site and product imagery should emphasize:

  • church operations in real life
  • worship and community without cliché overload
  • modern dashboards and mobile use
  • African church leadership realities

Good imagery should feel:

  • bright
  • trustworthy
  • people-aware
  • ministry-grounded

Public Website Rules

The public website should consistently use this brand system across:

  • /
  • /features
  • /pricing
  • /about
  • /docs
  • /signup

That means:

  • the same headline logic
  • the same type families
  • the same surface language
  • the same CTA tone
  • the same mobile care

Product UI Rules

The internal product should still belong to the same brand family.

That applies to:

  • superadmin control tower
  • church admin dashboard
  • member portal
  • outreach center
  • finance flows
  • children module
  • intelligence workspace

The internal app can be more operational than the public site, but it should still share:

  • color DNA
  • typography hierarchy
  • spacing rhythm
  • trust-centered tone

What Success Looks Like

When this brand system is working well:

  • the public website looks premium and trustworthy
  • docs feel like part of the same product story
  • dashboard surfaces feel related to the marketing pages
  • members and admins both feel they are inside one thoughtful platform
  • the system feels built for real churches, not copied from generic SaaS

For live references, see:

  • /
  • /features
  • /pricing
  • /about
  • /docs
  • /signup