# Medisafe Suppliers Limited — Website UI/UX Design Brief (Extension Document) **Version:** 1.0 · **Date:** 2026-09-04 **Purpose:** A complete, self-contained UI/UX design specification you can feed into a design tool (Claude "design", ui-ux-pro-max, a designer, or a page-builder) to produce the **premium, ProHealth-inspired** visual design for the Medisafe Suppliers Limited website. It builds on the already-approved content and the working Laravel + Filament CMS. > **How to use this document:** Give the design tool this whole file as the brief. Ask it to produce, in order: (1) the design system / tokens, (2) the global chrome (header + footer), (3) the reusable section components, then (4) each page from the page blueprints. A ready-to-paste condensed prompt is in the last section (§15). --- ## 1. Why this document exists (the design gap) The current live build is **functionally complete** (all pages, CMS, forms, SEO) but its visual direction followed the *Candesic* reference — clean and minimal, but flat and text-forward. The client's kick-off actually referenced the **ProHealth – Medical & Healthcare Template** (ThemeForest 47850718): a richer, warmer, more **visual and sectioned** healthcare site with imagery-forward heroes, icon service cards, stat counters, "why choose us" blocks, process steps, team grids, testimonial/credibility bands and a strong appointment/CTA rhythm. **This brief redirects the design toward the ProHealth feel**, while keeping: - the client's **Navy · Teal · Soft-Grey · White** palette, - the "premium, professional, settled — not busy" guardrail from the navigation doc, - **no generic pharmaceutical catalogue imagery**, **no clinical/patient photography** (this is a B2B advisory firm, not a clinic), **no government positioning**. The result should read like an **international healthcare-advisory / consulting firm** (think the polish of a top strategy consultancy) *expressed through* a modern medical-template layout language. --- ## 2. What "look like ProHealth" means here (translation table) ProHealth is a clinic/hospital template. Medisafe is a B2B market-access advisory. Adopt the **layout devices**, translate the **content**: | ProHealth device | Keep the device | Translate the content to | |---|---|---| | Full-bleed hero with photo + floating "Book Appointment" form | ✅ imagery-forward hero, floating card | Hero photo of Dar es Salaam / Tanzania + floating **"Request a Consultation"** mini-form or key-stats/Tanzania-map card | | Utility top bar (hours, phone, social) | ✅ slim top bar | Offices (Dar es Salaam · UK), email, LinkedIn | | "Departments" icon grid | ✅ icon service cards | **Core Capabilities** (Regulatory, Market Access, Commercial, Healthcare Engagement, Strategic Partnerships) | | Stats counters ("2,500 patients") | ✅ animated counter band | Market/opportunity signals (see §9 — use qualitative-safe figures, no invented stats) | | "Why choose us" image + checklist | ✅ split image + checklist | **Why Partner With Us** (6 reasons) | | Process / how-it-works steps | ✅ numbered step timeline | **Our Approach** (Understand → Assess → Strategise → Connect → Implement → Develop) | | Doctors team grid with hover socials | ✅ people cards | **Leadership & Team** | | Testimonials slider | ✅ credibility band | **Healthcare Network & Collaborations** (ORCI, Dental Expo) as a trust/logos band | | Appointment CTA band | ✅ full-width accent CTA | **"Discuss Your Tanzania Opportunity"** | | Blog grid | ✅ 3-card news grid | **Insights** | | Brand/partner logo strip | ✅ logo marquee (only when partners enabled) | **Partners** (future area) | --- ## 3. Audience, tone, goals - **Audiences:** global pharmaceutical / biotech / medtech / diagnostics manufacturers; government institutions & regulators; investors & development partners; hospitals & healthcare organisations. The site may be reviewed by organisations such as SPIMACO, Intas, Sartorius — **so the bar is "international healthcare organisation" credibility**. - **Tone:** trusted, expert, strategic, warm-but-precise, globally credible, distinctly Tanzanian. - **Primary goal:** build trust and generate qualified enquiries ("Let's Talk" / "Discuss Your Tanzania Opportunity"). - **Design principles:** *Premium restraint · strong white space · one clear action per section · photography over icons for emotion, icons for structure · refined motion, never busy.* --- ## 4. Design system — tokens ### 4.1 Colour Primary palette (client-mandated). Hexes are the current build's tuned scale — keep or refine: | Role | Token | Hex | |---|---|---| | Brand primary (deep) | `navy-900` | `#0b1c34` | | Navy (surfaces/darks) | `navy-950 / 800 / 700` | `#071324 / #102544 / #163155` | | Accent / action ("health") | `teal-500` | `#17949c` | | Teal bright (hover/highlight) | `teal-400 / 600` | `#38b0b7 / #0e7982` | | Canvas (soft grey) | `stone-50 / 100` | `#f7f8fa / #eef1f5` | | Hairline / borders | `line` | `#e2e7ee` | | Body text | `ink / muted` | `#0b1c34 / #566579` | | Base | `white` | `#ffffff` | - **Optional premium accent (sparing):** a muted warm gold `#C9A96A` for tiny credibility marks (award/return-on-trust ticks, section eyebrows on dark). Use ≤5% of any screen. Skip if it reads un-medical. - **Section rhythm:** alternate `white` → `stone-50` → occasional `navy-900` (dark) bands to create the ProHealth "sectioned" feel. Never two identical adjacent backgrounds. - **Contrast:** all text meets WCAG AA (≥4.5:1 body, ≥3:1 large). Teal on white is for large text / icons / borders, not small body copy. ### 4.2 Typography Two acceptable directions — **pick Direction A for the ProHealth feel**: - **Direction A (recommended, modern healthcare):** Headings **"Plus Jakarta Sans"** (or Manrope) 600–700, tight tracking; Body **"Inter"** 400–500. Clean, warm, contemporary — matches ProHealth. - **Direction B (editorial advisory):** Display serif **"Fraunces"** for H1/H2 + **"Inter"** body (current build). More "consulting", less "medical". Scale (fluid, desktop→mobile): H1 56–36 · H2 40–28 · H3 24–20 · Lead 20–18 · Body 17–16 · Small 14 · Eyebrow 12 uppercase, `0.18em` tracking, teal. Line-height: headings 1.05–1.15, body 1.6. `text-wrap: balance` on headings. ### 4.3 Spacing, radius, shadow, layout - **Grid:** 12-col, max content width **1200–1280px**, gutters 24/32px. Generous section padding: **96–128px** desktop, 56–72px mobile. - **Radius:** cards `16–24px`, buttons full pill, images `20–28px`. ProHealth uses large soft rounding — lean generous. - **Shadow:** two tiers — `card` (subtle: 0 1px 2px + 0 12px 32px −12px navy/12%) and `soft` (elevated hover: 0 20px 60px −30px navy/28%). No harsh shadows. - **Borders:** 1px `line` hairlines; teal 2–3px accent bars for emphasis. ### 4.4 Iconography Minimal, refined line icons (Heroicons outline, or a duotone medical set). One weight, teal or navy. Icons sit in **rounded tinted tiles** (teal-500/10 bg) or navy tiles with teal glyphs. Never decorative clutter. ### 4.5 Imagery direction (critical) - **Yes:** Dar es Salaam skyline & coast, Tanzanian landscape → modern city, sophisticated architecture, boardrooms/handshake-free professional interiors, abstract "connection/network" motifs, a beautifully rendered **Tanzania map** (with East Africa context), conference/expo halls, subtle document/precision still-lifes. - **No:** stock pills/blister packs/lab vials as decoration, generic smiling-doctor-with-stethoscope, patients, hospital wards, anything that reads "pharmacy catalogue" or "clinic". - **Treatment:** duotone-navy or gentle teal-graded overlays on hero photos for text legibility and brand cohesion; large rounded frames; occasional overlapping two-image compositions (a ProHealth about-section staple). - Placeholder photography already generated lives in `database/seeders/assets/site/`; the CMS lets the client replace all of it. ### 4.6 Motion Subtle, purposeful: fade/slide-up on scroll (AOS-style, 400–600ms, small offset), count-up on stat band, gentle card hover-lift (−2px + shadow), smooth dropdowns. **No parallax overload, no autoplaying carousels that distract, no bounce.** Respect `prefers-reduced-motion`. --- ## 5. Global chrome ### 5.1 Header (two-tier, ProHealth-style) - **Top utility bar** (slim, navy or teal, hidden on small mobile): left = "Dar es Salaam · United Kingdom"; right = email `info@medisafesuppliers.co.tz` + LinkedIn icon. Optional office-hours. - **Main bar** (white, sticky, subtle shadow on scroll): logo left; primary nav center; a prominent pill CTA **"Let's Talk"** (navy) right; hamburger on mobile. - **Nav (mega-dropdowns):** `WHO WE ARE · WHAT WE DO · SECTORS · WHY TANZANIA · TEAM · INSIGHTS · CONTACT`. "What We Do" opens a **2-column mega-menu** with small icons + one-line descriptions (Regulatory, Market Access, Our Approach, Regulatory & Compliance, Commercial Development, Strategic Partnerships, Public Healthcare Sector, Healthcare Network, Investors & Manufacturing). "Who We Are" dropdown: Who We Are, Why Partner With Us, Our Values. Logo returns Home. "Partners" appears only when enabled. - **Mobile:** full-screen or slide-in panel, accordion sub-menus, sticky "Let's Talk" at bottom. ### 5.2 Footer - Pre-footer **CTA band** (navy): "Ready to Explore Tanzania?" + "Discuss Your Tanzania Opportunity" button. - Footer (navy-950): 4 columns — brand + address + email + socials; Company; What We Do; Explore. Optional slim newsletter/"Subscribe to Insights" field. Bottom bar: © + Privacy Policy + Terms. --- ## 6. Reusable section components (the kit) Design each as a standalone, responsive block. Pages are assembled from these. 1. **Hero – Imagery** (home): full-bleed Tanzania photo + navy gradient; eyebrow, H1, lead, two CTAs; floating **card** (mini "Request a Consultation" form *or* Tanzania-map + key facts) overlapping bottom-right. 2. **Hero – Interior**: compact photo band with gradient, breadcrumb, eyebrow, H1, subheading. (All non-home pages.) 3. **Feature strip (3–4 USP cards)**: icon tile + title + one line; sits overlapping the hero base (ProHealth signature). 4. **About split**: overlapping two-image composition + "experience/positioning" badge, eyebrow, H2, paragraphs, checklist, CTA. 5. **Service/Capability grid**: 3-col icon cards, hover-lift, "Key capabilities" checklist, link. 6. **Stat / signal band**: dark or image bg, 3–4 count-up figures with labels (see §9 rules). 7. **Why-choose split**: image one side; checklist or numbered reasons the other (6 "Why Partner" reasons). 8. **Process timeline**: horizontal (desktop) / vertical (mobile) numbered steps 01–06 with connectors. 9. **Sectors tiles**: 6 clickable category tiles with icon + hover state → detail pages. 10. **People grid**: team cards, photo, name, role, hover reveal socials → profile. 11. **Credibility / network band**: ORCI + Dental Expo as feature cards or a logo/trust strip; "trusted collaborations". 12. **Insights grid**: 3 cards image/category/date/excerpt + "View all". 13. **CTA band**: full-width accent (navy or teal), headline + button; used between sections. 14. **Contact block**: form card + details card + map. 15. **Logo marquee** (Partners, when enabled): grayscale→colour on hover, slider or grid. 16. **Downloads/resource cards**: PDF cards (Company Profile, TMDA Compendium, Dental Expo brochure). Each component spec should define: desktop + mobile layout, spacing, the token colours used, hover/focus states, and the empty/loading state (CMS-driven, so content may be sparse at launch). --- ## 7. Page blueprints (section order per page) Content/copy already exists (see the master content and the CMS). Design each page as this stack of §6 components. **Home** — Hero-Imagery → Feature strip (4 USPs) → About split (Who We Are) → Capability grid (Core Capabilities) → Stat/signal band → Why-Tanzania teaser split (map) → Process timeline (Our Approach preview) → Credibility band (Network) → Insights grid → CTA band → Footer. **Who We Are** — Interior hero → About split (Our Story) → three "Purpose / Strategic Role" editorial blocks → Values preview → CTA. **What We Do** — Interior hero → intro → Capability grid (5, expanded with key capabilities) → Process timeline link → CTA. **Market Access** — Interior hero → intro lead → 5 stage blocks (Intelligence, Assessment, Entry Strategy, Development, Partnership) as alternating splits or numbered cards → closing statement → CTA. **Our Approach** — Interior hero → Process timeline (01–06, prominent) → Partnership philosophy band (dark) → CTA. **Regulatory & Compliance** — Interior hero → intro → support checklist (2-col) → **TMDA download panel** (sticky, prominent) → CTA. **Commercial Development / Strategic Partnerships / Investors & Manufacturing / Public Healthcare Sector** — Interior hero → intro → checklist/areas grid → supporting narrative → CTA. (Consistent "service detail" template.) **Why Tanzania** — Interior hero (savanna→city) → intro + **Tanzania map** feature → 3 pillar cards (Growing Market · Regional Position · Long-Term) → optional signal band → closing + CTA. **Sectors We Serve** — Interior hero → 6 sector tiles → CTA. **Sector detail** — hero → body → "other sectors" sidebar → CTA. **Healthcare Network** — Interior hero → intro → ORCI + Dental Expo feature cards (event details, brochure download, external link) → CTA. **Detail** pages per collaboration. **Why Partner With Us** — Interior hero → 6 reason cards/split → closing → CTA. **Leadership & Team** — Interior hero → Leadership grid → Team grid → CTA. **Profile** — hero → photo + bio + experience + qualifications + socials → CTA. **Our Values** — Interior hero → 6 value cards → CTA. **Insights** — Interior hero → filter (by category, optional) → cards grid + pagination. **Article** — hero (title/category/date) → featured image → body → related. **Contact** — Interior hero → form card + details card + Google map → footer CTA. **Downloads** — hero → resource cards. **Legal (Privacy / Terms)** — hero → rich text. --- ## 8. Component states & interaction detail - **Buttons:** primary (navy pill), secondary (teal pill), ghost (bordered), light (on-dark). Hover = darken + slight lift; focus-visible = 2px teal ring. Always an arrow on forward CTAs. - **Cards:** rest → hover lift (−2px) + `soft` shadow + teal accent hint. Whole card clickable where it links. - **Forms:** rounded inputs, teal focus ring, inline validation, honeypot, success state (already implemented server-side). Contact form fields: Name*, Organisation, Country, Email*, Area of Interest (select), Message*. - **Dropdowns/menus:** fade + 4px translate; keyboard accessible; `focus-within` support. - **Empty states:** every CMS-driven grid needs a graceful "coming soon" (Team, Insights, Partners, Downloads). --- ## 9. Data-honesty rules for the stat/signal band ProHealth uses hard patient/stat numbers. **Medisafe must not invent statistics.** For the signal band, use either: - **Qualitative signal chips** (safe): "East Africa's evolving healthcare market", "Public & private sector access", "Local presence · Dar es Salaam & UK", "Long-term partnership model"; or - **Sourced figures only** if the client supplies them (population, insurance coverage, market growth) — with a citation line. Until then, design the band to work **without numeric counters** (icon + label tiles), with an optional count-up variant the client can populate later in the CMS. --- ## 10. Responsive & accessibility - Breakpoints: ≥1280 / 1024 / 768 / <640. Mobile-first; every component defined at each. - Touch targets ≥44px; nav collapses to accordion; heroes reduce height and stack; grids 3→2→1. - WCAG 2.1 AA: contrast, visible focus, semantic landmarks, alt text on all imagery, labelled form fields, `prefers-reduced-motion`, skip-link (present). - No horizontal scroll; wide tables/diagrams scroll inside their own container. --- ## 11. Performance & SEO (design constraints) - Hero and section images: served responsive (`srcset`), lazy-loaded below the fold, compressed (<300KB target each), modern format (WebP/AVIF) with fallback. - Limit web fonts to 2 families / ≤4 weights, self-hosted. - Keep CSS/JS lean; motion via CSS/light Alpine. Target Lighthouse ≥90 mobile. - Preserve existing per-page ``/meta, Open Graph, JSON-LD, sitemap; new visuals must not remove the semantic heading order. --- ## 12. Build integration notes (so the design maps to the real site) The site is **Laravel 13 + Blade + Tailwind v4 + Alpine**, admin via **Filament v5**. Design should be delivered as **component specs / HTML+Tailwind** that translate 1:1 to the existing Blade components: - Global: `resources/views/components/site/header.blade.php`, `.../footer.blade.php`, `.../layout.blade.php`. - Kit: `resources/views/components/ui/*` (hero, page-hero, section-heading, button, icon, tanzania-map) and `components/cards/*`. - Pages: `resources/views/pages/*`. - Everything content-bearing is **CMS-driven** (Pages + sections, Services, Sectors, Approach Steps, Values, Team, Insights, Network, Documents, Partners, Site Settings). Designs must accommodate variable content lengths and optional images. Deliver tokens as Tailwind theme values (`@theme` in `resources/css/app.css`). Keep class names/utilities; don't introduce a second CSS framework. --- ## 13. Deliverables (what the design output should include) 1. **Design system sheet:** colour tokens, type scale, spacing, radius, shadow, buttons, form fields, iconography, imagery rules. 2. **Global chrome:** header (two-tier + mega-menu + mobile), footer (+ pre-footer CTA). 3. **Component kit:** the 16 §6 sections, each with desktop + mobile + states. 4. **Page comps:** all pages in §7 (at minimum Home, Who We Are, What We Do, Market Access, Why Tanzania, Our Approach, Sectors + detail, Team + profile, Insights + article, Regulatory, Contact). 5. **Responsive views:** mobile for Home + Contact at minimum. 6. Handoff as HTML/Tailwind (preferred) or Figma-style component notes. ## 14. Acceptance criteria ("done" looks like) - Side-by-side, the Home page reads as a **premium ProHealth-class healthcare site** (imagery-forward hero, USP strip, sectioned rhythm, stat/signal band, process, team, insights, strong CTAs) — clearly richer than the current flat build. - Palette is Navy/Teal/Soft-Grey/White; type is one of the two approved directions; imagery follows §4.5 (no clinic/pharma-catalogue). - Fully responsive, AA-accessible, Lighthouse ≥90 mobile. - Every section maps to an existing CMS field so the client can edit it. - Feels "settled and professional, not busy" — passes the SPIMACO/Intas/Sartorius credibility bar. --- ## 15. Condensed prompt (paste this into the design tool) > Design a **premium, ProHealth-inspired healthcare-advisory website** for **Medisafe Suppliers Limited**, a Tanzania-based B2B firm helping international healthcare companies enter and grow in Tanzania (market access, regulatory/TMDA, commercial development, strategic partnerships). Audience: global pharma/biotech/medtech, investors, hospitals, regulators — must look internationally credible (reviewers include SPIMACO, Intas, Sartorius). > > **Look & feel:** modern medical-template layout language (ProHealth ThemeForest 47850718) — imagery-forward full-bleed hero with a floating card, USP icon strip, alternating white/soft-grey/navy sectioned rhythm, service/capability icon-card grids, a stat/signal band, "why choose us" split with checklist, numbered process timeline, team grid, credibility/collaboration band, insights grid, and strong full-width CTA bands — but **restrained and premium**, "settled, not busy". > > **Brand:** Navy `#0b1c34`, Teal `#17949c`, Soft-grey `#f7f8fa`, White. Headings **Plus Jakarta Sans** (or Fraunces for an editorial feel), body **Inter**. Large rounded cards (16–24px), pill buttons, subtle card-lift + fade-up-on-scroll motion, generous white space (96–128px sections). Icons in rounded tinted tiles. > > **Imagery:** Dar es Salaam skyline/coast, Tanzanian landscape→modern city, sophisticated boardrooms, a beautiful Tanzania map with East-Africa context, conference halls, connection motifs — with navy/teal gradient overlays. **Never** pills/vials/blister packs, smiling-doctor stock, patients, or hospital wards. > > **Do not invent statistics** — use qualitative signal chips unless real figures are provided. > > **Deliver:** design system → header/footer → reusable section components → page comps for Home, Who We Are, What We Do, Market Access, Why Tanzania, Our Approach, Sectors (+detail), Team (+profile), Insights (+article), Regulatory & Compliance, Contact — desktop + mobile, WCAG AA, as HTML + Tailwind that maps to Blade components. Pages: Home = Hero → 4 USP cards → About split → Capability grid → signal band → Why-Tanzania map teaser → Process 01–06 → Network credibility → Insights → CTA → footer.