Modulo Design system
Crafted with calm, built for clarity.
Modulo is a personal design system created to support and elevate the visual language of my portfolio website. Inspired by the thoughtful minimalism of Artifaction and the expressive potential of Atlassian Design System, this system focuses on evoking calm, clarity, and consistency through a refined use of typography, a cool-toned palette, and accessible, modular components.
About the System
Modulo was built not only to style my portfolio but to bring cohesion and emotion to the storytelling behind each project. The system reflects my design values—simple yet intentional, expressive yet accessible. All visual and interactive elements adhere to WCAG AAA contrast guidelines to ensure usability for everyone.
Categories
Foundation
Core tokens that define the system’s visual identity:
Typography: Scale, rhythm, and weights for consistent hierarchy
Color: A palette designed for clarity, calm, and contrast
Logo: Visual signature for brand coherence
Components
Reusable interface elements styled and documented for versatility:
Patterns
Real-world usage examples combining foundations and components:
Homepage Template: Entry point of the portfolio experience
Case Study Template: Structured storytelling for project deep-dives