Portfolio Design System

A persona of a virtual art gallery app user

Context

For: Myself

Figma logo

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

Buttons

Primary

Text & Icon

Button

Hover

Button

Selected

Button

Secondary

Text & Icon

Button

Hover

Button

Selected

Button

Other elements

Icons

Tags

Tag text

Jump-to-top

Grid

XS: 8px

S: 16px

M: 24px

L: 32px

XL: 40px

See another project

Let's connect! 💬

Have a question, comment, or want to
work together or chat about interests?

Email me

🛠️ Made with 💜 by Damian Summersall © 2024.
🌇 All icons, images, fonts licensed for use via Unsplash and Creative Commons (CC).

🌱 This site runs on ⚡️sustainable energy and has a carbon rating of B, cleaner than 75% of pages tested.

💬
Let's connect!

Have a question, comment, or want to
work together or chat about interests?

Email me

🛠️ Made with 💜 by Damian Summersall © 2024.

🌇 All icons, images, fonts licensed for use via Unsplash and Creative Commons (CC).

🌱 This site runs on ⚡️sustainable energy and has a carbon rating of B, cleaner than 75% of pages tested.