A focused, lightweight design system for Aniett Freyre's product design portfolio. Every token, component, and template defined in design-system.md is rendered here as a live reference.
Inter at eight sizes. Larger steps at the top of the scale where typography drives hierarchy, tighter steps at the bottom where readability matters most.
Five colors. One accent. The accent — burnt terracotta — is the deliberate choice: warm without being unprofessional, distinctive without being trendy.
4px base unit. Every margin, padding, and gap is a multiple of 4. Invisible work — but it's what makes a site feel designed rather than templated.
Subtle, purposeful, never demanding. Respects prefers-reduced-motion.
I turn complicated workflows into clear, considered experiences. Built on research, sharp trade-offs, and accessibility from the start.
Nurses are constantly annoyed when using the app because they can't easily find the necessary information.
Three templates cover the entire site. Vertical rhythm: ~128px between major sections on desktop, ~96px on mobile.
Non-negotiable. The portfolio's case studies emphasize accessibility as a design value — the site itself must demonstrate it.
outline: none without a clearly-visible custom replacement.<nav>, <main>, <footer>), real <button> and <a> elements.alt="".prefers-reduced-motion: reduce.<html lang="en"> set explicitly.