Design Principles
High-level guidelines that guide decision-making and reflect TpGroup's values across all products and brands.
Core Principles
The TpGroup voice is constant across all brands. These four principles define how we communicate and design.
Confident Without Arrogance
We state what we do clearly, backed by evidence and experience. Our communication is direct and authoritative without being boastful or dismissive.
Do: "TpEMIS reduces admissions processing time by 60%"
Don't: "We're the absolute best platform in Africa"
Purpose-Driven
Every design decision connects to meaningful impact, sustainability, or community. We build with intention and communicate the "why" behind our work.
Do: Connect features to user outcomes and impact
Don't: Add features without clear purpose or value
Precise
We use specific numbers, concrete outcomes, and clear language. Vagueness creates confusion; precision builds trust and understanding.
Do: "Over 50,000 students use our digital content"
Don't: "Thousands of students benefit from our platform"
Inclusive
We welcome diverse audiences without patronizing or excluding. Our designs work for Sierra Leoneans, African Americans, diaspora communities, and everyone in between.
Do: Design for low bandwidth, mobile-first, accessible
Don't: Assume high-speed internet or desktop-first experiences
Design Values
These values inform every design decision and technical choice across the TpGroup design system.
Performance First
We design for African markets with variable bandwidth. Total page weight under 500 KB, system fonts primary, AVIF/WebP images, lazy loading.
Impact
75%+ of African e-commerce is mobile; 38% internet penetration
Accessibility is Mandatory
WCAG 2.2 AA compliance is our baseline, not a nice-to-have. Minimum 44x44px touch targets, 4.5:1 text contrast, keyboard navigation, screen reader support.
Impact
Legal requirement by April 2026; moral imperative for inclusive design
Data-Informed Decisions
Design decisions are validated with real user data, behavioral analytics, and measurable outcomes. We test, measure, iterate.
Impact
Reduces guesswork, aligns design with actual user needs
Consistency Builds Trust
Consistent patterns, predictable interactions, and unified visual language across all TpGroup products create familiarity and reduce cognitive load.
Impact
Users learn once, apply everywhere across our ecosystem
Decision-Making Framework
When facing design decisions, ask yourself these four questions.
Does this serve our users?
Every design decision should have a clear user benefit. If it doesn't help users accomplish their goals, reconsider.
Is this accessible to all?
Can users with disabilities access this? Does it work on slow connections? Is it usable on mobile devices?
Is this sustainable?
Can we maintain this pattern? Is the performance cost acceptable? Does it align with our long-term vision?
Is this consistent with the system?
Does it follow our established patterns? If it breaks patterns, is there a strong justification?
Brand-Specific Tones
One voice, many tones. Each brand expresses the core principles with varying warmth and formality.
| Brand | Tone | Warmth | Formality | Key Audience |
|---|---|---|---|---|
| TpGROUP | Authoritative, visionary | Medium | High | Investors, corporate partners |
| TpISENT | Technical, expert | Low-Medium | High | Developers, enterprises |
| TpEMIS | Empowering, clear | Medium-High | Medium | Educators, admins, students |
| FambulTik | Warm, storytelling | High | Medium-Low | Diaspora, heritage seekers |
| TpESTATE | Aspirational, eco-conscious | Medium-High | Medium | Homebuyers, investors |
| TpLEARN | Encouraging, direct | High | Low-Medium | Students, parents |
Practical Application
How these principles translate into everyday design and development work.
When Designing Components
- ✓ Start with user needs, not aesthetic preferences
- ✓ Design for mobile first, then scale up
- ✓ Verify WCAG 2.2 AA compliance from the start
- ✓ Use design tokens (CSS variables) for all styling
- ✓ Test on real devices with slow connections
- ✓ Document usage patterns and accessibility requirements
When Writing Content
- ✓ Lead with impact, not features
- ✓ Be specific with numbers and outcomes
- ✓ Use active voice always
- ✓ Respect the reader's time (3-4 sentence paragraphs max)
- ✓ Define acronyms on first use
- ✓ Front-load the most important information
When Building Features
- ✓ Validate with user research and data
- ✓ Ensure feature works offline or with intermittent connectivity
- ✓ Implement progressive enhancement (core functionality without JS)
- ✓ Test with keyboard navigation and screen readers
- ✓ Optimize images (AVIF first, WebP fallback, lazy loading)
- ✓ Keep total page weight under 500 KB