Design system

Kweli consumes the Mzizi design system. Its brand mineral is Tanzanite (the Identity role — the Mukoko signature); color is a role contract, picked by what a surface is responsible for, not by aesthetics.

Venue listing card

The venue listing card is the Mzizi nyuchi-place-card row variant, which extends nyuchi-listing-card:

• 4px mineral accent bar on the leading edge
• 14px card radius
• 48px thumbnail with a map-pin placeholder when no photo exists
• Category pill
• Verified badge inline with the venue name (the nyuchi-verified-badge contract — see Verification)
• Locality + distance meta line
• Gold-star rating rail

Mineral tokens

Mineral colors are CSS custom properties, themed for both light and dark:

--color-tanzanite   /* primary — Identity */
--color-cobalt      /* secondary */
--color-gold        /* accent */
--color-malachite   /* success */
--color-terracotta  /* destructive */

Pick the mineral by role. The verification badge tiers map Terracotta → Cobalt → Gold → Tanzanite in ascending trust order.

Admin dashboard density

The admin dashboard uses the Mzizi 4.2.0 compact density scope (.density-compact) — smaller touch targets and tighter spacing. Compact density is internal-only; public venue pages keep the default density.

Homepage ordering

Homepage venues are ordered nearest-first via a Mongo $near query:

1. The cached page renders with a deterministic Harare anchor, so the server-rendered result is stable and cacheable.
2. If the browser already has geolocation permission granted, the list silently refines via /api/venues with the user’s real coordinates — no permission prompt, no layout jump for users who declined.