Personalized Guidance
Tailored support for every learner and community partner.
Design System
Brand colors, logo meaning, typography, and core UI patterns for client review. This page is for development reference and will remain available throughout the build.
Phase 1 — Foundation
The sections below showcase the GTN design tokens and reusable components that power the site. Full page content will be built in upcoming phases.
Brand Identity
Logo & Brand Story
The GPTC logo represents a complete ecosystem of transformation where education, peacebuilding, leadership, care, and opportunity work together to help individuals, families, and communities thrive.
Knowledge → Leadership → Peacebuilding → Employment → Community Well-being → Sustainable Transformation
The GPTC logo tells the story of a global ecosystem where strong values (roots), a shared mission (trunk), specialized organizations (branches), and empowered people (leaves and fruit) work together to plant peace, equip leaders, and transform lives.
Primary horizontal lockup with motto — use on light backgrounds with clear space around the mark.
Logo Sizing
Logo Dimensions & Placement
Website headers pair the emblem SVG with HTML text for a sharp wordmark. Below sm, only the emblem shows to save space.
Header (current)
Text at sm:text-sm
Global Peacebuilding,Training & Care Network
Emblem SVG with HTML wordmark beside it on all breakpoints. Header lockup — emblem image plus manually set company name text.
Footer (current)
Emblem + wordmark + tagline
Global Peacebuilding,Training & Care NetworkPlanting Peace. Equipping Leaders. Transforming Lives.
Emblem on a white badge with company name and gold tagline below — readable on the dark footer.
Favicon
32 × 32
- Browser tab: 32 × 32
- Apple touch icon: 180 × 180
Favicons derived from newset_logos/x4OHJ.jpg — exported to src/app/icon.png and apple-icon.png.
Source Files
Full logo with motto
Light backgrounds, print, and social sharing
Horizontal lockup with motto — best for light backgrounds, print, and social sharing.
Typography
Fonts & Type Scale
The site uses a single sans-serif family across all UI. Heading and body tokens are defined in src/app/layout.tsx and src/app/globals.css.
Type Scale
| Element | Size | Weight | Usage |
|---|---|---|---|
| h1 | text-4xl → lg:text-5xl | font-semibold (600) | Page titles, hero headlines |
| h2 | text-2xl → lg:text-4xl | font-semibold (600) | Section headings |
| h3 | text-xl → lg:text-2xl | font-semibold (600) | Sub-section headings, card titles |
| h4 | text-lg | font-medium (500) | Minor headings |
| p / body | text-base | font-normal (400) | Default paragraph text, leading-relaxed |
| .text-lead | text-lg → lg:text-xl | font-normal (400) | Intro paragraphs, hero subheadlines — muted foreground |
| small / captions | text-sm / text-xs | font-normal – font-medium | Labels, breadcrumbs, footer links, badges |
Live Preview
Heading 1
Planting Peace. Equipping Leaders.
Heading 2
Transforming Lives Through Education
Lead paragraph (.text-lead)
A global ecosystem that equips leaders, builds peaceful communities, and provides practical care for people, families, and societies.
Body (p)
Inter at 16 px with relaxed line-height is the default for paragraphs, service descriptions, and long-form content across the site.
Caption (text-sm)
Used for breadcrumbs, footer links, form hints, and metadata labels.
Brand Colors
Primary#0B3C5D
Secondary#1D70B8
Accent#F4B400
Neutral 50#F8FAFC
Neutral 200#E5E7EB
Neutral 800#1F2937
Component preview
Hero Section
Reusable hero block used on landing pages and service pages.
Our Impact
By the Numbers
—
Students Supported
—
Programs Delivered
—
Community Partnerships
—
Countries Served
What Sets Us Apart
Why Choose Us
Feature grid pattern for key differentiators.
Global Perspective
Experience supporting students and newcomers across borders.
Holistic Support
Academic, personal, and community-centered pathways.
Book Your Consultation
Take the next step with personalized guidance from our team.