AfricaOne Experience Kit
Build clear, warm and responsive interfaces that feel at home in AfricaOne.
Visual language
AfricaOne uses warm surfaces, terracotta actions, a gold accent, restrained layered shadows and legible typography. Use depth to clarify hierarchy and keep the player's task visible. Avoid introducing a separate visual identity for each city or experience.
Current light-theme color roles provide a starting reference:
| Role | Color | Use |
|---|---|---|
| Background | #faf3e6 |
Page foundation |
| Surface |
#fffaf1
|
Primary panels |
| Text |
#1d1611
|
Body copy and headings |
| Muted text |
#5c4a3c
|
Supporting explanation |
| Primary |
#b03d18
|
Main action |
| On primary |
#ffffff
|
Text on the primary action |
| Accent |
#f2a93b
|
Restrained emphasis |
| Focus |
#1f3a68
|
Visible keyboard focus |
These values describe the current theme, not an independent theme package or an accessibility guarantee. Check the actual foreground/background combination, including gradients, overlays, disabled states and dark mode. Preserve readable Arabic and other supported scripts with appropriate font fallbacks.
Component behavior
| Pattern | Expected behavior |
|---|---|
| Primary action | One clear next step; truthful busy state; protected against duplicate submission |
| Form field | Visible label, useful validation and preserved input on recoverable failure |
| Selection chip | Understandable selection state and a keyboard-operable action |
| Consent panel | Equally usable accept/reject choices and accessible details |
| Notice | Clear status in text; no reliance on color alone |
| Loading state | Real progress where known; recoverable timeout where needed |
| Record status | Distinct self-declared, saved, verified, completed and paid meanings |
A “verified” label must describe a specific completed verification. Selecting a skill does not establish a professional qualification; preserving a record does not establish that work was completed or paid.
Small screens and accessibility
Design for 320 CSS pixels through desktop widths. Let text reflow and keep primary actions visible. Make scrollable content reachable by keyboard, label controls, preserve a logical focus order, and show visible focus. Aim for generous phone touch targets, generally 44 by 44 CSS pixels, with adequate spacing.
Support text enlargement, reduced motion and meaningful RTL layouts. Test with keyboard and screen readers. Automated checks help find defects, but do not replace manual testing or establish full conformance on their own.
Performance and the world
Keep essential forms and decisions usable outside the 3D canvas. Use lightweight HTML controls for account, consent and agreement actions. Avoid repeated expensive blur, unnecessary animation libraries and effects that compete with gameplay.
The in-world interface needs a separate legibility and performance review over real scenes. Do not assume a design that works on a document page is safe over a moving world.
Evidence before release
Capture the states a player will actually see, on the viewports and devices you test. Record limitations honestly. Do not claim a performance target, accessibility standard or verification result has been achieved without supporting evidence.
Continue with planning your first experience or return to the developer preview.