Itunda Indigo
#7472F4 is the semantic brand accent used across the current product experience. The primitive palette remains independently documented.
IDS is the shared visual language for Itunda across web, Android and iOS — tokens, components, motion and accessibility built around one product experience.
Itunda keeps the product identity consistent while allowing each platform to behave naturally. Consumer, Business and developer experiences share the same foundations instead of becoming separate visual products.
#7472F4 is the semantic brand accent used across the current product experience. The primitive palette remains independently documented.
Every screen should make the next useful action obvious. Complexity belongs in the system, not in the user's mental model.
Color, type, shape, motion and semantic states are named so new surfaces can reuse the same decisions instead of recreating them.
These are the reusable interaction primitives that turn the token layer into product UI. The examples below are deliberately small: a component should expose one clear purpose.
Primary actions carry the brand. Secondary actions stay quiet.
Clear labels, generous touch targets, minimal chrome.
Rows prioritize recognition before metadata.
default · pressed · disabled · loading · success · errorA complete interface is more than buttons. IDS defines recurring patterns for navigation, content, forms, feedback and transient surfaces so product teams can compose familiar experiences.
Use tabs for peer destinations and navigation for moving between product areas. Selection is always visible.
Transient surfaces keep the current context visible and make dismissal predictable.
Feedback is semantic, concise and attached to the action or state it explains.
Inputs expose label, focus and validation state without relying on color alone.
Cards group related information; list rows optimize for quick recognition and scanning.
Every asynchronous surface needs an intentional state, not a blank screen.
New activity will appear here.
The canonical token package lives in packages/design-tokens. Platform-specific semantic layers consume the same brand decisions while preserving native accessibility behavior.
#7472F4#5C55D8#F0EFFF#191F28#F2F4F6The system uses a small semantic scale rather than arbitrary sizes. Large moments are reserved for product statements; body text stays calm and readable.
IDS uses shared timing curves so interactions feel related across surfaces. Scroll reveals, cards, navigation and transitions should communicate state rather than decorate it.
Default for elements entering or settling into place.
cubic-bezier(.25,.1,.25,1)For larger product moments and cinematic entrances.
cubic-bezier(.16,1,.3,1)For ordinary state changes where speed and restraint matter.
cubic-bezier(.6,0,0,.6)Every major animation must degrade gracefully when the user requests reduced motion.
prefers-reduced-motion: reduceExplain why a surface matters before asking someone to act.
The primary action should be recognizable without requiring a manual.
Keep the complete journey in view instead of optimizing isolated screens.
Add capability when it creates meaningful value; otherwise keep the surface quiet.
The design system is not a gallery. It is a source of implementation decisions shared by Android, iOS and web.
// canonical source packages/design-tokens/ tokens.json tokens.css generate-tokens.js // platform consumers android/core/designsystem/ ios/Core/DesignSystem/ client/ business/ // example semantic token --itunda-indigo: #7472F4; --itunda-radius-md: 16px; --itunda-ease-expo: cubic-bezier(.16,1,.3,1);
The source lives with the product so changes can be reviewed, reused and improved instead of becoming a private design artifact.