Portfolio Design System

Context

For: Myself

Tool: Framer
Timeline: Jan 2024 - Present
Role: UX designer
Project overview
Problem
UI elements, fonts, and colours were saves as components and styles within Framer for consistency and efficiency. However, they weren't collected together and displayed in a central location for an easy visual overview, risking a possible lack of cohesion between elements, inconsistent spacing rules, etc.
Solution
Displaying the components, text styles, colour palette, and spacing used across my website in a design system format. To ensure defined rules and consistency across the user experience.
Component library
Typography
Font Family: Nunito
Heading 1
Heading 2
Heading 3
Heading 4
Body
Eyebrow
Colour palette
Primary
#7800BF
Secondary
#FC1B03
Neutral dark
#262626
#FFFFFF