Shared foundations for a growing product.
As Askporter expanded across different workflows and customer needs, its interface needed a more consistent foundation.
Similar features were being designed and implemented in different ways. Patterns evolved independently, creating more decisions for teams to revisit as the platform grew.
Fábio developed shared design foundations to connect those experiences and give design and engineering a clearer starting point for future work.
Make consistency easier to repeat.
Improving individual screens would address only part of the problem. The platform needed reusable standards that could support different features without requiring teams to solve the same interface problems repeatedly.
The work focused on three priorities:
- Consistency: establish common foundations and interaction patterns across the product.
- Practical implementation: connect design decisions to the architecture engineering already used.
- Accessibility: consider colour, typography and component behaviour as part of the foundations.
Start with the decisions behind the interface.
The approach began with the foundations that influence every screen: colour, typography, spacing and the meaning behind visual choices.
Semantic design tokens described how a value should be used, rather than tying it to a particular component or appearance. A shared variable architecture helped connect those decisions across the design system.
This gave the team a more structured way to manage consistency and accommodate future changes.
From shared foundations to reusable patterns.
The system brought foundations, components and interface patterns into one organised framework.
It covered:
- Foundations: colour, typography, spacing and visual standards.
- Components: inputs, navigation, data display and feedback.
- Patterns and guidance: reusable approaches to forms, layouts and common interactions.
Documentation helped explain how the parts should be used together, giving teams a common reference when developing new features.
Agree on the approach before implementation.
Fábio worked with front-end engineers while exploring components and interactions, reviewing what MUI and the existing architecture could already support.
These discussions helped determine when to adapt an established pattern and when a different approach was needed.
By considering design intent and implementation together, the work created a clearer shared understanding before handoff.
A common reference for future product work.
The project established a shared foundation of design standards, reusable components and implementation guidance.
It gave design and engineering a common language for discussing interface decisions and a consistent starting point for new features.
The value extended beyond the component library: the system helped the team approach product development as connected, reusable work.
