Introducing Akoti: A Design System Rooted in Nigerian Identity
It started with a rejection.
The first version of Akoti was invisible. I had spent days building textile pattern backgrounds, subtle colour shifts, carefully placed Adire motifs. I opened it in the browser and saw... nothing. The patterns were too faint, the colours too muted, the layout too safe. It looked like every other startup UI with a Nigerian flag colour palette pasted on top.
I scrapped it.
The second version swung the other way. Bold patterns everywhere, aggressive shapes, organic blobs that looked more like a Behance concept than a usable interface. The feedback was plain: "This does not feel like software. It feels like decoration."
I scrapped that too.
What Akoti actually is
Akoti is a design token system and component library. It is not a CSS framework — it sits on top of whatever you already use. Tailwind, daisyUI, Bootstrap, or nothing at all. It overrides the visual layer without touching your logic, your templates, or your JavaScript.
The name comes from the Yoruba concept of deliberate craft — the care a weaver puts into adire cloth or a builder puts into a mud-brick wall. That is the intention: software that carries the identity of where it was built.
The design language
Three ideas run through everything in Akoti:
Mud-brick radii. Instead of symmetric rounded corners, every element uses asymmetric border radii: 20px 6px 20px 6px. Nothing in nature is perfectly rounded. On hover, the radii flip. The interface breathes.
Inner shadows. Material Design floats elements above the surface with drop shadows. Akoti does the opposite — elements feel engraved into the surface, like carved wood or stamped clay.
Pillar accents. Active states get a left border — a pillar. It evokes the carved doorways of traditional Yoruba compounds. In a sidebar, the active page has a brown pillar. In a table, the hovered row gets one.
The palette
Brown for earth and clay. Green for vegetation and growth. Orange for laterite soil and sunset. These are not arbitrary — they are the colours you see when you stand on a palm plantation in Oyo State. That is where our first client operates, and that is where these colours come from.
CSS-first components
The third version stuck because of a breakthrough: CSS-first components. Accordion using <details>. Modal using <dialog>. Tabs using radio :checked. Zero JavaScript. More beautiful and responsive than the JS versions.
Interactive components
For things that genuinely need interactivity — searchable dropdowns, date pickers, command palettes — we write minimal JavaScript with maximum CSS.
What is in the box
Akoti ships as CSS and JS files. No build step, no npm install. Copy the files, add a link tag:
- Design tokens (colours, radii, shadows, typography)
- 70+ hand-drawn SVG icons
- CSS-first accordion, modal, tabs, toast
- Rich text editor with track changes and signatures
- Document signing engine
- AI chat in four layouts
- Database-connected spreadsheet
- GIS map dashboard tokens
Everything is zero-dependency and framework-agnostic.
Akoti is not finished. It probably never will be. But it is real, it is in production, and it carries our identity. That is all I wanted.