Brand

Style Guide

Visual language, colors, typography, and UI components for New City Mumbai.

Foundation

Color Palette

Our palette reflects warmth, groundedness, and life — rooted in the city, pointing to renewal.

Primary

#5D715B

Muted sage green — trust, growth

Primary Light

#7A917A

Lighter green for hovers

Secondary

#F37839

Warm orange — energy, action

Secondary Light

#F59A66

Lighter orange for hovers

Accent Blue

#447294

Calm blue — trust, depth

Accent Gold

#FFD07C

Warm gold — highlight

Neutral Dark

#202621

Near-black — text, backgrounds

Neutral Cream

#F4EEE6

Warm cream — page background

White

#FFFFFF

Pure white — cards, contrast

Foundation

Typography

DM Sans for body text. Alan Sans (or DM Sans fallback) for display headings.

Display / H1

The quick brown fox

H2

The quick brown fox jumps

H3

The quick brown fox jumps over

Body Large

We gather every Sunday for worship, prayer, and teaching. Everyone is welcome.

Body

Our discipleship pathway is designed to meet you where you are and walk with you toward maturity in Christ.

Label / Overline

Section Label

Components

Buttons

Rounded pill buttons with clear hierarchy. Primary for main actions, outline for secondary.

Primary Buttons

Outline Buttons

Small / Tags

YouTubeSpotifyCurrentGospel of Mark

Components

Cards

Rounded corners, subtle borders, and generous padding. Cards float on cream or white backgrounds.

Standard Card

White background with subtle border, colored top accent bar, and icon in a tinted circle.

Dark Card

Dark background for contrast sections. Orange accents stand out prominently.

Foundation

Spacing and Radius

Generous whitespace and soft, rounded corners define the visual tone.

Border Radius

Full

Buttons, pills, avatars

2xl — 16px

Cards, panels

32px

Feature sections, large cards

Section Spacing

Section padding (mobile)

py-16 — 64px

Section padding (desktop)

py-24 — 96px

Content max-width

1024px

Horizontal padding

20px / 40px

Grid gap

16px — 32px

Components

Icon Style

Heroicons outline, 1.5px stroke weight. Icons sit in tinted circle containers — w-6 h-6 icon inside a w-12 h-12 circle.

Usage Rules

Always use outline style icons — never filled.

Stroke width: 1.5px. Stroke linecap and linejoin: round.

Icon size: 24x24px inside a 48x48px circular container.

Container background: 10% tint of the icon color.

Voice

Brand Voice

How we write and speak as New City Mumbai.

Warm

Inviting, not institutional. We sound like people, not a brand.

Grounded

Rooted in Scripture, honest about life in the city. No hype.

Hopeful

Pointing to renewal. The gospel changes everything — we believe that.