Website Design System
This project is a brief walkthrough of the atomic design system of my portfolio website, which is responsive across all devices and is designed to be viewed in both light and dark mode.
Colours
Separate colour direction for both light and dark mode, which switch as per the system theme.
Typography
I used the Inter typeface for the Body Text as it maintains great readability at any size and weight. And I paired it with a slightly more playful Space Grotesk, which is used in Headings.
Heading 1
Heading 3
Heading 4
Heading 5
Section Title
Icons
Atoms & Components
Inspired from the idea of Atomic Design, this website is divided into components made from atoms.
Accessibility Considerations
I integrated a toggle switch on the home page page which will allow the user to switch to Dark Mode. This helps to improve visual ergonomics by reducing eye strain. The component was originally designed by Enframer.
Conclusions 🏁
Having an atomic design system ensured consistency in design across the whole website.
It'll also help me in scaling the website faster and more easily when new projects are added.
