Design System
.png)
ImmigrAid’s design system transforms complex immigration processes into clear, structured digital experiences.
Built for multilingual accessibility and scalability, it ensures consistency and clarity across every interaction.
Color Tokens
ImmigrAid’s color system is inspired by Sweden’s national identity.
Blue builds trust and stability, yellow signals guidance and progress, and neutral tones keep complex information clear and structured.
Colors/Primary/Primary500 #4889B7
Colors/secondary /secondary 500 #F4B13D
Colors/Neutral/Neutral500 #303A3A
Blue reflects stability and trust, inspired by Sweden’s national identity and institutional clarity.
Yellow draws from the Swedish flag to symbolize guidance, opportunity, and forward movement.
Neutral tones structure complex immigration information without overwhelming users.
High contrast combinations ensure accessibility for multilingual users navigating bureaucratic content.
Typography System
ImmigrAid’s typography emphasizes clarity, hierarchy, and readability to simplify complex immigration content.
Token / Font/ Size weight
Headline/ H1 / 32 M
Components are designed as reusable patterns to support structured immigration flows. From navigation to checklist cards, each element maintains clarity and consistency across complex, multi-step processes.
Component System & UI Patterns
.png)
Icon
The icon combines elements of support and guidance, reflecting ImmigrAid’s mission to help newcomers navigate their settlement journey in Sweden.
.png)
Button
Buttons are designed to guide users confidently through structured immigration steps. Clear hierarchy and feedback states reduce uncertainty and support task completion.
Accessibility Considerations
Accessibility was a key priority to ensure the product is usable for patients of all ages and digital skill levels.
Structured navigation
Step-by-step flows reduce overwhelm in complex immigration tasks.
Clear language & hierarchy
Readable typography and content structure improve scanability across languages.
Recognizable icons
Icons reinforce meaning for users with limited language proficiency.
High contrast & spacing
Accessible color contrast and spacing enhance clarity across devices and environments.
Grid
The grid system structures complex immigration information into clean, scalable layouts across devices, ensuring clarity and alignment at every step.
Logo
The ImmigrAid logo is inspired by a location marker, symbolizing direction, guidance, and settlement.
Using Sweden’s blue and yellow, it reflects trust, identity, and forward movement.
Why This Design System Matters
ImmigrAid supports users navigating complex immigration systems in a new country.
A structured design system ensures consistency, reduces cognitive overload, and enables scalable growth as the platform expands across features and languages.