@kwacha-kulture/savanna-tokens

The single source of truth for the Savanna design language — a proudly-African design system (earthy grounds, vibrant Kente accents, dark-only by design). Framework-agnostic, zero dependencies.

Consume the tokens three ways:

JS / TS

import { theme, palette, space, radii, fontFamilies } from '@kwacha-kulture/savanna-tokens';

theme.primary;      // '#E0A91D' (Kente gold)
theme.bg;           // deep ink ground
palette.emerald[500];
space[4];           // '1rem'

CSS variables

import '@kwacha-kulture/savanna-tokens/tokens.css'; // defines --sv-* on :root

.button { background: var(--sv-color-primary); border-radius: var(--sv-radius-md); }

Generate the vars under a custom prefix at build time:

import { css } from '@kwacha-kulture/savanna-tokens';
css('brand'); // ':root { --brand-color-primary: …; }'

W3C Design Tokens (Style Dictionary / Figma / Tailwind)

// @kwacha-kulture/savanna-tokens/tokens.json
{ "color": { "primary": { "$type": "color", "$value": "#E0A91D" } }, … }

import { toTokensJSON } from '@kwacha-kulture/savanna-tokens';

Part of the Savanna design suite by Kwacha Kulture. MIT licensed. It pairs with @kwacha-kulture/savanna-css (framework-free component styles) and @kwacha/ui (React components).