Savanna — the design system

Savanna is layered like MUI: a framework-agnostic core (tokens, CSS, icons, motifs, fonts) plus framework bindings. The core is MIT-licensed and free; the advanced React components are commercial. You only install the packages you need.

Two variable namespaces exist by design, and it's important to know which you're using:

• --tz-* — the React design system. Loaded by @kwacha-kulture/savanna/styles/theme.css and consumed by the @kwacha-kulture/react components (e.g. --tz-bg, --tz-border, --tz-shadow-md).
• --sv-* — the framework-free CSS layer. Loaded by @kwacha-kulture/savanna-css and consumed by the sv-* classes and Web Components (e.g. --sv-gold, --sv-bg).

The @kwacha-kulture/savanna-tokens package is the single source of truth for the raw values behind both, and also emits a tokens.css (--sv-color-*, --sv-radius-*…) and a W3C tokens.json for design tools.

Not on npm: the Savanna Display typeface is licensed separately — download the font kit from Type under a licence that covers it.

Install only what you need. Peer dependencies: the React packages need react and react-dom ≥ 19 and motion ≥ 12; everything else is dependency-free.

npm i @kwacha-kulture/savanna-tokens

npm i @kwacha-kulture/savanna-css

npm i @kwacha-kulture/savanna-elements

npm i @kwacha-kulture/savanna-icons

npm i @kwacha-kulture/savanna

npm i @kwacha-kulture/react

npm i @kwacha-kulture/react-pro

React / Next.js

Install @kwacha-kulture/react, import the stylesheet once (in your root layout / entry), then use components. They are client components — under the Next App Router they carry "use client", so import them into client boundaries.

// app/layout.tsx (or your entry)
import '@kwacha-kulture/react/styles.css';

// any component
import { Button, Card, Field, Input } from '@kwacha-kulture/react';

export function Example() {
  return (
    <Card>
      <Field label="Email"><Input placeholder="you@africa.com" /></Field>
      <Button variant="primary">Continue</Button>
    </Card>
  );
}

For the design language (motifs, brand marks, the --tz-* theme) add @kwacha-kulture/savanna:

import '@kwacha-kulture/savanna/styles/theme.css';
import { KwachaMark } from '@kwacha-kulture/savanna/brand';
import { Sankofa } from '@kwacha-kulture/savanna/motifs';

Pro components need a licence key set once at startup:

import { setLicenseKey, DataGridPro } from '@kwacha-kulture/react-pro';
import '@kwacha-kulture/react-pro/styles.css';

setLicenseKey(process.env.NEXT_PUBLIC_SAVANNA_LICENSE!);

Vue · Svelte · Angular · plain HTML

Use the Web Components + the CSS layer. They work identically everywhere.

import '@kwacha-kulture/savanna-css/savanna.css';
import { defineSavannaElements } from '@kwacha-kulture/savanna-elements';
defineSavannaElements();

// then in any template:
// <sv-button variant="primary">Get started</sv-button>
// <sv-card>…</sv-card>  <sv-badge tone="emerald">Live</sv-badge>

No build step at all? Load from a CDN:

<link rel="stylesheet" href="https://unpkg.com/@kwacha-kulture/savanna-css/dist/savanna.css">
<script type="module">
  import { defineSavannaElements } from 'https://esm.sh/@kwacha-kulture/savanna-elements';
  defineSavannaElements();
</script>
<button class="sv-btn sv-btn-primary">Get started</button>

Design tokens only (Tailwind, Figma, native…)

import { theme, palette, space } from '@kwacha-kulture/savanna-tokens';
// or CSS variables:  import '@kwacha-kulture/savanna-tokens/tokens.css';  // --sv-color-* on :root
// or W3C JSON:       @kwacha-kulture/savanna-tokens/tokens.json  -> Style Dictionary / Figma

Every value is a token. Consume them as JS/TS objects, as CSS variables, or as W3C JSON. The palette carries stops 50 → 900; components read the semantic theme, never raw stops.

Palette

Semantic theme theme.*

Spacing, radii & shadows

Typography scale

Savanna is dark-first by design. Re-branding means overriding a couple of accent variables — no rebuild needed.

Re-colour the CSS layer

/* your stylesheet, loaded AFTER savanna.css */
:root {
  --sv-gold: #C4582E;       /* new accent */
  --sv-gold-soft: #E08A66;
  --sv-emerald: #1F8A48;
}

Prefer no code? Ship the templates' bundled customize.html — pick a preset or your own colours, preview live, and copy the CSS.

Re-colour the React system

Override the --tz-* variables from theme.css, or generate a fresh set from the tokens at build time with css(prefix) from @kwacha-kulture/savanna-tokens.

The CSS layer also supports a light theme on demand: set data-theme="light" on the <html> element (the bundled data-theme-toggle does this and persists it).

Three typefaces, bound to CSS variables so you can swap them:

