NEXGEN · Brand book
The NEXGEN brand system.
Who we are, how we speak, and the full visual language: one warm, playful, Muslim-rooted third space. This is the living source of truth: if the site and this book ever disagree, this book wins.
Who we are
NEXGEN is the third space where Muslim youth build their future: a dedicated youth space in Staten Island, and a program of UMMA Foundation.
The third space
A place where the next generation builds who they become.
Every kid needs somewhere that's theirs. NEXGEN is that place. Youth come here to grow, to lead, and to own their identity, proud of their faith and part of the world. Muslim-rooted. Open to all.
UMMA Foundation
NEXGEN is a standalone program of UMMA Foundation: youth development, built for the way kids grow up today.
6 Arc Place
Staten Island, NY 10306
~4,000 sqft
A youth space, made just for them
UMMA Foundation
Our parent, we're a standalone program
Everyone belongs
Muslim-rooted, and open to all
Mission & Vision
What we're here to do, and where we're going.
Give Muslim youth a modern third space to grow, lead, and own their identity.
Between home and school or masjid. Real belonging. Real mentors. Real skills.
UMMA NEXGEN Centers in 30+ cities.
Where Muslim Youth Build Their Future
9
programs running
3
free, no account
1
home: Staten Island
The Third Space
Three spaces shape a young person. NEXGEN is the third: not home, not school or masjid, but a place made just for them.
01
First space
Home
Where love and values are shaped.
02
Second space
School & Masjid
Where structure and knowledge are taught.
03
Third space
NEXGEN
Where youth choose to grow, lead, and own who they are.
Not home. Not school or masjid. A third space, made just for them.
Proud of their faith. Part of the world.
Our Pillars
Four verbs shape everything we run. Five stages carry every kid through, from 4 to 29.
Faith & academics
LEARN
Grow in faith and in school: taught together, not apart.
Real-world skills
BUILD
Turn ideas into media, projects, and real businesses.
Community impact
SERVE
Show up for the community. Leave visible impact behind.
Youth leadership
LEAD
Mentor the ones coming up. Lead through real responsibility.
Voice & Tone
Muslim-rooted, not Muslim-only. Lead with the human. Layer the faith. Never build a wall.
The core principle
Muslim-rooted, not Muslim-only.
A Muslim family should feel this was built for their kid. A neighbor should feel it’s a great program, rooted in good values. Same words. Both doors open.
Lead with the human. “A safe place to grow” first. The faith comes right after.
Layer the faith in. Name Islamic values where they carry weight, not as decoration.
Never gatekeep. No “only for…”, no “halal alternative,” no walls.
Translate the terms. “Amanah (trust)”, a first-time reader is never locked out.
The test
A Muslim parent reads the page and feels “this is built for my kid.”
A neighbor reads the same page and feels “a great youth program, rooted in good values” , never “this isn’t for us.”
The everyday rules
Five habits that keep every sentence warm, plain, and human.
Verbs over nouns.
LEARN · BUILD · SERVE · LEAD
Specific over abstract.
“Adam, 13” beats “today’s youth.”
Speak to a parent’s gut.
“A place you don’t have to worry about.”
Speak to youth like peers.
“Bring your friends.” Not “enroll now.”
One idea per sentence.
Cut every “and / that / which” you can.
Say it like this
Same message, two registers. The left column is how NEXGEN talks.
“Bring your friends.”
“Join our program.”
Talk to youth like peers, not students.
“A place you don’t have to worry about.”
“A supervised, structured environment.”
Reach a parent’s gut, not their head.
“Built for Muslim youth. Open to every family.”
“Only for Muslim youth.”
Signal belonging without building a wall.
“A youth program rooted in good values.”
“The only halal alternative around.”
No gatekeeping. Drop the “only we…” framing.
“Amanah (trust), the promise we keep.”
“We instill amanah in every child.”
Translate an Islamic term the first time it lands.
“Adam, 13, needed a place to ask real questions.”
“Today’s youth face many challenges.”
Name the kid. Specific beats abstract.
Character lexicon
Four words carry the Pathfinders character work. Each one travels with its translation, never bare Arabic.
Logo
One wordmark. A UMMA endorsement line that never leaves. Room to breathe on every side.
The wordmark
The wordmark carries its own spring-green field, so it holds on a light ground or a dark one. Give it a clean, high-contrast surface either way.
Endorsement lockup
NEXGEN is a standalone program of UMMA Foundation. The endorsement line ships with the mark: no co-brand, no host mention.
Clear space & size
Keep the wordmark clear of clutter, and never let it get too small to read.
Digital: never below 96px wide. Print: never below 20mm / 0.75in wide.
Misuse
Use the wordmark as supplied, on a clean high-contrast ground, endorsement intact.
Don’t stretch or squash.
Lock the aspect ratio. Scale from a corner, never a side.
Don’t recolor off-palette.
Use the wordmark as supplied. No gradients, no brand-adjacent tints.
Don’t add effects.
No drop shadows, glows, or outlines. The system is flat and borderless.
Don’t drop the endorsement.
“A program of UMMA Foundation” stays with the mark on every page.
Color
A primary trio: Orange, White, Warm Grey, carries the brand. The secondary hues use the real vibrant tint ladder. White is always the field; color earns attention because calm surrounds it.
Primary
The brand rests here. Orange leads · white is the field · warm grey anchors.
The hero. CTAs, links, energy: NEXGEN's own.
The field, ~70% of every screen. Cream #FFF5F1 for cards only.
The anchor. Type, dark bands, grounding.
Secondary, the tint ladder
The real saturated tints, 100 light · 300 deep · 400 shadow-only. Use one hue at a time.
300 is the workhorse fill, 100 the lighter moment, 400 is a drop-shadow value only, never a fill. Green-300 #02873E is NEXGEN's mint; purple-200 #3B197F is our plum.
Neutrals
Two neutrals, that's it.
The field. Every page starts here.
Card surfaces only. Used sparingly.
Retired: the pale -soft pastels and the warm sand #FCF8F3 ground. Neither is a Headspace color: grounds are white, color is the vibrant ladder.
How to use it
The 70 · 20 · 10 that makes it calm instead of loud.
Proportion
- ~70% white, the calm field.
- ~20% orange & warm grey, brand lead + anchor.
- ~10% one secondary, the moment of life.
Contrast rules
Light fills take dark text, strong fills take white, and small orange text on light needs its darker twin.
Light fills → dark text
Yellow, pink, and the 100 tints are light. Text on them is text-ink.
Strong fills → white text
Orange, plum, mint, sky and ink are deep. Text on them is text-white.
Small orange text
Under ~24px, pure orange fails AA on light. Use text-orange-ink (#a5360a).
Typography
General Sans carries display and body: warm, geometric, friendly but not childish. LT Makeup is a brush-script accent: a spice, never the meal.
General Sans
Where Muslim youth build their future.
The typeface: General Sans
Aa
Self-hosted · variable · weights 200–700
One face does almost everything: headings, UI, and body. General Sans is the legally-ownable twin of Aperçu: a warm geometric-grotesque, modeled on Headspace's typography. Self-hosted so it loads fast and stays ours.
Weight ladder
Same word, 200 → 700. Weight and size do the emphasis, never a second font.
Type scale
Rendered at its real size. px / rem noted for engineering.
Display
60px · 3.75rem
Hero moments, one big statement
Build the future
H1
48px · 3rem
Page titles
Where youth belong
H2
36px · 2.25rem
Section titles
Learn · Build · Serve · Lead
H3
24px · 1.5rem
Subsections, card titles
A modern third space
Body
18px · 1.125rem
Default paragraph text
Every kid needs somewhere that is theirs.
Small
14px · 0.875rem
Captions, meta, labels
A program of UMMA Foundation.
LT Makeup, accent only
The brush-script accent. Uppercase by design; use it sparingly.
font-script utility
Build the future
Hero words, sticker moments, playful eyebrows, one to three words. Never body copy: brush scripts get unreadable in bulk, which is why the utility forces uppercase.
Pairing rules
- General Sans for everything: headings, UI, and body.
- Let weight and size carry emphasis, not a new font.
- LT Makeup only as an accent: uppercase, three words or fewer, high contrast.
- Set paragraphs or long labels in LT Makeup.
- Add a third typeface: two is the whole system.
- Run the brush script lowercase, or shrink it below headline size.
UI & Components
The kit, dogfooded. Buttons, chips, and cards get their energy from bold fills and one big radius, never from borders or drop-shadows.
Buttons
on light, sizes sm · md · lg
on dark, sizes sm · md · lg
Pills & chips
tone="neutral"
tone="orange"
tone="mint"
tone="amber"
tone="ink"
sizes
smmdtone="onDark", for chips on colored / ink grounds
Card tones
No borders, no shadows, each card separates from the ground by fill contrast alone.
Panel cascade
colored ground → white box
Colored ground
On a colored or ink panel, inner cards flip to bg-paper / bg-card. That is the whole visibility model, one fill sits on another.
SectionPanel tone="plum" → Card tone="white" · same rule on tone="ink"
Principles
- Borderless & shadowless. Elements separate by fill contrast, never a line or a drop-shadow.
- One radius language. 40px on cards (
rounded-3xl/2xl), 32px on small blocks (rounded-xl), full on pills. - CTAs are pills. Every
Buttonisrounded-full: friendly, tappable, unmistakable.
rounded-3xl · 40px · cards
rounded-xl · 32px · small
rounded-full · pills & CTAs
Illustration
Bright, friendly faces: loud, warm, and human. Deliberately not the dreary blues and greys most youth orgs default to.
Smiley blobs · every tone
40px
56px
72px
96px
Bright, not dreary
Do: bold, saturated, awake
Full brand color. Faces a 13-year-old would actually want on a hoodie.
Don't, dreary blues & greys
The muted, institutional palette most youth orgs settle for. Not us.
Scattered decoration
Faces scatter across a page like confetti.
Decoration at the edges: playful, never demanding the eye. They frame the content, not compete with it.
Already in the motion kit
NEXGEN ships the vocabulary today: smiley faces (BlobFace), organic blobs (BlobShape), and soft clouds (CloudBand), plus sparkles and sunbursts, all gently drifting, all reduced-motion aware.
BlobShape · organic blobs
CloudBand · soft horizon
Principles
- Faces first. A character you'd want to sit next to, friendly and clearly human.
- Many emotions, not one smile. Joy, focus, curiosity, calm: the real range of a teen's day, not a single grin.
- Bright over muted. Saturated brand color, never the dreary blues and greys of typical youth-org design.
- Playful, not childish. Warm and geometric, it still respects a sixteen-year-old.
- Scatter, don't center. Blobs and shapes decorate the edges; they never take over the page.
Coming next, a little custom character work
Today's kit blob wears one calm smile. A small set of custom NEXGEN characters is planned: the same warm blobs, drawn for joy, focus, and pride, so the full range of emotion is drawn, not just described.
Photography
Warm, real, and a little candid: Muslim youth and families as they actually are. Direction over assets: these are the rules a photographer follows, shown as placeholder frames until real footage lands.
Real, not stock
Actual NEXGEN youth and families. If it looks like a model on a white cyclorama, it is wrong.
Candid, not posed
Catch the moment mid-action: a kid mid-laugh, hands on a project. No lined-up group smiles.
Tight crops
Fill the frame with people and their hands. Skip the wide "look how big our facility is" shot.
Natural light
Shoot near windows in soft daylight. No hard on-camera flash, no clinical fluorescent cast.
Privacy first
Default to no-face or back-of-head for kids. Protects minors and keeps images reusable without new consent.
Warm grade
A slight warmth in the edit: the cream, amber, orange family. Never cold or corporate-desaturated.
Do / Don't
Same room, two very different photos. The one on the left could go live today; the one on the right exposes a minor's face and reads like a facility brochure.
Back-of-head · hands on the work
Tight, warm, privacy-safe
Cropped close on the moment, kid seen from behind, soft daylight, warm grade. Usable with no face-release paperwork.
Wide empty room · minor's face
Cold, wide, and exposing
Whole-facility wide shot, hard flash, a child's face centered. Feels like stock and creates a consent problem.
Non-negotiable
Kids default to no-face or back-of-head. A face only appears with written guardian consent on file. When in doubt, crop it out, the moment matters more than the face.
Layout & Space
Lots of white, punctuated by color. Content lives inside contained rounded boxes that float on a paper page, with generous space around everything. Space is the design, not an afterthought.
White-space forward
Empty space is intentional. When unsure, add space before you add elements. Calm reads as premium.
Color-blocked
Color arrives in confident whole blocks: a panel, a tile, never as timid outlines or hairlines.
Contained boxes
Everything sits inside a rounded box. The page is a stack of floating panels, not edge-to-edge slabs.
The container
One measure holds the whole site: max-width 1200px, centered, with gutters that grow from 20px on phones to 48px on desktop. Nothing runs the full bleed of the screen.
max-width: 1200px
Content measure · centered
The floating-box cascade
The core rhythm, from SectionPanel: a paper gutter wraps a colored or cream panel, and white cards nest inside it. Contrast, not borders or shadows, separates each layer.
1 · paper gutter
2 · colored panel
3 · white card
3 · white card
1 · paper gutter
2 · cream panel
3 · white card
3 · white card
Spacing scale, 8pt rhythm
Every gap is a multiple of 8 (with a 4 half-step). Consistent spacing is what makes the white space feel deliberate instead of accidental.
Cream / color cadence
Down a page, calm cream panels alternate with confident color panels. The eye rests, then lands on color, then rests again, pacing the scroll.
Motion
Movement should feel like a calm exhale, not a fireworks show. It reveals, gives feedback, and adds a little warmth, then gets out of the way. Every token lives in one file so nothing drifts.
Calm
Motion settles, it never jitters. Soft eases, slow starts, decisive stops. Nothing bounces for attention.
Playful
A little life (a drifting blob, a gentle lift) signals a warm, youth-coded space. Restraint keeps it premium.
Purposeful
Every animation earns its place: reveal, feedback, or delight. No motion for motion’s sake.
Always respected
Reduced motion is a hard rule. A global prefers-reduced-motion block in globals.css kills non-essential animation, and useMotionTokens() degrades every duration, distance, and stagger to near-zero. Nothing here breaks if a visitor turns motion off.
The vocabulary
A small, reused set of moves. Hover and watch: these three run on pure CSS, so they are live right here.
Hover me
lifts −6px
Hover lift
hoverLift · y −6 · fast · standard ease
Blob drift
animate-soft-float · slow idle · decorative
each word fades up, +40ms apart
Word-by-word reveal
heroReveal · blur→0 · stagger.tight
Marquee band
.nx-marquee · seamless loop · pauses on hover · stops for reduced-motion
Duration
Easing
most things · --ease-standard
hero, big moments · --ease-emotional
elements entering view
elements leaving view
Source of truth: src/lib/motion.ts (durations, eases, springs, distances, staggers, presets). If a component hard-codes its own timing, it is a bug.
Tokens
Every variable the site is built from, straight out of globals.css. Click a name to copy var(--token), click a value to copy the raw value. This section is generated from the stylesheet at build time: if a token changes, this page changes with it.
Surfaces
Page and card backgrounds. Warm off-whites, never pure grey.
Ink
Type and hairlines. ink-mid and ink-muted are the AA-safe body tones on white.
Brand
Orange is the primary. orange-ink is the only orange safe for text on light backgrounds.
Accents
Supporting hues for illustration, tags, and section variety.
Radius
Rounded, generous corners carry more of the brand than any single colour.
Elevation
Every shadow token is currently none: the system went flat and borderless on purpose, and depth now comes from warm surface tints and radius. The tokens stay so elevation can be reintroduced in one place if that changes.
Typefaces
Heading and body both alias --font-general (loaded by next/font in layout.tsx); the script is an accent, never a paragraph.
Motion
Easing curves. Durations live in src/lib/motion.ts.
Cast & icons
Six core scenes, the mascot, two school settings, and the doodle layer: the real artwork, straight from the illustration set. Below them, the plainer interface icons used inline in UI.
academicsStudy, curriculum, the school day
communityThe room full, people who know each other
faithSalah, deen woven through the day
familyParents in it with their kids
futureWhere this is taking them
teacherAn educator on site, not a screen
School settings + mascot
The two school drawings exist for the one argument Homebase has to make: what the day looks like in each setting. Use them as a pair, one alone makes a comparison the reader cannot see. The mascot is the greeting, for headers and empty states.
islamic-school
public-school
wave
face-cap-calm
face-curly-calm
face-hijab-calm
face-headphones
face-hijab-happy
face-worried
face-laughing
face-hijab-plum
face-loves-it
face-surprised
face-joy-tears
face-wink
face-glassesDoodle layer · 18 marks
Accents, not decoration for its own sake. One or two per frame, never a scatter: they point at something that matters, then get out of the way. The ones marked on dark are drawn in cream or white and disappear on paper, put them on ink or a saturated block.
Arrow 1
arrow-1
Arrow 2
arrow-2
Bulb
bulb
Check
check
Dots 1
dots-1
Dots 2
dots-2
Graph
graph
Heart
heart
Highlight
highlight
Math
math
Physics
physics
Spark
spark
Speech
speech
Star 1
star-1
Star 2
star-2
Star 3
star-3
Star 4
star-4
Twirl
twirlOne idea
A scene carries one thought. If it needs a caption to be understood, it is the wrong scene, pick another rather than adding detail around it.
Use the file, don't redraw it
<Illustration slug="academics" /> : the registry supplies the aspect ratio, so nothing shifts while it loads. Files live in public/illustrations/.
Give them room
These are drawn with their own internal spacing. Set them on paper or a warm card surface and let the whitespace do the work: no borders, no drop shadows.
Interface icons · 24px grid, 2px stroke, currentColor
A different job from the artwork above: these sit inline in buttons, lists, and labels at 16–24px, where a full-colour drawing turns to mud. They inherit whatever text colour they are given, so they can never introduce an off-palette hue.
Book
Academics, curriculum
Masjid
Faith, prayer space
Crescent
Deen, small mark only
Atom
STEM, workshops
Sparkle
A moment worth noticing
Verified
Background-checked, cleared
Calendar
The weekly rhythm
Mic
Studio, podcast
Ball
Friday Nights, gym
Palette
Creative track
Mentor
Stewards, mentorship
Talk
Mentor Conversations
Home
Family, Homebase
Compass
Direction, Future stage
A living document. As NEXGEN grows, so does this system: evolve it deliberately, keep it consistent, and let every page trace back here.
A program of UMMA Foundation.