Profile Picture

We start with the genera layout of the card, just triying to figure out the data we need to display and the structure of the card.

List

My stack tools

lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Profile Picture

Now we can add some colors, sizes and proper width to the card.

Also triying to figure out the best way to display the tag, I don't like the way it looks right now.

List
Avatar

Website accessibility tools.

lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Profile Picture

I added the background to the container so we can add some border and shadow to the card to increase the contrast.

We can also add some hover effect to the button to make it more interactive.

I also moved the tag and incresed the contrast to make it more readable.

Avatar
List

Website accessibility tools.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Profile Picture

I added a gradient to the card to make it more interesting. Along a more subtle shadow to make it more elegant.

I moved the tag to the top right corner to make it more visible and use the space better.

Finally I added more cards to see how they look together.

List
Avatar

Website accessibility tools.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Long format
Avatar

Notes about design systems.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question
Avatar

Questions about design systems.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.