FCCN
UI Kit Evolution & WordPress Template Upgrade
A more consistent, accessible and scalable digital ecosystem for research and education.

The context
At FCCN, digital platforms serve Portugal’s academic and research communities. The UI kit and WordPress template needed to work as a coherent system across teams and content types.
The challenge
Improve consistency and usability while making the templates easier to scale, document and implement.
What I did
I evolved the interface patterns, worked on the UI kit and WordPress templates, and prepared design specifications in collaboration with developers.
From thinking
to making
- 01UI kit review
- 02Component design
- 03Template refinement
- 04Accessibility considerations
- 05Module documentation
- 06Developer handoff
Ideas in detail.
The work covered color, typography, input and card states, responsive guidelines and documentation for 32 modules. Annotated files and design tokens helped translate design intent into implementation.


Built for more people.
Accessibility was part of the UI kit’s component states, documentation and responsive guidelines. This made decisions more explicit for both design and development teams.
What moved forward
An evolved UI kit, improved templates and structured module documentation to support consistency and cross-team collaboration.
