@kwacha-kulture/savanna-css

Savanna, the proudly-African design system — framework-free. A class-based CSS layer, a dependency-free behaviour script, and the real African motifs (Adinkra, Kente, Bogolan, the Kwacha mark) as inline-SVG. Use it in React, Vue, Svelte, Astro, WordPress — or plain HTML.

Dark-first, cinematic: Kente-striped buttons & cards, gold-edged inputs, conic-ring avatars, woven motif surfaces, scroll reveals, count-ups, a cart drawer, cross-page search, and more — all vanilla.

Plain HTML

<link rel="stylesheet" href="https://unpkg.com/@kwacha-kulture/savanna-css/dist/savanna.css">
<button class="sv-btn sv-btn-primary">Get started</button>
<script src="https://unpkg.com/@kwacha-kulture/savanna-css/dist/savanna.js"></script>

Any bundler (React / Vue / Svelte / Astro)

import '@kwacha-kulture/savanna-css/savanna.css';
import { initBehaviors, adinkra, mark } from '@kwacha-kulture/savanna-css';

initBehaviors();                     // wire nav, theme toggle, cart, search, forms, reveals…
document.querySelector('#logo').innerHTML = mark(40);
document.querySelector('#glyph').innerHTML = adinkra('sankofa', 48);

What's inside

• savanna.css — the full component + motif stylesheet (sv-* classes).
• savanna.js — the interactions (mobile nav, light/dark, dropdowns, cart drawer, accordions, tabs, filters, cross-page search overlay, forms, scroll reveals + count-ups).
• Motifs — adinkra(name,size), kenteStrip(), bogolan(), mark(), ndebeleBorder(), ADINKRA_NAMES — each returns an SVG string you can drop anywhere.
• SAVANNA_CSS / SAVANNA_JS — the same assets as strings (for SSR / inlining).

Pairs with @kwacha-kulture/savanna-tokens (the design tokens) and @kwacha/ui (React components).

Part of the Savanna design suite by Kwacha Kulture. MIT licensed.