Guidelines

Rules and principles for using the mukoko brand system consistently across all applications.

Wordmark Standards

All brand names are always lowercase. This is a core identity rule.

Correct

mukoko

nyuchi

shamwari

bundu

nhimbe

Incorrect

Mukoko

NYUCHI

Shamwari

BUNDU

Nhimbe

Mineral Strip

The signature 4px stripe using all five mineral colors. Used as a brand identity marker on cards, headers, and feature sections.

Left edge accent

The mineral strip is always vertical, always on the left edge. Used on cards, sidebars, page borders, and brand elements.

Typography

Noto Sans

All body text, UI labels

Broad language support including African languages and diacritics

Noto Serif

Page titles, hero text, display headings

Elegant display type with matching language coverage

JetBrains Mono

Code blocks, terminal output, technical content

Purpose-built for developer readability

Type Scale

Display

72px / 4.5rem

Noto SerifWeight 700·Hero headlines, landing pages

48px / 3rem

Noto SerifWeight 700·Page titles

36px / 2.25rem

Noto SerifWeight 600·Section headings

30px / 1.875rem

Noto SerifWeight 600·Sub-section headings

24px / 1.5rem

Noto SansWeight 600·Card titles, group headings

20px / 1.25rem

Noto SansWeight 600·Small headings

Body Large

18px / 1.125rem

Noto SansWeight 400·Lead paragraphs

Body

16px / 1rem

Noto SansWeight 400·Default body text

Body Small

14px / 0.875rem

Noto SansWeight 400·Secondary text, descriptions

Caption

12px / 0.75rem

Noto SansWeight 400·Labels, metadata, timestamps

Code

14px / 0.875rem

JetBrains MonoWeight 400·Code blocks, terminal output

Spacing Scale

Consistent spacing tokens used across all components and layouts.

4pxTight gaps, icon padding

8pxCompact spacing, inline gaps

12pxDefault component padding

base

16pxStandard spacing

24pxSection padding, card gaps

32pxPage margins, large gaps

2xl

48pxSection margins

3xl

64pxPage section spacing

Border Radius

All radii derive from a base value of 0.75rem (12px).

--radius-base0.75rem (12px)

--radius-smcalc(var(--radius) - 4px) — 8px

--radius-mdcalc(var(--radius) - 2px) — 10px

--radius-lgvar(--radius) — 12px

--radius-xlcalc(var(--radius) + 4px) — 16px

--radius-2xlcalc(var(--radius) + 8px) — 20px

--radius-3xlcalc(var(--radius) + 12px) — 24px

--radius-4xlcalc(var(--radius) + 16px) — 28px

--radius-full9999px — pills/avatars

Accessibility

APCA 3.0 AAA

Advanced Perceptual Contrast Algorithm for superior readability across all mineral colors

48px Touch Targets

All interactive elements must be at least 48px in both dimensions.

Focus Indicators

2px ring with ring-offset-2, using --ring token

Keyboard Navigation

Full keyboard support via Radix UI primitives

Screen Readers

Semantic HTML with ARIA attributes where needed

Voice & Tone

Principles

Speak like a knowledgeable friend, not a corporation
Use simple, clear language — avoid jargon
Be warm and encouraging, never condescending
Respect African cultural context and diversity
Prefer active voice and direct address

Do

Use lowercase for all brand wordmarks (mukoko, nyuchi, shamwari, bundu, nhimbe)
Reference African origins and meanings when contextually appropriate
Write in a way that welcomes both technical and non-technical readers
Use inclusive language that reflects Ubuntu philosophy

Don’t

Don't capitalize brand wordmarks (not Mukoko, not NYUCHI)
Don't use overly formal or corporate language
Don't assume Western-centric cultural references
Don't use jargon without explanation