Style guide
How the Tembo Tech Ventures platform looks, reads and behaves, and the parts it is built from. It is written for everyone who builds TTV: members, mentors, staff and contributors. Every example is the real component the platform renders, shown with fictional people. Some of what it describes, such as spaces, channels and mentor requests, is still rolling out to members.
On this page
Know where you are
The platform is a few spaces: Cohort, Community, Mentoring, Discover and your Profile. Each is a sheet in a tone of its own, and its tabs stand on it like the index tabs of a card file. The sheet in front is where you are, and the colour under your hand says so before any heading does.
People see only the spaces their roles open, always in the same order, so someone who mentors and is also an alum finds Mentoring in the same place every day. Switching spaces lifts the new sheet into place; staying in one never moves the page under you.
Cohort 04
The sheet in front is the space you are in. Community waits behind, with three new things.
People first, as themselves
TTV is a community, so the interface is mostly people. Everyone keeps one look everywhere: their photo, or initials on a colour taken from who they are rather than where they sit in a list.
The homepage's network carries through: builders are peach dots, mentors teal rings, institutions diamonds. Tembo, the AI, wears its own mark and never a face, so nobody mistakes an answer for a person.
- Wanjiku MwangiCohort 04
- David KamauMentorAlumni · Cohort 01
- Joseph MutuaInstitution partnerMentor
- TemboAI
Builders Mentors Institutions
One clear next step
Each view has at most one peach button: the thing a person most likely came to do. Everything beside it is quiet, and the way out is a ghost. When everything shouts, nothing is a next step.
Actions say what happens in words, “Accept”, “Not this month”, rather than “OK” or “Submit”. Places to go are links; things that change something are buttons.
Lucy Chebet asked for 30 minutes on a portfolio review
Words carry the meaning
Reactions are words, not emoji: “Useful”, “Learned something”. They say what they mean, read the same in every font, and keep a conversation between builders sounding like one.
Numbers come with their meaning (“2 waiting for your answer”), a notice says what happened and what to do next, and colour is never the only signal: an icon and the words say it too.
Mentor requests 2 waiting for your answer
Readable by everyone
Every page is built for a phone on a slow connection as much as for a laptop. These are the kit's commitments, checked by tests on every change; older pages are moving onto it.
4.5:1 or better
For every word on every sheet and card. The quietest ink measures 4.68:1 at its worst.
3:1 edges
For anything you need to find to use it: a field's border, a focus ring, an invalid field.
44px targets
Every control grows to a 44px target on a touch screen, and form fields are that size on every screen.
Works without JavaScript
The parts render on the server, so forms post and links go before any script arrives.
Still, when asked
With reduced motion, sheets cut instead of sliding and spinners stop turning.
No sideways scroll
Nothing overflows a 320px screen. Rows wrap, and long words break.
Motion explains; it never performs
Things move to show where they came from and where they went: a sheet rises into place when you change space, a drawer slides from the side it lives on. Hover and focus change colour in 150 milliseconds and move nothing.
Motion never stands between a person and the page. It is short, it can be interrupted, and with reduced motion it becomes a cut. A decorative movement never pretends something happened: a ring drawing itself is not a mentor confirming your work.
Honest by default
The interface shows what exists and says plainly what does not exist yet. Examples use fictional people, labelled as such. Evidence is shown with its source, and “not enough evidence” is a state of its own, never a low score.
TTV helps grow tech communities across Africa with the people in them, so the platform speaks as a member of that community: never as a rescuer, never inflating what someone did, never promising an outcome.
Using this guide
Foundations has the tokens, Components the parts, Patterns how they combine, and Voice how we write. The engineering guide in the repository has every component's full API and the rules for adding a new one.