Francisca Adjoa Akoto is a Ghanaian educator, IB PYP Facilitator, published author, and Top 10 Samira Bawumia Literature Prize finalist based in Accra. She needed a website that served as her identity as a teacher, her work as a writer, her IB credentials, and a foundation for future digital products.
faakoto.com is a multi-page personal brand site with a custom comment system, post reactions, and a moderation dashboard.
The brief
Francisca came to us with a clear sense of what she needed but no strong opinions on how it should look.
The site needed to serve multiple audiences: readers of her writing, schools and institutions looking at her IB PYP credentials, and a future audience for digital products and services.
Design
Process
Getting the design right took three tries.
Attempt 1: Kente-inspired. Gold, deep red, forest green. Kente stripe dividers. Bold, cultural. Rejected. Kente motifs as literal UI decoration felt costumey.
Attempt 2: Editorial minimalism. Earthy neutrals, Cormorant Garamond, split-screen hero. Clean, serious, literary. Closer. The editorial tone did not fit.
Attempt 3: The breakthrough. Sticky papers on a teacher’s board, colourful notes pinned across a surface, became the visual reference. Design Gal Studio’s website was a useful reference for executing it. We sent an iteration to Francisca. She liked the direction but scrapped the colour scheme for pastel. The final palette: warm cream backgrounds, navy text, rounded pastel cards, pill-shaped navigation.
System
Colour. Warm cream page background. Navy for text and interactive elements. Five pastel accents: pink, soft yellow, orange, lavender, peach.
Typography. Nunito at 900 weight for headings. Lora serif italic for body prose.
Layout patterns. Rounded cards (24px radius) as the primary unit. Pill-shaped buttons and navigation. Scroll-reveal animations via IntersectionObserver.
Every page follows the same system.
The pages
Homepage: Giant name in Nunito 900. Author photo card. Tagline. Book section, writing preview, services placeholder, and a full-width orange contact footer.
Blog: Category filter pills. Three-column card grid. Newsletter signup with animated success state.
Blog post: Reading progress bar, Lora serif prose, pull quotes, highlight boxes, sticky sidebar with live table of contents. Post reactions, threaded comments, and share buttons below the article.
Portfolio: Pinterest-style masonry grid using native CSS columns. Infinite scroll via IntersectionObserver sentinel. Single filter row. Lightbox on click.
About: Bio, mission and vision, philosophy on education, tabbed CV timeline, and core values in a 4-column grid.
Community features
Rather than use a third-party tool like Disqus, we built the comment system from scratch.
Post reactions. Four emoji reactions sit at the end of every article: Loved it, Insightful, Grateful, Clapping. Toggle on and off with a live count.
Threaded comments. Top-level comments with inline reply threads. Each comment shows the commenter’s chosen emoji avatar, name, a relative timestamp, and a like count. Every comment and reply can be liked independently with a small heart bounce animation on click.
Author verified badge. When Francisca replies, her comment uses a navy background, orange border, and an orange AUTHOR badge.
Avatar picker. A grid of 20 emoji options. Choosing an avatar before commenting personalises the section.
Post-submit. Confetti rains down. The page scrolls to the new comment. It briefly flashes yellow before fading back to white. The submit button shakes on empty fields.
Moderation
Moderation uses a triage workflow with three tabs: Pending, Replied, and Total. On login, Francisca sees Pending first. Each comment card has two actions: Reply or Ignore. Ignored comments move to Total.
Early iterations had coloured stat cards and split-panel layouts. Each round stripped something back. The final version uses white cards on a cream background, orange as the only accent. Tab labels carry counts. The content is what she reads. The UI stays out of the way.
Technical decisions
The site is built in React. Styles are plain CSS strings injected per component. A single colour object at the top of each file keeps the palette consistent. Scroll animations use IntersectionObserver. The portfolio masonry layout uses CSS columns. The reading progress bar is a scroll listener updating a width percentage. Infinite scroll watches a sentinel element.
The comment system and admin panel run on a Postgres + Express backend on our existing VPS infrastructure.
The site is live at faakoto.com.
Share this case study