Loading options: (1) next/font in a React app, binding --font-display / --font-body / --font-mono; (2) the Google-Fonts <link> that @kwacha-kulture/savanna-css exports as FONT_LINK; or (3) self-host and point the variables at your files. A system fallback stack means everything still renders offline.

import { FONT_LINK } from '@kwacha-kulture/savanna-css';
// FONT_LINK is a <link> string for Sora + DM Sans + JetBrains Mono.

A bespoke display face, Savanna Display, is sold separately (woff2/woff/ttf/otf) — it's a drop-in for the --sv-display / --font-display slot.

Import savanna.css and compose with sv-* classes — in any framework or plain HTML. Theming variables are listed under Theming.

Theming variables

The CSS layer ships a dependency-free behaviour script. In a bundler call initBehaviors() once; in plain HTML include savanna.js. Then wire interactions declaratively with data-* attributes:

import { initBehaviors } from '@kwacha-kulture/savanna-css';
initBehaviors(); // idempotent; no-op on the server

Real Adinkra glyphs, woven Kente, Bogolan mudcloth, Ndebele borders, and the Kwacha brand mark — available three ways.

As SVG-string builders (any framework)

import { adinkra, mark, kenteStrip, bogolan, ndebeleBorder, ADINKRA_NAMES } from '@kwacha-kulture/savanna-css';

el.innerHTML = adinkra('sankofa', 48);   // returns an <svg> string
el.innerHTML = mark(40);                 // the Kwacha roundel
// ADINKRA_NAMES -> ["sankofa","gyenyame","akoma","dwennimmen","nyamedua","eban"]

As React components

import { Sankofa, GyeNyame, KenteStrip, BogolanStamp } from '@kwacha-kulture/savanna/motifs';
import { KwachaMark, KwachaWordmark, KwachaLogo } from '@kwacha-kulture/savanna/brand';

<Sankofa size={48} /> <KwachaMark size={40} />

As Web Components

<sv-adinkra name="sankofa" size="48"></sv-adinkra>
<sv-mark size="40"></sv-mark>

318 Adinkra, Ndebele and UI glyphs — as tree-shakeable React components and raw SVG, with a typed registry.

import { Icon, IconSankofa, svgString } from '@kwacha-kulture/savanna-icons';

<Icon name="sankofa" size={24} />   // by name
<IconSankofa size={24} />           // named component
svgString('sankofa', 24);           // raw SVG string — usable anywhere

// browse / filter:
import { iconRegistry, ICON_CATEGORIES, ICON_COUNT } from '@kwacha-kulture/savanna-icons/registry';

free 49 free (MIT, in @kwacha-kulture/react) · pro 30 pro · premium 12 premium (both in the commercial @kwacha-kulture/react-pro). Every component below is a complete reference; open the live gallery for interactive demos and copyable code.

Example usage

import { Button } from '@kwacha-kulture/react';

<Button variant="primary">Continue</Button>

Native custom elements built on the CSS layer, encapsulated with a shadow root and the Savanna stylesheet adopted — drop-in for Vue, Svelte, Angular, Solid or plain HTML.

import { defineSavannaElements } from '@kwacha-kulture/savanna-elements';
defineSavannaElements();  // registers every element (idempotent, SSR-safe)

• Keyboard-navigable components with visible focus rings (--sv-line-strong / --tz-focus-ring).
• Motion respects prefers-reduced-motion — reveals, count-ups, ken-burns and the generative canvas fall back to static.
• Dark-mode contrast is tuned to meet WCAG AA on text; the accent is intentional against the deep ground.
• Semantic landmarks (<header>, <nav>, <main>, <footer>) and ARIA labels on icon-only controls.
• Audio never autoplays and always exposes a mute; images are lazy-loaded.

A hero with the generative canvas (CSS layer)

<section class="sv-hero sv-kente-bg">
  <canvas class="sv-hero-canvas" data-kente-canvas></canvas>
  <div class="sv-container">
    <p class="sv-eyebrow">Proudly African</p>
    <h1>Build the continent's <span class="sv-gold">next great thing.</span></h1>
    <a class="sv-btn sv-btn-lg sv-btn-primary" href="#">Get started</a>
  </div>
</section>

A form (React)

import { Field, Input, Textarea, Button } from '@kwacha-kulture/react';

<form>
  <Field label="Name"><Input placeholder="Amara Okafor" /></Field>
  <Field label="Message" hint="We reply within a day"><Textarea rows={4} /></Field>
  <Button variant="primary">Send</Button>
</form>

Packages follow semver and version independently. The core (tokens, css, elements, icons, savanna, react) is MIT. @kwacha-kulture/react-pro is commercial — it installs from public npm but requires a paid licence (call setLicenseKey()); see its LICENSE.

Questions, licences and the Savanna Display font: savanna.venanciogomani.net. Source: GitHub.