Portfolio Style Guide

UI/UX Design
Project Overview
Design a style guide for your portfolio website.
My Contributions
I created this style guide for my WEBD 191 Professional Practices in Web Design course. Style guides are not only critical to brand continuity. But are important for ensuring your website has good SEO and online presence, as well as, for improving the overall user experience of your website for those with screen readers.
Portfolio Style Guide
Source of truth of this website.
typography
Varela Round, 400
Headings
Heading Jumbo
Heading Jumbo
Heading Jumbo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraphs & Links

Paragraph-bigger

Paragraph

Paragraph-de-emphasized

Paragraph-smaller

Paragraph-tiny

Label
A text link
Buttons & Form Elements
Explore
Explore
Rich Text Element
A block quote has a left border of 5px that is #e2e2e2 in color. The text within the block quote is 20px font size.
placeholder image
Image caption
  • A bulleted or numbered list is 16px
  • The rich text element allows you to create and format headings, paragraphs, block quotes, figures, images, and figure captions
  1. A bulleted or numbered list is 16px
  2. The rich text element allows you to create and format headings, paragraphs, block quotes, figures, images, and figure captions
Colors
pink color swatch #fdedf4brown color swatch #463131dark grey color swatch #1a1b1fdark grey color swatch #1a1b1f, 60% opacity
LinkedInGithubCODEPENDEV