A Nigerian-rooted UI design system with mud-brick radii, inner shadows, pillar accents, 70+ SVG icons, and 20+ zero-dependency components.
Akoti is a design token system and component library built for African software. It encodes Nigerian cultural identity into a reusable system that runs across every product we build. It is not a CSS framework — it sits on top of whatever you already use (Tailwind, daisyUI, Bootstrap). Add four CSS files to transform your app. Remove them to revert instantly.
Mud-brick radii. Asymmetric border radii (20px 6px 20px 6px) inspired by traditional architecture. On hover, they flip. The interface breathes.
Inner shadows. Elements feel engraved into the surface — like carved wood or stamped clay. Not floating above it.
Pillar accents. Active states get a left border pillar, evoking Yoruba compound doorways. Sidebar nav, table rows, form sections — one consistent cultural pattern.
Earth-tone palette. Brown for earth. Green for vegetation. Orange for laterite soil. The colours of a palm plantation in Oyo State.
See the design language in action: Mud-brick radius demo · CSS-first components · Dropdown + Date Picker
Most components use zero JavaScript: <details name> for accordions, <dialog> for modals, radio :checked for tabs, @starting-style for animations. JavaScript is added only when there is no CSS alternative.
Zero-dependency. Framework-agnostic. No build step. Copy CSS + JS files and go. Works with Django, React, Vue, plain HTML, HTMX, Alpine.js. Complete Django and Node.js integration examples in every source file.
Read the full story: Introducing Akoti