Mission
A modern Muslim institution that combines emergency relief, sustainable agriculture, community technology, youth development, media, and nonprofit enterprise into one connected ecosystem — building the systems that remove the need for aid.
Internal handbook · v1 · Living document
The UMMA
brand handbook.
Not a style guide. Not a design system manual. A short letter from us — about how we make every page, every campaign, every donation flow feel like it was built by humans who actually care.
Mohamed Sayed
Founder · Brooklyn, NY
- Brand
- Umma Foundation
- Tagline
- Build. Serve. Scale.
- Founded
- 2021
- Owners
- Brand & Web team
00 · A note from the team
The team
Photographed in Brooklyn
Mohamed Sayed
Founder, UMMA Foundation
(placeholder — replace with scanned signature when available)
Hi. If you're reading this, you're probably about to design, write, or build something for UMMA. Welcome.
We made this handbook for one reason: we've seen too many nonprofit websites that feel like a charity tax form with a stock photo on top. That isn't us — and the second any page on UMMA starts to feel that way, we want you to notice.
The rules in here aren't about consistency for its own sake. They're about making sure every page feels like a person made it — someone who has been in the field, who knows the families we work with, who cares whether this button gets clicked or not.
When in doubt, choose the warmer thing. Choose the human sentence. Choose the photo with a face in it. Choose the layout that breathes. The system will catch you if you stray on the structural stuff. Trust your instincts on the human stuff.
Warmth > PolishSpecificity > GeneralityHuman > Machine
01 · Who we are
A movement. Not a logo on a donation receipt.
We're building the systems that remove the need for aid — and we want people to feel the human hands inside them.
Vision
A world where the systems that create the need for aid are dismantled — replaced by communities that build, serve, and scale together.
Brand promise
Every dollar reaches families in the field. No middlemen, no waste. We publish shortfalls alongside successes.
Brand personality
Emotional. Urgent. Human. Direct. Faith-aware without being preachy. Confident without being corporate. Calm under pressure. Like a teammate who just came back from the field.
What UMMA stands for
- Movement, not just charity
- Humanitarian infrastructure
- Community-powered impact
- A premium trust brand
- Digital-first giving
What UMMA is not
- A generic nonprofit website
- A guilt-first charity
- A brochure pretending to be modern
- A donation form with a logo
- A vehicle for ego or recognition
Emotional principles · in pairs
Hope
over guilt
Trust
over pressure
Clarity
over complexity
Movement
over transaction
Human warmth
over corporate coldness
Proof
over vague claims
02 · Our family of programs
One parent. Seven distinct children.
UMMA is the parent brand. Each program is a sub-brand with its own personality — but they all share the same heart, the same red, and the same Plus-Jakarta-shaped spine (now Raleway). Sub-brands diverge in palette, photography, and product role.
Flagship program
Emergency aid · flagship
UMMA Relief
Aid reaches families within 48 hours, across 23+ countries. The program everything else exists to support.
- Palette
- Inherits UMMA red
- Tone
- Urgent · Documentary · Field-first
Sustainability
UMMA Farm
An 8,000-acre farm that funds the mission and removes the need for aid.
- Palette
- Earth + UMMA red
- Tone
- Grounded · Long-horizon
Local relief
Hope Bus
Mobile meals and dignity across NYC, every week.
- Palette
- UMMA red + Hope Bus blue
- Tone
- Warm · Neighborhood
Nonprofit enterprise
Yala Restaurant
100% nonprofit halal restaurant — every meal funds the mission.
- Palette
- Distinct Yala palette
- Tone
- Hospitable · Joyful
Community tech
UMMA App
Your community. Connected. The operating system for the Muslim world.
- Palette
- UMMA red + product neutrals
- Tone
- Modern · Product
Media
UMMA Studio
Stories that amplify impact — production-grade, distribution-ready.
- Palette
- Dark + UMMA red
- Tone
- Cinematic · Editorial
Youth development
NexGen
A youth development center where the next generation gets built.
- Palette
- UMMA red + youthful accents
- Tone
- Energetic · Mentor-driven
Sub-brand rules
- AlwaysSub-brand logos include the UMMA wordmark or “by UMMA” lockup.
- AlwaysUMMA red (
#DF133E) appears at least once on every sub-brand surface. - VariableEach sub-brand may introduce one supporting palette colour, documented in its own page README.
- SharedRaleway, the eyebrow pattern, button system, and motion timings apply to every sub-brand.
03 · Our mark
The wordmark is a signature, not a graphic.
It sits in every header, every footer, every donation receipt — and never competes with the story on the page. Treat it like a name on a letter, not like a hood ornament.
UMMA Foundation.
On light
UMMA Foundation.
On dark
UMMA Foundation.
On photo
The three rules of placement
- 01Clear space ≥ the cap-height of “U”. Nothing touches the wordmark — not text, not images, not borders.
- 02Two colours only. White on dark photo,
#0A0A0Aon light. Never re-coloured. - 03Minimum size: 96px wide on web, 24mm in print. If it doesn't fit, find more space — don't shrink.
Do
- Pair it with generous breathing room.
- Place on calm, high-contrast backgrounds.
- Lock-up sub-brands as “[Brand] by UMMA.”
Don't
- Don't rotate, stretch, or gradient-fill it.
- Don't place on busy photo regions.
- Don't recolour to anything outside white / #0A0A0A.
Why: The wordmark earns trust by being recognizably itself across every surface.
04 · One red
Red is a heartbeat. Not a paint job.
Every CTA, every active dot, every hover state — same red. One red across the entire system, used sparingly. The moment a viewport has two reds fighting for attention, both reds lose. Think of red the way a film editor thinks of music: it cues a feeling, then it gets out of the way.
#DF133E
UMMA Red
--rd-redThe only chromatic colour in the system. Used for CTAs, eyebrow labels, hover accents, active states. Splash only — never as a background fill.
#B91030
Red dark
--rd-red-darkPrimary button hover.
#FDE8EC
Red tint
--rd-red-tintSoft red surfaces for don't-cards, badge fills.
Light surfaces · canonical for new pages
#FFFFFF
Background
--rd-bgDefault page background.
#F5F6F8
Surface
--rd-surfaceAlternating section surface.
#F9FAFB
Card muted
--rd-card-mutedSubtle elevated card.
#EBEBEC
Border
--rd-borderrgba(10,10,10,0.08) — near-invisible divider.
Dark surfaces · conversion heroes & photo containers
#0A0A0A
Base
--rd-dark-bgHero photo background, dark conversion sections.
#141414
Surface dark
--rd-dark-surfaceAlternating dark section.
#1A1A1A
Elevated dark
bg-elevatedDark cards, donation widget, dropdowns.
#FFFFFF
Text on dark
--rd-text-on-darkPrimary text on dark surfaces.
Text on light
#0A0A0A
Text primary
--rd-textHeadlines and primary body.
#374151
Text 2
--rd-text-2Body, subheadings.
#6B7280
Text 3
--rd-text-3Captions, fine print.
#9CA3AF
Text 4
--rd-text-4Timestamps, ghost text.
05 · The voice on the page
Raleway. Heavy at the top. Light underneath.
One typeface across the site: Raleway. The signature contrast is heading-800 against body-300 — that gap is what makes the page feel premium without feeling cold. The italic at scale is the warmth lever — use it for human moments.
Family · Raleway (Google Fonts)CSS var · --font-jakarta (legacy name)Weights · 300 / 400 / 500 / 600 / 700 / 800
Display · Hero H1
3,200 children didn't eat today.
rd-display · clamp(40, 5.5vw, 80px) / 1.08 / -0.025em / 800Display · Italic accent
built by humans.
font-style: italic · weight 500 · used for warmthDisplay · Section H2
Build. Serve. Scale.
rd-display-md · 40-56px / 1.18 / -0.015em / 800Subtitle
A modern humanitarian system across 23+ countries.
rd-subtitle · 20px / 1.4 / 500Body
UMMA is a modern humanitarian system — seven interconnected programs that remove the need for aid.
rd-body · 16px / 1.6 / 300Eyebrow
04 · One red
rd-eyebrow · 12px / 700 / 0.18em / uppercase / redSmall / caption
2 hours ago · Khan Yunis, Gaza
13-14px / 400 / 1.5 Do
- Use Raleway 800 for headlines and 300 for body — keep the contrast.
- Reach for italic at scale when a section needs to feel human.
- Break headlines across 2-3 lines deliberately.
- Use the eyebrow pattern at the top of every section.
Don't
- Don't set full-width single-line headlines.
- Don't introduce a second display typeface.
- Don't use 600 for headings — collapses the contrast with body.
- Don't use italic for entire paragraphs — it loses impact.
06 · Pacing & rhythm
80% structure. 20% controlled disruption.
When everything is perfectly aligned, nothing is interesting. Break the grid on purpose, in moderation.
| Token | Value | Where it shows up |
|---|---|---|
max-w-[1180px] | 1180px | Light page content max width. |
max-w-7xl | 1280px | Dark conversion-page content. |
--rd-gap-xl | 24px | Default grid gap. |
--rd-gap-2xl | 32px | Card grids on larger screens. |
--rd-gap-5xl | 64px | Section vertical rhythm baseline. |
--rd-gap-7xl | 112px | Large-screen section padding. |
rd-section padding | clamp(64px, 8vw, 112px) | Standard vertical section padding. |
--rd-radius-card | 24px | Cards. |
--rd-radius-tile | 16px | Inline tiles, badges. |
--rd-radius-pill | 999px | Buttons, eyebrow pills. |
Rhythm rules
- Pages alternate two surfaces — never three.
- Adjacent sections do not share a layout shape.
- A grid of 3 cards may follow an editorial section. Not another grid.
- Use one breathing section (lots of whitespace) between two dense ones.
Mobile rules
- 70% of traffic is mobile. Design for it first.
- Stacked layout: image top, content below.
- Sticky donate bar after 400px scroll.
- Thumb-friendly CTAs (min 44px tap target).
07 · How we build pages
Fourteen building blocks. Nothing else.
Every page on UMMA is assembled from these fourteen components. If a page wants something the fourteen can't do, you stop and flag 'New Component Required' — you don't invent silently. The system trusts you to compose; it doesn't trust freelance components.
Compose, don't invent.
The three heroes
How the page opens decides whether anyone reads the rest. Pick the one that fits the emotional ask of the page.
01 · Cinematic Hero
EMOTIONFull-bleed image hero with editorial headline and dark overlay. The site's most cinematic entry point.
When: Country pages, major appeals, signature program landings.
redesign/sections/Hero.tsx02 · Split Hero
EMOTIONEditorial headline + stat callout + device-style image card. Light palette with single red accent.
When: Program pages, sub-brand landings.
redesign/sections/Hero.tsx (split)03 · Minimal Hero
EMOTIONQuiet, text-only hero. Eyebrow, headline, body, two CTAs. No image. Documentation-grade.
When: Internal pages, brand/docs/legal.
redesign/sections/Hero.tsx (minimal)How we prove it
Once we've claimed something, we have to back it up. These four components do the backing.
04 · Micro Story
PROOFOne face, one quote, one transformation. 4 sentences max.
When: Inside campaign pages and the homepage story slot.
redesign/sections/FieldStory.tsx05 · Narrative Section
TRUSTLong-form editorial block. 2-column with anchor visual.
When: About, How We Work, Methodology.
redesign/sections/Mission.tsx06 · Impact Grid
PROOFLarge stat cards, 2-4 columns. Number-led.
When: Below hero. Country pages. About.
redesign/sections/ImpactNumbers.tsx12 · Field Updates
PROOF3-column grid of live operational cards with location + timestamp + pulsing dot.
When: Homepage. Country pages.
redesign/sections/FieldStory.tsxHow we ask
The donation moment is the product. These components make the ask present without making it pushy.
07 · Momentum Bar
TRUSTFull-width strip · pulsing-dot donor count + raised amount + sustainers.
When: Homepage, give pages.
redesign/sections/Pillars.tsx08 · Dual CTA
COMMITMENTFinal-CTA section with primary (donate) + ghost (secondary) action.
When: Every page's last section. Always.
redesign/sections/NewsletterCTA.tsx09 · Donation Selector
ACTIONFrequency toggle + 4 amount presets (default $50) + custom input.
When: Hero (desktop). Give page. Religious-dues pages.
primitives/DonateInline.tsxHow we say who we are
The components that carry the brand voice on every page.
10 · Transparency Section
TRUSTBlock linking to financials, governance, IRS letter. Plain language.
When: Homepage, About hub.
redesign/sections/VerifiedBy.tsx11 · Trust Strip
TRUSTFull-width · 4 items with red dots.
When: Directly below homepage hero.
redesign/sections/TrustMarquee.tsx13 · Why UMMA Pillars
TRUST3-column pillar cards · red accent line · bold title · description.
When: Homepage. About hub.
redesign/sections/WhyUmma.tsx14 · Newsletter Block
COMMITMENTCompact email capture · single input · primary button.
When: Bottom of homepage. Never above the fold.
redesign/sections/NewsletterCTA.tsxButton system
Hierarchy: Primary (red, one per viewport) · Dark (secondary) · Light (tertiary on coloured panels) · Ghost (low-emphasis link).
08 · How giving works here
Two clicks from anywhere to a finished gift.
The donation flow is the product. Everything else is the wrapper.
Step 01
Tap Donate
Persistent Donate CTA in nav (desktop) and sticky bar after 400px scroll (mobile). Red, pill, never hidden.
Step 02
Choose
Amount presets ($10 / $25 / $50 / $100, default $50). Frequency toggle (one-time default, monthly upsell). Designation when relevant.
Step 03
Submit
FundraiseUp modal opens inline. Apple Pay, Google Pay, card, ACH, crypto. Receipt and impact line delivered immediately.
Religious-dues flows
Zakat
Calculator + dedicated flow. Compliance language above the fold.
Sadaqah
Default amounts skew higher ($50 / $100 / $250).
Fidya
Per-day amount × days. Calendar context.
Kaffarah
Per-occurrence amount. Quiet, dignified copy.
Monthly conversion
Framed as an identity upgrade — never as a default.
- Annual impact: "$50/month = 1,200 meals this year."
- Identity copy: "You become someone families rely on."
- Low barrier: "Less than $1.67 / day."
- Safety: "Cancel anytime."
- Social: "1,200+ already made this commitment."
- Position late on the page — qualified visitors only.
09 · How it looks & moves
Real photos. Restrained motion.
Every photo is a documentary record. Every animation has a reason. Decoration is what makes a site feel synthetic — when something moves, it's because the eye needs to be led there.
The 70 / 30 rule
Documentary
Khan Yunis · 2 hours ago
Documentary
Sudan · field team handoff
Polished brand
Studio portrait · weekly recap
Raw field snap
Phone photo from the bus driver
70% polished
- Real field photos, strong composition.
- Documentary style. Subjects working or looking at camera.
- Dark gradient overlay on every hero.
30% raw
- Real phone snapshots from team members.
- Raw signals authenticity — keep it occasional.
- Time-stamped or GPS-stamped when possible.
Do
- Use real field photos. Always.
- Lead with hope and dignity in framing.
- Apply the dark gradient overlay for hero text contrast.
Don't
- Don't use generic stock for crisis content.
- Don't use AI-generated images of beneficiaries.
- Don't exploit grief or suffering for emotional leverage.
Why: Stock and AI break the trust contract instantly when discovered.
Motion system
| Element | Animation | Duration / easing |
|---|---|---|
Hero background | Ken Burns zoom 1.0 → 1.08 | 6s linear, loop |
Hero text | Staggered fade-up | 0.4-0.5s ease-out, stagger 0.12s |
Button hover | scale 1.02 + translateY(-1px) | 200ms ease |
Card hover | translateY(-4px) + shadow-lg | 240ms cubic-bezier(.2,.7,.2,1) |
Pulsing dot | opacity pulse | infinite ease-in-out |
Marquee | translateX(0 → -50%) | 40s linear infinite |
Scroll reveal | fade-up on whileInView | 0.5s ease-out, stagger 0.12s |
Sparkle spin | rotate 360deg | 9s linear infinite |
Honour prefers-reduced-motion on every animation. Decorative spins and marquees stop entirely under reduced motion.
10 · How we sound
Like a teammate who just came back from the field.
Active voice. Present tense. First-person plural (“we”), second-person (“you”). Quantify everything — numbers always beat adjectives. Every sentence has to answer one question: what changes because of this?
And — when in doubt — write the way you'd actually talk to a friend who just asked what you do. Not the way the comms deck says you should.
The pull quote on the right is the test: would your headline sound right spoken out loud?
How to write a headline · before and after
Do
“3,200 children didn’t eat today.”
Don't
“Food insecurity continues to affect thousands in the region.”
Do
“Your $50 feeds a family for a week.”
Don't
“A donation of $50 helps support our food programs.”
Do
“We deploy within 48 hours.”
Don't
“Our organization works to mobilize resources rapidly.”
Do
“You become someone families rely on.”
Don't
“Thank you for your generous monthly contribution.”
Do
“We need 88 more builders to finish the well.”
Don't
“Help us reach our fundraising goal for this important project.”
The headline formula
[number / urgency] + [human subject] + [outcome / gap]
- “3,200 children didn't eat today.”
- “$50/month = 1,200 meals this year.”
- “We need 88 more builders to finish.”
The four-beat story
- 01
Before
Who was this person before crisis?
- 02
Crisis
What happened?
- 03
Intervention
How did UMMA show up?
- 04
Now
Transformation funded by donors.
First name only. One direct quote. Real photo. Max four sentences. If it takes more, it isn't a micro-story anymore.
11 · How we earn trust
Trust is engineered into every surface.
Trust signals are visual, textual, and structural. Accessibility is non-negotiable. Mobile is the default. Everything below is the cost of being believable — not optional polish.
Visual
- Trust strip with 4 red-dot items below hero.
- Pulsing dots on live elements only.
- Real progress bars — never fake.
- Before/after cards anchored in story sections.
- 501(c)(3) + EIN visible on every footer.
Textual
- Specificity: 3,200 meals — not "thousands."
- Recency: "2 hours ago" — not "recently."
- Location: "Khan Yunis, Gaza" — not "the region."
- Verification: "GPS-verified delivery."
- Accountability: "We publish shortfalls alongside successes."
Accessibility
- WCAG AA contrast minimum on every text pair.
- Alt text on every meaningful image.
- Focus-visible rings on every interactive element.
- prefers-reduced-motion stops decorative motion.
- Form labels, error states, screen-reader context.
Mobile rules
Thumb zone
Primary CTAs sit in the bottom third on mobile.
Sticky donate
Appears after 400px scroll. One primary action.
Stacked layout
Image top, content bottom. No side-by-side under 768px.
Type scale
H1 36-44px on mobile, never below 28px.
Tap targets
Minimum 44px height on every button and link.
No hover-only UX
Hover effects always have a focus / tap fallback.
12 · The non-negotiables
Memorize these. They protect the brand more than any rule above.
Do
Lead with the problem, not the org.
Don't
Lead with the mission statement above the fold.
Do
Quantify everything (numbers > adjectives).
Don't
Use vague impact language like "many" or "thousands."
Do
Keep red as a splash colour only.
Don't
Use red as a section background fill.
Do
Use real field photography.
Don't
Use AI-generated images of beneficiaries.
Do
Maintain 2 clicks from any page to a completed donation.
Don't
Bury the donate CTA below 3+ scrolls.
Do
Build pages from the 14 approved components.
Don't
Invent a new layout or one-off section silently.
Do
Use the eyebrow pattern on every section header.
Don't
Mix typography styles across sections.
Do
Honour prefers-reduced-motion on every animation.
Don't
Add flashy entrance animations to chase delight.
Do
Publish shortfalls alongside successes.
Don't
Hide failed campaigns or rounded-up stats.
Do
Frame monthly as identity, not as a default.
Don't
Default the frequency toggle to monthly to inflate metrics.
13 · For AI agents (and humans)
If you're an AI working on UMMA, here's the agreement.
You'll help us a lot. You'll also be tempted to optimize for things we don't want — symmetry, completeness, smoothness. Resist those instincts when they fight against warmth.
The contract
- Compose pages from the 14 approved components. If a section needs something else, stop and flag "New Component Required" — don't invent silently.
- Use the BRAND_SYSTEM.md voice rules. Active voice. Present tense. Quantify everything.
- Default to light surfaces and the rd-* token system for new pages. Use dark surfaces only on signature heroes and the legacy conversion homepage.
- Never generate beneficiary photos with AI. Use real field photography from the content library.
- Never write guilt-first copy ("won't you please…", "for as little as…").
- Always include a primary donate CTA and a secondary action. Never two reds in the same viewport.
- Cite numbers with sources or omit them. Round accurate — not impressive.
- When in doubt, choose the warmer thing. Choose the human sentence. Choose the photo with a face in it. Choose the layout that breathes.
Pre-publish checklist
- checkboxDoes this page feel like a person made it?
- checkboxIs the primary CTA reachable in 2 clicks?
- checkboxIs the story human and specific (name, place, number)?
- checkboxIs trust visible (501(c)(3), EIN, sources, verification)?
- checkboxAre sections assembled from the 14 components only?
- checkboxAre colours consistent — one red per viewport?
- checkboxIs typography consistent — Raleway, 800 headings + 300 body?
- checkboxIs the layout clean — alternating surfaces, no shadow depth?
- checkboxDoes it look strong on mobile first?
- checkboxIs the donation path frictionless?
- checkboxDoes the page avoid guilt-first manipulation?
- checkboxDoes the user know what to do next?
A living document
This page is the constitution — not the law. When the system needs to evolve, we update this page first, then the codebase. The source-of-truth markdown lives at BRAND_SYSTEM.md at the root of the site repo. Questions or proposed changes go to hello@ummafoundation.org.