Color roles
Four roles are enough for most surfaces. Semantic success and error colors appear only when their meaning is required.
Brand
#7472F4
#7472F4
Strong
#625FE0
#625FE0
Soft
#F0EFFF
#F0EFFF
Neutral
surface
surface
ITUNDA DESIGN SYSTEM
Clear by design.
Quiet by default.
One visual language for Itunda products: strong hierarchy, restrained color, predictable spacing and components that explain their state without visual noise.
01 · Principles
Let content create the hierarchy.
Color and decoration are supporting tools. Structure comes first, so users can scan, understand and act quickly.
One core messageMake the purpose obvious before presenting controls.
Indigo is an accentReserve #7472F4 for brand, primary actions and selected states.
Neutrals carry the UIUse surfaces, type and separators to create most of the visual structure.
02 · Foundations
Small tokens. Consistent results.
The same decisions repeat across web, Android and iOS without turning every screen into a collection of colored cards.
Typography
Large type is for important moments. Body text remains compact and readable.
RWF 248,000
Display56–82 / 700
Heading32–40 / 700
Body16–20 / 400
Caption12–14 / 400
Spacing
Use a simple 4px rhythm. Larger gaps separate ideas rather than decorating containers.
4 · micro
8 · control
12 · inline
16 · content
24 · group
32 · major group
Surfaces
Prefer open space and separators. Add a surface only when it improves grouping or interaction.
Quiet surface
A subtle background separates content without creating another visual object.
03 · Components
Show the component, not the decoration.
Examples stay close to production behavior and make the primary action obvious.
Actions
One primary action. Secondary actions stay quiet.
Form field
Labels and supporting text explain the task without adding noise.
Used to identify your Itunda account.
States
Every important component has a clear default, loading, disabled and error state.
DefaultReady for interaction.
LoadingProgress without layout jump.
ErrorExplain the problem and recovery.
04 · Product language
Quiet surfaces. Strong decisions.
Itunda Indigo should guide attention, not color every surface.
NEIGHBORHOOD MARKETPLACE
Find what you need nearby.
Clear context first. One primary action next. Supporting choices remain available but visually quiet.