About / Style Guide

Style Guide

Just some design documentation on the design tokens, components, utilities, and layouts that are used on my portfolio

Overview

As a documentation nerd, I thought it would not only be fun to showcase the assets that help make this portfolio possible, but also be helpful to do a design inventory and build more efficient design patterns.

Check out one of the sections:

ColorsTypographyIconsLayoutComponents

Swatches

Color brings a design to life. Color is versatile; it's used to express emotion and tone, as well as place emphasis and create associations. Color should always be used in meaningful and intentional ways in order to create patterns and visual cues.

Primary/State Colors

We can use these colors to express state, accent, or emphasis

Grapa Green
Grapa Pink
Grapa Blue

Neutral UI Colors

We can use these colors to shade the neutral parts of our UI (eg. text, backgrounds, panels, form controls)

White
Gray Lightest
Gray Lighter
Gray Light
Gray
Gray Dark
Gray Darker
Gray Darkest
Near Black

Typography

Font

IBM Plex Sans is an open source typeface family designed by IBM. The fonts have been designed to work well in user interface (UI) environments as well as other mediums. This project provides all source files and file formats to support most typographical situations.

Aa
IBM Plex Sans
Aa
Bold (700)
Aa
Semibold (600)
Aa
Regular (400)
Elements
Heading Weight Size Line-height
Heading 1 700 4rem 1.2
Heading 2 700 3.6rem 1.25
Heading 3 700 3rem 1.3
Heading 4 500 2.4rem 1.35
Heading 5 600 1.8rem 1.5
Heading 6 600 1.5rem 1.6
Paragraph 400 1.6rem 1.8

Icons

Iconography uses images and symbols to represent an object visually. They communicate a message and should be distinct and informative. Icons should be used sparingly throughout the product to provide clarity and reduce cognitive load on users.

Instead of using an icon font and utilizing an icon through a unique glyph, the icons below are optimized SVG being included through a PUG include

behance
book
code
codepen
dribbble
eye
file
flag
github
mail
moon
slack
slider
sun
user

Layout

Grid systems are used for creating page layouts through a series of rows and columns that house your content. This portfolio uses BEMSkel's grid component http://bemskel.com/ a responsive, mobile first, fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Grid
.row
12
6
6
1
1
1
1
1
1
1
1
1
1
1
1
Header
Header
Footer
Footer

Components

These are the building blocks used in my portfolio. We use these components to display the plethora of content in different hierarchies, forms, and mediums.

Buttons
Solid buttons
Solid buttons
Connect
Forms
Lists
  • Unordered lists have basic styles
  • They use the circle list style
    • Nested lists styled to feel right
    • Can nest either type of list into the other
  • Just more list items
  1. Ordered lists also have basic styles
  2. They use the decimal list style
    • Ordered and unordered can be nested
    • Can nest either type of list into the other
  3. Last list item just for the fun
Tables
Default
First Name Last Name Team
Lewis Hamilton Mercedes
Kimi Raikkonen Ferrari
Fernando Alonso McLaren
Bordered
First Name Last Name Team
Lewis Hamilton Mercedes
Kimi Raikkonen Ferrari
Fernando Alonso McLaren
Striped
First Name Last Name Team
Lewis Hamilton Mercedes
Kimi Raikkonen Ferrari
Fernando Alonso McLaren
Hover
First Name Last Name Team
Lewis Hamilton Mercedes
Kimi Raikkonen Ferrari
Fernando Alonso McLaren
Compact
First Name Last Name Team
Lewis Hamilton Mercedes
Kimi Raikkonen Ferrari
Fernando Alonso McLaren
Responsive
First Name Last Name Team
Lewis Hamilton Mercedes
Kimi Raikkonen Ferrari
Fernando Alonso McLaren
Main Project
Main Project

This is the description

Main Project

This is the description

Main Project

This is the description

Media Object
This is a titleThis is the description area of the media object. Larger amounts of text can also be inserted into the media object.
Toggle
Images

We can add zoom functionality to images through the use of Zoom.js and the adding of a data attribute data-action="zoom"